Bazı sayfalarıma özel CSS stili ekleme

16

Bazı sayfalarıma benzersiz bir stil vermek ve varsayılan şablon stilini geçersiz kılmak için özel CSS stilleri eklemek istiyorum.

Bunu Joomla'da nasıl başarabilirim?

— johanpw
kaynak

15

Belirli bir sayfaya özel CSS kodu eklemenin birkaç yolu vardır. İşte birkaç alternatif:

Alt. 1 - Sayfa sınıfı Sayfa sınıflarını
kullanın. Menü öğesi düzenleyicisinde, "Sayfa görüntüleme" sekmesinin altında "Sayfa sınıfı" adlı bir alan vardır. Bu, şablonunuzun nasıl yapılandırıldığına bağlı olarak <body>etiketinize (veya <div class="YOURCLASS">...</div>içeriğinizin çevresine) bir sınıf ekler .

resim açıklamasını buraya girin

Ardından, belirttiğiniz sınıfı kullanarak şablonunuzun CSS dosyasında yeni bir kural oluşturun.

Örneğin mycustomclass, menü öğenizdeki "Sayfa sınıfı" alanına ekleyin ve bunu CSS dosyanıza yerleştirin:

.mycustomclass p {font-color:red;} // Make text red on this particular page

Alt. 2 - Özel CSS modülleri
Bu amaçla çeşitli modüller mevcuttur. Bir örnek, herhangi bir CSS kodu eklemenizi ve stil vermek istediğiniz sayfalarda yayınlamanızı sağlayan bir modül olan Özel CSS'dir .

Benzer bir seçenek, sayfalarınıza HTML, JavaScript ve CSS eklemenizi sağlayan Özel HTML Gelişmiş'dir . Kod etikete otomatik olarak eklenebilir .<head>

Alt 3. - ek CSS stil sayfası yükleme
Başka bir alternatif, şablonunuzun index.phpdosyasındaki geçerli menü öğesi kimliğini kontrol etmek ve gerekirse başka bir CSS stil sayfası yüklemektir:

<?php 
   $currentMenuId = JSite::getMenu()->getActive()->id ;
   if ($currentMenuId == "14") {
       echo '<link rel="stylesheet" type="text/css" href="mystyle.css">';
   }
?>

— johanpw
kaynak

İlk alternatifi kullanıyorum (sayfa sınıfı ile) ancak bu stilleri editörde uygulamanın bir yolunun farkında mısınız? Örneğin, başlıklar ait oldukları kategoriye bağlı olarak aynı yazı tipine sahip değildir, görüntülendikleri sayfaya bağlı olarak yazı tipini düzenleyicinin içine nasıl uygulayabilirim?

— web-tiki

9

En sevdiğim yaklaşımlardan biri, vücut öğesi için dinamik sınıflar oluşturmak.

Yani:

<?php
  $app    = JFactory::getApplication();
  $menu   = $app->getMenu();
  $active = $menu->getActive();
  $class  = $active->alias . " pageid-" . $active->id;
?>
<body class="<?php echo $class; ?>">

Yukarıdaki kodun ne üreteceğine dair bazı örnekler:

Ana sayfa:

<body class="home pageid-13">

Hakkımızda sayfası:

<body class="about-us pageid-15">

Şimdi yukarıdaki sınıfları kullanarak sayfa başına özel belirli stiller oluşturabilirsiniz.

— FFrewin
kaynak

Bu çözümü seviyorum, çok kullanışlı ve uygulaması kolay. +1

— johanpw

4

Bu, aynı şeyi yapmanın başka bir yöntemidir.

Doktrin üstüne çıkıyor:

<?php
  $app = JFactory::getApplication();
  $menu = $app->getMenu()->getActive();
  $pageclass = '';

  if (is_object($menu))
    $pageclass = $menu->params->get('pageclass_sfx');
?>

Vücut sınıfınızın olduğu dizininize girer:

<body id="<?php echo $pageclass ? htmlspecialchars($pageclass) : 'default'; ?>">

Şimdi, menü öğesinin sayfa sınıfına eklediğiniz her şey gövde kimliğinde görünecektir. Sınıfı olmayan herhangi bir menü öğesi otomatik olarak body id = "default" olur.

— Faye
kaynak

1

Ayrıca menü öğelerinize farklı stil sayfaları atamak için bu uzantıyı deneyebilirsiniz: http://extensions.joomla.org/extensions/extension/style-a-design/templating/css2switch-basic

Saygılarımızla.

— AlejandroVega
kaynak