Češtiny pro phpBB

Alternativní překlad phpBB a překlady rozšíření
https://www.fotonomad.cz/forum1/

Příklady úprav vzhledů fóra bez editace originálních šablon vzhledů

https://www.fotonomad.cz/forum1/viewtopic.php?t=555

Stránka 1 z 1

Příklady úprav vzhledů fóra bez editace originálních šablon vzhledů

Odeslal: 27 Pro 2014 20:00
od leschek
Příklady úprav vzhledů fóra bez editace originálních šablon vzhledů

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í „události“ („eventy“) v šablonách.

„Události“ („eventy“) v šablonách

„Události“ („eventy“) slouží k tomu, aby se při instalaci rozšíření nemuseli upravovat originální soubory fóra. „Události“ jsou něco jako spouštěče nebo odkazy - když se zpracovává kód souboru a narazí se na „událost“, tak počítač zpracuje kód, na který odkazuje a pak pokračuje dál. „Události“ 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 „událostem“ 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ě:

<!-- EVENT overall_header_body_before -->

Tyto řádky vždy začínají stejně označením <!-- EVENT, za kterým je název „události“. „Události“ 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ě „událost“ 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 styles/vas_vzhled/template/overall_header.html je velmi používaná událost <!-- EVENT overall_header_stylesheets_after -->, pomocí které se dá změnit stylování fóra (to co je v css souborech ve složce styles/vas_vzhled/theme), a která odkazuje na soubor ext/autor_rozsireni/nazev_rozsireni/styles/vas_vzhled/template/event/overall_header_stylesheets_after.html. Takhle to funguje v případě, že tento soubor existuje - pokud neexistuje, tak „událost“ nic nespustí.

Rozšíření „Insert template code“

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

Rozšíření můžete stáhnout na GitHubu.

Instalace - Pokud nepoužíváte rozšíření „Upload Extension“ („Nahrát rozšíření“), tak nahrajte soubory rozšíření do složky ext/marttiphpbb/inserttemplatecode a povolte ho v „Administraci“ - „Přizpůsobení“ - „Správa rozšíření“ - „Správce rozšíření“.

Po instalaci rozšíření se podívejte do složky ext/marttiphpbb/inserttemplatecode/style/all/template/event, ve které už nějaké „soubory událostí“ 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 „událost“, na základě které si v této složce vytvoříte nový html „soubor události“ (se stejným názvem jako má „událost“).

Některé „soubory událostí“ 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 ext/marttiphpbb/inserttemplatecode/style/all/template/ vlastní soubory (pozor na to, že to není stejná složka jako ta, kam se dávají „soubory událostí“ v šablonách, ale její nadřazená složka). Na tyto soubory musíte odkázat v hlavních „souborech událostí“ tímto kódem <!-- INCLUDE muj_soubor.html --> (muj_soubor.html 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 seznam různých úprav fóra provedených pomocí rozšíření Insert template code.

xxxxxx
 
Originální text pro rozšíření Custom Code, které od verze phpBB 3.1.6 nefunguje
Příklady úprav fóra pomocí rozšíření „Custom code“ („Vlastní kód“)

Pomocí rozšíření „Custom code“ („Vlastní kód“) 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 tady.

V tomto tématu najdete příklady úprav fóra pomocí rozšíření „Custom code“ („Vlastní kód“).

Přidání vlastního souboru #

Všechny soubory rozšíření, do kterých se přidává vlastní kód, jsou uloženy ve složce store/customcode/. 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).

357

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

Asi na tom moc nezáleží, ale já si pro přehlednost do názvu souborů přidávám předponu muj_, protože mám pocit, že se soubory ve „Správě souborů“ ř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:

moje_uprava_hlavicky_prosilver.html

mi říká, že se v souboru nachází můj kód, kterým nějak upravuju hlavičku fóra ve vzhledu prosilver.

Odkaz na vlastní soubor #

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:

Kód: Vybrat vše

<!-- INCLUDE ../../../../../../store/customcode/muj_soubor.html -->
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:

Kód: Vybrat vše

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
xxxxxx

Úvod do podmínek v šablonách #

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ě zobrazeného vzhledu, jazyka uživatele, zobrazené stránky nebo jen pro určité uživatele.
Podmínky se tvoří pomocí proměnných, jejichž seznam (spíš je to rozcestník) naleznete tady.

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

Kód: Vybrat vše

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

Kód: Vybrat vše

