web-dev-qa-db-fra.com

Ajout de styles CSS personnalisés sur certaines de mes pages

J'aimerais ajouter un style CSS personnalisé à certaines de mes pages pour leur donner un style unique et remplacer le style de modèle par défaut.

Comment puis-je atteindre cet objectif dans Joomla?

joomla-3.xjoomla-2.5templatescss
16
johanpw

Il existe plusieurs façons d'ajouter du code CSS personnalisé à une page spécifique. Voici quelques alternatives:

Alt. 1 - Classe de page
Utiliser les classes de page. Dans l'éditeur d'éléments de menu, sous l'onglet "Affichage de la page", vous trouverez un champ appelé "Classe de page". Cela ajoutera une classe à votre balise <body> (Ou un <div class="YOURCLASS">...</div> Autour de votre contenu), selon la configuration de votre modèle.

enter image description here

Créez ensuite simplement une nouvelle règle dans le fichier CSS de votre modèle, en utilisant la classe que vous avez spécifiée.

Par exemple. Ajoutez mycustomclass au champ "Classe de page" de votre élément de menu et placez-le dans votre fichier CSS:

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

Alt. 2 - Modules CSS personnalisés
Plusieurs modules sont disponibles à cet effet. Un exemple est CSS personnalisé , un module qui vous permet d’ajouter du code CSS et de le publier sur les pages que vous souhaitez styler.

Une option similaire est Custom HTML Advanced , un module qui vous permet d’ajouter du HTML, du JavaScript et du CSS à vos pages. Le code peut être ajouté à la balise <head> Automatiquement.

Alt 3. - chargez une feuille de style CSS supplémentaire
Une autre solution consiste à vérifier l'ID de l'élément de menu actuel dans le fichier index.php De votre modèle et à charger une autre feuille de style CSS si nécessaire:

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

L'une de mes approches préférées consiste à créer des classes dynamiques pour l'élément body.

Alors:

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

Voici quelques exemples de ce que le code ci-dessus va produire:

Page d'accueil:

<body class="home pageid-13">

A propos de nous page:

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

Vous pouvez maintenant créer des styles spécifiques personnalisés par page, en utilisant les classes ci-dessus.

9
FFrewin

Ceci est une autre méthode de faire la même chose.

Va au dessus du doctype:

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

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

Va dans votre index où votre classe de corps est:

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

Désormais, tout ce que vous ajoutez à la classe de page de l'élément de menu apparaîtra dans l'identifiant du corps. Tout élément de menu sans classe sera automatiquement body id = "default".

4
Faye

Vous pouvez également essayer avec cette extension d’affecter différentes feuilles de style à vos éléments de menu: http://extensions.joomla.org/extensions/extension/style-a-design/templating/css2switch-basic

Cordialement.

1
AlejandroVega