wake-up-neo.net

Thêm kiểu CSS tùy chỉnh trên một số trang của tôi

Tôi muốn thêm kiểu CSS tùy chỉnh vào một số trang của mình để tạo cho chúng một kiểu độc đáo và ghi đè kiểu dáng mẫu mặc định.

Làm thế nào tôi có thể đạt được điều này trong Joomla?

joomla-3.xjoomla-2.5templatescss
16
johanpw

Có một số cách để thêm mã CSS tùy chỉnh vào một trang cụ thể. Đây là một vài lựa chọn thay thế:

Alt. 1 - Lớp trang
[.__.] Sử dụng các lớp trang. Trong trình chỉnh sửa mục menu, trong tab "Hiển thị trang", có một trường được gọi là "Lớp trang". Điều này sẽ thêm một lớp vào thẻ <body> (Hoặc <div class="YOURCLASS">...</div> Xung quanh nội dung của bạn), tùy thuộc vào cách cấu hình mẫu của bạn.

enter image description here

Sau đó, chỉ cần tạo quy tắc mới trong tệp CSS của mẫu, sử dụng lớp bạn đã chỉ định.

Ví dụ. Thêm mycustomclass vào trường "Lớp trang" trong mục menu của bạn và đặt mục này vào tệp CSS của bạn:

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

Alt. 2 - Các mô-đun CSS tùy chỉnh
[.__.] Một số mô-đun có sẵn cho mục đích này. Một ví dụ là CSS tùy chỉnh , một mô-đun cho phép bạn thêm bất kỳ mã CSS nào và xuất bản nó lên các trang bạn muốn tạo kiểu.

Một tùy chọn tương tự là Advanced HTML Advanced , một mô-đun cho phép bạn thêm HTML, JavaScript và CSS vào các trang của bạn. Mã có thể được tự động thêm vào thẻ <head>.

Alt 3. - tải biểu định kiểu CSS bổ sung
[.__.] Một cách khác là kiểm tra ID mục menu hiện tại trong tệp index.php Của mẫu của bạn và tải một biểu định kiểu CSS khác nếu cần:

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

Một trong những cách tiếp cận yêu thích của tôi là tạo các lớp động cho phần tử cơ thể.

Vì thế:

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

Một số ví dụ về những gì đoạn mã trên sẽ tạo ra là:

Trang chủ:

<body class="home pageid-13">

Trang về chúng tôi:

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

Bây giờ bạn có thể tạo các kiểu cụ thể tùy chỉnh trên mỗi trang, sử dụng các lớp ở trên.

9
FFrewin

Đây là một phương pháp khác để làm điều tương tự.

Đi trên doctype:

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

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

Đi vào chỉ mục của bạn, nơi lớp cơ thể của bạn là:

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

Bây giờ, bất cứ điều gì bạn thêm vào lớp trang của mục menu sẽ xuất hiện trong id cơ thể. Bất kỳ mục menu nào không có lớp sẽ tự động là body id = "default".

4
Faye

Ngoài ra, bạn có thể thử với tiện ích mở rộng này để gán các bảng định kiểu khác nhau cho các mục trong menu của mình: http://extensions.j Joomla.org/extensions/extension/style-a-design/templating/css2switch-basic

Trân trọng.

1
AlejandroVega