[RÉGLÉ] Changer la couleur de fond d'un module

[giga17]

Bonjour à tous,

Pour facilité la compréhension de ma question; voici le lien du site : http://laguitarezen.legtux.org/index.php

Je souhaiterai mettre en noir la couleur de fond de l'ensemble des modules ici "Derniers articles" et celui qui crés la flêche "Précédent" ou suivant en bas de page.

Comment faire ?

Merci

[ced1870]

Re : Changer la couleur de fond d'un module

salut
ça vient de ton template, edites le fichier index.php du template et cherches

<div id="aside" class="span3">
<div class="well">

supprimes la classe "well" car c'est elle qui donne ce rendu
CEd

[Rajoz]

Re : Changer la couleur de fond d'un module

Bonjjour giga17,

Comme te l'a indiqué CEd Le style de module well est définit dans index.php comme étant le style par défaut des modules de la position-7.

Ce style par défaut est utilisé parce que dans les paramètres avancés du module, paramètre "Style du module", il y a la valeur "Hérité" ce qui signifie qu'il faut utiliser ce qu'il y a de définit dans index.php.

Tu peut changer ce style de module en choisissant dans la liste déroulante une autre valeur pour ce paramètre "Style du module", par exemple "xhtml".

Une autre possibilité serait de changer la couleur de fond de la classe well, par exemple pour la mettre grisée il faut ajouter à la fin de template.css :

.well {
    background-color: rgba(0,0,0,0.5);
}

• Les trois premiers "0" du rgba correspondent à #000000
• Le 0.5 correspond à l'opacité que tu peux régler (va de 0 à 1 avec des décimales)

J'ai mis une opacité à 0.5 ce qui donne un grisé parce que j'aime personnellement qu'on distingue les modules. Si tu préfères, tu peux bien sûr mettre directement la couleur de fond de la classe well en transparent (background-color: transparent) ou en noir (background-color: #000000).

Amicalement,
Rajoz

[giga17]

Re : Changer la couleur de fond d'un module

Merci CEd et Rajoz.

Pour le module en position 7 le problème est résolu par l'ajout du code à la fin de template.css comme conseillé par Rajoz (j'ai opté pour noir car l'esthétique me plait) ...

Par contre j'ai toujours le problème du "fléches précedent/suivant" en bas de page (j'ignore le module qui gère ça

Pour le fichier index.php du template j'ai bien en ligne 183 <div id="aside" class="span3"> et en ligne 347 <div class="well">
CEd, lorsque tu dis "supprimes la classe "well" car c'est elle qui donne ce rendu" quelles lignes exactes je dois supprimer ?

Pas facile d'aider un débutant

[Rajoz]

Re : Changer la couleur de fond d'un module

Bonjour giga17,

en ligne 347 <div class="well">

Là je vois pas ce que tu trouves en ligne 347. Le fichier index.php de Protostar ne fait que 209 lignes !

Le code de index.php qui affiche la colonne de droite avec la position-7 est en lignes 182 à 188 :

<?php if ($this->countModules('position-7')) : ?>
    <div id="aside" class="span3">
        <!-- Begin Right Sidebar -->
        <jdoc:include type="modules" name="position-7" [B][COLOR=#ff0000]style="well"[/COLOR][/B] />
        <!-- End Right Sidebar -->
    </div>
<?php endif; ?>

C'est le style="well" qui indique le style par défaut des modules publiés en position-7

Il est possible :

• soit de supprimer style="well"
  <jdoc:include type="modules" name="position-7" />
  cela revient à mettre style="none" (valeur par défaut)
• soit de le remplacer par style="xhtml" (ou un autre style)
  <jdoc:include type="modules" name="position-7" style="xhtml" />

Note : le style de module well est défini dans Protostar, on peut aussi utiliser les styles standards comme none et xhtml qui sont définis dans le pseudo template system. Voir ces styles system dans https://docs.joomla.org/Standard_module_chrome_styles

En pratique, cela revient au même de modifier index.php que de configurer le paramètre "Style du module" comme je l'avais indiqué.
La différence c'est que si tu mets style="xhtml" dans le code c'est lui qui est pris par défaut (Hérité) pour tous les modules de la position-7 alors que si tu mets xhtml dans le paramètre du template tu devras le faire pour chacun des modules de la position-7.

Personnellement je préfère la solution CSS car elle présente plusieurs avantages :

• elle est globale pour tous les modules en position-7 comme la modification de index.php
• elle conserve les autres attributs de style de well qui sont définis dans template.css
• elle peut s'étendre : par exemple, changer la couleur et le style de la bordure, modifier la police et la couleur du titre, etc.

J'en profite pour t'indiquer la méthode que j'utilise pour ajouter le CSS.

Le problème c'est que Protostar peut être mis à jour par Joomla! et donc les modifications faites à template.css peuvent être écrasées.

En attendant que Protostar sache détecter un custom.css (les templates de backend savent maintenant le faire), j'installe le plugin Custom CSS de Lomart configuré pour le frontend uniquement et je mets tous mes ajouts CSS dans le fichier templates/protostar/css/custom.css qui vient alors en complément de template css sans avoir à le modifier.

Comme custom.css ne fait pas partie du package de Joomla! il ne sera pas écrasé à la prochaine mise à jour.

Amicalement,
Rajoz

[giga17]

Re : Changer la couleur de fond d'un module

Merci Rajoz.

Ta méthode de travail avec le plugin Custom CSS de Lomart est une excellente suggestion que je vais approfondir
J'ai fait erreur sur le fichier effectivement.

Modifier la ligne 185 <jdoc:include type="modules" name="position-7" style="well" /> ne me convient pas esthétiquement. Je préfère que le module soit bordé de blanc comme il l'est désormais.

Donc il ne me reste toujours un problème : j'ai toujours en bas de la page d'accueil une fleche "precedent" ou "suivant" ou le texte est écrit en jaune sur fond blanc (ce qui le rend à peine lisible, c'est cela que je voudrais changer (un fond noir à la place du fond blanc).

Est-ce possible avec une modification simple qui n'altère pas l'ensemble de l'aspect?

Amicalement,
giga17

[Rajoz]

Re : Changer la couleur de fond d'un module

Bonsoir giga17,

Pour modifier le style des flèches suivant-précédent voici le css à ajouter à template.css :

.pager li > a, .pager li > span {
    background-color: #000000;
}

Pour trouver ce type de code je me sers de Firebug sous Firefox ou de l'inspecteur d'élément de Chrome. Les deux outils permettent par un simple clic sur le bouton droit de la souris de savoir quel sont le HTML et le CSS de l'élément pointé et permettent de le modifier pour voir le résultat dans le navigateur.

Maîtriser Firebug est vraiment un plus pour voir et modifier le HTML, le CSS et plus encore sur ton site web. Je te recommande deux tutoriels sur Firebug :

• http://cinnk.com/joomla/3/trucs-et-a...tion-a-firebug
• ftp://ftp-developpez.com/magazine/De...906.pdf#page=8

Amicalement,
Rajoz

[giga17]

Re : Changer la couleur de fond d'un module

Merci Rajoz, ça marche

Pour firebug je connais un peu mais je me perds avec les notions d'héritages.
Je consulte les tuto aujourd'hui, merci.

Bonne journée

[giga17]

Re : Changer la couleur de fond d'un module

Dans le premier lien de tuto, le lien vers le site cité en exemple mène vers une page non structurée (bug?) http://www.plongeurlibre.fr/maritime...-maritime.html

J'attaque la lecture du deuxième cette semaine