it-swarm.com.de

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

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?

16
johanpw

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 einem <div class="YOURCLASS">...</div> Um Ihren Inhalt herum) eine Klasse hinzu, je nachdem, wie Ihre Vorlage konfiguriert ist.

enter image description here

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

Z.B. Fügen Sie mycustomclass zum Feld "Seitenklasse" in Ihrem Menüeintrag hinzu und fügen Sie dies in Ihre CSS-Datei ein:

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

Alt. 2 - Benutzerdefinierte CSS-Module
Zu diesem 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 automatisch zum Tag <head> Hinzugefügt werden.

Alt 3. - zusätzliches CSS Stylesheet laden
Alternativ können Sie die aktuelle Menüelement-ID in der index.php - Datei Ihrer Vorlage überprüfen und bei Bedarf ein anderes CSS-Stylesheet laden:

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

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.

9
FFrewin

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

4
Faye

Sie können mit dieser Erweiterung auch versuchen, Ihren Menüelementen verschiedene Stylesheets zuzuweisen: http://extensions.joomla.org/extensions/extension/style-a-design/templating/css2switch-basic

Grüße.

1
AlejandroVega