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?
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.
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
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?
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.
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.
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.
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.
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.
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.
Odpowiedzi:
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.
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 , doindex.php
pliku 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.(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:!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
!important
do 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 2
szablonu, domyślnym katalogiem szablonów jest/templates/rt_afterburner2/
. Dodaj plik o nazwiert_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.css
plikiem 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.css
plikiem w podkatalogu / css /. Pamiętaj jednak, że ten plik nie jest domyślnie ładowany, musisz aktywowaćOverride CSS
na karcie Ustawienia zaawansowane w ustawieniach szablonu.Joomla Shine
Utwórz niestandardowy plik CSS w podfolderze / css / swojego szablonu, np.
custom.css
I podaj nazwę pliku naExtensions -> Templates -> [template name] -> SEO & System -> Custom CSS/JS File(s)
.T3 Framework
Szablony oparte na T3 Framework mogą / mogą nie zawierać
custom.css
pliku 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.css
plik znaleziony w podfolderze / css /. Dodatkowe pliki CSS można załadować, dodającdo pliku
/layouts/template.config.php
.źródło
JHtml::_('stylesheet', 'path/to/file')
zamiast tego, oaddStyleSheet
czym już się spierałem przy innej odpowiedzi :) Poza tym, cholernie dobra odpowiedź. Na pewno przyda się dla ludziJHtml::_
tym korzystać$this->template
?JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template . '/css/style.css');
Joomla 3.5+ (szablon Protostar)
Począwszy od Joomla 3.5, możesz utworzyć plik o nazwie
user.css
i umieścić go w:Uwaga: nazwa pliku musi być
user.css
Szablon protostar sprawdzi, czy:
> 0
.Jeśli oba warunki zostaną spełnione, plik zostanie automatycznie zaimportowany.
Zobacz żądanie ściągnięcia na Github
źródło
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.
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.
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.
źródło
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.
źródło
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://
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:
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.
źródło