Dlaczego warto stosować przesłonięcia CSS?
Zawsze dobrym pomysłem jest oddzielenie stylów CSS od istniejących stylów szablonów, jeśli używasz gotowego szablonu Joomla.
- Łatwiej jest utrzymać
- Twoje zmiany nie zostaną utracone, jeśli zaktualizujesz szablon
- Możesz łatwo skopiować / przenieść modyfikacje do innego szablonu lub innej strony.
Jak działa przesłonięcie CSS?
CSS oznacza „Kaskadowe arkusze stylów”, „Kaskadowanie” w tym kontekście, co oznacza, że ponieważ więcej niż jedna reguła arkusza stylów może mieć zastosowanie do określonego fragmentu HTML, stosowana reguła jest wybierana poprzez kaskadowe przejście od bardziej ogólnych reguł do konkretnej wymaganej reguły ( wybrana jest najbardziej szczegółowa reguła) lub na podstawie kolejności reguł dla dowolnego elementu (wybrana jest ostatnia znaleziona reguła).
Dopóki dostosowany plik CSS jest ładowany po domyślnych plikach CSS szablonów, możesz dodawać własne style, aby w razie potrzeby zastąpić określone elementy (istnieją pewne wyjątki, więcej na ten temat poniżej).
Ogólne zastosowanie
Aby załadować niestandardowy arkusz stylów do <head>znacznika Joomla , do index.phppliku szablonu ( YOURDOMAIN.COM/templates/yourtemplate/index.php) można dodać następujący kod , tuż przed </head>znacznikiem końcowym , aby mieć pewność, że plik zostanie załadowany jako ostatni.
JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template . '/css/custom.css');
(Plik CSS może mieć dowolną nazwę i nie musi znajdować się w podfolderze / css /, ale w ten sposób jest czystszy.)
Możliwe jest również dodanie normalnego <link>tagu, ale jest to mniej elastyczne niż wyżej wspomniana opcja:
<link rel="stylesheet" href="/joomla//templates/mytemplate/css/custom.css" type="text/css" />
!Ważny
Niektóre rozszerzenia mogą ładować swoje style CSS po twoim (lub nawet dodawać style bezpośrednio w pliku index.php), zastępując w ten sposób twoje przesłonięcia. Zwykle można to rozwiązać, dodając !importantdo swoich stylów, np.h1{color:red!important;}
Wykorzystanie w różnych ramach
Teraz część zabawy: wiele ram szablonów ma możliwość, że użytkownicy będą chcieli wprowadzić zmiany w swoich szablonach, dodając w ten sposób łatwy sposób uwzględnienia zastąpień CSS. Oto niektóre z zastosowanych metod:
Suwnica bramowa 4
Szablony RocketTheme są obsługiwane przez Gantry Framework, a dostosowany plik CSS zostanie załadowany automatycznie, jeśli zostanie znaleziony. Plik CSS musi być umieszczony w /templates/yourtemplate/css/folderze, a nazwa musi mieć nazwę YOURTEMPLATEFOLDER-custom.css.
Przykład: jeśli używasz ich darmowego Afterburner 2szablonu, domyślnym katalogiem szablonów jest /templates/rt_afterburner2/. Dodaj plik o nazwie rt_afterburner-custom.css(ostrożnie z podkreśleniem i łącznikiem) do podfolderu / css /, a zostanie on automatycznie załadowany przez środowisko Gantry.
Kształt 5
Szablony Shape 5 są dostarczane z pustym custom.cssplikiem w podkatalogu / css / twojego szablonu. Po prostu dodaj swoje style do tego pliku, a zostaną one uwzględnione w twoim układzie.
Gavick Pro
Szablony Gavick Pro są dostarczane z pustym overrides.cssplikiem w podkatalogu / css /. Pamiętaj jednak, że ten plik nie jest domyślnie ładowany, musisz aktywować Override CSSna karcie Ustawienia zaawansowane w ustawieniach szablonu.
Joomla Shine
Utwórz niestandardowy plik CSS w podfolderze / css / swojego szablonu, np. custom.cssI podaj nazwę pliku na Extensions -> Templates -> [template name] -> SEO & System -> Custom CSS/JS File(s).
T3 Framework
Szablony oparte na T3 Framework mogą / mogą nie zawierać custom.csspliku w podfolderze / css / twojego szablonu (po prostu utwórz go, jeśli go nie ma), ale jeśli jest obecny, plik zostanie załadowany po dowolnym innym pliku CSS.
Warp Framework
Szablony oparte na Warp Framework automatycznie ładują custom.cssplik znaleziony w podfolderze / css /. Dodatkowe pliki CSS można załadować, dodając
$this->warp->stylesheets->add('css:yourcssfile.css');
do pliku /layouts/template.config.php.