Þemu á blog.is

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.

• Þemu og þemapakkar
• YAML-skráin
  • (1) Almennar stillingar
    • system-name o.fl.
    • Höfundur o.fl.
    • Skráalisti
    • Bakgrunnur
    • Lágmarksbreidd
    • Viðbótar-div
    • Dagsetingarstaðsetning
    • Viðbótar-CSS
    • Stílsnið fyrir prentun
    • Myndastærðir
  • (2) Síðueiningalisti
    • Síðueiningarnar og uppröðun þeirra
    • Birtingarumhverfi síðueininganna
  • (3) Stílsniðsbreytur og stílbrigði
    • Stílsniðsbreytur
    • Stílbrigði

Þemu og þemapakkar

Þ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

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.

(1) Almennar stillingar

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 o.fl.

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.

Höfundur o.fl.

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í.

Skráalisti

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.

Bakgrunnur

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

Lágmarksbreidd

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.

Viðbótar-div

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.

Dagsetingarstaðsetning

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.

Viðbótar-CSS

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.

Stílsnið fyrir prentun

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.

Myndastærðir

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:

• album-thumb-format: Getur verið "square" eða "proportional"; gert er ráð fyrir "square" ef ekkert er tilgreint. Smámyndir á yfirlitssíðu í myndaalbúmi eru ferningslaga ef gildið er "square"; annars er hlutföllum haldið í smámyndunum.
• album-thumb-size: Lengri hlið smámyndar í dílum. Getur verið heiltala á bilinu 20-120 eða heiltala sem gengur upp í 10 á bilinu 130-240. Sjálfgefið gildi er 100.
• album-thumbs-per-row: Heiltala sem gefur til kynna fjölda smámynda í röð á albúm-yfirlitssíðu. Sjálfgefið gildi er 0, sem þýðir að ekki er reynt að stjórna þessu, heldur er vafranum látið það eftir að reyna að koma fyrir eins mörgum smámyndum og hægt er í hverja línu.
• album-thumbs-per-row-blog: Hliðstætt við album-thumbs-per-row, en á við hið sérstaka tilvik þegar yfirlitssíðan birtist í bloggumhverfi (með vinstri/hægri dálk o.s.frv.) fremur en albúm-umhverfi. Sem stendur er þó ekki stuðningur fyrir slíka birtingu, þannig að stillingin hefur ekki áhrif.
• album-image-size: Heiltala sem gefur til kynna lengd lengri hliðar þeirrar myndar sem sést, þegar smellt er á smámynd á albúm-yfirlitssíðu. (Þegar svo aftur er smellt er á þessa stærri útgáfu, er myndin kölluð fram í fullri stærð). Eftirtalin gildi eru leyfileg: 480, 500, 600, 640, 700, 800 og 1024. Sjálfgefið gildi er 600. Sé upphaflega myndin minni en sem nemur þessu gildi er hún ekki stækkuð.
• album-image-size-blog: Hliðstætt við album-image-size, en á við um myndina sem kemur fram þegar smellt er á mynd sem tengd hefur verið við bloggfærslu. Sjálfgefið gildi er 500.
• blog-entry-thumb-size: Birtingarstærð myndar sem tengd hefur verið við bloggfærslu í færslunni sjálfri. Sjálfgefið gildi er 300.

(2) Síðueiningalisti

Síðueiningarnar og uppröðun þeirra

Í öð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:

• Blog-frontpage: Bloggforsíða (nýjustu bloggfærslur).
• Blog-entry: Stök bloggfærsla.
• Blog-month: Bloggfærslur í tilteknum mánuði.
• Blog-day: Bloggfærslur á tilteknum degi.
• Blog-category: Bloggfærslur í tilteknum flokki.
• Blog-search: Leitarform/-niðurstöður fyrir blogg.
• Blog-fixed-pages: Fastar síður (listi)
• Blog-guestbook: Gestabók bloggs
• About: Um höfundinn
• Video: Sýna myndskeið
• Photo-album: Myndaalbúm - smámyndir með titlum.
• Photo-image: Stök mynd (í albúmi eða utan)

Nöfn annarra síðueininga eru sem hér segir:

• About-blog-box: Box um bloggið
• About-box: Box um höfundinn
• Amnesty-box: Fréttir frá Amnesty International
• Archives-box: Mánuðir með bloggfærslum
• Blog-friends-box: Bloggvinalisti
• Blogs-link: Bloggarnir mínar (tengill á yfirlitssíðu)
• Calendar-box: Dagatal
• Categories-box: Listi yfir flokka
• Colophon: Höfundarréttarupplýsingar
• Countdown-box: Niðurtalning
• Community-boxes: Ýmiss konar efni af blog.is
• Custom-boxes-books: Bókalistar
• Custom-boxes-html: Notandaskilgreint HTML-box
• Custom-boxes-links: Tenglalistar
• Custom-boxes-music: Tónlistarlistar
• Custom-boxes-pages: Sérsniðinn færslulisti (box)
• Custom-boxes-people: Listar yfir fólk
• Custom-boxes-rss: RSS-box
• Header-image: Blogghaus, e.t.v. með mynd
• Header-title: Titill síðu
• Mbl-boxes: Ýmiss konar efni af mbl.is
• Music-player-box: Tónlistarspilari
• Navigation-box: Leiðakerfis-box
• Pages-box: Tenglar á fastar síður (box)
• Photos-albumlist-box: Nýjustu myndalbúmin mín
• Photos-link: Myndirnar mínar (tengill á yfirlitssíðu)
• Photos-recent-box: Nýjustu myndirnar mínar
• Poll-box: Skoðanakannanir
• Recent-comments-box: Nýjustu athugasemdirnar
• Recent-entries-box: Nýjustu bloggfærslur
• Search-box-blog: Leitarbox fyrir bloggið þitt
• Search-box-mbl-news: Leitarbox fyrir fréttir mbl.is
• Simple-navigation: Einföld vöfrunarstika
• Videos-recent-box: Nýjustu myndskeiðin mín
• Visits-box: Heimsókna-box
• Xmas-countdown-box: Niðurtalning til jóla

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.

Birtingarumhverfi síðueininganna

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.

(3) Stílsniðsbreytur og stílbrigði

Í þ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.

Stílsniðsbreytur

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).

Stílbrigði

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.