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.
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".
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.
Aha, tak jsem ho tedy vytvořil a ono mi to opravdu funguje! :-) děkuji za radu, super.