Neden CSS geçersiz kılmaları kullanıyorsun?
Önceden oluşturulmuş bir Joomla şablonu kullanıyorsanız, CSS stillerinizi mevcut şablon stilinden ayrı tutmak her zaman iyi bir fikirdir.
- Bakımı daha kolay
- Şablonu yükseltirseniz değişiklikleriniz kaybolmaz
- Değişiklikleri başka bir şablona veya başka bir siteye kolayca kopyalayabilir / taşıyabilirsiniz.
CSS geçersiz kılmalar nasıl çalışır?
CSS, bu bağlamda "Basamaklı Stil Sayfaları", "Basamaklı" anlamına gelir; bu, belirli bir HTML parçasına birden fazla stil sayfası kuralının uygulanabilmesi nedeniyle, kullanılan kuralın, daha genel kurallardan gerekli olan belirli kurallara göre basamaklandırılarak seçilmesi anlamına gelir. en spesifik kural seçilir) veya herhangi bir elemanın kural sırasına göre (bulunan son kural seçilir).
Özelleştirilmiş CSS dosyanız varsayılan şablon CSS dosyalarından sonra yüklendiği sürece, belirli öğeleri gerektiği gibi geçersiz kılmak için kendi stillerinizi ekleyebilirsiniz (aşağıda bunun dışında bazı istisnalar vardır).
Genel kullanım
Joomla <head>etiketine özel bir stil sayfası yüklemek için, index.phpdosyanızın YOURDOMAIN.COM/templates/yourtemplate/index.phpen son </head>yüklenmesini sağlamak için bitiş etiketinden hemen önce şablonunuzun dosyasına ( ), aşağıdaki kod eklenebilir .
JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template . '/css/custom.css');
(CSS dosyasının herhangi bir adı olabilir ve / css / alt klasöründe olması gerekmez, ancak bu şekilde daha temizdir.)
Normal bir <link>etiket eklemek de mümkündür , ancak bu yukarıda belirtilen seçenekten daha az esnektir:
<link rel="stylesheet" href="/joomla//templates/mytemplate/css/custom.css" type="text/css" />
!Önemli
Bazı uzantılar sizinkinden sonra CSS stillerini yükleyebilir (veya doğrudan index.php dosyasına stiller ekleyebilir), böylece geçersiz kılmaları geçersiz kılabilir. Bu genellikle !importantstillerinize ekleyerek çözülebilir , örneğin.h1{color:red!important;}
Farklı çerçevelerde kullanım
Şimdi eğlenceli kısım: Pek çok şablon çerçevede, kullanıcıların şablonlarında değişiklik yapmalarını isteme olasılığı var, böylece CSS geçersiz kılmalarını dahil etmenin kolay bir yolu var. İşte kullanılan yöntemlerden bazıları:
RocketTheme Gantry 4
RocketTheme şablonları Gantry Framework tarafından desteklenir ve bulunursa, özelleştirilmiş bir CSS dosyası otomatik olarak yüklenir. CSS dosyası yerleştirilmelidir /templates/yourtemplate/css/klasör ve isim olmalıdır olacak YOURTEMPLATEFOLDER-custom.css.
Örnek: Ücretsiz Afterburner 2şablonlarını kullanıyorsanız , varsayılan şablon dizinidir /templates/rt_afterburner2/. rt_afterburner-custom.css/ Css / alt klasöre (alt çizgi ve kısa çizgi ile dikkatli) adlı bir dosya eklediğinizde, Gantry çerçevesi tarafından otomatik olarak yüklenir.
Şekil 5
Şekil 5 şablonları, şablonunuzun custom.css/ css / alt dizininde boş bir dosyayla birlikte gelir . Stillerinizi bu dosyaya ekleyin, düzeninize dahil edilsinler.
Gavick Pro
Gavick Pro şablonları overrides.css, / css / alt dizininde boş bir dosya ile gönderilir. Ancak bu dosyanın varsayılan olarak yüklenmediğine dikkat edin Override CSS, şablon ayarlarındaki Gelişmiş Ayarlar sekmesinde etkinleştirmek zorundasınız .
Joomla Parlatıcı
/ Css / alt klasörü şablon örn özel bir CSS dosyası oluşturun custom.cssve dosya adını belirtin Extensions -> Templates -> [template name] -> SEO & System -> Custom CSS/JS File(s).
T3 Çerçeve
T3 Çerçevesini temel alan custom.cssşablonlar, şablonunuzun / css / alt klasöründe bir dosya içerebilir / içermeyebilir / içermeyebilir (eğer orada değilse basitçe oluşturabilirsiniz), ancak mevcut olduğunda, dosya başka bir CSS dosyasından sonra yüklenecektir.
Çözgü Çerçevesi
Çözgü Çerçevesini temel alan şablonlar custom.css, / css / alt klasöründe bulunan dosyayı otomatik olarak yükler . Ek CSS dosyaları ekleyerek yüklenebilir
$this->warp->stylesheets->add('css:yourcssfile.css');
dosyaya /layouts/template.config.php.