Dodanie niestandardowego stylu CSS na niektórych moich stronach

16

Chciałbym dodać niestandardowy styl CSS do niektórych moich stron, aby nadać im niepowtarzalny styl i zastąpić domyślny styl szablonu.

Jak mogę to osiągnąć w Joomla?

— johanpw
źródło

15

Istnieje kilka sposobów dodawania niestandardowego kodu CSS do określonej strony. Oto kilka alternatyw:

Alt. 1 - Klasa
strony Użyj klas strony. W edytorze pozycji menu, w zakładce „Wyświetlanie strony” znajduje się pole o nazwie „Klasa strony”. Spowoduje to dodanie klasy do <body>tagu (lub <div class="YOURCLASS">...</div>wokół treści), w zależności od konfiguracji szablonu.

wprowadź opis zdjęcia tutaj

Następnie po prostu utwórz nową regułę w pliku CSS szablonu, używając określonej klasy.

Np. Dodaj mycustomclassdo pola „Klasa strony” w elemencie menu i umieść to w pliku CSS:

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

Alt. 2 - Niestandardowe moduły CSS
Do tego celu dostępnych jest kilka modułów. Jednym z przykładów jest Custom CSS , moduł, który pozwala dodać dowolny kod CSS i opublikować go na stronach, które chcesz stylizować.

Podobną opcją jest Custom HTML Advanced , moduł, który pozwala dodawać HTML, JavaScript i CSS do stron. Kod można dodać <head>automatycznie do tagu.

Alt 3. - załaduj dodatkowy arkusz stylów CSS
Inną alternatywą jest sprawdzenie bieżącego identyfikatora pozycji menu w index.phppliku szablonu i w razie potrzeby załadowanie innego arkusza stylów CSS:

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

— johanpw
źródło

Korzystam z pierwszej alternatywy (z klasą strony), ale czy znasz sposób na zastosowanie tych stylów w edytorze? Na przykład tytuły nie mają tej samej czcionki w zależności od kategorii, do której należą, jak mogę zastosować czcionkę w edytorze w zależności od strony, na której są wyświetlane?

— web-tiki,

9

Jednym z moich ulubionych podejść jest tworzenie dynamicznych klas dla elementu body.

Więc:

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

Oto niektóre przykłady tego, co wygeneruje powyższy kod:

Strona główna:

<body class="home pageid-13">

O nas strona:

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

Teraz możesz tworzyć niestandardowe style na stronie, korzystając z powyższych klas.

— FFrewin
źródło

Podoba mi się to rozwiązanie, jest bardzo przydatne i łatwe do wdrożenia. +1

— johanpw

4

To kolejna metoda robienia tego samego.

Wykracza ponad typ dokumentu:

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

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

Wchodzi do twojego indeksu, gdzie twoja klasa ciała to:

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

Teraz wszystko, co dodasz do klasy strony elementu menu, pojawi się w identyfikatorze treści. Każdy element menu bez klasy będzie automatycznie miał body id = „default”.

— Faye
źródło

1

Możesz także wypróbować to rozszerzenie, aby przypisać różne arkusze stylów do pozycji menu: http://extensions.joomla.org/extensions/extension/style-a-design/templating/css2switch-basic

Pozdrowienia.

— AlejandroVega
źródło