Hinzufügen eines benutzerdefinierten CSS-Stils auf einigen meiner Seiten

16

Ich möchte einigen meiner Seiten benutzerdefiniertes CSS-Styling hinzufügen, um ihnen einen einzigartigen Stil zu verleihen, und das Standard-Template-Styling überschreiben.

Wie kann ich das in Joomla erreichen?

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

Antworten:

15

Es gibt verschiedene Möglichkeiten, einer bestimmten Seite benutzerdefinierten CSS-Code hinzuzufügen. Hier sind ein paar Alternativen:

Alt. 1 - Seitenklasse
Verwenden Sie Seitenklassen. Im Menüelement-Editor befindet sich auf der Registerkarte "Seitenanzeige" ein Feld mit der Bezeichnung "Seitenklasse". Dies fügt Ihrem <body>Tag (oder <div class="YOURCLASS">...</div>um Ihren Inhalt herum) eine Klasse hinzu , je nachdem, wie Ihre Vorlage konfiguriert ist.

Bildbeschreibung hier eingeben

Dann erstellen Sie einfach eine neue Regel in der CSS-Datei Ihrer Vorlage mit der von Ihnen angegebenen Klasse.

ZB mycustomclassZum Feld "Seitenklasse" in Ihrem Menüpunkt hinzufügen und dies in Ihre CSS-Datei einfügen:

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

Alt. 2 - Benutzerdefinierte CSS-Module
Für diesen Zweck stehen mehrere Module zur Verfügung. Ein Beispiel ist Custom CSS , ein Modul, mit dem Sie beliebigen CSS-Code hinzufügen und auf den Seiten veröffentlichen können, die Sie formatieren möchten.

Eine ähnliche Option ist Custom HTML Advanced , ein Modul, mit dem Sie Ihren Seiten HTML, JavaScript und CSS hinzufügen können . Der Code kann dem <head>Tag automatisch hinzugefügt werden.

Alt 3. - Zusätzliches CSS-Stylesheet laden
Eine andere Alternative besteht darin, die aktuelle Menüelement-ID in der index.phpDatei Ihrer Vorlage zu überprüfen und bei Bedarf ein anderes CSS-Stylesheet zu laden:

<?php 
   $currentMenuId = JSite::getMenu()->getActive()->id ;
   if ($currentMenuId == "14") {
       echo '<link rel="stylesheet" type="text/css" href="mystyle.css">';
   }
?>
johanpw
quelle
Ich verwende die erste Alternative (mit Seitenklasse), aber kennen Sie eine Möglichkeit, diese Stile im Editor anzuwenden? Beispielsweise haben Titel nicht die gleiche Schriftart, abhängig von der Kategorie, zu der sie gehören. Wie kann ich die Schriftart im Editor anwenden, abhängig von der Seite, auf der sie angezeigt werden?
Web-Tiki
9

Einer meiner bevorzugten Ansätze ist es, dynamische Klassen für das Körperelement zu erstellen.

So: 

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

Einige Beispiele dafür, was der obige Code erzeugen wird, sind:

Startseite:

<body class="home pageid-13">

Über uns Seite:

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

Jetzt können Sie mithilfe der oben genannten Klassen benutzerdefinierte Stile pro Seite erstellen.

FFrewin
quelle
Ich mag diese Lösung, sie ist sehr nützlich und einfach zu implementieren. +1
johanpw
4

Dies ist eine andere Methode, um dasselbe zu tun.

Geht über den Doctype hinaus:

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

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

Geht in Ihrem Index, wo Ihre Körperklasse ist:

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

Jetzt wird alles, was Sie zur Seitenklasse des Menüelements hinzufügen, in der Body-ID angezeigt. Jedes Menüelement ohne Klasse erhält automatisch die Body-ID = "Standard".

Faye
quelle