Två nya teman

Två nya WordPress teman är klara, godkända, och väntar nu på att gå Live på WordPress.org. Länkar kommer så fort Otto trycker på knappen! =)

Tips och Tricks för IdrottOnline version 2.0

Sedan årets början har föreningarna som använder sig av IdrottOnline haft möjlighet att byta design på hemsidan till version 2.0.
Version 2.0 är modern, responsiv och om jag får säga det, mycket snyggare än den tidigare versionen. Däremot har inga nya så kallade box layouter tillkommit.
Man använder sig bland annat av less, Eric Meyers css reset, och FontAwesome.

Från 1 september kommer inga uppdateringar som görs vara kompatibla med den tidigare versionen och därför är det hög tid att uppdatera era sidor om ni inte har gjort det ännu.

IdrotOnline styleshets:
RF_Pager.css
calendar.css
reset.css
base.css
layoutresp.css
text.css
forms.css
gallery.css
pages.css
print.css

Sedan laddas filen themeLight.less enligt inställningarna i fliken design (filens namn beror på vilken kontrast man väljer) med variabler för sidans färger och typsnitt:
background, primary, secondary, headerFont och bodyFont.
Sist laddas filen progressive.css som innehåller regler för storleken på bakgrundsbilden.

När du sedan väljer att använda ett eget stylesheet, laddas det mellan themeLight.less och progressive.css och det innebär att det du lägger in i ditt stylesheet kommer att skriva över allt utom just progressive.css.

Hemsidans olika element beror på vilken meny och vilken boxlayout du väljer. jag har valt Toppmeny och vänstermeny (standard) och boxlayout nummer 5, det vill säga små boxar till höger om innehållet.

Bakgrund

Av någon anledning kan man inte välja en enfärgad bakgrund till sin design – när man väljer en färg blir den färgen grundfärgen, men ett rutnät av prickar läggs över färgen. Bakgrundsbilden läggs in med less men kan enkelt skrivas över om man laddar ett eget stylesheet.
Koden body{background-image:none;} låter dig välja färg under design, men tar bort prickarna. -Använd inte koden om du vill ha en bakgrundsbild.

Text och länkfärger

