Jak zastąpić style CSS w moim szablonie?

21

Kiedy korzystam z darmowego / komercyjnego szablonu Joomla z Template Club X / Y / Z, jaki jest najlepszy sposób na włączenie moich własnych stylów CSS?

johanpw
źródło
1
Dodaj arkusz stylów custom.css. jeśli twój szablon nie odbiera go automatycznie, możesz dodać go do swojego head.php, zwykle ścieżka to: templates / nazwa szablonu / tpls / blocks / head.php <link rel = "stylesheet" href = "/ templates / templatename / css / custom.css "type =" text / css "/>
Tony M

Odpowiedzi:

22

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.

johanpw
źródło
2
Do ogólnego użytku sugerowałbym użycie JHtml::_('stylesheet', 'path/to/file')zamiast tego, o addStyleSheetczym już się spierałem przy innej odpowiedzi :) Poza tym, cholernie dobra odpowiedź. Na pewno przyda się dla ludzi
Lodder
Dziękuję, @Lodder. Mam nadzieję, że te informacje mogą być przydatne dla ludzi. Jeśli chodzi o twoją sugestię, przeczytałem debatę. Jak można z JHtml::_tym korzystać $this->template?
johanpw
2
JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template . '/css/style.css');
Lodder
3
W rzeczywistości nowsze motywy rakiet używają MNIEJ. Wszystko, co musisz zrobić, to zrobić plik w folderze LESS o nazwie template-custom.less i umieścić w nim swój kod. Następnie możesz cieszyć się sztuczkami, które przynosi LESS. Warp 7 pozwala ci stworzyć swój własny „styl” w folderze stylów i faktycznie możesz umieścić plik custom.css w tym folderze (wewnątrz własnego folderu css). W ten sposób każdy styl może mieć swój własny niestandardowy CSS. Dzięki temu jest odporny na aktualizacje szablonów. Użycie domyślnego pliku custom.css oznacza, że ​​zostanie on zastąpiony przy każdej aktualizacji motywu.
Brian Peat
1
Świetna odpowiedź i bardzo przydatna! Inną opcją, którą możesz dodać do szablonów / ram, które nie zawierają przepisu na niestandardowe pliki CSS, jest użycie rozszerzenia strony trzeciej, takiego jak CSSConfig extensions.joomla.org/extensions/style-a-design/templating/... które jest przeznaczony do tego właśnie celu.
Neil Robertson,
7

Joomla 3.5+ (szablon Protostar)

Począwszy od Joomla 3.5, możesz utworzyć plik o nazwie user.cssi umieścić go w:

templates / protostar / css / user.css

Uwaga: nazwa pliku musi byćuser.css


Szablon protostar sprawdzi, czy:

  • plik istnieje
  • Rozmiar pliku to > 0.

Jeśli oba warunki zostaną spełnione, plik zostanie automatycznie zaimportowany.

Zobacz żądanie ściągnięcia na Github

Lodder
źródło
5

Helix Framework ( JoomShaper )

Kolejna struktura szablonów Joomla, która ułatwia przepływ pracy dostosowywania.

Szablony Helix Framework zapewniają również łatwy sposób dodawania własnych stylów za pomocą 2 wygodnych metod.

  1. W panelu sterowania szablonem w backendie znajduje się niestandardowe pole CSS. Tutaj możesz wpisać css, który zostanie dodany jako element stylu w sekcji head twoich stron i jako taki będzie miał pierwszeństwo przed innymi zewnętrznymi plikami css. Oczywiście ta opcja nie jest idealna, jeśli planujesz napisać kilka wierszy css, dlatego istnieje druga metoda.

  2. Podobnie jak wiele innych frameworków szablonów, Helix zapewnia również możliwość stworzenia własnego pliku custom.css. Wystarczy go utworzyć i umieścić w folderze css szablonu. Szablon go przeanalizuje i umieści w nagłówku twoich stron.

FFrewin
źródło
3

Johanpw wykonał bardzo dobrą robotę, udzielając odpowiedzi na swoje własne pytanie ... szczególnie w odniesieniu do zastąpienia css dla wielu komercyjnych szablonów.

Chciałbym tylko dodać tutaj moje dwa centy ...

Jak podkreślił Johanpw, tworzenie zastąpień CSS jest zalecaną praktyką. Przechowywanie własnego CSS w jednym pliku, o którym wiadomo, że nie zostanie usunięty ani zastąpiony po aktualizacji, jest niezbędny.

Należy o tym pamiętać w przypadku wszystkich rozszerzeń Joomla. Nie próbuj zmieniać podstawowego pliku css modułu lub komponentu. Zamiast tego lepiej spróbuj utworzyć własny plik template.css, załaduj go na końcu, a tam utwórz wszystkie niestandardowe style.

W przypadku, gdy szablon komercyjny nie umożliwia dodania zastąpienia css, możesz użyć takiego rozszerzenia: Dodaj niestandardowy CSS , który dokładnie na to pozwala. Aby utworzyć niestandardowy plik zastępowania css i załadować go na końcu.

Inną opcją, którą często robię w witrynach, którymi zarządzam, jest modyfikacja szablonu i dodanie własnego linku do pliku custom.css , tuż przed zamykającym tagiem head szablonu. Jest to niewielka, łatwa do zapamiętania i przywrócenia modyfikacja, z którą mogę sobie poradzić, gdy pojawi się aktualizacja szablonu.

FFrewin
źródło
3

Gantry 5 (RocketTheme)

Gantry 5 to najnowsza wersja popularnego frameworka szablonów i zapewnia wiele nowych funkcji i możliwości.

Jeśli chodzi o przesłonięcia CSS, istnieje duża elastyczność i opcje.

Biorąc motyw wodoru, który jest wydany jako standardowy szablon Gantry 5, udostępnia folder o nazwie niestandardowy.

Ten folder jest przeznaczony dla użytkownika do umieszczenia własnych plików / przesłonięć dla frameworka / szablonu portalu (nie należy mylić z przesłonięciami szablonu Joomla, które pozostają w folderze template / html). Możesz tam umieścić plik custom.css. Następnie za pomocą panelu administracyjnego Gantry Template możesz dostosować układ szablonów i użyć niestandardowej cząsteczki CSS / JS Atom (nowa funkcja gantry 5), aby dodać custom.css do szablonu. Gantry 5 zapewnia również tak zwane łącza strumieniowe (takie jak skróty), aby łatwo połączyć plik custom.css.

Więc z wnętrza cząsteczki atomu połączyłbyś ją za pomocą:

gantry-theme://custom/thing.css

gantry-theme://Skrót, zawsze odnoszą się do bieżącego folderu szablonu bramowe.

Korzystanie z tego podejścia jest skutecznym sposobem dodawania pliku custom.css dla określonych konturów szablonu szablonu gantry5.

Drugim podejściem, które działa globalnie dla całego szablonu portalu, jest dodanie pliku custom.scss wewnątrz:

template_directory/custom/scss/custom.scss

W ten sposób gantry5 zawsze ładuje i kompiluje ten plik scss, a wszelkie zastosowane reguły css zastąpią domyślne reguły szablonu.

W pliku scss wszystko jest w porządku, używając SCSS lub po prostu css. Kompilator jest w stanie skompilować oba.

FFrewin
źródło