it-swarm-id.com

Menambahkan gaya CSS khusus pada beberapa halaman saya

Saya ingin menambahkan gaya CSS kustom ke beberapa halaman saya untuk memberi mereka gaya yang unik, dan mengganti gaya template default.

Bagaimana saya bisa mencapai ini di Joomla?

16
johanpw

Ada beberapa cara untuk menambahkan kode CSS khusus ke halaman tertentu. Berikut beberapa alternatif:

Alt. 1 - Kelas halaman
Gunakan kelas halaman. Di editor item menu, di bawah tab "Tampilan halaman", ada bidang yang disebut "Kelas halaman". Ini akan menambahkan kelas pada tag <body> Anda (atau <div class="YOURCLASS">...</div> Di sekitar konten Anda), tergantung pada bagaimana template Anda dikonfigurasikan.

enter image description here

Kemudian cukup buat aturan baru di file CSS template Anda, menggunakan kelas yang Anda tentukan.

Misalnya. Tambahkan mycustomclass ke bidang "Halaman kelas" di item menu Anda, dan letakkan ini di file CSS Anda:

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

Alt. 2 - Modul CSS khusus
Beberapa modul tersedia untuk tujuan ini. Salah satu contohnya adalah CSS Kustom , modul yang memungkinkan Anda untuk menambahkan kode CSS apa pun dan menerbitkannya ke halaman yang ingin Anda gaya.

Pilihan serupa adalah Kustom HTML Lanjutan , modul yang memungkinkan Anda menambahkan HTML, JavaScript dan CSS ke halaman Anda. Kode dapat ditambahkan ke tag <head> Secara otomatis.

Alt 3. - memuat stylesheet CSS tambahan
Alternatif lain adalah memeriksa ID item menu saat ini di file index.php Template Anda, dan memuat stylesheet CSS lain jika diperlukan:

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

Salah satu pendekatan favorit saya adalah membuat kelas dinamis untuk elemen tubuh.

Begitu:

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

Beberapa contoh yang dihasilkan oleh kode di atas adalah:

Beranda

<body class="home pageid-13">

Tentang kami halaman:

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

Sekarang Anda dapat membuat gaya khusus khusus per halaman, menggunakan kelas-kelas di atas.

9
FFrewin

Ini adalah metode lain untuk melakukan hal yang sama.

Pergi di atas DOCTYPE:

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

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

Masuk dalam indeks Anda di mana kelas tubuh Anda adalah:

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

Sekarang, apa pun yang Anda tambahkan ke kelas halaman item menu akan muncul di id tubuh. Setiap item menu tanpa kelas akan secara otomatis menjadi body id = "default".

4
Faye

Anda juga dapat mencoba ekstensi ini untuk menetapkan berbagai stylesheet ke item menu Anda: http://extensions.joomla.org/extensions/extension/style-a-design/templating/css2switch-basic

Salam.

1
AlejandroVega