<!-- IF not PROMĚNNÁ -->
vlastní kód
<!-- ENDIF -->
V tomto případě bude naopak zobrazen vlastní kód všude mimo to, co je v proměnné.
Např. <!-- IF not S_USER_LOGGED_IN --> - 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:

Kód: Vybrat vše

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

Kód: Vybrat vše

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

Kód: Vybrat vše

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

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

Kód: Vybrat vše

<!-- 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 -->
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 <!-- ENDIF -->. To je dobrý si pamatovat, protože pokud na <!-- ENDIF --> 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ř.:

Kód: Vybrat vše

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

Kód: Vybrat vše

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

Důležité: Nezapomeňte na ukončovací <!-- ENDIF --> (a počáteční IF) - 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.

Vlastní kód jen v určitém vzhledu #

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:

Kód: Vybrat vše

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

Kód: Vybrat vše

<!-- 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 -->

Vlastní kód na základě jazyka uživatele #

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:

Kód: Vybrat vše

<!-- IF S_USER_LANG == 'cs-alt' -->
vlastní kód
<!-- ENDIF -->
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:

Kód: Vybrat vše

<!-- 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 -->
Kódy jazyků zjistíte v jazykovém souboru language/vas_jazyk/common.php, ve kterém najdete (na skoro začátku souboru) řádek 'USER_LANG' a za šipkou je označení, které v podmínce použijete.

Vlastní kód na určité stránce #

Vlastní kód jde zobrazit i v závislosti na zobrazené stránce, takže např. uživatel, který je na obsahu fóra (index.php) vlastní kód uvidí a druhý uživatel, který čte příspěvky (viewtopic.php) 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é SCRIPT_NAME závislost na názvu skriptu (bez přípony). Vypadá to nějak takhle:

Kód: Vybrat vše

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

Kód: Vybrat vše

<!-- IF SCRIPT_NAME != 'index' -->
vlastní kód
<!-- ENDIF -->
Další skripty (ne všechny) jsou:
  • ucp - uživatelský panel
     
  • memberlist - seznam členů
     
  • viewforum - seznam témat
     
  • viewtopic - téma
     
  • mcp - moderátorský panel
     
  • faq -FAQ
Některé z těchto skriptů obsahují i další podstránky, které mají vlastní parametr. Asi nejvíc je to vidět na skriptu ucp, kde může být:
  • ucp.php?mode=register - registrační stránky
     
  • ucp.php?mode=login - přihlašovací stránka
     
  • ucp.php?i=ucp_pm - soukromé zprávy v uživatelském panelu
Rozšíření Vlastní kód na to myslí a přidává k proměnné SCRIPT_NAME i vlastní proměnnou CUSTOMCODE_PARAM_<parametr>, 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:

Kód: Vybrat vše

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

Kód: Vybrat vše

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

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é S_FORUM_ID za kterou se doplní ID fóra, které jde zjistit zadresy fóra, kde je parametr f= s ID fóra. Např. na následující adrese:

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

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

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

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:

Kód: Vybrat vše

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

Kód: Vybrat vše

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

Vlastní kód jen pro určité uživatele #

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

Kód: Vybrat vše

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

Kód: Vybrat vše

<!-- IF not S_USER_LOGGED_IN -->
vlastní kód
<!-- ENDIF -->
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:

Kód: Vybrat vše

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

Kód: Vybrat vše

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

Komentáře k souborům #

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:

Kód: Vybrat vše

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

Poznámky k příkladům úprav fóra #

xxxxxx
 
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 vlastni_soubor.html, 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: do souboru overall_header_stylesheets_after.html vložte následující kód:

Kód: Vybrat vše

<style>
nějaký kód
</style>
bude to znamenat, že můžete vložit svůj kód přímo do výše zmíněného souboru overall_header_stylesheets_after.html, nebo si můžete vytvořit nový soubor, do kterého kód vložíte a pak výše zmíněného do souboru napíšete odkaz na vámi vytvořený soubor.[/i]
xxxxx
 
  1. Kód se přidává do souborů událostí ve složce ext/marttiphpbb/inserttemplatecode/style/all/template/event/soubor_udalosti.html. 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 tady. 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 overall_header_navbar_before.html patří k události <!-- EVENT overall_header_navbar_before --> v souboru overall_header.html (všimněte si začátku názvu souboru a události).
     
  2. Pokud budete chtít do jednoho souboru přidat několik úprav stylů za sebou nemusíte psát:

    Kód: Vybrat vše

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

    Kód: Vybrat vše

     <style>
