Menambahkan gaya CSS khusus pada beberapa halaman saya

16

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?

joomla-3.x joomla-2.5 templates css johanpw
sumber

Jawaban:

15

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.

masukkan deskripsi gambar di sini

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

Misalnya, Tambahkan mycustomclasske 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.phpfile 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">';
   }
?>
johanpw
sumber
Saya menggunakan alternatif pertama (dengan kelas halaman) tetapi apakah Anda mengetahui cara untuk menerapkan gaya ini di editor? Misalnya judul tidak memiliki font yang sama tergantung pada kategori miliknya, bagaimana saya bisa menerapkan font di dalam editor tergantung pada halaman yang ditampilkan?
web-tiki
9

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.

FFrewin
sumber
Saya suka solusi ini, sangat berguna, dan mudah diimplementasikan. +1
johanpw
4

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".

Faye
sumber