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.
