Češtiny pro phpBB

[c]{TEXT}[/c]

<code class="bbcode-c">{TEXT}</code>

Kód na řádku: [c]váš kód[/c]

/* BBKód C */	
	.bbcode-c {
<!-- IF T_TEMPLATE_NAME == 'ravus' -->
		background-color: #212121;
		color: #CCCCCC;
		border: 1px solid;
		border-color: #4F4F4F;
<!-- ELSE -->
		background-color:#FFF;
		color:#000000;
		border:1px solid #5E8070;
<!-- ENDIF -->
		padding: 0 2px;
	}
	
<!-- IF T_TEMPLATE_NAME == 'ravus' -->	
	.bbcode-c:hover {
		border-color:#5C5C5C;
}
<!-- ENDIF -->

[color=green][size=150][b]Stylování BBKódů[/b][/size][/color]

Pomocí rozšíření [uvoz]Insert Template Code[/uvoz] lze snadno upravit stylování BBKódů, aby se hodilo ke vzhledu fóra. Já jsem takto upravoval svůj BBKód C, což je obdoba BBKódu Code, ale s tím rozdílem, že nevytvoří blok, ale udělá rámeček kolem textu na řádku. Docela často to používám, když chci napsat cestu k nějakému souboru.

Skrýnšot stejného textu s BBKódem C ve vzhledu ravus a prosilver:

[image]489[/image]
[image]490[/image]

Nejdřív jsem si vytvořil v Administraci - Přispívání - BBKódy nový BBKód, který vypadá takto:

Použití BBKódu:
[code][c]{TEXT}[/c][/code]
Nahrazené HTML:
[code]<code class="bbcode-c">{TEXT}</code>[/code]
Nápověda:
[code]Kód na řádku: [c]váš kód[/c][/code]
Určitě jste si všimli, že jsem v poli [uvoz]Nahrazené HTML[/uvoz] vytvořil novou CSS třídu [uvoz]bbcode-c[/uvoz], pomocí které budu definovat v souboru [c]overall_header_stylesheets_after.html[/c] vzhled BBKódu pro různé vzhledy:

[code]/* BBKód C */
.bbcode-c {
<!-- IF T_TEMPLATE_NAME == 'ravus' -->
background-color: #212121;
color: #CCCCCC;
border: 1px solid;
border-color: #4F4F4F;
<!-- ELSE -->
background-color:#FFF;
color:#000000;
border:1px solid #5E8070;
<!-- ENDIF -->
padding: 0 2px;
}

<!-- IF T_TEMPLATE_NAME == 'ravus' -->
.bbcode-c:hover {
border-color:#5C5C5C;
}
<!-- ENDIF -->[/code]
Kde:

[list][c]/* BBKód C */[/c] - komentář, abych věděl čeho se následující stylování týká[/list]
[list][c].bbcode-c[/c] - výše zmíněná třída.[/list]
[list][c]<!-- IF T_TEMPLATE_NAME == 'ravus' -->[/c] - podmínka, aby následující kód platil jen pro vzhled [uvoz]ravus[/uvoz][/list]
[list][c]background-color[/c] - barva pozadí rámečku s kódem[/list]
[list][c]color[/c] - barva textu (tedy kódu)[/list]
[list][c]border: 1px solid;[/c] - jednopixelový rámeček[/list]
[list][c]border-color: #4F4F4F;[/c] - barva tohoto rámečku[/list]
[list][c]<!-- ELSE -->[/c] - podmínka, aby následující kód platil pro ostatní vzhled, které nejsou [uvoz]ravus[/uvoz]. Vlastnosti mají nadefinované jiné barvy.[/list]
[list][c]padding: 0 2px;[/c] - mezera před a za textem (aby se nedotýkal rámečku)[/list]
[list][c].bbcode-c:hover[/c] - pseudotřída, která umožňuje nadefinovat vzhled prvky při jeho přejetí myší. V mém případě se při najetí myší změní barva rámečku.[/list]

<span>
<a href="{U_VIEW_OLDER_TOPIC}" class="prevnext" title="{L_VIEW_PREVIOUS_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>
<a href="{U_VIEW_NEWER_TOPIC}" class="prevnext" title="{L_VIEW_NEXT_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>
</span>

<style>
.prevnext {
	float: left;
	margin: 9px 0 0 10px;
}
</style>

<span class="prevnext">
<a href="{U_VIEW_OLDER_TOPIC}" class="button" title="{L_VIEW_PREVIOUS_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>
<a href="{U_VIEW_NEWER_TOPIC}" class="button" title="{L_VIEW_NEXT_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>
</span>

<style>

.prevnext {
	float: left;
	margin-left: 10px;
}

</style>

<span class="prevnext">
<a href="{U_VIEW_OLDER_TOPIC}" class="button prev-topic" title="{L_VIEW_PREVIOUS_TOPIC}"><i class="icon fa-angle-double-left" aria-hidden="true"></i></a>
<span class="button text-between">{L_TOPIC}</span>
<a href="{U_VIEW_NEWER_TOPIC}" class="button next-topic" title="{L_VIEW_NEXT_TOPIC}"><i class="icon fa-angle-double-right" aria-hidden="true"></i></a>
</span>

<style>

.prevnext {
	float: left;
	margin-left: 10px;
}

.text-between {
	pointer-events: none;
	margin-left: -5px;
	border-left: none;
	border-right: none;
	border-radius: 0px;
}

.prev-topic {
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}

.next-topic {
	margin-left: -5px;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}

</style>

[color=green][size=150][b]Odkazy na předchozí a další téma[/b][/size][/color]

