Ajout d'un style CSS personnalisé sur certaines de mes pages

16

Je voudrais 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 y parvenir dans Joomla?

joomla-3.x joomla-2.5 templates css johanpw
la source

Réponses:

15

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

Alt. 1 - Classe de
page Utilisez des classes de page. Dans l'éditeur d'élément de menu, sous l'onglet "Affichage de la page", il y a un champ appelé "Classe de page". Cela ajoutera une classe à votre <body>balise (ou <div class="YOURCLASS">...</div>autour de votre contenu), selon la configuration de votre modèle.

entrez la description de l'image ici

Ensuite, créez 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 mycustomclassau champ "Classe de page" dans votre élément de menu et mettez-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 Custom CSS , un module qui vous permet d'ajouter n'importe quel code CSS et de le publier sur les pages que vous souhaitez styliser.

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é <head>automatiquement à la balise.

Alt 3. - charger une feuille de style CSS supplémentaire
Une autre alternative consiste à vérifier l'ID d'élément de menu actuel dans le index.phpfichier 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">';
   }
?>
johanpw
la source
J'utilise la première alternative (avec la classe de page) mais connaissez-vous un moyen d'appliquer ces styles dans l'éditeur? Par exemple, les titres n'ont pas la même police selon la catégorie à laquelle ils appartiennent, comment puis-je appliquer la police à l'intérieur de l'éditeur en fonction de la page sur laquelle ils sont affichés?
web-tiki
9

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

Donc: 

<?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 produira:

Page d'accueil:

<body class="home pageid-13">

Page sur nous:

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

FFrewin
la source
J'aime cette solution, elle est très utile et facile à mettre en œuvre. +1
johanpw
4

C'est une autre méthode pour 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'; ?>">

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

Faye
la source