Styly pro úplné začátečníky

22.02.2019 03:25 2916 zhlédnutí
Autor článku
Ernst
Článek uživatele

Tento článek je určen pro ty, kteří umí ovlivnit vzhled webu pouze nastavením v administraci webu. Tedy v šabloně, v parametrech (možnostech) komponent, modulů a pluginů. Ale existuje i poměrně jednoduchá možnost, jak si web přizpůsobit k obrazu svému pomocí stylů. Naučíme se zde, jak styly online testovat a jak a kam si je správně uložit.

Soubory stylů (*.CSS) jsou nejčastěji uloženy v adresáři /templates/protostar/css/ (místo protostar si napište váš název adresáře šablony). Hlavní soubor stylů se většinou jmenuje template.css. Můžeme úpravy stylů dělat v tomto souboru, ale doporučuji nedělat změny přímo ve stávajícím kódu, ale dopisovat je s patřičným komentářem na konec tohoto souboru. Důrazně ale doporučuji, dělat změny v souborech, které jsou pro to určeny výrobcem šablony. Obvykle se jmenují - custom.css,override.css nebo user.css (to v případě šablony protostar). Který máte použít naleznete v dokumentaci ke své šabloně, ale některé šablony bohužel tyto uživatelské soubory stylů nepodporují a musíte úpravy psát do hlavního css souboru, jak jsem psal výše.

Téměř vždy platí, že údaje, které jsou napsány poslední platí.

Můžete se tedy potkat se zápisem:

span.site-title {color: red;}
.
.
span.site-title {color: blue;}

a nadpis bude modrý.

Jak tyto soubory editovat najdete v mém článku Práce se soubory na webu pro začátečníky.

Ani jednotlivé parametry a jejich hodnoty zde nebudu popisovat, protože to bych nosil dříví do lesa. Jejich podrobný popis včetně příkladů naleznete zde.

Na videu vám ukáži jak online testovat nastavení stylů. Budu to ukazovat na prohlížeči Chrome, ale na ostatních prohlížečích je to obdobné.

Veškeré úpravy budu předvádět na webu demonstračním webu.

Informace o autorovi Ernst

Líbil se vám článek?
(5 hlasů)
Jednostránková pokladna ve Virtuemart - OPC
Předchozí článek autora Ernst  22.12.2018 1198
Jednostránková pokladna ve Virtuemart - OPC
Článek uživatele
Ti z vás, jenž vytváříte eshop pomocí komponenty Virtuemart, se stále setkáváte s požadavkem...

Štítky: Návod

22.02.2019 03:25 2917 zhlédnutí
Začínáme s Joomla!
Styly pro úplné začátečníky
Styly pro úplné začátečníky

Tento článek je určen pro ty, kteří umí ovlivnit vzhled webu pouze nastavením v administraci webu....

22.12.2018 05:50 1198 zhlédnutí
Vývojářské tipy
Jednostránková pokladna ve Virtuemart - OPC
Jednostránková pokladna ve Virtuemart - OPC

Ti z vás, jenž vytváříte eshop pomocí komponenty Virtuemart, se stále setkáváte s požadavkem...

22.11.2018 13:19 1948 zhlédnutí
Začínáme s Joomla!
VIDEO: Práce se soubory na webu pro začátečníky
VIDEO: Práce se soubory na webu pro začátečníky

Tento článek je určen těm, kdo neznají protokol FTP nebo neznají přihlašovací údaje pro FTP na...

19.11.2018 09:56 1632 zhlédnutí
Vývojářské tipy
Košík Virtuemart - motivátor k nákupu - pro mírně pokročilé adminy
Košík Virtuemart - motivátor k nákupu - pro mírně pokročilé adminy

Eshop rozšíření Virtuemart zná asi většina z vás. Pro Virtuemart je k dispozici nespočet dalších...

3 komentáře

Jenda
napsal(a) Jenda 05. bře 2020 15:27

Díky moc za tento článek, pomohlo mi to trochu odhalit jak pár věcí v základní šabloně změnit.
Šablona Protostar obsahuje asi 29 různých souborů, změny jsem přepisoval v souboru template.css, který je asi "ten hlavní". Takže jsem třeba v řádku č. 7195 změnil celkem základní požadavek - barvu vnitřního pozadí stránek, v řádku č. 2158 barvu pozadí modulů a v řádku 672 zas výšku nabídky.

Jinak obecně bych řekl, jako začátečník, že struktura šablon je extrémně složitá. Nějakého programátora bych se zeptal, jestli je na naprogramování šablony nutné napsat třeba 10 000 řádků zdrojového kódu, aby to fungovalo. Kdyby aspoň ty soubory šablony byly nějak srozumitelně pojmenovány...díky za článek, v jistém smyslu jde pomocí něj tyto složitosti trochu "obejít".

Odkaz Komentáře
Linelabcz
napsal(a) Linelabcz 05. bře 2020 18:04

Zdravím, jakékoliv změny které provedete v základních souborech šablony Protostar budou při nejbližší aktualizaci Joomla smazány. Pro tento účel si musíte vytvořit soubor user.css a ten nahrát do adresáře css.

Odkaz Komentáře
Jan Šrámek
napsal(a) Jan Šrámek 05. bře 2020 21:43

Aha, tak jsem ho tedy vytvořil a ono mi to opravdu funguje! :-) děkuji za radu, super.

Odkaz Komentáře

Nové články

Související články