nějaký kód
nějaký jiný kód
</style>
  3. 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 použijete podmínku, aby se kód zobrazil pouze v určitém vzhledu.
xxxxx
 
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é
xxxxx
Seznam úprav fóra pomocí událostí v šablonách#

Změna šířky fóra
Změna barvy pozadí fóra na jinou barvu nebo proužky
Změna loga
Úpravy názvu a popisu fóra (změna barvy textu, vycentrování textu na hlavičce)
Jeden větší obrázek na pozadí hlavičky fóra
Jednoduchý rámeček se textem (pod hlavičkou, jde použít např. na oznámení)
Tlačítka pro přepínání jazyků fóra (pro hosty, v hlavičce nebo v navigaci)
Odkazy na předchozí a další téma
Stylování BBKódů (příklad s BBKódem „C“ - kód na řádku)

Re: Příklady úprav fóra pomocí rozšíření "Custom code" ("Vlastní kód")

Odeslal: 27 Pro 2014 20:13
od leschek
Změna šířky fóra#

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

Kód: Vybrat vše

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

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

Kód: Vybrat vše

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

Aktualizace: bez vlastnosti margin: 0 auto; nezůstane fórum při zmenšení stránky ve středu stránky.

Změna barvy pozadí fóra #

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

358

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

Kód: Vybrat vše

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

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

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

Kód: Vybrat vše

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

359

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

Kód: Vybrat vše

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

360

Zdroj k proužkům: css-tricks.com

Jestli chcete něco šílenějšího, můžete použít kódy z CSS3 Patterns Gallery, 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 overall_header_stylesheets_after.html vložíte např. takovýhle kód:

Kód: Vybrat vše

<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>
který vytvoří následující pozadí:

361

Docela zajímavý je použít kódování base64, 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ř.:

Kód: Vybrat vše

/* pozadi fora */
html, body {
background:url(
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAANklEQVQYlWNgSJ7yH4aFWraiYGQ5BnRFuPgM6IK42AzY
JLAqxqUIXTFpComymmjPkBQ8xAQ4AD4u18nImQKoAAAAAElFTkSuQmCC
) repeat;
}
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):

372

Pro vytvoření obrázku (o velikosti 10x10 px) jsem použil Patternify css generátor vzorů, 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.

Re: Příklady úprav fóra pomocí rozšíření "Custom code" ("Vlastní kód")

Odeslal: 29 Pro 2014 17:34
od leschek
Změna loga #

362 363

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

Kód: Vybrat vše

/* Global imageset items */
.imageset.site_logo {
	background-image: url("./images/site_logo.gif");
	padding-left: 149px;
	padding-top: 52px;
}
kde je ve vlastnosti background-image nastavená cesta k obrázku a vlastnosti padding-left a padding-top určují plochu (šířku a výšku), na které bude obrázek zobrazen a která je klikací.
  • Poznámka: padding-left a padding-top 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 padding-left a padding-top 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ý:

    364
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 images/.

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

Kód: Vybrat vše

<style>
/* Změna loga */
.imageset.site_logo {
background-image: url("{ROOT_PATH}/images/logo-nove-pos.png");
padding-left: 270px;
padding-top: 95px;
}
</style>
kde:
  • background-image: url("{ROOT_PATH}/images/logo-nove-pos.png"); - tady je cesta k mému logu. Můžete napsat buď absolutní cestu k obrázku, nebo použít {ROOT_PATH} + zbytek cesty k obrázku od kořenového adresáře fóra.
     
  • padding-left: 270px; - nastavení šířky prostoru pro logo (moje logo je 265px a já nastavil o něco víc).
     
  • padding-top: 95px; - 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 padding-top 76px a na druhém 95px):
365 366

Re: Příklady úprav fóra pomocí rozšíření "Custom code" ("Vlastní kód")

Odeslal: 04 Led 2015 15:39
od leschek
Úpravy názvu a popisu fóra #

368 369

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

Kód: Vybrat vše

<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>
Celý tento kód se nachází ještě v divu <div class="headerbar">, což znamená, že název a popis fóra jde změnit několika způsoby s použitím identifikátoru site-description nebo třídy headerbar.

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

Kód: Vybrat vše