Under design kan man ställa in Rubrikfärg och länkfärg. Länkfärgen är även accentfärgen, det vill säga, det är bakgrundsfärgen i menyerna och
färgen för avskiljaren mellan innehåll och sidfot.
Jag upplevde att textfärgen när man valde den ljusa kontrasten, #818181, var för ljus. För att ändra färgen på brödtexten använde jag helt enkelt koden:
body{color:#333;}.

För att ändra färg på ikonerna i over högra hörnet använder man koden #IONavigationBar #IONavigationButtons a{color:#FÄRG;}

För att ändra länkarna I menyn till fetstil använder man koden #TopMenuDiv #TopMenuList li a{font-weight:bold;}.
Jag har också valt att ha vår ”hem” knapp i en annan färg, och koden för att ändra färgen på knapp 1 är
#TopMenuDiv #TopMenuList #ctl00_TopMenu_MenuListControl_ctl01_TopMenuItemControl_TopMenuListItem a{background: #FÄRG; color:#TEXTFÄRGf;}

Vår yttre wrapper är en div med id ContainerOuterDiv vilken har en standardbredd på 1020px. Vår inre wrapper med id ContainerMiddleDiv, är 980px bred.
-Sedan har responsiva breakpoints lagts in vid bredderna: 1024px, 979px, 767px, 480px och 320px, där bredden på dessa blir 100%.

I ContainerMiddleDiv finns diven ContainerDiv vilken i sin tur innehåller divarna:
TopDiv -Toppen av sidan med föreningens namn och ikoner för inloggning m.m i övre högre hörnet.
HeaderDiv -Innehåller header bilden med en länk till förstasidan.
TopMenuDiv är wrappern för menyn under header bilden.
MainDiv är wrappern för innehållet och högerspalten på sidan, och innehållet i diven beror på vilken boxlayout man valt.
På sidan jag arbetar med innehåller diven: LeftDiv (Vänstermenyn), CenterRightDiv, CenterDiv (Innehåll)
samt RightDiv (Högersplaten där annonser för Svenskaspel mm visas enligt inställningar.)
FooterDiv -Avskiljare mellan footern och innehållet.
BottomDiv Div där föreningens adressuppgifter mm presenteras.

WordPress temat Kvarken är nu ett ”featured theme” på WordPress.org

Temat Kvarken som används på den här sidan är nu ett av de utvalda teman som visas på WordPress.org/themes -en stor ära och ett resultat av ett hårt arbete tillsammans med the theme review team den senaste månaden!
http://wordpress.org/themes/kvarken

Få WordPress installationen på svenska

När man översätter WordPress skiljer man på administrationsidorna och temat, eftersom översättningen av administrationssidorna sker
automatiskt i WordPress installationen, medans man kan behöva skapa en språkfil för sitt tema själv. Hur man översätter ett tema kommer jag gå igenom mer noggrant senare.

För att få WordPressinstallationen på svenska kan du göra följande:

Ny installation:
Besök http://sv.wordpress.org/ och ladda ner senaste versionen av WordPress med de svenska språkfilerna förinstallerade. Så enkelt!

Existerande installation:
Ladda ner språkfilerna från t.ex. wp-support.se
Öppna filen wp-config.php som ligger i huvudmappen av din installation.
Hitta texten: define (‘WPLANG’,”);
och ersätt den med define (‘WPLANG’,'sv_SE’);
Se efter om du har en mapp som heter languages i mappen wp-content. Om inte, skapa en.
Packa upp och ladda upp språkfilerna till denna mapp.
Logga in på administrationssidorna, nu ska sidorna visas på svenska.

Hämta data från stats.swehockey.se – Elitserien

Här följer ett par exempel på hur man kan hämta och använda data om elitserielagen och precis som i förra inlägget  handlar det om att hitta rätt länkar. Vi kommer att använda filen vi skapade i förra inlägget, har du inte läst inlägget ännu, gör det gärna innan du fortsätter.

Exempel 1: Resultat, tabell och kommande matcher

Vi klickar först in oss på stats.swehockey.se, sedan väljer vi Elitserien och Overview.
Länken till överblickssidan är http://stats.swehockey.se/stat/44/90001/overview och det är den vi kommer att hämta (Psst -Det är ingen idé att ni försöker öppna den i er webbläsare eftersom swehockey bara skickar er tillbaka till huvudsidan).  Sedan öppnar vi dokumentet vi skapade i föregående inlägg och gör ändringar enligt följande; -vi byter ut sidan vi hämtar data ifrån och redigerar ett par fraser i översättningen.


<?php $page = file_get_contents("http://stats.swehockey.se/stat/44/90001/overview");

$translate = array(
'Game Winning Shots Lost' => 'F&ouml;rlust straffar',
'Game Winning Shots Won' => 'Vinst straffar',
'Results' => 'Resultat',
'Round' => 'Omg&aring;ng',
'Date' => 'Datum',
'Game' => 'Match', 'Venue' => 'Hall',
'Spectators' => 'Publik',
'Last update' => 'Senaste uppdatering',
'Team' => ' Lag',
'Group Standings' => 'Tabell',
'Schedule' => 'Spelschema',
'Won' => 'Vunna',
'Lost' => 'F&ouml;rlorade',
'Total Points' => 'Totala Po&auml;ng',
'Tied' => 'Oavgjorda',
'Matchs Played' => 'Spelade Matcher',
'Overtime' => '&Ouml;vertid -',
'Goals For:Goals Against (Goal Difference)' => ' Gjorda m&aring;l: Insl&auml;ppta M&aring;l (M&aring;lskillnad)'
);

foreach($translate as $eng => $swe) {

$page = str_replace($eng, $swe, $page);

}

echo $page;

echo "<style>.tdTopLinks{visibility:hidden;}</style>";

?>

Resultat blir inte så jättesnyggt men jag kommer gå vidare med hur vi ändrar utseendet med hjälp av css i ett senare exempel.  Först rättar vi till några länkar:  Klickar vi på länkarna i mathresultaten händer ingenting; -dels behöver vi lägga till stats.swehockey.se i länken,- dels har vi ju inte samma javascript som swehockey har på sin sida. Vi passar på att rensa upp lite javascript och stylesheet länkar.

Lägg till följande i översättnings arrayen:

"javascript:openonlinewindow('" => '',
'/gameonline/' => 'http://stats.swehockey.se/gameonline/', "',
'')" => '" target="_new" ',
'<div><a href="#"' =>'<div><span ',

'</a></div></td>' => '</span></div></td>',

'<body onLoad="NewStat()">' => '<body>',

'<link rel="stylesheet" type="text/css" href="/content/stylesheet.css" />'  => '  ',

'<script type="text/javascript" src="/content/CommonFunctions.js">'  => '  ',

'</script>' => ' '

Här kan ni se resultatet. Testa gärna länkarna.

 

Exempel 2: Dagens matcher -Live resultat

Att hämta dagens matcher från swehockey är lite krångligare än de tidigare exemplen eftersom texten på sidan byts ut beroende på om det är matchdag och om det är före, under, eller efter match.  Länken till dagens matcher eller Tournamentonline som de kallar det är http://stats.swehockey.se/tournamentonline/523 och det är den vi ska hämta.  Eftersom sidan innehåller <meta http-equiv=”refresh” content=”65″ /> i titlen slipper vi själva bekymra oss om att uppdatera sidan för att få det senaste resultat.  Nedan ser ni min kod; lämna gärna en kommentar om jag har missat att översätta något. Här kan ni se resultatet.


<?php $page = file_get_contents(http://stats.swehockey.se/tournamentonline/523);

$translate = array(
'starts' => 'b&ouml;rjar',
'at' => '',
'Mchens' => 'Matcher',
'Games' => 'Matcher',
'Game' => 'Matchen',
'Upcoming / In Progress' => 'Kommande/P&aring;g&aring;ende',
'Today' => 'idag',
'Final Score' => 'Slutresultat',
'1st' => 'F&ouml;rsta',
'2nd' => 'Andra',
'3rd' => 'Tredje',
'Results' => 'Resultat',
'Last upde' => 'Senaste uppdatering',
'Team' => ' Lag',
'Overtime' => '&Ouml;vertid',

'<a href="javascript:history.back()">[Back]</a>' => '', "javascript:openonlinewindow('" => '',
'/gameonline/' => 'http://stats.swehockey.se/gameonline/',
"','')" => '" target="_new" ',

'<body onLoad="NewStat()">' => '<body>',
'<link rel="stylesheet" type="text/css" href="/content/stylesheet.css" />' => ' ',
'<script type="text/javascript" src="/content/CommonFunctions.js">' => ' ',
'</script>' => ''
);

foreach($translate as $eng => $swe) {   $page = str_replace($eng, $swe, $page); }

echo $page; ?>

Hämta data från stats.swehockey.se med php

Om du driver en hockeysida eller bara vill publicera hockeyresultat och tabeller online så kan du hämta datan direkt från Svenska Ishockey Förbundets statistik sida stats.swehockey.se. Där finns inte bara information från elitserien och allsvenskan utan även ungdomshockeyn och de lägre divisionerna.

Det finns flera olika sätt att hämta data från webbsidor med hjälp av php, ett är att använda sig av file_get_contents. Det ger inte samma kontroll över datan som cURL och är inte lika snabbt om du behöver hämta större mängder data, men det är absolut det enklaste om du inte är en hejjare på php.

Skapa ett nytt dokument med filändelsen php och klistra in exempelkoden nedan:

<?php
echo file_get_contents("http://stats.swehockey.se/stat/44/15850/schedule");
?>

Här skriver vi ut datan direkt på sidan utan någon redigering. (Sidan vi hämtar i exemplet är spelschemat för U11 Grupp A, Stockholms Ishockeyförbund). 

För att hitta din länk behöver du gå till stats.swehockey.se, välja region och förbund, division och grupp. Sedan måste du kopiera sökvägen till sidan du vill ha:

Om vi laddar upp filen till vår server och tittar på sidan ser det ut ungefär så här:

Dels är sidan på engelska och dels finns det ett par länkar som vi inte villa ha med, (De är oanvändbara på vår egen sida) därför behöver vi redigera datan. Kollar vi i källkoden ser vi att länkarna till höger om rubriken ligger i en tabellcell som har klassen tdTopLinks. Vi kan därför gömma cellen med hjälp av css.  -Detta är bara ett exempel på vad du kan redigera. Titta igenom källkoden för fler css klasser.  Klistra in raden  echo ”<style>.tdTopLinks{visibility:hidden;}</style>”;  efter  din tidigare kod.

<?php
echo file_get_contents("http://stats.swehockey.se/stat/44/15850/schedule");
echo "<style>.tdTopLinks{visibility:hidden;}</style>";
?>

Vi hämtar data från en sida där innehållet uppdateras ofta men rubrikern är desamma, därför kan vi enkelt översätta sidan genom att ersätta de engelska orden. För enkelhetens skull flyttar vi över får sida i en variabel som vi kallar $page. Sedan skapar vi en lista, (array) med orden vi vill byta ut. Sedan ersätter vi orden med hjälp av str_replace och skriver ut sidan.


<?php

$page = file_get_contents("http://stats.swehockey.se/stat/44/15850/schedule");
$translate = array(
'Schedule and Results' => 'Spelschema och Resultat',

'Round' => 'Omg&aring;ng',

'Date' => 'Datum',

'Game' =>; 'Match',

'Venue' => 'Hall',

'Result' => 'Resultat',

'Spectators' => 'Publik',

'Last update' => 'Senaste uppdatering'

);

foreach($translate as $eng => $swe) {

$page = str_replace($eng, $swe, $page);
}

echo $page;
echo "<style>.tdTopLinks{visibility:hidden;}</style>";

Här kan ni se min testsida med ovanstående kod: http://layout.nu/hockeytest.php.

Fler exempel för elitserielagen kommer snart.