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

16

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?

— johanpw
nguồn

15

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 <body>thẻ của bạn (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.

nhập mô tả hình ảnh ở đây

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 mycustomclassvào trường "Trang lớp" 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à Custom HTML Advanced , một mô-đun cho phép bạn thêm HTML, JavaScript và CSS vào các trang của mình. Mã có thể được thêm vào <head>thẻ tự động.

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 trình đơn hiện tại trong index.phptệp của mẫu của bạn và tải 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">';
   }
?>

— johanpw
nguồn

Tôi sử dụng thay thế đầu tiên (với lớp trang) nhưng bạn có biết cách áp dụng các kiểu này trong trình chỉnh sửa không? Ví dụ: các tiêu đề không có cùng một phông chữ tùy thuộc vào danh mục chúng thuộc về, làm cách nào tôi có thể áp dụng phông chữ bên trong trình chỉnh sửa tùy thuộc vào trang chúng được hiển thị?

— web-tiki

9

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.

— FFrewin
nguồn

Tôi thích giải pháp này, nó rất hữu ích và dễ thực hiện. +1

— johanpw

4

Đâ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ờ, mọi thứ 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".

— Faye
nguồn

1

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.

— AlejandroVega
nguồn