<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>
kde:
  • #site-description h1 určuje, že se úpravy týkají názvu fóra
     
  • #site-description p určuje, že se úpravy týkají popisu fóra
     
  • color: #CADCEB; je barva textu (u názvu i u popisu fóra je v mém příkladu stejná barva)
     
  • font-variant: small-caps; 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).
     
  • font-weight: bold; zobrazí tučný text (v názvu fóra)
     
  • letter-spacing: 1px; zvětší mezery mezi písmeny (v názvu fóra)
     
  • font-style: italic; znamená, že u popisu fóra bude použita kurzíva
     
  • font-size: 1.2em; určuje velikost písma (v tomto případě zvětší popis fóra)
     
  • text-align: center; 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čí.
     
  • padding-left: 350px; 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ů.
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.

Re: Příklady úprav fóra pomocí rozšíření "Custom code" ("Vlastní kód")

Odeslal: 29 Led 2015 23:18
od leschek
Velký obrázek na pozadí hlavičky fóra #

385 386

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

Kód: Vybrat vše

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

Kód: Vybrat vše

.headerbar {
	background: transparent none repeat-x 0 0;
	margin-bottom: 4px;
	padding: 5px;
	border-radius: 7px;
}
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 overall_header_stylesheets_after.html vložte následující kód:

Kód: Vybrat vše

<style>
.headerbar {
background-image: url("{ROOT_PATH}/images/hlavicky/bg_header.jpg");
height: 173px;
}
</style>
kde:
  • background-image: url("{ROOT_PATH}/images/hlavicky/bg_header.jpg"); 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.
     
  • height: 173px; 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ý:

    387

    Zjistěte si výšku obrázku, odečtěte od ní dvojnásobek hodnoty padding ze souboru styles/prosilver/theme/common.css 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 height. Po zadání správné výšky vypadá hlavička takhle:

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

Kód: Vybrat vše

background-repeat: no-repeat;

Re: Příklady úprav fóra pomocí rozšíření "Custom code" ("Vlastní kód")

Odeslal: 05 Ún 2015 20:53
od leschek
Jednoduchý rámeček s textem pod hlavičkou fóra #

390 391

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í Board Announcements. 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 overall_header_content_before.html vložit následující kód:

Kód: Vybrat vše

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

390

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

391

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

Kód: Vybrat vše

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

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

Kód: Vybrat vše

<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>
kde:
  • background-color: #FF6B92; - barva pozadí
  • color: #700034; - barva textu
  • border: 4px double #700034; - rámeček, který bude dvojitý (double) a bude mít šířku 4px a barvu #700034
  • .muj_navbar_ramecek:hover - 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) :hover
Nastylovaný rámeček ovšem nebude tak univerzální jako ten předchozí, takže je dobré přidat podmínky, aby se zobrazil na základě použitého vzhledu a nastylovat rámeček pro každý vzhled jinak.

Re: Příklady úprav fóra pomocí rozšíření "Custom code" ("Vlastní kód")

Odeslal: 06 Ún 2015 20:10
od leschek
Tlačítka pro přepnutí jazyka (pro hosty) #

392 393

V phpBB 3.1.x jde pomocí řetězce ?language=jazyk změnit jazyk fóra (více zde. 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 overall_header_content_before.html vložte následující kód:

Kód: Vybrat vše

<!-- 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 -->
kde je několik podmínek:
  • <!-- IF not S_USER_LOGGED_IN --> - 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. (Více o podmínkách založených na uživatelích)
  • <!-- IF S_USER_LANG == 'cs-alt' --> - 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é. (Více o podmínkách založených na jazyku fóra)
  • <!-- ELSEIF S_USER_LANG == 'en-gb' --> - stejné jako výše, ale tlačítka budou zobrazena, pokud bude fórum anglicky.
  • <!-- ELSE --> - 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 <!-- ELSEIF S_USER_LANG == 'cs-nef' -->, ale připadá mi to docela zbytečný.
  • <!-- ENDIF --> a <!-- ENDIF --> - uzavírají podmínku pro přihlášené uživatele a pro jazyky.
a kód pro tlačítka, který se třikrát víceméně stejně opakuje:

Kód: Vybrat vše

<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>
a který jde ještě rozložit na dvě skoro stejná tlačítka:

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

Kde:
  • <a></a> - html tag pro odkaz.
  • class="button" - 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á).
  • href="{U_INDEX}?language=en" - 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.
  • title="English" - popis odkazu v bublině, která se objeví po najetí myší nad tlačítko.
  • en - text tlačítka
