web-gelistirme-sc.com

Bazı sayfalarıma özel CSS stili ekleme

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?

16
johanpw

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, <body> etiketi (veya bir <div class="YOURCLASS">...</div> içeriğinizin etrafında), şablonunuzun nasıl yapılandırıldığına bağlı olarak.

enter image description here

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

Örneğin. Menü öğenizdeki "Sayfa sınıfı" alanına mycustomclass 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. Bunun bir örneği Custom CSS , herhangi bir CSS kodu eklemenizi ve stil vermek istediğiniz sayfalarda yayınlamanızı sağlayan bir modül.

Benzer bir seçenek, sayfalarınıza HTML, JavaScript ve CSS eklemenizi sağlayan bir modül olan Custom HTML Advanced 'dir. Kod <head> etiketini otomatik olarak ekleyin.

Alt 3. - ek CSS stil sayfası yükle
Başka bir alternatif, şablonunuzun index.php dosyasını seçin ve gerekirse başka bir CSS stil sayfası yükleyin:

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

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.

9
FFrewin

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.

4
Faye

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.

1
AlejandroVega