Tema Guide for PHP-Fusion v6.01.

Transkript

1 1 av :47 Tema Guide for PHP-Fusion v6.01 Publisert av sveinungs den 18. august :29 Tema Guide for PHP-Fusion v6.01. Sist oppdatert: Innhold: Innledning Theme.php Endre i theme.php Styles.css Bilder og forumknapper Theme_functions_include.php Innledning Mange har spurt om en guide for hvordan man lager sine egne tema (themes) for PHP-Fusion. Jeg vil si at det er mye lettere å gjøre enn å forklare, så derfor er guiden bygget opp rundt eksempler som du selv skal gjøre underveis. Gå igjennom guiden og eksemplene som brukes trinn for trinn, og du vil se at dette ikke er noe hokus pokus. Det er flere måter å lage et tema på, jeg forklarer her grunnfunksjonene, og hvordan du kan endre i dem. En oppskrift fra A til Å på hvordan lage et tema er egentlig ikke mulig å lage. Men tar du deg tid til å følge guiden og gjøre eksemplene, skal du langt på vei være i stand til å lage ditt eget tema når du er ferdig. Forkunnskaper: du trenger ikke kunne så veldig mye, men du må kunne litt grunnleggende html og css. Sjekk ut sider som W3School hvis du er "grønn" på dette området. Det er nødvendig at du har satt deg inn i hvordan strukturen til PHP-Fusion er bygget opp, slik at du finner fram til riktige mapper og filer. Hva trenger du: en tekst editor som lar deg lagre filer i formatene.php og.css (jeg anbefaler PSpad). En FTP klient eller (anbefale varmt) en Localhost (f.eks Uniform Server ) slik at du kan se endringene du gjør. For at det skal bli virkelig gøy og lage tema, skal du installere en Localhost. Da kan du se hvordan endringen du gjør tar seg ut der og da, uten å måtte bruke tid på å laste opp filer og/eller risikere å krasje en nettside som er i produksjon. En bilderedigerings- / tegneprogram er nødvendig hvis du ønsker å lage egen grafikk til temaet. The Gimp er et godt og gratis alternativ, Photoshop er kanskje bedre - men veldig dyrt. Poenget er at du ikke trenger å betale for noen programmer som er nødvendig her. Ok, la oss først ta en titt på strukturen til et tema. Alle themes som siden kan benytte seg av finner du i din_side/themes/navn_for_tema Ta en kopi av temaet Similitude06, og døp det om til Demotema06, vi skal bruke det temaet som et utgangspunkt videre. Åpne mappen Demotema06, det vil bestå av følgende deler theme.php styles.css index.php /forum/ /images/

