Hér má finna skjölun um þemasniðið á blog.is ásamt ýmsum tengdum upplýsingum sem gætu komið væntanlegum þemahöfundum að gagni.
Þema er safn skráa í sér möppu. Þegar möppunni með öllu innihaldi hennar er pakkað í zip-skrá kallast það þemapakki. Hægt er að sækja þemapakka fyrir öll þemu, sem notandi hefur aðgang að, með því að fara í Útlit → Þemapakkar í stjórnborðinu. Þar er einnig hægt að stofna ný þemu með því að senda inn þemapakka.
Þemað þarf að innihalda eina YAML-skrá, theme.yaml og a.m.k. eina CSS-skrá, theme.css. Þemað getur einnig innihaldið aðrar skrár, s.s. myndir og aðrar css-skrár, og er þá vísað í þær úr theme.yaml eða theme.css.
YAML er gagnalýsingasnið eins og t.d. XML, en er mun læsilegra fyrir venjulegt fólk en önnur slík snið. Því er nánar lýst á heimasíðu YAML-hópsins. Sniðið er mjög einfalt og fljótlært: allt sem þemahönnuðir þurfa að vita um það má læra á fimm mínútum.
CSS (Cascading Style Sheets) er útlitslýsingarmál, sérstaklega hannað fyrir vefsíður og skilgreint af vefstaðlaráðinu, W3C (World Wide Web Constortium). Á vef W3C er að finna sérstaka heimasíðu fyrir CSS-sniðið, þar sem m.a. er tengt inn á staðlaskilgreiningarnar. Margar vefsíður fjalla um CSS; hér er t.d. gagnlegur tenglalisti. Einnig eru til margar bækur um CSS.
YAML-skráin theme.yaml er kjarninn í þemaskilgreiningunni. Hér verður skoðað dæmi um hana. Að mestu er miðað við Rembrandt-þemað, en ýmsu bætt við til að sýna stillingar sem ekki eru notaðar þar.
Ætlast er til þess að YAML-skráin notist við ISO-8859-1 stafasettið, en ekki t.d. UTF-8. Síðar kann að verða hægt að stilla stafasettið með því að tilgreina það með einhverjum hætti í theme.yaml, en stuðningur fyrir slíkt er ekki fyrir hendi enn sem komið er.
YAML-skráin skiptist í allt að þrjú undirskjöl, sem aðgreind eru með "---" á sér línu: (1) almennar stillingar; (2) síðueiningalista; og (3) stílsniðsbreytur og tilbrigðalýsingu. Tvö fyrstnefndu undirskjölin eru nauðsynleg; hið þriðja er valfrjálst.
Fyrsta undirskjalið Í YAML-skránni innheldur ýmsar upplýsingar um þemað. Sumar skipta máli fyrir útlit þess eða virkni, aðrar eru einungis fyrir mannleg augu.
system-name : rembrandt name : Rembrandt - með tilbrigðum description : Skjalað dæmi um þemasniðið á blog.is
system-name er kerfisnafn þemans og jafnframt nafn möppunnar sem þemaskilgreiningin er í. Það þarf að vera strengur, sem eingöngu samanstendur af enskum lágstöfum, tölustöfum, "-", "_" og er einkvæmur fyrir eiganda þemans. Sami notandi getur semsagt ekki haft tvö eða fleiri þemu með sama system-name.
name og description eru nafn þemans og lýsing á mannamáli. name er það sem birtist í þemalistum; sem stendur birtist description hvergi, og þeim reit má sleppa ef vill.
copyright : Morgunblaðið 2006 author : Netdeild Morgunblaðsins (Baldur Kristinsson) author-url : http://www.mbl.is/ date : 2006-05-05 version : 1.0 license : GPL license-url : http://www.gnu.org/licenses/gpl.txt public : yes
Hvatt er til þess að þemahöfundar tilgreini höfund, notkunarleyfi og dagsetningu með þeim hætti sem sést hér að ofan. Þessir reitir eru þó valfrjálsir.
Sviðið public hefur engin áhrif sem stendur, en kann síðar að verða notað til að ákvarða hvort aðrir en eigandi þemans eigi að geta notað það og/eða sótt þemapakka með því.
files: - alexander.jpg - arrow.gif - books.jpg - bullet.gif - nightwatch.jpg - preview.png - readme.txt - romance.jpg - theme.css - youth.jpg
Hvatt er til þess að þemaskilgreiningunni fylgi listi yfir þær skrár, sem notaðar eru í þemanu. Slíkur listi er þó valfrjáls.
background: - system-body: $[system_body_background] - system-content: $[system_content_background]
Ekki er ætlast til þess að CSS-skráin innihaldi útlitsskilgreiningar fyrir síðuhluta sem bera auðkenni (ID) sem hefjast á "system-". Séu slíkar útlitsskilgreiningar fyrir hendi kunna þær að verða síaðar út úr CSS-skránni við birtingu. Þemahöfundar geta þó stjórnað bakgrunn þessara síðuhluta með því að tilgreina hann í YAML-skránni eins og sést hér að ofan. system-body er síðan sem heild neðan við hausinn (þ.m.t. svæðið bak við auglýsinguna hægra megin); system-content er ramminn sem umlykur svæðið sem sjálft blogginnihaldið birtist á (content).
Gildið í þessum sviðum er notað sem skilgreining fyrir CSS-eiginleikann background, þannig að hér er ekki einungis hægt að tilgreina bakrunnslit, heldur einnig bakgrunnsmyndir og staðsetningu þeirra.
Sem sjá má eru notuð breytunöfn í bakgrunns-skilgreiningunni hér að ofan. Gildi stillibreytnanna eru tilgreind í þriðja undirskjalinu. Bakgrunnsstillingarnar eru sem stendur eini staðurinn í theme.yaml þar sem stuðningur er fyrir að setja inn breytugildi með þessum hætti.
Eftir innsetningu á breytunum $[system_body_background] og $[system_content_background] verður útkoman í ofangreindu dæmi:
background: - system-body: #806759 - system-content: #bf7660
min-width: 1080
Ef þema er með breytilega breidd eða miðjað innihald, getur verið erfitt að skilgreina css-reglur sem hindra að auglýsingin hægra megin fari yfir efni síðunnar hjá notendum með lága skjáupplausn eða mjóan vafraglugga. Hér kemur stillingin min-width til hjálpar með því að stilla lágmarksbreidd fyrir síðuna án þess að þurfa að lauma inn reglum fyrir div með auðkenni sem hefjast á "system-". Gildið þarf að vera milli 800 og 1200.
Ath: Þessi stilling er ekki til staðar í Rembrandt-þemadæminu.
add-divs : 4
Hægt er að nota add-divs-sviðið til að bæta við <div>-tögum inn í ákveðnar síðueiningar, einkum dálkabox og bloggfærslur. <div> þessi fá CSS-klasanöfn frá "add1" og allt að "add8", enda eru leyfileg gildi fyrir þetta svið milli 1 og 8.
Ath: Þessi stilling er ekki til staðar í Rembrandt-þemadæminu, en er t.d. notuð í árstíðaþemunum til að skilgreina rúnnuð horn á viðkomandi síðuhlutum.
blog-entry-date: inside
Hægt er að nota þetta svið (sem reyndar er ekki notað í Rembrandt-þemadæminu) til að hafa áhrif á staðsetningu dagsetninga við bloggfærslur. Nothæf gildi hér eru: inside (sjálfgefið), outside og after.
Venjulega (þ.e. ef "inside" eða ekkert er tilgreint) er dagsetning hverrar bloggfærslu fremst í færslunni, framan við fyrirsögnina og inni í <div>-inu með klasanum blog-entry.
Ef "outside" er tilgreint, er dagsetning hverrar bloggfærslu utan við <div>-ið með klasanum blog-entry. Þannig má nota dagsetninguna sem eins konar fyrirsögn, sem verður sameiginleg fyrir fleiri en eina bloggfærslu ef þær eru frá sama degi (að því tilskildu að dagsetningarsniðið sem notandinn valdi innifeli ekki tíma heldur einungis dag).
Ef "after" er tilgreint kemur dagsetningin ekki ofan við bloggfærsluna heldur neðan við hana, í stöðulínuna þar sem flokkar, fastur tengill og (ef við á) breytingartími sjást.
extra-css: Blog-frontpage : blog-frontpage.css Photo-album-image : album-image.css
Undir "extra-css" er hægt að tilgreina css-skjöl sem einungis eru notuð á tilteknum undirsíðum. Lykillinn er síðu-ID (sjá síðar í þessu skjali) og gildið heiti css-skrárinnar.
Ath.: Þessi stilling er ekki til staðar í Rembrandt-þemadæminu.
print-css: print.css
Sé þess óskað getur þemahönnuður tilgreint sérstakt stílsnið fyrir prentun. Það er gert eins og sést hér að ofan.
Ath.: Þessi stilling er ekki til staðar í Rembrandt-þemadæminu.
Eftirtaldar stillingar varðandi myndastærðir og tengd mál eru fyrir hendi í þemalýsingunni fyrir Rembrandt-þemadæmið:
album-thumb-size: 90 album-thumb-format: square album-thumbs-per-row: 5 album-image-size: 700 album-image-size-blog: 500
Eftirtaldar tvennar stillingar geta einnig haft áhrif á myndbirtingu, en eru ekki fyrir hendi í Rembrandt-þemadæminu:
album-thumbs-per-row-blog: 4 blog-entry-thumb-size: 300
Hér er nánari útlistun á merkingu þessara stillinga:
Í öðru undirskjalinu í YAML-skránni er lýst uppröðun síðueininga á síðunum.
Blog-frontpage: - Header-image - main-container - - Simple-navigation - Main-content - nav - - About-box - Navigation-box - Recent-entries-box - Categories-box - Pages-box - Custom-boxes-links - Calendar-box - Photos-albumlist-box - Photos-recent-box - Custom-boxes-html - Custom-boxes-people - Custom-boxes-books - Custom-boxes-music - Visits-box
Eins og sést hér að ofan er lykillinn heiti meginsíðueiningar (Blog-frontpage) og gildið er listi (eða öllu heldur tré) sem sýnir hvaða síðueiningar eiga að birtast í viðkomandi síðu, í hvaða röð þær eiga að vera og hvernig á að hópa þær saman.
Þau gildi í þessum lista sem eru með stórum upphafsstöfum eru síðueiningarnar sjálfar (t.d. About-box), en gildi með litlum upphafsstöfum eru <div> sem þemahöfundur skilgreinir sjálfur til að hópa saman tilteknum síðueiningum eða hafa með öðrum hætti áhrif á útlit síðunnar ("main-container", "nav"). Hið sérstaka gildi "Main-content" gefur til kynna staðinn þar sem meginsíðueiningin (í þessu tilfelli "Blog-frontpage") á að birtast.
Nöfn meginsíðueininganna eru sem hér segir:
Nöfn annarra síðueininga eru sem hér segir:
Auk þess að lista síðueiningar er hægt að tilgreina hvaða síðueiningar eiga að birtast á tiltekinni síðu með því að gefa til kynna að hún eigi að erfa aðra síðu, sem þegar hefur verið skilgreind:
Blog-entry: inherit: Blog-frontpage
Ef tiltekin síða er ekki tilgreind í listanum yfir síðueiningar er gert ráð fyrir að hún erfi Blog-frontpage.
Sérhver síðuskilgreining þarf beint eða óbeint að innihalda tilvísun í Main-content. Annars er þemaskilgreiningunni hafnað og villa kemur upp í vinnslu síðunnar.
Nöfn síðueininganna eru um leið nöfn (ID) þeirra <div>-a sem síðueiningarnar birtast inni í. Ef ekkert innihald er tiltækt til að birta í einhverri síðueiningu er þeirri síðueiningu sleppt ásamt umlykjandi <div>-i hennar.
Hér að neðan sést ögn einfölduð mynd af birtingarumhverfi síðueininganna hvað umlykjandi HTML varðar. Þemahöfundur hefur sjálfur töluverða stjórn á hvað birtist þar sem stendur "INNIHALD HÉR" en ætti sem áður sagði ekki að reyna að hafa áhrif á annað í CSS-reglum sínum.
<body id="system-body" class="theme-rembrandt"> <div id="system-content"> <div id="content" class="blog-content"> <!-- INNIHALD HÉR --> </div> </div> <div id="system-top"><!-- SÍÐUHAUS HÉR --></div> <div id="system-right-container"> <div id="system-right"> <div id="system-right-ad"> <!-- AUGLÝSING HÉR --> </div> </div> </div> <!-- TALNINGARKÓÐI HÉR --> </body>
CSS-klasi <body>-tagsins breytist eftir þemanu. CSS-klasi content-<div>sins er blog-content á bloggsíðum, album-content á albúmsíðum en other-content ef síðan heyrir hvorki undir blogg né myndaalbúm.
Til að geta fullnýtt sér möguleikana þarf þemahöfundur náttúrulega að skoða HTML síðnanna og kerfisstílsniðin (system.css og defaults.css) gaumgæfilega.
Í þriðja undirskjali YAML-skrárinnar er hægt að skilgreina bæði stílsniðsbreytur og svokölluð stílbrigði, en það eru samstillt gildi fyrir margrar stílsniðsbreytur í einu.
Hægt er að skilgreina breytur í theme.yaml og setja tilvísanir í þær breytur í theme.css. Í theme.yaml stendur þá t.d.:
heading_color: default: #993700 label: Litur á fyrirsögnum configurable: yes
Og í theme.css er gildi breytunnar sett inn svona svona:
h1,h2,h3,h4,h5 { color: $[heading_color]; }
Þetta getur verið gagnlegt í tvennum tilgangi: annars vegar til að gera það auðveldara að búa til mörg svipuð þemu, og hins vegar til að gera notanda þemans kleift að stilla þessar breytur undir Útlit → Þemastillingar í stjórnborðinu án þess að þurfa að sýsla með þemapakka.
Í ofangreindu dæmi er heading_color augljóslega breytunafnið. Gildi lykilsins default (#993700) er sjálfgefið gildi breytunnar; label er skýringartextinn sem sést við viðkomandi breytu í stjórnborðinu (sé hún stillanleg); og configurable gefur til kynna hvort notandanum leyfist að stilla breytuna eður ei (gert er ráð fyrir "no" ef þetta er ekki tekið fram).
Til að tilgreina stílbrigði þarf fyrst að skilgreina hina sérstöku breytu VARIANTS:
VARIANTS: default-variant: Næturverðir Rembrandts (sjálfgefið) books: Bókahillan youth: Heilbrigð ungmenni alexander: Alexander mikli romance: Rómantísk kvöldstund
default-variant-lykilinn þarf að tilgreina, en það er nafn meginstílbrigðisins. Gott er að láta koma fram í lýsingunni að um sjálfgefið stílbrigði sé að ræða. Hin gildispörin gefa til kynna nafn og lýsingu þeirra stílbrigða, sem skilgreina á.
Stílbrigðagildin fyrir stillibreyturnar eru svo tilgreind eins og sjá má af eftirfarandi dæmi:
blog_header_font: default: italic 2em tahoma label: Letur fyrirsagnar í blogghaus configurable: yes variants: books: italic 2em tahoma alexander: italic 2em georgia youth: bold 2em 'comic sans ms',sans-serif romance: italic 2em palatino,'book antiqua','times new roman',times,serif
Viðeigandi gildi eru semsagt sett undir variants og lykluð á nafn viðkomandi stílbrigðis. Ekki þarf að tilgreina gildi fyrir tiltekið stílbrigði ef það á að vera hið sama og fyrir sjálfgefna stílbrigðið.
Síðast breytt 20.8.2009. Upphafleg útgáfa: maí 2006.