Tato dvě tlačítka jsou vložené do kódu <span class="jazykove_tlacitko"></span> proto, abych s nima mohl manipulovat jako s jednou položkou a ne dvěma tlačítkama. Třída .jazykove_tlacitko 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 .jazykove_tlacitko jsem nadefinoval v souboru overall_header_stylesheets_after.html:
Kód: Vybrat vše
<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>
kde:
  • .jazykove_tlacitko - je třída, pomocí které je nadefinovaná poloha tlačítek
  • float: right; - posune tlačítka doprava
  • margin: -109px 12px 0 0; - 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.

    392
  • <!-- IF T_TEMPLATE_NAME == 'ravus' --> - 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 margin: -36px 140px 0 0;) do druhého řádku navigace. (Více o podmínkách založených na vzhledu fóra)

    393
  • <!-- ELSEIF T_TEMPLATE_NAME == 'DVGFX' --> - stejné jako předchozí, ale pro jiný vzhled
  • <!-- ENDIF --> - ukončení podmínky
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 overall_header_stylesheets_after.html přidal (k předchozímu kódu před řádek </style>) následující kód :

Kód: Vybrat vše

@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 -->
      }
}
Který upravuje třídu .jazykove_tlacitko 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 <!-- IF T_TEMPLATE_NAME == 'prosilver' -->) pomocí vlastnosti margin. Na širších mobilních zařízeních jsou tlačítka v hlavičce:

394

a na užších v navigaci:

395

Re: Příklady úprav vzhledů fóra bez editace originálních šablon vzhledů

Odeslal: 02 Ún 2017 00:56
od leschek
Odkazy na předchozí a další téma

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í „Previous / Next topic“, 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 viewtopic_body_pagination_top_after.html, který si musíte vytvořit.

Jednoduché odkazy na předchozí a další téma

474

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

Kód: Vybrat vše

<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>
Kde:

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

class="prevnext" je třída pro css stylování.

title="{L_VIEW_NEXT_TOPIC}" 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.

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

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

Tlačítkové odkazy na předchozí a další téma

475

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

Kód: Vybrat vše

<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>
Tentokrát jsem přidal do spanu třídu class="prevnext", 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 class="button", 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 {L_VIEW_PREVIOUS_TOPIC} a {L_VIEW_NEXT_TOPIC} nahradit nějakýma šipkama např. « a », což vytvoří následující tlačítka:

476

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

Složitější tlačítkové odkazy na předchozí a další téma

477

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

Kód: Vybrat vše

<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>
kde:

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

<i class="icon fa-angle-double-left" aria-hidden="true"></i> a <i class="icon fa-angle-double-right" aria-hidden="true"></i> - 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 (« a »).

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

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

pointer-events: none; - 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é.

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

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

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

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

.next-topic { - 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 margin-left: -5px;.

Re: Příklady úprav vzhledů fóra bez editace originálních šablon vzhledů

Odeslal: 17 Črv 2017 23:15
od leschek
Stylování BBKódů

Pomocí rozšíření „Insert Template Code“ 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:

489
490

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

Použití BBKódu:

Kód: Vybrat vše

[c]{TEXT}[/c]
Nahrazené HTML:

Kód: Vybrat vše

<code class="bbcode-c">{TEXT}</code>
Nápověda:

Kód: Vybrat vše

Kód na řádku: [c]váš kód[/c]
Určitě jste si všimli, že jsem v poli „Nahrazené HTML“ vytvořil novou CSS třídu „bbcode-c“, pomocí které budu definovat v souboru overall_header_stylesheets_after.html vzhled BBKódu pro různé vzhledy:

Kód: Vybrat vše

/* 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 -->
Kde:
  • /* BBKód C */ - komentář, abych věděl čeho se následující stylování týká
  • .bbcode-c - výše zmíněná třída.
  • <!-- IF T_TEMPLATE_NAME == 'ravus' --> - podmínka, aby následující kód platil jen pro vzhled „ravus“
  • background-color - barva pozadí rámečku s kódem
  • color - barva textu (tedy kódu)
  • border: 1px solid; - jednopixelový rámeček
  • border-color: #4F4F4F; - barva tohoto rámečku
  • <!-- ELSE --> - podmínka, aby následující kód platil pro ostatní vzhled, které nejsou „ravus“. Vlastnosti mají nadefinované jiné barvy.
  • padding: 0 2px; - mezera před a za textem (aby se nedotýkal rámečku)
  • .bbcode-c:hover - 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.
Všechny časy jsou v UTC+02:00
Stránka 1 z 1

Založeno na phpBB® Forum Software © phpBB Limited

Překlad Leschek - FotoNomad.cz