Motivy - jDanek/sunlight-cms-7 GitHub Wiki

Motivy

Motivy se nacházejí v adresáři plugings/templates a volí se v nastavení systému v administraci. Toto je shrnutí potřebných informací ke tvorbě funkčního motivu. Doporučuji vycházet z nějakého hotového motivu. Znalost HTML a CSS je nutností.

Seznam souborů

Základ motivu tvoří tyto soubory a adresáře (a měly by být v každém motivu):

  • template.php - základní soubor, který obsahuje HTML strukturu motivu
  • config.php - konfigurace motivu
  • style/layout.css - styly layoutu motivu
  • style/system.css - systémové styly
  • style/print.css - styly pro tisk článku
  • images/ - složka pro obrázky
  • images/bbcode/ - BBCode tlačítka
  • images/icons/ - ikony dialogů a rss
  • images/smileys/ - grafické emotikony*
  • images/system/ - systémové obrázky - vodorovná čára, logo rss, pruh ankety...

Smajlíci

Jména obrázků musí mít příponu podle konfigurační volby _template_smileys_format a název musí být jednoduché číslo (maximálně třímístné). Doporučuje se u prvních deseti smajlíků zachovávat jejich význam, na který se může spoléhat při změně motivu. To znamená, že prvních deset smajlíků by mělo vypadat (co se týče jejich významu) nějak takto:

IMG SOUBOR VÝZNAM
🙂 1.gif obyčejný usměvavý
😋 2.gif vypláznutý jazyk
😄 3.gif vysmátý/unešený
😕 4.gif překvapený
😁 5.gif grimas
🤬 6.gif naštvaný
😞 7.gif smutný
🤨 8.gif skeptický
😲 9.gif slintající/natěšený
😎 10.gif sluneční brejle

Konfigurace motivu

Soubor config.php obsahuje konfigurační parametry motivu. V tabulce níže je každý z nich popsán.

Název Význam Hodnota
_template_version Verze motivu. 2.1
_template_autoheadings Vypne/zapne automatické tvoření nadpisů kategorií, knih apod. 1 (zapnuto) nebo 0 (vypnuto)
_template_dark Indikuje, že je motiv tmavý (podle toho je např. tmavá i CAPTCHA) 1 (zapnuto) nebo 0 (vypnuto)
_template_smileys Celkový počet smajlíků. Např. 10
_template_smileys_list Zobrazovat odkaz na přehled všech smajlíků. 1 (zapnuto) nebo 0 (vypnuto)
_template_smileys_format Formát smajlíků Např gif
_template_bbcode_buttons Zobrazovat BBCode tlačítka. 1 (zapnuto) nebo 0 (vypnuto)
_template_intersec_backlink Automaticky zobrazovat zpětný odkaz nad nadpisem stránek v rozcestnících. 1 (zapnuto) nebo 0 (vypnuto)
_template_listinfoseparator Oddělovací řetězec pro informace u článků. Např. /
_template_votebarwidthreduction Zmenšení velikosti procentuálního pruhu u odpovědí v anketách, aby šířka pruhu nezasahovala do vnitřního okraje ankety (padding). Např. 25
_template_menu_parent Tag obalující menu. Např. ul
_template_menu_child Tag obalující každou položku v menu. Např. li
_template_usermenu_parent Tag obalující uživatelské menu. Nastavte na prázdnou hodnotu pro nezobrazení tagu. Např. ul
_template_usermenu_item_start Kód před položkou uživatelského menu. Např. <li>
_template_usermenu_item_end Kód za položkou uživatelského menu. Např. </li>
_template_usermenu_trim Oříznout výsledný kód od kódů před a za položkami (hodí se například v případě, kdy je kód za položkou | a kód před položkou prázdný, aby nebyl znak | i na konci menu) 1 (zapnuto) nebo 0 (vypnuto)
_template_usermenu_showusername Zobrazovat uživatelské menu za odkazem pro odhlášení. 1 (zapnuto) nebo 0 (vypnuto)
_template_boxes_parent Tag obalující boxy. Nastavte na prázdnou hodnotu pro nezobrazení tagu. Např. ul
_template_boxes_item Tag obalující každý box. Nastavte na prázdnou hodnotu pro nezobrazení tagu. Např. li
_template_boxes_title Tag obalující titulek boxu. Např. h3
_template_boxes_title_inside Určuje, zda má být titulek boxu uvnitř tagu obalující každý box nebo vně. 1 (titulek bude uvnitř) nebo 0 (titulek bude vně)
_template_boxes_bottom Určuje, zda se má za tagem obalující každý box vytvořit další prázdný tag. Hodí se například pro tvoření spodní části grafických boxů. 1 (zapnuto) nebo 0 (vypnuto)

HTML struktura

Soubor template.php obsahuje HTML strukturu (kostru) motivu. Pomocí PHP značek se do něj vkládá samotný obsah, boxy a podobně. Seznam použitelných značek:

Název Význam
Obsah hlavičky (<head>) <?php _templateHead() ?>
Obsah aktuální stránky. <?php _templateContent() ?>
Boxy <?php _templateBoxes(1) ?>
Místo čísla 1 můžete dosadit číslo jiného sloupce, ze kterého se mají zobrazit boxy (pokud tvoříte vícesloupcový motiv).
Uživatelské menu <?php _templateUserMenu() ?>
Titulek stránek <?php echo _title ?>
Popis stránek <?php echo _description ?>
Titulek aktuální stránky <?php _templateTitle() ?>
Odkazy na web systému a administraci. <?php _templateLinks() ?>
Samotné menu <?php echo _templateMenu(0,10) ?>
Parametry funkce 0,10 určují limit zobrazovaných pořadových čísel (od, do). Pokud tyto parametry neuvedete, budou se zobrazovat všechny položky.
Název motivu <?php echo _template ?>

