Jawaban:
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 ke <body>
tag Anda (atau <div class="YOURCLASS">...</div>
sekitar konten Anda), tergantung pada bagaimana template Anda dikonfigurasi.
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 Custom CSS , sebuah modul yang memungkinkan Anda untuk menambahkan kode CSS apa pun dan menerbitkannya ke halaman yang ingin Anda gaya.
Pilihan serupa adalah Custom HTML Advanced , modul yang memungkinkan Anda menambahkan HTML, JavaScript, dan CSS ke halaman Anda. Kode dapat ditambahkan ke <head>
tag secara otomatis.
Alt 3. - memuat stylesheet CSS tambahan
Alternatif lain adalah memeriksa ID item menu saat ini di index.php
file 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">';
}
?>
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.
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".
Anda juga dapat mencoba dengan ekstensi ini untuk menetapkan berbagai stylesheet ke item menu Anda: http://extensions.joomla.org/extensions/extension/style-a-design/templating/css2switch-basic
Salam.