web-gelistirme-sc.com

Şablonumdaki CSS stillerini nasıl geçersiz kılabilirim?

Template Club X/Y/Z'den ücretsiz/ticari bir Joomla şablonu kullanırken, kendi CSS stillerimi dahil etmenin en iyi yolu nedir?

21
johanpw

Neden CSS geçersiz kılmaları kullanılır?

Önceden oluşturulmuş bir Joomla şablonu kullanıyorsanız, CSS stillerinizi mevcut şablon stilinden ayrı tutmak her zaman iyi bir fikirdir.

  • Bakımı daha kolaydır
  • Şablonu yükseltirseniz değişiklikleriniz kaybolmaz
  • Değişiklikleri kolayca başka bir şablona veya başka bir siteye 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ı uygulanabileceğinden, kullanılan kuralın, daha genel kurallardan gerekli belirli kurala ( en özel kural seçilir) veya herhangi bir öğeye ilişkin kuralların sırasına göre bulunur (bulunan son kural seçilir).

Özelleştirilmiş CSS dosyanız varsayılan şablon CSS dosyalarından sonra yüklendiği sürece , belirli öğeleri geçersiz kılmak için kendi stillerinizi ekleyebilirsiniz (bazı istisnalar, aşağıda daha fazlası).

Genel kullanım

Joomla <head> Etiketine özel bir stil sayfası yüklemek için, şablonunuzun index.php Dosyasına (YOURDOMAIN.COM/templates/yourtemplate/index.php) Bitişten hemen önce </head> = CODE!] Etiketiyle dosyanızın en son yüklendiğinden emin olun.

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> Etiketi eklemek de mümkündür, ancak bu yukarıda belirtilen seçenekten daha az esnektir:

<link rel="stylesheet" href="/templates/mytemplate/css/custom.css" type="text/css" />

! Önemli

Bazı uzantılar sizden sonra CSS stillerini yükleyebilir (hatta doğrudan index.php dosyasına stil ekleyebilir), böylece geçersiz kılmalarınızı geçersiz kılabilir. Bu genellikle stillerinize !important Eklenerek çözülebilir, örn. h1{color:red!important;}

Farklı çerçevelerde kullanım

Şimdi eğlenceli kısım: Birçok şablon çerçevesi, kullanıcıların şablonlarında değişiklik yapmak isteyebileceği ihtimaline sahiptir, böylece CSS geçersiz kılmalarınızı dahil etmenin kolay bir yolunu ekler. Kullanılan yöntemlerden bazıları:

RocketTheme Gantry 4

RocketTheme şablonları Gantry Framework tarafından desteklenmektedir ve özelleştirilmiş bir CSS dosyası bulunursa otomatik olarak yüklenecektir. CSS dosyası /templates/yourtemplate/css/ Klasörüne yerleştirilmeli ve mustYOURTEMPLATEFOLDER-custom.css Adında olmalıdır.

Örnek: Ücretsiz Afterburner 2 Şablonlarını kullanıyorsanız, varsayılan şablon dizini /templates/rt_afterburner2/./$/Alt klasörüne rt_afterburner-custom.css (Alt çizgi ve kısa çizgi içeren dikkatli) adlı bir dosya ekleyin, Gantry çerçevesi tarafından otomatik olarak yüklenecektir.

Şekil 5

Şekil 5 şablonları, şablonunuzun/css/alt dizininde boş bir custom.css Dosyasıyla gönderilir. Stillerinizi bu dosyaya eklemeniz yeterlidir, bunlar düzeninize dahil edilir.

Gavick Pro

Gavick Pro şablonları,/css/alt dizininde boş bir overrides.css Dosyasıyla gönderilir. Ancak bu dosyanın varsayılan olarak yüklenmediğini, şablon ayarlarındaki Gelişmiş Ayarlar sekmesinde Override CSS Öğesini etkinleştirmeniz gerektiğini unutmayın.

Joomla Shine

Şablonunuzun/css/alt klasöründe özel bir CSS dosyası oluşturun; ör. custom.css Ve Extensions -> Templates -> [template name] -> SEO & System -> Custom CSS/JS File(s) öğesinde dosya adını belirtin.

T3 Çerçevesi

T3 Framework tabanlı şablonlar, şablonunuzun/css/alt klasörüne bir custom.css Dosyası ekleyebilir/içermeyebilir (yoksa orada oluşturun), ancak varsa dosya diğer dosyalardan sonra yüklenir CSS dosyası.

Çözgü Çerçevesi

Warp Framework tabanlı şablonlar,/css/alt klasöründe bulunan custom.css Dosyasını otomatik olarak yükler. Ek CSS dosyaları eklenerek yüklenebilir

$this->warp->stylesheets->add('css:yourcssfile.css');

/layouts/template.config.php dosyasına.

22
johanpw

Joomla 3.5+ (Protostar şablonu)

Joomla 3.5'ten itibaren, user.css Adlı bir dosya oluşturabilir ve bu dosyaya yerleştirebilirsiniz:

templates/protostar/css/user.css

Not: dosya adı gerekiruser.css


Protostar şablonu şunları kontrol eder:

  • Dosya var
  • Dosya boyutu > 0.

Her iki koşul da karşılanırsa, bu dosyayı sizin için otomatik olarak alır.

Github'daki Çekme İsteği

7
Lodder

Sarmal Çerçeve (JoomShaper)

Özelleştirme iş akışını kolaylaştıran bir başka Joomla şablon çerçevesi.

Helix Framework şablonları, 2 uygun yöntemle özel stillerinizi eklemenin kolay bir yolunu sunar.

  1. Arka uçtaki şablon kontrol panelinde Özel CSS alanı vardır. Burada, sayfalarınızın baş bölümüne bir stil öğesi olarak eklenecek olan css'nizi yazabilirsiniz ve bu nedenle diğer harici css dosyalarına göre de öncelik kazanacaktır. Elbette bu seçenek ideal değildir, eğer bir sürü css satırı yazmayı planlıyorsanız, bu nedenle ikinci bir yöntem vardır.

  2. Diğer birçok şablon çerçevesi gibi, Helix kendi custom.css dosyanızı oluşturma yeteneği de sağlar. Basitçe oluşturun ve şablonun css klasörüne yerleştirin. Şablon şablonu ayrıştırır ve sayfalarınızın baş bölümüne ekler.

5
FFrewin

Johanpw, kendi sorusuna cevabıyla çok iyi bir iş çıkardı ... özellikle birçok ticari şablon için css geçersiz kılmalarla ilgili.

Buraya sadece iki sentimi eklemek istiyorum ...

Johanpw'un altını çizdiği gibi, CSS geçersiz kılmaları oluşturmak önerilen uygulamadır. Özel CSS'nizi, güncelleme gerektiğinde silinmeyeceğini veya geçersiz kılmayacağını bildiğiniz tek bir dosyada tutmak.

Tüm Joomla uzantıları için bunu hatırlamak önemlidir. Bir modülün veya bileşenin çekirdek css dosyasını değiştirmeye çalışmayın. Bunun yerine, kendi özel template.css dosyanızı oluşturmaya çalışın, en son yükleyin ve orada tüm özel stillerinizi oluşturun.

Ticari bir şablonun css geçersiz kılma eklemek için bir yol sağlamadığı durumlarda, böyle bir uzantı kullanabilirsiniz: Özel CSS Ekle , tam olarak buna izin verir. Özel css geçersiz kılma dosyanızı oluşturmak ve en son yüklemek için.

Yönettiğim sitelerde sık sık yaptığım başka bir seçenek, şablonu değiştirmek ve custom.css dosyama kendi bağlantımı eklemek , şablonun kapanış başlığı etiketinden hemen önce. Bu, bir şablon güncellemesi geldiğinde başa çıkabileceğim küçük, hatırlanması ve geri yüklenmesi kolay bir değişikliktir.

3
FFrewin

Portal 5 (Roket Teması)

Gantry 5 popüler şablon çerçevesinin en son sürümüdür ve birçok yeni özellik ve özellik sunar.

CSS geçersiz kılmaları ile ilgili olarak, çok fazla esneklik ve seçenek vardır.

Standart Gantry 5 şablonu olarak yayınlanan Hidrojen Teması alınarak, custom adında bir klasör sağlar.

Bu klasör, kullanıcının portal çerçevesi/şablonu için özel dosyalarını/geçersiz kılmalarını yerleştirmesi için sağlanmıştır (template/html klasöründe kalan Joomla şablonu geçersiz kılmalarıyla karıştırılmamalıdır). Orada custom.css dosyasını yerleştirebilirsiniz. Ardından Gantry Şablonu Yönetim Paneli aracılığıyla şablon düzenlerinizi özelleştirebilir ve Özel CSS/JS Atom Parçacık ( custom.css şablonunuza eklemek için yeni bir portal 5 özelliği). Gantry 5 ayrıca custom.css dosyanızı kolayca bağlamak için akış bağlantıları , (kısayollar gibi).

Yani Atom parçacığının içinden şunu kullanarak bağlarsınız:

gantry-theme://custom/thing.css

gantry-theme:// kısayolu, her zaman geçerli portal şablonu klasörüne atıfta bulunacaktır.

Bu yaklaşımı kullanmak, gantry5 şablonunuzun belirli şablon anahatları için custom.css eklemenin etkili bir yoludur.

Tüm portal şablonu için küresel olarak çalışan ikinci bir yaklaşım, içine bir custom.scss dosyası eklemektir:

template_directory/custom/scss/custom.scss

Bunu yaptığınızda, gantry5 her zaman bu scss dosyasını yükler ve derler ve uyguladığınız tüm css kuralları şablonun varsayılan kurallarını geçersiz kılar.

SCSS dosyasının içinde SCSS kullanarak ya da sadece css kullanarak gayet iyi durumdasınız. Derleyici her ikisini de derleyebilir.

3
FFrewin