Pokud chcete mít v tématech odkazy na další a předchozí téma, můžete si stáhnout v databázi rozšíření na phpBB.com rozšíření [url=https://www.phpbb.com/customise/db/extension/previous_next_topic/][uvoz]Previous / Next topic[/uvoz][/url], nebo si můžete do šablon přidat jednoduchý kód a mít to samo bez instalace dalšího rozšíření.

Kód ze všech následujících příkladů se bude zapisovat do souboru [c]viewtopic_body_pagination_top_after.html[/c], který si musíte vytvořit.

[color=green][size=130][b]Jednoduché odkazy na předchozí a další téma[/b][/size][/color]

[image]474[/image]

Do souboru vložte následující kód:

[code]<span>
<a href="{U_VIEW_OLDER_TOPIC}" class="prevnext" title="{L_VIEW_PREVIOUS_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>
<a href="{U_VIEW_NEWER_TOPIC}" class="prevnext" title="{L_VIEW_NEXT_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>
</span>

<style>
.prevnext {
float: left;
margin: 9px 0 0 10px;
}
</style>[/code]

Kde:

[c]href="{U_VIEW_OLDER_TOPIC}"[/c] a [c]href="{U_VIEW_NEWER_TOPIC}"[/c] jsou odkazy na předchozí a další téma.

[c]class="prevnext"[/c] je třída pro css stylování.

[c]title="{L_VIEW_NEXT_TOPIC}"[/c] je text který se zobrazí při najetí myší nad odkaz, a který se načte z jazykových souborů, což znamená, že bude ve všech jazycích, do kterého se fórum přepne.

[c]{L_VIEW_NEXT_TOPIC}[/c] je text odkazu, který je stejný jako předchozí text.

Dále následuje stylování kde [c]float: left;[/c] přisune odkazy doleva a pomocí [c]margin: 6px 0 0 10px;[/c] je nastaveno umístění odkazů (posunutí o 6 px dolů a mezera před odkazem je 10 px.

[color=green][size=130][b]Tlačítkové odkazy na předchozí a další téma[/b][/size][/color]

[image]475[/image]

Podobný kód jako v předchozím případě:

[code]<span class="prevnext">
<a href="{U_VIEW_OLDER_TOPIC}" class="button" title="{L_VIEW_PREVIOUS_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>
<a href="{U_VIEW_NEWER_TOPIC}" class="button" title="{L_VIEW_NEXT_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>
</span>

<style>

.prevnext {
float: left;
margin-left: 10px;
}

</style>[/code]
Tentokrát jsem přidal do spanu třídu [c]class="prevnext"[/c], pomocí které mám nastaveno jak daleko jsou tlačítka za vyhledáváním.

V odkazu s tlačítky jsem použil třídu [c]class="button"[/c], pomocí které jsou v originálních css souborech phpBB nadefinovaná tlačítka. Tzn., že moje tlačítka budou vypadat stejně jako ostatní tlačítka použitého vzhledu.

Pokud nechcete použít text, tak můžete kód [c]{L_VIEW_PREVIOUS_TOPIC}[/c] a [c]{L_VIEW_NEXT_TOPIC}[/c] nahradit nějakýma šipkama např. [c]«[/c] a [c]»[/c], což vytvoří následující tlačítka:

[image]476[/image]

Všimněte si, že při najetí myší nad tlačítko se zobrazí popis tlačítka

[color=green][size=130][b]Složitější tlačítkové odkazy na předchozí a další téma[/b][/size][/color]

[image]477[/image]

Do výše zmíněného souboru vložte následující kód:

[code]<span class="prevnext">
<a href="{U_VIEW_OLDER_TOPIC}" class="button prev-topic" title="{L_VIEW_PREVIOUS_TOPIC}"><i class="icon fa-angle-double-left" aria-hidden="true"></i></a>
<span class="button text-between">{L_TOPIC}</span>
<a href="{U_VIEW_NEWER_TOPIC}" class="button next-topic" title="{L_VIEW_NEXT_TOPIC}"><i class="icon fa-angle-double-right" aria-hidden="true"></i></a>
</span>

<style>

.prevnext {
float: left;
margin-left: 10px;
}

.text-between {
pointer-events: none;
margin-left: -5px;
border-left: none;
border-right: none;
border-radius: 0px;
}

.prev-topic {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}

.next-topic {
margin-left: -5px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}

</style>[/code]
kde:

[c]class="button prev-topic"[/c] a [c]class="button next-topic"[/c] - ke třídě [c]button[/c], která definuje tlačítko jsem přidal třídu [c]prev-topic[/c] a [c]next-topic[/c], pomocí kterých jsem tlačítka doupravil (více o něco dál).

[c]<i class="icon fa-angle-double-left" aria-hidden="true"></i>[/c] a [c]<i class="icon fa-angle-double-right" aria-hidden="true"></i>[/c] - místo textu nebo jednoduchých šipek jsem použil font awesome, což znamená, že je tato verze kompatibilní pouze s phpBB 3.2.x. Pokud používáte phpBB 3.1.x, tak si kód nahraďte šipkama z předchozího příkladu, nebo něčím jiným ([c]«[/c] a [c]»[/c]).

[c]<span class="button text-between">{L_TOPIC}</span>[/c] - tohle je mezitlačítko definované ve třídách [c]button[/c] a [c]text-between[/c] s nápisem [uvoz]Téma[/uvoz]. Opět využívám proměnné ([c]{L_TOPIC}[/c]), která je v jazykových souborech. Samozřejmě si sem můžete dát cokoliv chcete.

[c].text-between {[/c] - Tady je nadefinováno následující:

[c]pointer-events: none;[/c] - Touto vlastností se zabrání tomu, aby se střední tlačítko s textem při přejetí myší změnilo, takže zůstane stále stejné.

[c]border-left: none;[/c] a [c]border-right: none;[/c] - Tlačítko nebude mít levý a pravý okraj, který je definován u všech tlačítek v phpBB.

[c]border-radius: 0px;[/c] - nulové zaoblení tlačítka - ruší zaoblení u ostatních tlačítek.

[c].prev-topic {[/c] - Dostylování tlačítka odkazujícího na předchozí téma:

[c]border-top-right-radius: 0px;[/c] a [c]border-bottom-right-radius: 0px;[/c] - ruší zaoblení pravých rohů na tlačítku. Levé rohy tlačítka zůstanou zaoblené.

[c].next-topic {[/c] - Dostylování tlačítka odkazujícího na další téma. Podobně jako v předchozí možnosti jsem potřeboval zrušit zaoblení rohů (tentokrát levých) a posunout tlačítko k prostřednímu tlačítku s textem, proto jsem použil zápornou hodnotu [c]margin-left: -5px;[/c].

<!-- IF not S_USER_LOGGED_IN -->
<!-- IF S_USER_LANG == 'cs-alt' -->
<span class="jazykove_tlacitko"><a class="button" href="{U_INDEX}?language=en" title="English">en</a> <a class="button" href="{U_INDEX}?language=cs_nef" title="Neformální čeština">cs nef</a></span>
<!-- ELSEIF S_USER_LANG == 'en-gb' -->
<span class="jazykove_tlacitko"><a class="button" href="{U_INDEX}?language=cs_alt" title="Alternativní čeština">cs alt</a> <a class="button" href="{U_INDEX}?language=cs_nef" title="Neformální čeština">cs nef</a></span>
<!-- ELSE -->
<span class="jazykove_tlacitko"><a class="button" href="{U_INDEX}?language=en" title="English">en</a> <a class="button" href="{U_INDEX}?language=cs_alt" title="Alternativní čeština">cs alt</a></span>
<!-- ENDIF -->
<!-- ENDIF -->

<span class="jazykove_tlacitko"><a class="button" href="{U_INDEX}?language=en" title="English">en</a> <a class="button" href="{U_INDEX}?language=cs_nef" title="Neformální čeština">cs nef</a></span>

@media only screen and (max-width: 500px), only screen and (max-device-width: 500px) {
      .jazykove_tlacitko {
         <!-- IF T_TEMPLATE_NAME == 'prosilver' -->
	margin: -36px 150px 0 0;
         <!-- ENDIF -->
      }
}

[anchor=vlastni_kod_jazykova_tlacitka][/anchor][color=green][size=150][b]Tlačítka pro přepnutí jazyka (pro hosty)[/b][/size][/color] [url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=1003#vlastni_kod_jazykova_tlacitka]#[/url]

[image]392[/image] [image]393[/image]

V phpBB 3.1.x jde pomocí řetězce [c]?language=jazyk[/c] změnit jazyk fóra (více [url=http://www.fotonomad.cz/forum1/viewtopic.php?t=520&p873#novinky_v_phpBB_3.1_zmena_jazyka_pres_url]zde[/url]. V phpBB 3.1.3 to funguje (alespoň podle mých testů na dvou fórech) jen u hostů, což je škoda, ale přihlášení uživatelé si můžou přepnout fórum v uživatelském panelu, takže to až zase tak moc nevadí.
Mimochodem tento návod lze použít i k zobrazení jiných než jazykových tlačítek. Stačí do kódu vložit jiný text tlačítka a jinou adresu než která je popsaná v následujícím textu.

Tady je kód. Do souboru [c]overall_header_content_before.html[/c] vložte následující kód:

[code]<!-- IF not S_USER_LOGGED_IN -->
<!-- IF S_USER_LANG == 'cs-alt' -->
<span class="jazykove_tlacitko"><a class="button" href="{U_INDEX}?language=en" title="English">en</a> <a class="button" href="{U_INDEX}?language=cs_nef" title="Neformální čeština">cs nef</a></span>
<!-- ELSEIF S_USER_LANG == 'en-gb' -->
<span class="jazykove_tlacitko"><a class="button" href="{U_INDEX}?language=cs_alt" title="Alternativní čeština">cs alt</a> <a class="button" href="{U_INDEX}?language=cs_nef" title="Neformální čeština">cs nef</a></span>
<!-- ELSE -->
<span class="jazykove_tlacitko"><a class="button" href="{U_INDEX}?language=en" title="English">en</a> <a class="button" href="{U_INDEX}?language=cs_alt" title="Alternativní čeština">cs alt</a></span>
<!-- ENDIF -->
<!-- ENDIF -->[/code]
kde je několik podmínek:

[list][c]<!-- IF not S_USER_LOGGED_IN -->[/c] - je podmínka pro zobrazení kódu uvnitř podmínky pouze pro přihlášené uživatele. Nepřihlášeným by tlačítka stejně nefungovala a tak je zbytečné je pro ně zobrazovat. ([url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=975#vlastni_kod_pro_urcite_uzivatele]Více o podmínkách založených na uživatelích[/url])[/list]
[list][c]<!-- IF S_USER_LANG == 'cs-alt' -->[/c] - je podmínka pro zobrazení kódu uvnitř podmínky pouze v případě, že je fórum přepnuté na určený jazyk (alternativní češtinu). Na fóru mám nainstalované tři jazyky a chci, aby se mi zobrazovali jenom tlačítka k jazykům, na které zrovna fórum není přepnuto. Je zbytečné zobrazit tlačítko pro alternativní češtinu, pokud je na ni fórum přepnuté. ([url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=975#vlastni_kod_na_zaklade_jazyka_uzivatele]Více o podmínkách založených na jazyku fóra[/url])[/list]
[list][c]<!-- ELSEIF S_USER_LANG == 'en-gb' -->[/c] - stejné jako výše, ale tlačítka budou zobrazena, pokud bude fórum anglicky.[/list]
[list][c]<!-- ELSE -->[/c] - pro zbytek jazyků, budou zobrazeny zde nadefinovaná tlačítka. Mám na fóru tři jazyky a protože ty dva už byly použity v předchozích podmínkách, je jasné, že bude vybrán jen ten nepoužitý jazyk. Šlo by napsat [c]<!-- ELSEIF S_USER_LANG == 'cs-nef' -->[/c], ale připadá mi to docela zbytečný. [/list]
[list][c]<!-- ENDIF --> a <!-- ENDIF -->[/c] - uzavírají podmínku pro přihlášené uživatele a pro jazyky.[/list]
a kód pro tlačítka, který se třikrát víceméně stejně opakuje:

[code]<span class="jazykove_tlacitko"><a class="button" href="{U_INDEX}?language=en" title="English">en</a> <a class="button" href="{U_INDEX}?language=cs_nef" title="Neformální čeština">cs nef</a></span>[/code]
a který jde ještě rozložit na dvě skoro stejná tlačítka:

[c]<a class="button" href="{U_INDEX}?language=en" title="English">en</a>[/c]

Kde:

[list][c]<a></a>[/c] - html tag pro odkaz. [/list]
[list][c]class="button"[/c] - třída, pomocí které jsou v phpBB nadefinovaná tlačítka, takže je nemusím tvořit sám a navíc mi budou tlačítka sedět ke zvolenému vzhledu fóra (dá se předpokládat, že většina vzhledů tuhle třídu k definování tlačítek používá). [/list]
[list][c]href="{U_INDEX}?language=en"[/c] - cíl odkazu, který je složen z proměnné {U_INDEX}, kterou lze v kódu nahradit adresu fóra a řetězce ?language=en, který přepne fórum na angličtinu.[/list]
[list][c]title="English"[/c] - popis odkazu v bublině, která se objeví po najetí myší nad tlačítko.[/list]
[list][c]en[/c] - text tlačítka[/list]
Tato dvě tlačítka jsou vložené do kódu [c]<span class="jazykove_tlacitko"></span>[/c] proto, abych s nima mohl manipulovat jako s jednou položkou a ne dvěma tlačítkama. Třída [c].jazykove_tlacitko[/c] je použita k nastavení umístění tlačítek. Jde o to, že rozšíření "Vlastní kód" nemá propojený žádný soubor s událostmi šablon (eventy) na místě, kde bych to potřeboval a tak jsem přidal kód tlačítek do souboru, který odkazuje na událost co možná nejblíž k místu, kde bych to potřeboval. Třídu [c].jazykove_tlacitko[/c] jsem nadefinoval v souboru [c]overall_header_stylesheets_after.html[/c]:

[ccode]<style>
.jazykove_tlacitko {
float: right;
margin: -109px 12px 0 0;
<!-- IF T_TEMPLATE_NAME == 'ravus' -->
margin: -36px 140px 0 0;
<!-- ELSEIF T_TEMPLATE_NAME == 'DVGFX' -->
margin: -33px 138px 0 0;
<!-- ENDIF -->
}
</style>[/ccode]
kde:

[list][c].jazykove_tlacitko[/c] - je třída, pomocí které je nadefinovaná poloha tlačítek[/list]
[list][c]float: right;[/c] - posune tlačítka doprava[/list]
[list][c]margin: -109px 12px 0 0;[/c] - určuje přesnou polohu tlačítka. V tomto případě napravo dole v hlavičce. Pomocí hodnoty -192px jsou tlačítka posunuty nahoru do hlavičky a hodnota 12px je posouvá od pravého kraje doleva.

[image]392[/image][/list]
[list][c]<!-- IF T_TEMPLATE_NAME == 'ravus' -->[/c] - protože jsou vzhledy každý jiný, tak musím nadefinovat jejich přesnou polohu pro každý zvlášť. V tomto vzhledu by tlačítka v některých prohlížečích (ale ne ve všech) zakrývaly vyhledávací pole a tak jsem je posunul (pomocí vlastnosti [c]margin: -36px 140px 0 0;[/c]) do druhého řádku navigace. ([url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=975#vlastni_kod_jen_v_urcitem_vzhledu]Více o podmínkách založených na vzhledu fóra[/url])

[image]393[/image][/list]
[list][c]<!-- ELSEIF T_TEMPLATE_NAME == 'DVGFX' -->[/c] - stejné jako předchozí, ale pro jiný vzhled[/list]
[list][c]<!-- ENDIF -->[/c] - ukončení podmínky[/list]

Při prohlížení fóra na mobilu jsem si všiml, že když je fórum nastojato, tak tlačítka v hlavičce prosilveru zakrývají část názvu fóra. Proto jsem do souboru [c]overall_header_stylesheets_after.html[/c] přidal (k předchozímu kódu před řádek [c]</style>[/c]) následující kód :

[code]@media only screen and (max-width: 500px), only screen and (max-device-width: 500px) {
.jazykove_tlacitko {
<!-- IF T_TEMPLATE_NAME == 'prosilver' -->
margin: -36px 150px 0 0;
<!-- ENDIF -->
}
}[/code]
Který upravuje třídu [c].jazykove_tlacitko[/c] pro mobilní telefony, takže v prohlížeči se použije předchozí nastavení a v mobilním zařízení užším než 500px se použije toto nastavení. V kódu měním jen polohu tlačítek v prosilveru (podmínka [c]<!-- IF T_TEMPLATE_NAME == 'prosilver' -->[/c]) pomocí vlastnosti margin. Na širších mobilních zařízeních jsou tlačítka v hlavičce:

[image]394[/image]

a na užších v navigaci:

[image]395[/image]

<div class="navbar">Text, který může být naformátovaný v HTML a CSS</div>

<div class="navbar muj_navbar_ramecek">Text, který může být naformátovaný v HTML a CSS</div>

<style>
.muj_navbar_ramecek {
background-color: #FF6B92;
color: #700034;
border: 4px double #700034;
}

.muj_navbar_ramecek:hover {
background-color: #FF5982;
color: #5B0029;
border: 4px solid #00696D;
}
</style>

[anchor=jednoduchy_ramecek_s_textem][/anchor][color=green][size=150][b]Jednoduchý rámeček s textem pod hlavičkou fóra[/b][/size][/color] [url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=1002#jednoduchy_ramecek_s_textem]#[/url]

[image]390[/image] [image]391[/image]

Občas je potřeba zobrazit ve fóru uživatelům nějaký text, třeba upozornění na nějakou událost nebo oznámení týkající se změn ve fóru. Následujícím způsobem jde nahradit třeba i rozšíření [url=http://www.fotonomad.cz/forum1/viewtopic.php?t=528#p898]Board Announcements[/url]. Pokud vám stačí podobné formátování jako má navigační lišta (ta s odkazama pod hlavičkou) tak je to velmi jednoduché. Stačí do souboru [c]overall_header_content_before.html[/c] vložit následující kód:

[code]<div class="navbar">Text, který může být naformátovaný v HTML a CSS</div>[/code]
což vytvoří takovýhle rámeček:

[image]390[/image]

Pokud chcete rámeček nějak zvýraznit, třeba takhle:

[image]391[/image]

můžete to udělat pomocí následujícího kódu, který vložíte do souboru [c]overall_header_content_before.html[/c] :

[code]<div class="navbar muj_navbar_ramecek">Text, který může být naformátovaný v HTML a CSS</div>[/code]
V tomto příkladu jsem přidal k původní třídě [c].navbar[/c] druhou třídu [c].muj_navbar_ramecek[/c], pomocí které jsou nadefinované změny, které chci na rámečku provést. Pokud bych to udělal přímo na třídě [c].navbar[/c], mohlo by to změnit formátování i jiných prvků na stránce (pokud něco jiného používá třídu [c].navbar[/c]).

Třídu [c].muj_navbar_ramecek[/c] jsem nadefinoval v souboru [c]overall_header_stylesheets_after.html[/c] (aby byly všechny css kódy pohromadě):

[code]<style>
.muj_navbar_ramecek {
background-color: #FF6B92;
color: #700034;
border: 4px double #700034;
}

.muj_navbar_ramecek:hover {
background-color: #FF5982;
color: #5B0029;
border: 4px solid #00696D;
}
</style>[/code]
kde:

[list][*][c]background-color: #FF6B92;[/c] - barva pozadí[/list]
[list][*][c]color: #700034;[/c] - barva textu[/list]
[list][*][c]border: 4px double #700034;[/c] - rámeček, který bude dvojitý (double) a bude mít šířku 4px a barvu [c]#700034[/c][/list]
[list][*][c].muj_navbar_ramecek:hover[/c] - tady jsou nadefinovaný jiné hodnoty u vlastnosti jako v předchozím textu. Tyto hodnoty se ale zobrazí pouze, pokud se myší najede nad rámeček - to je určeno tím dodatkem (pseudotřídou) [c]:hover[/c][/list]
Nastylovaný rámeček ovšem nebude tak univerzální jako ten předchozí, takže je dobré přidat [url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=975#vlastni_kod_jen_v_urcitem_vzhledu]podmínky[/url], aby se zobrazil na základě použitého vzhledu a nastylovat rámeček pro každý vzhled jinak.

.headerbar {
	background-color: #12A3EB;
	background-image: url("./images/bg_header.gif");
	color: #FFFFFF;
}

.headerbar {
	background: transparent none repeat-x 0 0;
	margin-bottom: 4px;
	padding: 5px;
	border-radius: 7px;
}

<style>
.headerbar {
background-image: url("{ROOT_PATH}/images/hlavicky/bg_header.jpg");
height: 173px;
}
</style>

background-repeat: no-repeat;

[anchor=velky_obrazek_na_pozadi_hlavicky_fora][/anchor][color=green][size=150][b]Velký obrázek na pozadí hlavičky fóra[/b][/size][/color] [url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=994#velky_obrazek_na_pozadi_hlavicky_fora]#[/url]

[image]385[/image] [image]386[/image]

V prosilveru je pozadí hlavičky nadefinované v souboru [c]styles/prosilver/theme/colours.css[/c], kde najdete kód

[code].headerbar {
background-color: #12A3EB;
background-image: url("./images/bg_header.gif");
color: #FFFFFF;
}[/code]
a v souboru [c]styles/prosilver/theme/common.css[/c], kde je kód

[code].headerbar {
background: transparent none repeat-x 0 0;
margin-bottom: 4px;
padding: 5px;
border-radius: 7px;
}[/code]
V tom prvním jsou nadefinované barvy a obrázek pozadí (úzký obrázek, který se opakuje) a v tom druhém nějaké další věci, jako třeba kulaté rohy, opakování obrázku a odsazení vnitřních prvků (loga, vyhledávání a názvu a popisu hlavičky) od stran hlavičky.

Pro pozadí hlavičky fóra je asi nejlepší vytvořit obrázek, u kterého nebude vadit, když se změní šířka fóra, protože obrázek se nezmenší, ale jakoby zasune (na pravé straně) pod pozadí fóra. Taky jde vytvořit víc obrázků menších, které na sebe budou navazovat.

Obrázek nahrajte na server (já jsem ho nahrál do složky images/hlavicky/) a do souboru [c]overall_header_stylesheets_after.html[/c] vložte následující kód:

[code]<style>
.headerbar {
background-image: url("{ROOT_PATH}/images/hlavicky/bg_header.jpg");
height: 173px;
}
</style>[/code]
kde:

[list][*][c]background-image: url("{ROOT_PATH}/images/hlavicky/bg_header.jpg");[/c] je cesta k mému obrázku s názvem bg_header.jpg.
{ROOT_PATH} - tohle je hlavní adresář fóra. Mohla by tu být místo toho tečka, ale pak by se obrázek nemusel načíst na některých stránkách fóra, jako je přihlašování do administrace a vlastní stránky. Pokud budete mít obrázek jinde, tak k němu zadejte jinou cestu.
[mzr][/mzr]
[*][c]height: 173px;[/c] určuje výšku hlavičky. Bez této hodnoty se načte jen nezbytně nutná šířka hlavičky (podle velikosti loga atd.), takže se může stát, že bude obrázek dole uříznutý:

[image]387[/image]

Zjistěte si výšku obrázku, odečtěte od ní dvojnásobek hodnoty padding ze souboru [c]styles/prosilver/theme/common.css[/c] a výslednou hodnotu zadejte jako výšku hlavičky. V mém případě je výška obrázku 183 px. Od toho jsem odečetl 10 pixelů (2x 5px z paddingu) a vyšlo mi 173px, což jsem zapsal za [c]height[/c]. Po zadání správné výšky vypadá hlavička takhle:

[image]386[/image][/list]
Pokud náhodou budete chtít opakovat obrázek pozadí, tak můžete do třídy [c].headerbar[/c] vložit následující:

[code]background-repeat: no-repeat;[/code]

<div id="site-description">
				<a id="logo" class="logo" href="....">{SITE_LOGO_IMG}</a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
</div>

<style>
/* Uprava textu nazvu fora */
#site-description h1 {
color: #CADCEB;
font-variant: small-caps; 
font-weight: bold;
letter-spacing: 1px;
text-align: center;
padding-left: 350px;
}

/* Uprava textu popisu fora */
#site-description p {
color: #CADCEB;
font-style: italic;
font-variant: small-caps; 
font-size: 1.2em;
text-align: center;
padding-left: 350px;
}
</style>

[anchor=upravy_nazvu_a_popisu_fora][/anchor][color=green][size=150][b]Úpravy názvu a popisu fóra[/b][/size][/color] [url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=981#upravy_nazvu_a_popisu_fora]#[/url]

[image]368[/image] [image]369[/image]

V prosilveru se název a popis fóra nachází v divu s identifikátorem [c]<div id="site-description">[/c] v tazích h1 a p. Konkrétně v souboru [c]styles/prosilver/template/overall_header.html[/c] najdete následující (část s logem je zkrácená):

[code]<div id="site-description">
<a id="logo" class="logo" href="....">{SITE_LOGO_IMG}</a>
<h1>{SITENAME}</h1>
<p>{SITE_DESCRIPTION}</p>
<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
</div>[/code]
Celý tento kód se nachází ještě v divu [c]<div class="headerbar">[/c], což znamená, že název a popis fóra jde změnit několika způsoby s použitím identifikátoru [c]site-description[/c] nebo třídy [c]headerbar[/c].

Do souboru [c]overall_header_stylesheets_after.html[/c] vložte následující kód:

[code]<style>
/* Uprava textu nazvu fora */
#site-description h1 {
color: #CADCEB;
font-variant: small-caps;
font-weight: bold;
letter-spacing: 1px;
text-align: center;
padding-left: 350px;
}

/* Uprava textu popisu fora */
#site-description p {
color: #CADCEB;
font-style: italic;
font-variant: small-caps;
font-size: 1.2em;
text-align: center;
padding-left: 350px;
}
</style>[/code]
kde:

[list][*][c]#site-description h1[/c] určuje, že se úpravy týkají názvu fóra
[mzr][/mzr]
[*][c]#site-description p[/c] určuje, že se úpravy týkají popisu fóra
[mzr][/mzr]
[*][c]color: #CADCEB;[/c] je barva textu (u názvu i u popisu fóra je v mém příkladu stejná barva)
[mzr][/mzr]
[*][c]font-variant: small-caps;[/c] zobrazí písmena jako velká, ale s tím, že mají původní výšku (použito u názvu i u popisu fóra).
[mzr][/mzr]
[*][c]font-weight: bold;[/c] zobrazí tučný text (v názvu fóra)
[mzr][/mzr]
[*][c]letter-spacing: 1px;[/c] zvětší mezery mezi písmeny (v názvu fóra)
[mzr][/mzr]
[*][c]font-style: italic;[/c] znamená, že u popisu fóra bude použita kurzíva
[mzr][/mzr]
[*][c]font-size: 1.2em;[/c] určuje velikost písma (v tomto případě zvětší popis fóra)
[mzr][/mzr]
[*][c]text-align: center;[/c] vycentrovává text na střed elementu, ale bohužel ne na střed hlavičky (použito u názvu i u popisu fóra). Ve spoustě případů to ale stačí.
[mzr][/mzr]
[*][c]padding-left: 350px;[/c] posunuje text tak, aby byl na hlavičce vycentrován. Určená hodnota záleží na několika dalších hodnotách, jako je šířka fóra, šířka loga a pravděpodobně i dalších. Asi by to šlo nějak vypočítat, ale podle mě je jednodušší to nastavit zkusmo, nebo podle nějakého softwérového pravítka.
Pozor: při zúžení fóra to nenechá text, aby se posunul doleva, což může při určitých šířkách prohlížeče vadit - delší text názvu a popisu fóra se protáhne dolů.[/list]
Pokud některou z vlastností v kódu nepotřebujete, tak ji smažte, a pokud nějakou postrádáte, tak si ji přidejte.

/* Global imageset items */
.imageset.site_logo {
	background-image: url("./images/site_logo.gif");
	padding-left: 149px;
	padding-top: 52px;
}

<style>
/* Změna loga */
.imageset.site_logo {
background-image: url("{ROOT_PATH}/images/logo-nove-pos.png");
padding-left: 270px;
padding-top: 95px;
}
</style>

[anchor=zmena_loga][/anchor][color=green][size=150][b]Změna loga[/b][/size][/color] [url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=978#zmena_loga]#[/url]

[image]362[/image] [image]363[/image]

V prosilveru je logo definované v souboru [c]styles/prosilver/theme/imageset.css[/c], kde najdete následující:

[code]/* Global imageset items */
.imageset.site_logo {
background-image: url("./images/site_logo.gif");
padding-left: 149px;
padding-top: 52px;
}[/code]
kde je ve vlastnosti [c]background-image[/c] nastavená cesta k obrázku a vlastnosti [c]padding-left[/c] a [c]padding-top[/c] určují plochu (šířku a výšku), na které bude obrázek zobrazen a která je klikací.

[list]Poznámka: [c]padding-left[/c] a [c]padding-top[/c] neupravují velikost obrázku, ale jen prostor, na kterém může být logo zobrazeno. Tzn., že pokud budete mít například obrázek o velikosti 200 x 75 px a [c]padding-left[/c] a [c]padding-top[/c] jako je výše (149px a 52px), tak se vám zobrazí jen část loga, která se vejde na plochu 149px x 52px. Zbytek loga bude skrytý:

[image]364[/image][/list]
Jestli chcete změnit na fóru logo, tak můžete nahradit originální soubor loga vlastním souborem, který by měl mít stejný název (včetně přípony souboru) a stejnou velikost jako původní logo, nebo ho můžete změnit následujícím způsobem i pomocí rozšíření "Custom code":

Vytvořte si logo (nejlépe ve formátu png nebo gif, které podporují průhledné pozadí, což se hodí pro případ, že změníte barvu hlavičky a nechcete logo předělávat) a nahrajte ho na váš server. Já mám logo, které lze použít s více vzhledy a tak jsem ho vložil do složky [c]images/[/c].

Do souboru [c]overall_header_stylesheets_after.html[/c] vložte následující kód:

[code]<style>
/* Změna loga */
.imageset.site_logo {
background-image: url("{ROOT_PATH}/images/logo-nove-pos.png");
padding-left: 270px;
padding-top: 95px;
}
</style>[/code]
kde:

[list][*][c]background-image: url("{ROOT_PATH}/images/logo-nove-pos.png");[/c] - tady je cesta k mému logu. Můžete napsat buď absolutní cestu k obrázku, nebo použít [c]{ROOT_PATH}[/c] + zbytek cesty k obrázku od kořenového adresáře fóra.
[mzr][/mzr]
[*][c]padding-left: 270px;[/c] - nastavení šířky prostoru pro logo (moje logo je 265px a já nastavil o něco víc).
[mzr][/mzr]
[*][c]padding-top: 95px;[/c] - nastavení výšky prostoru pro logo (opět jsem nastavil o něco víc, než je výška loga, protože jsem si všiml, že po zmenšení šířky fóra mi pod logo skočí konec mého dlouhého popisu fóra v hlavičce, což se spravilo právě zvětšení této hodnoty (na prvním obrázku je [c]padding-top[/c] 76px a na druhém 95px):[/list]
[image]365[/image] [image]366[/image]

/* Main blocks
---------------------------------------- */
#wrap {
	border: 1px solid transparent;
	border-radius: 8px;
	margin: 0 auto;
	max-width: 1152px;
	min-width: 625px;
	padding: 15px;
}

<style>
#wrap {
max-width: 900px;
margin: 0 auto;
}
</style>

/*
--------------------------------------------------------------
Colours and backgrounds for common.css
-------------------------------------------------------------- */

html, body {
	color: #536482;
	background-color: #F5F7FA;
}

<style>
html, body {
	background-color: #0077B2;
}
</style>

<style>
html, body {
background-color: white;
  background: repeating-linear-gradient(
    45deg,
    #109FE5,
    #109FE5 2px,
    #0076B1 2px,
    #0076B1 4px
  );
}
</style>

<style>
html, body {
background-color: #0076B1;
background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
background-size: 13px, 29px, 37px, 53px;
}
</style>

/* pozadi fora */
html, body {
background:url(
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAANklEQVQYlWNgSJ7yH4aFWraiYGQ5BnRFuPgM6IK42AzY
JLAqxqUIXTFpComymmjPkBQ8xAQ4AD4u18nImQKoAAAAAElFTkSuQmCC
) repeat;
}

[color=green][size=150][b]Změna šířky fóra[/b][/size][/color][anchor=zmena_sirky_fora][/anchor][url=http://www.fotonomad.cz/forum1/viewtopic.php?f=75&t=555&p=976#zmena_sirky_fora]#[/url]

V prosilveru je šířka fóra určená v souboru [c]styles/prosilver/theme/common.css[/c], kde najdete následující:

[code]/* Main blocks
---------------------------------------- */
#wrap {
border: 1px solid transparent;
border-radius: 8px;
margin: 0 auto;
max-width: 1152px;
min-width: 625px;
padding: 15px;
}[/code]
kde je šířka fóra určená vlastností [c]max-width: 1152px;[/c].

Pokud tedy chcete změnit šířku fóru vložte do souboru [c]overall_header_stylesheets_after.html[/c] následující kód:

[code]<style>
#wrap {
max-width: 900px;
margin: 0 auto;
}
</style>[/code]
kde 900px určuje maximální šířku fóra.

Aktualizace: bez vlastnosti [c]margin: 0 auto;[/c] nezůstane fórum při zmenšení stránky ve středu stránky.
[anchor=zmena_barvy_pozadi_fora][/anchor]
[color=green][size=150][b]Změna barvy pozadí fóra[/b][/size][/color] [url=http://www.fotonomad.cz/forum1/viewtopic.php?f=75&t=555&p=976#zmena_barvy_pozadi_fora]#[/url]

Pokud jste zmenšili šířku fóra, tak vám nemusí vyhovovat originální světlé pozadí fóra:

[image]358[/image]

V prosilveru je barva pozadí fóra určená v souboru [c]styles/prosilver/theme/colours.css[/c], kde najdete následující:

[code]/*
--------------------------------------------------------------
Colours and backgrounds for common.css
-------------------------------------------------------------- */

html, body {
color: #536482;
background-color: #F5F7FA;
}[/code]
kde je barva pozadí fóra určená vlastností [c]background-color: #F5F7FA;[/c].

Pokud chcete barvu pozadí změnit, vložte do souboru [c]overall_header_stylesheets_after.html[/c] následující kód:

[code]<style>
html, body {
background-color: #0077B2;
}
</style>[/code]
kde hodnota [c]#0077B2[/c] určuje barvu pozadí fóra:

[image]359[/image]

Jestli vám nestačí jednolitá barva pozadí, můžete pomocí následující kódu css vytvořit proužky:

[code]<style>
html, body {
background-color: white;
background: repeating-linear-gradient(
45deg,
#109FE5,
#109FE5 2px,
#0076B1 2px,
#0076B1 4px
);
}
</style>[/code]
což vypadá na fóru takhle (pro zvětšení klikněte na obrázek):

[image]360[/image]

Zdroj k proužkům: [url=http://css-tricks.com/stripes-css/]css-tricks.com[/url]

Jestli chcete něco šílenějšího, můžete použít kódy z [url=http://lea.verou.me/css3patterns/]CSS3 Patterns Gallery[/url], kde si vyberete jeden ze vzorků, kliknete na něho, čímž se dostanete na stránku s kódem, kterým nahradíte barvu pozadí, takže do souboru [c]overall_header_stylesheets_after.html[/c] vložíte např. takovýhle kód:

[code]<style>
html, body {
background-color: #0076B1;
background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
background-size: 13px, 29px, 37px, 53px;
}
</style>[/code]
který vytvoří následující pozadí:

[image]361[/image]

Docela zajímavý je použít kódování [url=http://cs.wikipedia.org/wiki/Base64]base64[/url], pomocí kterého lze převést malé obrázky na několik desítek - stovek znaků, které se pak přidají místo obrázku. Tzn., že se nemusí nikam nahrávat žádný obrázek, ale člověk si vystačí jen s kódem ve tvaru např.:

[code]/* pozadi fora */
html, body {
background:url(
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAANklEQVQYlWNgSJ7yH4aFWraiYGQ5BnRFuPgM6IK42AzY
JLAqxqUIXTFpComymmjPkBQ8xAQ4AD4u18nImQKoAAAAAElFTkSuQmCC
) repeat;
}[/code]
Pozor: ta řada znaků musí být na jednom řádku. Musel jsem ji dát na dva řádky, protože to ničilo rozložení stránky.
Výše uvedený kód vytvoří takovéhle pozadí (pro zvětšení klikněte na obrázek):

[image]372[/image]

Pro vytvoření obrázku (o velikosti 10x10 px) jsem použil [url=http://www.patternify.com/]Patternify css generátor vzorů[/url], pomocí kterého jde vytvořit základní obrázek a vygenerovat ho jako css kód, který jde přidat, kam je potřeba. Jediná nevýhoda je, že se na tom dají tvořit jen malé obrázky, nicméně není těžký vygůůglovat konvertor z obrázků na base64, který umí i větší obrázky. U větších obrázků je kód opravdu velmi dlouhý a v tom případě je asi lepší nahrát na server obrázek. Mě při zkoušení velkého obrázku taky zablokoval můj hosting (tedy spíš antivirus, který tam mají) přístup na stránky, což se naštěstí během 10 minut vyřešilo.

<!-- INCLUDE ../../../../../../store/customcode/muj_soubor.html -->

Fatal error: Uncaught exception 'Twig_Error_Loader' with message 'Unable to find template "../../../../../../store/customcode/muj_stajling_fora_Prosilver.html" (looked into: ./styles/prosilver/template, ./styles/prosilver/theme) in "../../../../../../store/customcode/overall_header_stylesheets_after.html" at line 4.' in /xxx/yyy/zzz/forum1_phpBB31/vendor/twig/twig/lib/Twig/Loader/Filesystem.php:202 Stack trace: #0 /xxx/yyy/zzz/forum1_phpBB31/phpbb/template/twig/loader.php(106): Twig_Loader_Filesystem->findTemplate('../../../../../...') #1 /xxx/yyy/zzz/forum1_phpBB31/vendor/twig/twig/lib/Twig/Loader/Filesystem.php(138): phpbb\template\twig\loader->findTemplate('../../../../../...') #2 /xxx/yyy/zzz/forum1_phpBB31/vendor/twig/twig/lib/Twig/Environment.php(265): Twig_Loader_Filesystem->getCacheKey('../../../../../...') #3 /xxx/yyy/zzz/forum1_phpBB31/vendor/twig/twig/lib/Twig/Environment.php(312): Twig_Environment->getTemplateClass('../../../../../...', NULL in /xxx/yyy/zzz/forum1_phpBB31/vendor/twig/twig/lib/Twig/Loader/Filesystem.php on line 202

<!-- IF PROMĚNNÁ -->
vlastní kód
<!-- ENDIF -->

<!-- IF not PROMĚNNÁ -->
vlastní kód
<!-- ENDIF -->

<!-- IF PROMĚNNÁ_1 -->
vlastní kód 1
<!-- ELSEIF PROMĚNNÁ_2 -->
vlastní kód 2
<!-- ELSE -->
vlastní kód 3
<!-- ENDIF -->

<!-- IF PROMĚNNÁ_1 and PROMĚNNÁ_2 -->
vlastní kód 1
<!-- ENDIF -->

<!-- IF PROMĚNNÁ_1 or PROMĚNNÁ_2 -->
vlastní kód 1
<!-- ENDIF -->

<!-- IF PODMÍNKA_1 -->
<!-- IF PODMÍNKA_2_PROMĚNNÁ_1 -->
vlastní kód 1
<!-- ELSEIF PODMÍNKA_2_PROMĚNNÁ_2 -->
vlastní kód 2
<!-- ELSE -->
vlastní kód 3
<!-- ENDIF -->
<!-- ENDIF -->

<!-- IF T_TEMPLATE_NAME == 'prosilver' -->
vlastní kód
<!-- ENDIF -->

<!-- IF T_TEMPLATE_NAME != 'prosilver' -->
vlastní kód
<!-- ENDIF -->

<!-- IF T_TEMPLATE_NAME == 'prosilver' -->
vlastní kód
<!-- ENDIF -->

<!-- IF T_TEMPLATE_NAME == 'prosilver' -->
vlastní kód pro prosilver
<!-- ELSEIF T_TEMPLATE_NAME == 'vzhled_xy' -->
vlastní kód pro vzhled_xy
<!-- ELSE -->
vlastní kód pro ostatní vzhledy, kromě vzhledů prosilver a vzhled_xy 
<!-- ENDIF -->

<!-- IF S_USER_LANG == 'cs-alt' -->
vlastní kód
<!-- ENDIF -->

<!-- IF S_USER_LANG == 'cs-alt' -->
vlastní kód pro uživatele s alternativní češtinou
<!-- ELSEIF S_USER_LANG == 'en-gb' -->
vlastní kód pro uživatele s angličtinou
<!-- ELSE -->
vlastní kód pro ostatní jazyky, kromě alternativní češtiny a angličtiny
<!-- ENDIF -->

<!-- IF SCRIPT_NAME == 'index' -->
vlastní kód
<!-- ENDIF -->

<!-- IF SCRIPT_NAME != 'index' -->
vlastní kód
<!-- ENDIF -->

<!-- IF SCRIPT_NAME == 'ucp' and CUSTOMCODE_PARAM_MODE == 'register' -->
vlastní kód
<!-- ENDIF -->

<!-- IF SCRIPT_NAME == 'ucp' and CUSTOMCODE_PARAM_I == 'ucp_pm' -->
vlastní kód
<!-- ENDIF -->

<!-- IF S_FORUM_ID  == '32' -->
vlastní kód
<!-- ENDIF -->

<!-- IF S_FORUM_ID  == '32' or S_FORUM_ID  == '33' -->
vlastní kód
<!-- ENDIF -->

<!-- IF S_USER_LOGGED_IN -->
vlastní kód
<!-- ENDIF -->

<!-- IF not S_USER_LOGGED_IN -->
vlastní kód
<!-- ENDIF -->

<!-- IF S_USERNAME == 'xyz' -->
vlastní kód
<!-- ENDIF -->

<!-- IF S_USERNAME != 'leschek' -->
vlastní kód
<!-- ENDIF -->

<!-- můj komentář k souboru -->

<style>
nějaký kód
</style>

[color=green][size=180][b]Příklady úprav vzhledů fóra bez editace originálních šablon vzhledů[/b][/size][/color]

V tomto článku se podíváme na to, jak upravit vzhled fóra aniž by se musely upravovat originální šablony vzhledu. Výhodou tohoto postupu je to, že si při aktualizaci fóra nebo vzhledu nesmažete provedené úpravy, a že soubory nebudete muset znovu upravovat. Nevýhodou je, že budete muset porozumět tomu, jak fungují [uvoz]události[/uvoz] ([uvoz]eventy[/uvoz]) v šablonách.

[color=green][size=150][b][uvoz]Události[/uvoz] ([uvoz]eventy[/uvoz]) v šablonách[/b][/size][/color]

[uvoz]Události[/uvoz] ([uvoz]eventy[/uvoz]) slouží k tomu, aby se při instalaci rozšíření nemuseli upravovat originální soubory fóra. [uvoz]Události[/uvoz] jsou něco jako spouštěče nebo odkazy - když se zpracovává kód souboru a narazí se na [uvoz]událost[/uvoz], tak počítač zpracuje kód, na který odkazuje a pak pokračuje dál. [uvoz]Události[/uvoz] můžete najít v php souborech a v šablonách (ve složce styles/vas_vzhled/template). V tomto článku se budeme věnovat pouze [uvoz]událostem[/uvoz] v šablonách.

Pokud se občas podíváte do šablon v phpBB 3.1 a vyšším, tak jste si určitě všimli řádků, které vypadají následovně:

[c]<!-- EVENT overall_header_body_before -->[/c]

Tyto řádky vždy začínají stejně označením [c]<!-- EVENT[/c], za kterým je název [uvoz]události[/uvoz]. [uvoz]Události[/uvoz] se nachází téměř ve všech html souborech (šablonách) a jsou rozmístěny na strategických místech, na kterých se očekává, že by mohl být do šablon přidán nějaký kód. Pokud na nějakém místě [uvoz]událost[/uvoz] není, můžete o její přidání požádat vývojáře phpBB.

Události odkazují na soubory, které mají stejný název jako událost s koncovkou html. Například v souboru [c]styles/vas_vzhled/template/overall_header.html[/c] je velmi používaná událost [c]<!-- EVENT overall_header_stylesheets_after -->[/c], pomocí které se dá změnit stylování fóra (to co je v css souborech ve složce [c]styles/vas_vzhled/theme[/c]), a která odkazuje na soubor [c]ext/autor_rozsireni/nazev_rozsireni/styles/vas_vzhled/template/event/overall_header_stylesheets_after.html[/c]. Takhle to funguje v případě, že tento soubor existuje - pokud neexistuje, tak [uvoz]událost[/uvoz] nic nespustí.

[color=green][size=150][b]Rozšíření [uvoz]Insert template code[/uvoz][/b][/size][/color]

Rozšíření [uvoz]Insert template code[/uvoz] je velmi jednoduché rozšíření, pomocí kterého lze přes [uvoz]události[/uvoz] přidávat do šablon kód.

Rozšíření můžete stáhnout na [url=https://github.com/marttiphpbb/phpbb-ext-inserttemplatecode]GitHubu[/url].

[b]Instalace[/b] - Pokud nepoužíváte rozšíření [url=http://www.fotonomad.cz/forum1/viewtopic.php?t=537&p=932#p932][uvoz]Upload Extension[/uvoz] ([uvoz]Nahrát rozšíření[/uvoz])[/url], tak nahrajte soubory rozšíření do složky [c]ext/marttiphpbb/inserttemplatecode[/c] a povolte ho v [uvoz]Administraci[/uvoz] - [uvoz]Přizpůsobení[/uvoz] - [uvoz]Správa rozšíření[/uvoz] - [uvoz]Správce rozšíření[/uvoz].

Po instalaci rozšíření se podívejte do složky [c]ext/marttiphpbb/inserttemplatecode/style/all/template/event[/c], ve které už nějaké [uvoz]soubory událostí[/uvoz] jsou. Můžete začít psát kód přímo do nich, nebo si najít pro vaše účely lépe umístěnou [uvoz]událost[/uvoz], na základě které si v této složce vytvoříte nový html [uvoz]soubor události[/uvoz] (se stejným názvem jako má [uvoz]událost[/uvoz]).
[anchor=vlastni_soubory][/anchor]
Některé [uvoz]soubory událostí[/uvoz] můžou časem obsahovat více úprav a můžou být nepřehledné. V tomto případě můžete vytvořit ve složce [c]ext/marttiphpbb/inserttemplatecode/style/all/template/[/c] vlastní soubory (pozor na to, že to není stejná složka jako ta, kam se dávají [uvoz]soubory událostí[/uvoz] v šablonách, ale její nadřazená složka). Na tyto soubory musíte odkázat v hlavních [uvoz]souborech událostí[/uvoz] tímto kódem [c]<!-- INCLUDE muj_soubor.html -->[/c] ([c]muj_soubor.html[/c] nahraďte názvem svého souboru).

Po jakékoliv změně v šablonách, nebo v souborech událostí nezapomeňte v administraci promazat cache fóra.

Na konci tohoto příspěvku můžete najít [url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=975#seznam_uprav]seznam různých úprav fóra provedených pomocí rozšíření Insert template code[/url].

xxxxxx
[mzr][/mzr]
[rozbalto=Originální text pro rozšíření Custom Code, které od verze phpBB 3.1.6 nefunguje][color=green][size=180][b]Příklady úprav fóra pomocí rozšíření [uvoz]Custom code[/uvoz] ([uvoz]Vlastní kód[/uvoz])[/b][/size][/color]

Pomocí rozšíření [url=http://www.fotonomad.cz/forum1/viewtopic.php?t=554&p=974#p974][uvoz]Custom code[/uvoz] ([uvoz]Vlastní kód[/uvoz])[/url] jde do fóra přidávat html, css nebo javascript kód bez toho, aby se museli upravovat originální soubory fóra. Kód se přidává v administraci rozšíření do souborů, které jsou propojeny s událostmi (eventy) šablon. Krátký úvod do používání tohoto rozšíření najdete [url=http://www.fotonomad.cz/forum1/viewtopic.php?t=554&p=974#kratky_navod]tady[/url].

V tomto tématu najdete příklady úprav fóra pomocí rozšíření [uvoz]Custom code[/uvoz] ([uvoz]Vlastní kód[/uvoz]).
[anchor=pridani_vlastniho_souboru][/anchor]
[color=green][size=150][b]Přidání vlastního souboru[/b][/size][/color] [url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=975#pridani_vlastniho_souboru]#[/url]

Všechny soubory rozšíření, do kterých se přidává vlastní kód, jsou uloženy ve složce [c]store/customcode/[/c]. Při instalaci rozšíření je ve výše uvedené složce vytvořeno několik souborů, které jde v administraci upravovat, takže můžete napsat kód přímo do nich. Pokud tam ale chcete napsat něco delšího, je lepší vytvořit soubor nový, na který se potom odkáže v jednom z těch originálních souborů (aby se načetl).

[image]357[/image]

Nový soubor jde vytvořit velmi snadno v administraci rozšíření ([uvoz]Administrace[/uvoz] - [uvoz]Rozšíření[/uvoz] - [uvoz]Vlastní kód[/uvoz] - [uvoz]Správa souborů[/uvoz]), kde ve spodní části najdete pole, do kterého zadáte název souboru a kliknete na tlačítko [uvoz]Vytvořit soubor[/uvoz].

Asi na tom moc nezáleží, ale já si pro přehlednost do názvu souborů přidávám předponu [c]muj_[/c], protože mám pocit, že se soubory ve [uvoz]Správě souborů[/uvoz] řadí podle jejich názvů a takhle zůstanou všechny mnou přidané soubory pohromadě. Kromě toho je dobrý vymyslet název souboru, který vystihuje kód, který se v souboru nachází. Například:

[c]moje_uprava_hlavicky_prosilver.html[/c]

mi říká, že se v souboru nachází můj kód, kterým nějak upravuju hlavičku fóra ve vzhledu prosilver.
[anchor=odkaz_na_vlastni_soubor][/anchor]
[color=green][size=150][b]Odkaz na vlastní soubor[/b][/size][/color] [url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=975#odkaz_na_vlastni_soubor]#[/url]

Po vytvoření vlastního souboru musíte na soubor odkázat z jednoho z originálních souborů rozšíření, aby se načetl. To uděláte tak, že do originálního souboru napíšete následující kód:

[code]<!-- INCLUDE ../../../../../../store/customcode/muj_soubor.html -->[/code]
Pozor: v názvech souborů záleží na velikosti písmen.

Pokud napíšete název souboru špatně, tak se vám místo fóra ukáže podobná hláška:

[code]Fatal error: Uncaught exception 'Twig_Error_Loader' with message 'Unable to find template "../../../../../../store/customcode/muj_stajling_fora_Prosilver.html" (looked into: ./styles/prosilver/template, ./styles/prosilver/theme) in "../../../../../../store/customcode/overall_header_stylesheets_after.html" at line 4.' in /xxx/yyy/zzz/forum1_phpBB31/vendor/twig/twig/lib/Twig/Loader/Filesystem.php:202 Stack trace: #0 /xxx/yyy/zzz/forum1_phpBB31/phpbb/template/twig/loader.php(106): Twig_Loader_Filesystem->findTemplate('../../../../../...') #1 /xxx/yyy/zzz/forum1_phpBB31/vendor/twig/twig/lib/Twig/Loader/Filesystem.php(138): phpbb\template\twig\loader->findTemplate('../../../../../...') #2 /xxx/yyy/zzz/forum1_phpBB31/vendor/twig/twig/lib/Twig/Environment.php(265): Twig_Loader_Filesystem->getCacheKey('../../../../../...') #3 /xxx/yyy/zzz/forum1_phpBB31/vendor/twig/twig/lib/Twig/Environment.php(312): Twig_Environment->getTemplateClass('../../../../../...', NULL in /xxx/yyy/zzz/forum1_phpBB31/vendor/twig/twig/lib/Twig/Loader/Filesystem.php on line 202[/code][/rozbalto]
xxxxxx
[anchor=vlastni_kod_uvod_do_podminek][/anchor]
[color=green][size=150][b]Úvod do podmínek v šablonách[/b][/size][/color] [url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=975#vlastni_kod_uvod_do_podminek]#[/url]

Pomocí podmínek v šablonách lze zobrazit vlastní kód na fóru jen tam, kde to odpovídá zadané podmínce. Tak lze zobrazit kód na základě [url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=975#vlastni_kod_jen_v_urcitem_vzhledu]zobrazeného vzhledu[/url], [url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=975#vlastni_kod_na_zaklade_jazyka_uzivatele]jazyka uživatele[/url], [url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=975#vlastni_kod_na_urcite_strance]zobrazené stránky[/url] nebo jen [url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=975#vlastni_kod_pro_urcite_uzivatele]pro určité uživatele[/url].
Podmínky se tvoří pomocí proměnných, jejichž seznam (spíš je to rozcestník) naleznete [url=https://wiki.phpbb.com/Category:Template_Variables]tady[/url].

Obecně se podmínky píšou takhle:

[code]<!-- IF PROMĚNNÁ -->
vlastní kód
<!-- ENDIF -->[/code]
což znamená, že vlastní kód bude zobrazen, pokud bude splněno to, co je v proměnné.
Např. [c]<!-- IF S_USER_LOGGED_IN -->[/c] - zobrazí kód pouze pro přihlášené.

[code]<!-- IF not PROMĚNNÁ -->
vlastní kód
<!-- ENDIF -->[/code]
V tomto případě bude naopak zobrazen vlastní kód všude mimo to, co je v proměnné.
Např. [c]<!-- IF not S_USER_LOGGED_IN -->[/c] - zobrazí kód pouze pro nepřihlášené.

Pokud chcete zobrazit kód 1 pro proměnnou 1, kód 2 pro proměnnou 2 a kód 3 pro ostatní proměnné, vytvoříte něco jako tohle:

[code]<!-- IF PROMĚNNÁ_1 -->
vlastní kód 1
<!-- ELSEIF PROMĚNNÁ_2 -->
vlastní kód 2
<!-- ELSE -->
vlastní kód 3
<!-- ENDIF -->[/code]
Podmínky jde také kombinovat. Např.:

[code]<!-- IF PROMĚNNÁ_1 and PROMĚNNÁ_2 -->
vlastní kód 1
<!-- ENDIF -->[/code]
znamená, že se kód zobrazí tam, kde je splněno to, co je v proměnné 1 [b]a zároveň[/b] to, co je v proměnné 2.

[code]<!-- IF PROMĚNNÁ_1 or PROMĚNNÁ_2 -->
vlastní kód 1
<!-- ENDIF -->[/code]
znamená, že se kód zobrazí tam, kde je splněno to, co je v proměnné 1 [b]nebo[/b] to, co je v proměnné 2.

Občas je lepší podmínky nekombinovat, ale vložit do sebe:

[code]<!-- IF PODMÍNKA_1 -->
<!-- IF PODMÍNKA_2_PROMĚNNÁ_1 -->
vlastní kód 1
<!-- ELSEIF PODMÍNKA_2_PROMĚNNÁ_2 -->
vlastní kód 2
<!-- ELSE -->
vlastní kód 3
<!-- ENDIF -->
<!-- ENDIF -->[/code]
Tzn. že u všech tří vlastních kódů musí být splněná podmínka 1 a na podmínce 2 záleží, jestli bude zobrazen vlastní kód 1, 2 nebo 3. Taky si všimněte, že každá podmínka má svůj [c]<!-- ENDIF -->[/c]. To je dobrý si pamatovat, protože pokud na [c]<!-- ENDIF -->[/c] zapomenete, vyskočí vám chyba.

U některých proměnných bývá řetězec (v seznamu podmínek jsou mají označení "Type: String"). Např.:

[code]<!-- IF T_TEMPLATE_NAME == 'prosilver' -->
vlastní kód
<!-- ENDIF -->[/code]
zobrazí vlastní kód pouze v prosilveru. Pokud ho chcete zobrazit všude mimo prosilver napíšete to takhle:

[code]<!-- IF T_TEMPLATE_NAME != 'prosilver' -->
vlastní kód
<!-- ENDIF -->[/code]
Všimněte si změny z [c]==[/c] na [c]!=[/c].

[b]Důležité[/b]: Nezapomeňte na ukončovací [c]<!-- ENDIF -->[/c] (a počáteční [c]IF[/c]) - vyhodilo by to při testování chyby. Proto je lepší si nechat stránku v administraci, kde upravujete vlastní kód, otevřenou a testovat na nové záložce prohlížeče.
[anchor=vlastni_kod_jen_v_urcitem_vzhledu][/anchor]
[color=green][size=150][b]Vlastní kód jen v určitém vzhledu[/b][/size][/color] [url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=975#vlastni_kod_jen_v_urcitem_vzhledu]#[/url]

Pokud máte na fóru nainstalováno více vzhledů, tak se může stát, že chcete, aby se vlastní kód aplikoval jen na určitý vzhled. To uděláte tak, že v kódu použijete následující podmínku:

[code]<!-- IF T_TEMPLATE_NAME == 'prosilver' -->
vlastní kód
<!-- ENDIF -->[/code]
Různý vlastní kód do více stylů různých vzhledů jde přidat nějak takhle:

[code]<!-- IF T_TEMPLATE_NAME == 'prosilver' -->
vlastní kód pro prosilver
<!-- ELSEIF T_TEMPLATE_NAME == 'vzhled_xy' -->
vlastní kód pro vzhled_xy
<!-- ELSE -->
vlastní kód pro ostatní vzhledy, kromě vzhledů prosilver a vzhled_xy
<!-- ENDIF -->[/code]
[anchor=vlastni_kod_na_zaklade_jazyka_uzivatele][/anchor]
[color=green][size=150][b]Vlastní kód na základě jazyka uživatele[/b][/size][/color] [url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=975#vlastni_kod_na_zaklade_jazyka_uzivatele]#[/url]

Pokud máte na fóru nainstalováno více jazyků, můžete zobrazit uživatelům vlastní kód na základě toho, který jazyk používají. Tzn., že uživatelům, kteří používají např. angličtinu se zobrazí nějaké upozornění (nebo něco jiného) a uživatelé, kteří používají češtinu ho neuvidí.

Stejně jako v případě vzhledů musíte i pro jazyky do kódu přidat podmínku:

[code]<!-- IF S_USER_LANG == 'cs-alt' -->
vlastní kód
<!-- ENDIF -->[/code]
To zobrazí vlastní kód jenom těm, kteří používají alternativní češtinu (nebo jazyk s označením cs-alt).
Různé vlastní kódy přidané na základě více jazyků jde přidat nějak takhle:

[code]<!-- IF S_USER_LANG == 'cs-alt' -->
vlastní kód pro uživatele s alternativní češtinou
<!-- ELSEIF S_USER_LANG == 'en-gb' -->
vlastní kód pro uživatele s angličtinou
<!-- ELSE -->
vlastní kód pro ostatní jazyky, kromě alternativní češtiny a angličtiny
<!-- ENDIF -->[/code]
Kódy jazyků zjistíte v jazykovém souboru [c]language/vas_jazyk/common.php[/c], ve kterém najdete (na skoro začátku souboru) řádek [c]'USER_LANG'[/c] a za šipkou je označení, které v podmínce použijete.
[anchor=vlastni_kod_na_urcite_strance][/anchor]
[color=green][size=150][b]Vlastní kód na určité stránce[/b][/size][/color] [url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=975#vlastni_kod_na_urcite_strance]#[/url]

Vlastní kód jde zobrazit i v závislosti na zobrazené stránce, takže např. uživatel, který je na obsahu fóra ([c]index.php[/c]) vlastní kód uvidí a druhý uživatel, který čte příspěvky ([c]viewtopic.php[/c]) vlastní kód neuvidí. Dělá se to opět pomocí podmínek v šablonách, do kterých se napíše pomocí proměnné [c]SCRIPT_NAME[/c] závislost na názvu skriptu (bez přípony). Vypadá to nějak takhle:

[code]<!-- IF SCRIPT_NAME == 'index' -->
vlastní kód
<!-- ENDIF -->[/code]
Tím se zobrazí vlastní kód na obsahu fóra. Všimněte si, že jsem nepoužil příponu [c]php[/c]. Pokud je [c]index.php[/c], kde vlastní kód zobrazit nechcete, můžete to napsat nějak takhle:

[code]<!-- IF SCRIPT_NAME != 'index' -->
vlastní kód
<!-- ENDIF -->[/code]
Další skripty (ne všechny) jsou:

[list][*][c]ucp[/c] - uživatelský panel
[mzr][/mzr]
[*][c]memberlist[/c] - seznam členů
[mzr][/mzr]
[*][c]viewforum[/c] - seznam témat
[mzr][/mzr]
[*][c]viewtopic[/c] - téma
[mzr][/mzr]
[*][c]mcp[/c] - moderátorský panel
[mzr][/mzr]
[*][c]faq[/c] -FAQ[/list]
Některé z těchto skriptů obsahují i další podstránky, které mají vlastní parametr. Asi nejvíc je to vidět na skriptu [c]ucp[/c], kde může být:

[list][*][c]ucp.php?mode=register[/c] - registrační stránky
[mzr][/mzr]
[*][c]ucp.php?mode=login[/c] - přihlašovací stránka
[mzr][/mzr]
[*][c]ucp.php?i=ucp_pm[/c] - soukromé zprávy v uživatelském panelu[/list]
Rozšíření Vlastní kód na to myslí a přidává k proměnné [c]SCRIPT_NAME[/c] i vlastní proměnnou [c]CUSTOMCODE_PARAM_<parametr>[/c], pomocí které jde vlastní kód zobrazit téměř kdekoliv ve fóru. Pokud tedy chci zobrazit vlastní kód pouze na registrační stránce, napíšu takovouto podmínku:

[code]<!-- IF SCRIPT_NAME == 'ucp' and CUSTOMCODE_PARAM_MODE == 'register' -->
vlastní kód
<!-- ENDIF -->[/code]
která znamená, že se vlastní kód zobrazí:

[list]pokud je název skriptu ucp - [c]IF SCRIPT_NAME == 'ucp'[/c][/list]
[list]a zároveň - [c]and[/c][/list]
[list]parametr s názvem mode je register - [c]CUSTOMCODE_PARAM_MODE == 'register'[/c][/list]
V posledním řádku si všimněte části [c]MODE[/c] a [c]register[/c], která je použitá z adresy končící na [c]ucp.php?mode=register[/c].
Pokud budete chtít zobrazit vlastní kód na stránce [c]ucp.php?i=ucp_pm[/c] tak napíšete podmínku takhle:

[code]<!-- IF SCRIPT_NAME == 'ucp' and CUSTOMCODE_PARAM_I == 'ucp_pm' -->
vlastní kód
<!-- ENDIF -->[/code]
Všimněte si, že tady je [c]I[/c] a ne [c]MODE[/c]

Vlastní kód jde zobrazit i v závislosti na fóru. To se hodí třeba k zobrazení různého pozadí hlavičky na různých fórech. Dělá se to pomocí proměnné [c]S_FORUM_ID[/c] za kterou se doplní ID fóra, které jde zjistit zadresy fóra, kde je parametr [c]f=[/c] s ID fóra. Např. na následující adrese:

[c]http://www.domena/forum/viewforum.php?f=72[/c]

je ID fóra 72 a na následující adrese:

[c]http://www.domena/forum/viewtopic.php?f=74&t=552[/c]

je ID fóra 74.

Pokud tedy potřebujete zobrazit vlastní kód pouze ve fóru s ID 32 napíšete takovouhle podmínku:

[code]<!-- IF S_FORUM_ID == '32' -->
vlastní kód
<!-- ENDIF -->[/code]
Pokud chcete zobrazit vlastní kód ve více fórech (například na kategorii a jejích podfórech) můžete napsat:

[code]<!-- IF S_FORUM_ID == '32' or S_FORUM_ID == '33' -->
vlastní kód
<!-- ENDIF -->[/code]
[anchor=vlastni_kod_pro_urcite_uzivatele][/anchor]
[color=green][size=150][b]Vlastní kód jen pro určité uživatele[/b][/size][/color] [url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=975#vlastni_kod_pro_urcite_uzivatele]#[/url]

Vlastní kód jde zobrazit i na základě různých vlastností uživatelů (např. jestli uživatel je nebo není přihlášený, bot, administrátor, nový člen fóra, moderátor)
dělá se to pomocí proměnných:

[list][*][c]S_USER_LOGGED_IN[/c] - přihlášený uživatel
[mzr][/mzr]
[*][c]S_REGISTERED_USER[/c] - uživatel je zaregistrován, ale není bot
[mzr][/mzr]
[*][c]S_USER_NEW[/c] - uživatel je ve skupině nově registrovaných uživatelů
[mzr][/mzr]
[*][c]S_IS_BOT[/c] - uživatel je bot (ve skupině Boti)
[mzr][/mzr]
[*][c]U_ACP[/c] - administrátor
[mzr][/mzr]
[*][c]U_MCP[/c] - moderátor
[mzr][/mzr]
[*][c]S_USERNAME[/c] - jméno uživatele[/list]
Pokud tedy chcete zobrazit vlastní kód pouze přihlášeným, vytvoříte následující podmínku:

[code]<!-- IF S_USER_LOGGED_IN -->
vlastní kód
<!-- ENDIF -->[/code]
Pokud chcete vlastní kód zobrazit jen nepřihlášeným, použijte tuto podmínku:

[code]<!-- IF not S_USER_LOGGED_IN -->
vlastní kód
<!-- ENDIF -->[/code]
Podobně to funguje i pro boty, nové uživatele, administrátory a moderátory. Pokud chcete zobrazit něco jen uživateli xyz tak to napíšete takhle:

[code]<!-- IF S_USERNAME == 'xyz' -->
vlastní kód
<!-- ENDIF -->[/code]
Pokud vlastní kód chcete zobrazit všem mimo uživatele xyz, použijte tuto podmínku

[code]<!-- IF S_USERNAME != 'leschek' -->
vlastní kód
<!-- ENDIF -->[/code]
[anchor=komentare_k_souborum][/anchor]
[color=green][size=150][b]Komentáře k souborům[/b][/size][/color] [url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=975#komentare_k_souborum]#[/url]

Pokud chcete do souboru přidat komentář, který se zobrazí v tabulce se soubory v nastavení rozšíření ("Administrace" - "Rozšíření" - "Vlastní kód" - "Správa souborů"), tak na první řádek souboru vložte následující kód:

[code]<!-- můj komentář k souboru -->[/code][anchor=poznamky_k_upravam][/anchor]
[color=green][size=150][b]Poznámky k příkladům úprav fóra[/b][/size][/color] [url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=975#poznamky_k_upravam]#[/url]

xxxxxx
[mzr][/mzr]
[rozbalto=POZOR - Původní text pro rozšíření Custom Code, které od verze phpBB 3.1.6 nefunguje]Vlastní kód lze přidat do originálních souborů rozšíření (s označením (U)) nebo do vlastních souborů, na které se vytvoří odkaz v originálním souboru rozšíření. Protože jsem línej a taky abych se zbytečně neopakoval, budu v následujících příkladech popisovat přidání vlastního kódu pouze do originálních souborů, což pro vás bude znamenat, že můžete přidat soubor podle návodu do originálního souboru rozšíření, nebo že si vytvoříte [c]vlastni_soubor.html[/c], do kterého kód přidáte a do v příkladu zmíněného souboru napíšete odkaz na vámi vytvořený vlastní soubor s kódem.

Příklad: Pokud uvidíte napsáno: [i]do souboru [c]overall_header_stylesheets_after.html[/c] vložte následující kód:

[code]<style>
nějaký kód
</style>[/code]
bude to znamenat, že můžete vložit svůj kód přímo do výše zmíněného souboru [c]overall_header_stylesheets_after.html[/c], nebo si můžete [url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=975#pridani_vlastniho_souboru]vytvořit nový soubor[/url], do kterého kód vložíte a pak výše zmíněného do souboru napíšete [url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=975#odkaz_na_vlastni_soubor]odkaz na vámi vytvořený soubor[/url].[/i][/rozbalto]
xxxxx
[mzr][/mzr]
[list=1][*]Kód se přidává do souborů událostí ve složce [c]ext/marttiphpbb/inserttemplatecode/style/all/template/event/soubor_udalosti.html[/c]. Pokud je v příkladech uveden jen název souboru, tak to znamená, že má být vložen do výše zmíněné složky (přijde mi zbytečné psát celou cestu k souboru).

Kód můžete napsat přímo do souboru události, nebo si vytvořit vlastní soubor, jak je popsáno [url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=975#vlastni_soubory]tady[/url]. V příkladech budu uvádět jen hlavní soubory událostí. Jestli si vytvoříte vlastní soubor, záleží na vás.

Originální soubor fóra (ve složce styles/vas_vzhled/template), ve kterém se událost nachází. lze snadno odvodit z názvu souboru události. Např. soubor události [c]overall_header_navbar_before.html[/c] patří k události [c]<!-- EVENT overall_header_navbar_before -->[/c] v souboru [c]overall_header.html[/c] (všimněte si začátku názvu souboru a události).
[mzr][/mzr]
[*]Pokud budete chtít do jednoho souboru přidat několik úprav stylů za sebou nemusíte psát:

[code] <style>
nějaký kód
</style>
<style>
nějaký jiný kód
</style>[/code]
ale můžete to vložit takhle:

[code] <style>
nějaký kód
nějaký jiný kód
</style>[/code]

[*]Příklady kódů budou psané (pokud nebude uvedeno jinak) pro prosilver, tzn. že pokud používáte jiný vzhled, budete si muset kód upravit, aby se do vašeho vzhledu hodil. Taky to znamená, že pokud používáte na fóru více vzhledů, bude na vás, jestli chcete přidat kód do všech vzhledů, nebo jestli [url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=975#vlastni_kod_jen_v_urcitem_vzhledu]použijete podmínku, aby se kód zobrazil pouze v určitém vzhledu[/url].[/list]
xxxxx
[mzr][/mzr]
[rozbalto=POZOR - originální text pro rozšíření CustomCode, které od verze phpBB 3.1.6 nefunguje]Po vložení kódu do souboru nezapomeňte kliknout dole na tlačítko "Uložit a pročistit cache" nebo jen "Uložit" a na následující stránce toto uložení potvrdit. Dokud to nepotvrdíte, tak se kód do souboru nezapíše. Protože se šablony cacheují, je nutné po přidání vlastního kódu pročistit cache (aby se kód zobrazil), nebo kliknout na tlačítko "Uložit a pročistit cache", které se postará o obojí.

U příkladů úprav fóra nebudu psát, že se kód má uložit, protože mi to připadá zbytečné[/rozbalto]
xxxxx
[color=green][size=150][b]Seznam úprav fóra pomocí událostí v šablonách[/b][/size][/color][anchor=seznam_uprav][/anchor][url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=975#seznam_uprav]#[/url]

[url=http://www.fotonomad.cz/forum1/viewtopic.php?f=75&t=555&p=976#zmena_sirky_fora]Změna šířky fóra[/url]
[url=http://www.fotonomad.cz/forum1/viewtopic.php?f=75&t=555&p=976#zmena_barvy_pozadi_fora]Změna barvy pozadí fóra na jinou barvu nebo proužky[/url]
[url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=978#zmena_loga]Změna loga[/url]
[url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=981#upravy_nazvu_a_popisu_fora]Úpravy názvu a popisu fóra[/url] (změna barvy textu, vycentrování textu na hlavičce)
[url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=994#velky_obrazek_na_pozadi_hlavicky_fora]Jeden větší obrázek na pozadí hlavičky fóra[/url]
[url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=1002#jednoduchy_ramecek_s_textem]Jednoduchý rámeček se textem[/url] (pod hlavičkou, jde použít např. na oznámení)
[url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=1003#vlastni_kod_jazykova_tlacitka]Tlačítka pro přepínání jazyků fóra[/url] (pro hosty, v hlavičce nebo v navigaci)
[url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=1241#p1241]Odkazy na předchozí a další téma[/url]
[url=http://www.fotonomad.cz/forum1/viewtopic.php?t=555&p=1257#p1257]Stylování BBKódů (příklad s BBKódem [uvoz]C[/uvoz] - kód na řádku)[/url]