2 2 av :47 THEME.PHP Åpne theme.php. Jeg har her fjernet det meste av html-en slik at det blir lettere å se de grunnleggende funksjonene, altså det som MÅ være med i et tema for at det skal virke. <?php if (!defined("in_fusion")) { header("location:../../index.php"); exit; require_once INCLUDES."theme_functions_include.php"; Alle php filer må starte med <?php Den neste linjen er lik i alle tema, og skal alltid være der. Nest linje inkluderer en fil vi finner i /includes/ mappen, vi forklarer den nærmer underveis Så settes noen Globale verdier for temaet: // theme settings $body_text = "#555555"; // Tekstfarge hvor styles.css ikke definerer noe annet $body_bg = "#006600"; // Bakrunnsfarge* $theme_width = "100%"; // Bredde på siden (I prosent % eller piksler, 860 osv) $theme_width_l = "175"; // Bredde for venstre sidepanel $theme_width_r = "175"; // Bredde for høyre sidepanel *Kan overstyres i styles.css, f.eks ved å legge inn et bakgrunnsbilde i.body classen Html-en som bygger opp temaet kan gjøres på flere måter. Hvordan du gjør det er opp til hver og en, men temaet må inneholde noen faste funksjoner (funtion) for å virke. function render_header($header_content) { global $theme_width; $header_content"; ".showsublinks("","white")." ".showsubdate().""; "; Function render_header må være der. Her kaller man inn banner, menylinje, dato/klokke. global $theme_width; - brukes for å hente inn verdien vi har satt i $theme_width for enkelte tabeller, slik at vi kan bestemme bredden på de. $header_content henter inn og viser banneret ".showsublinks()." viser linken i menylinjen ".showsubdate()." viser dato/klokkeslett Merk at alle funksjoner åpner og lukkes med { function render_footer($license=false) { global $theme_width,$settings; ".stripslashes($settings['footer']).""; if (!$license) { echo showcopyright().""; echo showcounter()." "; funtion render_footer henter inn bunnteksten for siden. global $theme_width,$settings; - henter igjen inn bredden for siden, og $settings er nødvendig for at din egendefinerte bunntekst vises ved hjelp av ".stripslashes($settings['footer'])."

3 3 av :47 if (!$license) { echo showcopyright()." viser copyrigthen hvis du ikke har kjøpt en lisens..showcounter(). besøksteller Hvordan de to siste ser ut bestemmes I "theme_functions_incude.php", se mer om den senere. function render_news($subject, $news, $info) { $subject $news "; echo openform("n",$info['news_id']).newsposter($info," ").newsopts($info,"").closeform("n",$info['new Her hentes tittel og tekst for nyhetene, samt skjemaet som viser informasjon om hvem som har skrevet nyheten, visninger, kommentarer osv. function render_article($subject, $article, $info) { $subject ".($info['article_breaks'] == "y"? nl2br($article) : $article)." "; echo openform("a",$info['article_id']).articleposter($info," ").articleopts($info,"").closeform("a",$info['a Det samme som for nyheter, bare for artikler. ".($info['article_breaks'] == "y"? nl2br($article) : $article)." gjør at det kommer sideskift i artikkelen hvis du bruker dette. function opentable($title) { $title "; function closetable() { Start og slutt for paneler, f.eks Velkomstpanel. Må også ha en funksjon for å LUKKE innholdet, closetable() function openside($title) { $title "; function closeside() { "; tablebreak(); Samme funksjon, men for alle sidepaneler. I tillegg er det (valgfritt) en funksjon som heter tablebreak(); - den legger inn avstand mellom bunn og topp på neste panel (se tablebreak() forklart lengre ned).

4 4 av :47 function opensidex($title,$state="on") { $boxname = str_replace(" ", "", $title); $title ".panelbutton($state,$boxname)." <div id='box_$boxname'".($state=="off"?" style='display:none'":"").">\n"; function closesidex() { "; tablebreak(); Det samme som openside() men er for paneler som kan åpnes/lukkes. Her er det en div som holder innholdet, og det blir skult/vist alt ettersom panelet lukkes/åpnes. function tablebreak() { <div style='height:5px; line-height: 5px;'></div>"; function tablebreak() definerer en fast avstand mellom topp og bunn av sidepaneler. Her har jeg erstattet Tabellen som Similitude06 bruker med en Div. Det er for å lage litt mindre kode i siden. Mindre html og mer innhold gjør Googlebot glad. OK, det var de kort om de faste funksjonene og hva de gjør. La oss nå endre litt i theme.php og se hva som skjer. ENDRE I THEME.PHP Takket være de globale verdiene som defineres i temaet, kan vi enkelt endre en del viktige ting som har å gjøre med utseendet å gjøre, uten å redigere mye i html-en. Åpne theme.php og finn //theme setting i toppen // theme settings $body_text = "#555555"; $body_bg = "#DDDDDD"; // Endre bakrunnsfarge $theme_width = "960"; // Sett fast sidebredde til 960 punkter $theme_width_l = "190"; // Endre bredden for venstre sidepanel $theme_width_r = "190"; // Endre bredden for høyre sidepanel Sett inn endringene marker med fet skrift og lagre theme.php. Du vil da se at siden allerede ble ganske forskjellig. Legg merke til hvor mye bakrunnsfargen har å si for opplevelsen av siden. Høyre og venstre sidepaneler er blitt litt bredere, og siden har fått en fast bredde. De neste linjene ser slik ut: global $theme_width; <table align='center' cellspacing='0' cellpadding='0' width='$theme_width' class='outer-border'> Dette er hovedtabellen som holder hele siden sammen, og den endrer bredden for hele siden fordi vi bruker global $theme_width; og bruker denne globale verdien her: width='$theme_width' align='center' gjør at siden blir sentrert, du kan bruke align='left' for å venstrejustere hele siden i nettleseren. Det neste vi gjør er å legge til litt ekstra html for å endre bunnen av alle sideelementer. Vi skal

5 5 av :47 style dette litt mer siden når vi ser på styles.css. Finn function closeside() { Dette er funksjonen som lukker alle sideelementer. Legg til en ekstra tabellrad: </td> </tr> <tr><td class='sbottom'> </td></tr> </table>\n"; tablebreak() Når du lagrer vil du ikke se veldig stor forskjell, men bare vent til vi legger til classen.sbottom i styles.css etter hvert. Gjør det samme i function closesidex() men legg også inn colspan= 2. Det er på grunn av at temaet har en ekstra celle for det lille ikonet som brukes for å åpne/lukke elementet. function closesidex() { </div> </td> </tr> <tr><td colspan='2' class='sbottom'> </td></tr> </table>\n"; Noen vil ganske riktig påpeke at denne ekstra html-en er unødvendig, og at vi kan skape den effekten vi skal vise bare ved hjelp av css. Men for å vise hvor og hvordan man legger til ekstra byggeklosser i theme.php har jeg valg denne framgangsmåten. STYLES.CSS Styles.css er en veldig viktig fil. Dette er en "stilmal" for hele siden din. Her kan du bestemme alt som har med farger, skriftstørrelser, marginer, kantlinjer og ikke minst bakgrunnsgrafikk å gjøre. Med mer! Vi bruker temaets "styles.css" fordi dette inneholder noen faste stildefinisjoner som også brukes i de andre php-filer, f.eks news.php og forum/index.php. Husk at styles.css må inneholde disse faste classene i tillegg til de du eventuelt legger til selv for bruk i ditt nye tema. Måten man skriver en slik stilmal på kan variere. Grunnen til at vi skriver litt overflødige ting her er for at det skal være lettere å forstå hvordan ting henger sammen. Hvordan skrive god og effektiv css finnes det mange fine ressurser på ute på nett, noe også på norsk. Nok snikk snakk, la oss se på "styles.css" og endre litt i filen med det samme. Det første vi ønsker å gjøre er å legge til et bakgrunnsbilde som dekker bakgrunnen bak hele siden. Legg bildet i /images/ mappen til Demotema06 med navnet bodybg.gif Finn i styles.css body { font-size : 11px; For at bildet skal vises, legger vi til dette:

6 6 av :47 background-image: url(images/bodybg.gif); body vil da se slik ut: body { font-size : 11px; background-image: url(images/bodybg.gif); Du trenger ikke å legge til repeat osv her, bildet blir repetert for hele bakgrunnen av seg selv. [Lagre] styles.css, og sjekk ut bakgrunnen til siden. Den neste classen vi endrer litt i, er.outer-border { border : 1px solid #000; Den brukes av hovedtabellen i theme.php (i dette temaet) for å gi en kantlinje rundt hele temaet. Vi gjør den litt bredere og endre fargen på den, slik:.outer-border { border : 5px solid #333; Siden vil nå ha fått et bakgrunnsbilde, og en tydelig mørk grå ramme rundt hele siden. Det neste vi vil endre er bakgrunnsfargen bak banneret. Vi kan se litt i theme.php for å finne ut hvilken class vi må bruke hvis vi er usikre: <td class='full-header'> <table cellpadding='0' cellspacing='0' width='100%'> <tr> <td>$header_content</td> </tr> </table> </td> Vi ser da at $header_content er bestemt av en class som heter full-header. I styles.css ser den slik ut:.full-header { font-size : 10px; color : #ddd; background-color : #444; padding : 10px; Vi gjør en liten endring her, slik:.full-header { font-size : 10px; color : #ddd; background-color : # ; padding : 5px;

7 7 av :47 Dette endrer ikke bare bakgrunnfargen, men også avstanden banneret har til det elementet som holder den (padding), vi gjør den her litt mindre. [Lagre] og se hvordan det tar seg ut. Det neste blir menylinjen. Vi vil endre bakgrunnsfarge og fargene på lenkene, og endrer først i.sub-header { font-size : 10px; color : #000; background-color : #579738; border-top : 2px solid #333; border-bottom : 2px solid #333; padding : 10px; Vi legger til andre farger for kantlinjen opp og nede, og gjør dem litt tykkere, legger inn litt mer padding, pluss en annen bakgunnsfarge. Utseendet på Lenkene i menylinjen (subheader) styres av a.white { color : #ddd; text-decoration : none; a:hover.white { color : #ddd; text-decoration : underline; For å gjøre lenkene litt mer tydelig mot den grønne bakgrunnen, legger vi inn fet skrift slik a.white { color : #DDD; font-weight: bold; text-decoration : none; a:hover.white { color : #FFF; font-weight: bold; text-decoration : underline overline; Vi legger også til under OG overstrek for lenkens hoover tilstand, altså når musepekeren er over lenken, og endre lys grå #DDD til hvit #FFF. [Lagre] å se hva som skjer. Det neste vi endrer er Overskriftene på Sideelementene, den bestemmes av.scapmain. Vi legger inn mer padding her, og samme bakgrunnsfarge som i subheader.

8 8 av :47.scapmain { font-size : 11px; font-weight : bold; color : #333; font-variant: small-caps; background-color : #579738; border-bottom : 1px solid #333; padding : 6px 4px 6px 4px; font-variant: small-caps; - legg den inn for å se hva den gjør :D I tillegg lager vi til et lite bakgrunnsbilde for å freshe opp: Lagre bildet som scapbg.gif og legg også det i /images/ mappen til temat. Jeg liker å gi grafikken navn etter hvilken class som bruker den, da blir det lettere å huske på alt sammen, scapbg.gif er forkortelse for.scapmain-bakgrunnsbilde. Jeg ønsker også at bildet bare repeteres horisontalt (sideveis) men ikke vertikalt (nedover), så jeg bruker i tillegg background-repeat: repeat-x;.scapmain { font-size : 11px; font-weight : bold; color : #333; font-variant: small-caps; background-color : #579738; background-image : url(images/scapbg.gif); background-repeat : repeat-x; border-bottom : 1px solid #333; padding : 6px 4px 6px 4px; Som du husker la vi til en rad nederst i funtion closeside() i theme.php. Den ga vi class navnet sbottom. Vi må lage en stil for den også, slik at vi får nytte av den. Start med å lage en kommentar i styles.css, slik: /* Egne classer */ Legg dine egne classer her, sånn at de blir lette å finne igjen, start slik:.sbottom{ Vi har lagt til ett lite bakgrunnsbilde her også, sbottom.gif Bilde:

9 9 av :47.sbottom { width: 100%; height : 10px; line-height: 10px; border-top : 1px solid #333; background-color: #579738; background-image: url(images/sbottombg.gif); Til slutt vil vi endre kantlinjen rundt hvert av elementene som openside() skaper. Ved å "lurtitte" i theme.php ser vi at det er class='border' som er i bruk, og vi finner.border i styles.css:.border { border : 1px solid #e1e1e1; Endre til:.border { border : 2px solid #333; Det siste vi gjør med sidepanelene er å endre bakgrunn og padding for side-border-left og side-border-right:.side-border-left { color : #333; background-color : #579738; border-right: 2px solid #333; padding : 5px;.side-border-right { color : #333; background-color : #579738; border-left: 2px solid #333; padding : 5px; Du vil nå se at bakgrunnen og padding rundt sidepanelene endrer seg. Vi har i tillegg fått en markert kantlinje på høyre og venstre side. Det neste jeg ønsker å endre er måten funtion reder_footer() vises altså den delen som nederst på siden hvor copyright osv. er. Den bruker en class som heter (ikke overraskende) footer.footer { font-size : 10px; color : #555; background-color : #f1f1f1; border : 1px solid #ccc; padding : 5px; Legg inn en kantlinje i topp, endre skrifttype, -farge og bakgrunnsfarge slik:

10 10 av :47.footer { font-family : Helvetica, Verdana, Arial, sans-serif; font-size : 10px; color : #DDD; background-color : #333; border-top : 2px solid #FFF; padding : 5px; For å posisjonere siden litt annerledes, legger jeg til dette i.body: body { font-size : 11px; margin-top: 0; margin-bottom: 0; background-image: url(images/bodybg.gif); Nå blir det ikke noe åpenrom (margin) mellom toppen og bunnen av nettleseren din og siden. Jeg velger å gi meg med styles.css for nå, du vil se at temaet begynner å bli noe annet. Se i theme.php hvilke classer som brukes de ulike stedene lek deg litt med disse. BILDER OG FORUMKNAPPER Hvis du har fulgt denne guiden, vet du allerede at det er en mappe som heter /images/ hvor grafikken til temaet er. Hvis temaet bruker en egen Banner (Logo) vil denne ligge her. Det er også grafikk som printer-ikon, bullets for linker. Bytt ut bullet.gif, bulletb.gif og printer.gif med disse hvis du vil, så ser du at små detaljer spiller en rolle. bullet.gif bulletb.gif printer.gif I mappen /forum/ finner du knappene som brukes i forumet. Du kan finne noen andre (spør om lov hvis du er usikker på om det er greit at du bruker de) eller lag dine egne. Det er viktig at du bruker knapper som fungerer med den øvrige grafikken/fargene på siden. THEME_FUCTIONS_INCLUDE.PHP Denne mappen finner du ikke i /themes/, men i en mappe som heter /includes/ theme_functions_include.php Åpner du denne filen ser du en god del funksjoner som temaet bruker (det er derfor du inkluderer den i toppen av alle theme.php filer) Du sparer en god del kode i selve theme.php ved hjelp av denne filen. Det er derfor den brukes: for at det skal bli lettere å lage sine egne tema. Et eksempel: linkene i menylinjen settes inn i temaet ved hjelp av denne enkle funksjonen: ".showsublinks("","white")." Uten theme_functions_include.php ville du måtte bruke denne koden i "theme.php" for å få til det samme:

11 11 av :47 function showsublinks($sep="",$) { $i = 0; $res = ""; $sres = dbquery("select * FROM ".DB_PREFIX."site_links WHERE link_position>='2' ORDER BY link_ord if (dbrows($sres)!= 0) { while($sdata = dbarray($sres)) { if (checkgroup($sdata['link_visibility'])) { if ($sdata['link_url']!="---") { if ($i!= 0) { $res.= " ".$sep."\n"; else { $res.= "\n"; $link_target = $sdata['link_window'] == "1"? " target='_blank'" : ""; $link_class = $class? " class='$class'" : ""; if (strstr($sdata['link_url'], " strstr($sdata['link_url'], " { $res.= "<a href='".$sdata['link_url']."'".$link_target.$link_class.">".$sdata['link_name']."</a>"; else { $res.= "<a href='".basedir.$sdata['link_url']."'".$link_target.$link_class.">".$sdata['link_name']."</a> $i++; if ($i!= 0) { return $res; else { return " "; Som du skjønner er det greit å holde slike funksjoner unna selve designet. Det er derfor moderne tema bruker theme_functions_include.php i stedet. Funksjoenen showcopyright er en annen av theme_functions_include s funksjoner som brukes i theme.php: function showcopyright($) { global $settings; $link_class = $class? " class='$class' " : ""; $res = "Powered by <a href=' $res.= "Released as free software under the terms of the GNU/GPL license."; return $res; I theme.php ser den bare slik ut: showcopyright(). Endre i theme_functions_include.php? Du kan godt redigere funksjonene her hvis du vet hva du gjør. Men husk at de endringene du gjør vil virke inn på ALLE Temaene du bruker! Og det som virker fint i et tema, vil ikke nødvendigvis fungere like greit i et annet. Her er en måte å lage et tema med helt spesielle funksjoner uten å gi slipp på oversiktligheten i theme.php 1) Kopier theme_funtions_include.php i /includes/ mappen og legg det i mappen til ditt tema. 2) Rediger øverst i theme.php: require_once INCLUDES."theme_functions_include.php"; Endre til: require_once THEME."theme_functions_include.php"; 3) Åpne /ditt_tema/theme_functions_include.php og rediger funksjonene som du vil ha de. Dette er noe du kan gjøre når du begynner å bli litt mer avansert. Men mulighetene er nå der.

12 12 av :47 En annen mulighet er å trekke koden for en bestemt funksjon fra theme_functions_include.php og bruke den direkte i theme.php, f.eks function newsposter og function newsopts hvis du ønsker å endre hvordan dette tar seg ut i nyheter. Ja vel du har nå vært igjennom guiden Tema for PHP-Fusion som er et grunnkurs. Bare lek deg videre og spør når du står fast. Det er mange flinke folk som kan hjelpe. Artikkelen kommer nok til å bli utvidet og forandret etter hvert, så sjekk tilbake senere. Konstruktive tilbakemeldinger mottas som vanlig med takk.