CSS styly

Veškeré styly jsou v souborech layout.css, print.css a system.css v adresáři styles. V tabulce jsou popsány některé třídy ze souboru system.css.

Zápis Význam
`.menu Tag obalující menu.
.menu a.act Aktuálně otevřená položka menu.
.menu li.first První položka menu (položka seznamu).
.menu li.last První položka menu (položka seznamu).
.box-title Titulek boxu.
.box-item Obsah boxu.
.box-bottom Tag pod obsahem boxu.
.searchform input.q Textové pole ve vyhledávacím formuláři pro boxy.
.list-title Titulek položky (např. článku) ve výpisu.
.list-perex Popis položky (perex) ve výpisu.
.list-info Informace u položky.
.list-info spa Zvýrazněná slova v popisu.
.article-navigation Navigace (seznam domovských kategorií) čteného článku.
.article-perex Perex čteného článku.
.article-info Tabulka s informacemi o článku.
.ratetable Tabulka pro hodnocení známkami.
.poll Anketa.
.sbox Shoutbox.
.poll-content Obs
.poll-question Otázka v anketě.
.poll-question div Text hlasování skončilo v anketě.
.poll-answer Odpověď v anketě.
.poll-answer div Procentuální pruh u odpovědi v anketě.
.sbox-content Obsah shoutboxu.
.sbox-title Titulek shoutboxu.
.sbox-item Položka shotboxu - jednotlivé příspěvky.
.sbox-input Textový vstup formuláře pro přidání příspěvku ve shoutboxu.
.sbox-posts Tag obalující příspěvky ve shoutboxu.
.posts-comments Komentáře.
.posts-book Příspěvky (v knihách).
.posts h2 Nadpis komentářů/příspěvků.
.posts-form Formulář pro přidání příspěvku/komentáře.
.posts-form-buttons Grafická tlačítka (BBCode, smajlíci) ve formuláři pro přidání příspěvku/komentáře.
.post-head Hlavička příspěvku/komentáře (se jménem, předmětem atd.)
.post-author Jméno registrovaného autora příspěvku/komentáře v hlavičce.
.post-author-guest Jméno neregistrovaného autora příspěvku/komentáře v hlavičce.
.post-subject Předmět příspěvku/komentáře.
.post-info Informace o příspěvku (čas zaslání).
.post-actions a Odkazy na odpověď a úpravu příspěvku/komentáře.
.post-body Obal obsahu příspěvku.
.post-body-withavatar Další možná třída na obalu .post-body, obsahuje-li uživatelský avatar.
.avatar2 Třída obrázku avataru v .post-body-withavatar.
.post-body-text Samotný text příspěvku.
.post-smiley Smajlík v textu příspěvku/komentáře.
.post-answer Odpověď na příspěvek/komentář.
.gallery Obrázková galerie.
.messages-menu Menu ve vzkazech.
.messages-menu a.active Aktivní položka v menu vzkazů.
.messages-table Tabulka se seznamem vzkazů.
.messages-table a.notreaded Odkaz na nepřečtený vzkaz.
.widetable Tabulka (seznam uživatelů).
.widetable2 Tabulka (seznam témat fóra).
.profiletable Tabulka s obsahem profilu.
.avatartd Buňka v tabulce profilu obsahující avatar.
.avatar Div obalující obrázek avataru v profilu.
.note Poznámka uživatele v profilu.
.areasmall Malá textarea (e-mailový formulář, nastavení poznámky uživatele).
.areamedium Střední textarea (text příspěvku/komentáře/vzkazu).
.inputsmall Malé textové pole (předmět příspěvku/komentáře, odesílatel v e-mailovém formuláři, přihlašování).
.inputmedium Střední textové pole (předmět vzkazu, vyhledávání, cesta k avataru, atd.)
.inputc Textové pole pro kontrolní kód.
.paging Stránkování.
.paging span a Strana ve stránkování.
.paging a.act Aktuálně zobrazená stránka ve stránkování.
.message1 Dialog - informace.
.message2 Dialog - varování.
.message3 Dialog - chyba.
.hr Vodorovná čára.
.pre Zdrojový kód
.bborder Spodní okraj (u odstavců - vyhledávání, seznam uživatelů, registrace).
.anchor Div pro kotvy (pro vertikální posun). Toto opravdu nepotřebujete upravovat.
.backlink Zpětný odkaz (při úpravě příspěvku, u položek rozcestníku).
.hint Poznámka v uživatelském nastavení.
.cimage Obrázek kontrolního kódu (CAPTCHA).
.exp Určeno pro použití spolu s atributem title na nějakém tagu (např. span) jako vysvětlivky.
.icon Ikona (u uživatelského jména, rss).
.left, .right Třídy pro obtékání (zejména obrázků).
.wlimiter Div používáný pro automatické scrollování případného příliš širokého obsahu (v profilu).
.minip Malý odstavec - rady v uživatelském nastavení.
.rpad Pravý okraj.
.lpad Levý okraj.
.pad Okraj.
.inline Převedení blokového elementu na řádkový.
.important Zvýrazněný text (např. hvězdička v uživatelské nastavení nebo poznámka o zablokovaném účtu v profilu).
.hidden Skryté elementy.
.cleaner Čistič po obtékaných elementech.
⚠️ **GitHub.com Fallback** ⚠️