[RÉGLÉ] Design Menu Module sur T3 Bs3 Blank Framework - Joomla! 3.3

[OttOfans]

Bonjour,

j'aimerais réaliser des modules menus comme :

VOS INFORMATIONS


comment dois je m'y prendre, svp ??

Mon template : T3 Bs3 Blank Framework sous Joomla! 3.3

Merci par avance pour votre aide

Salutations

[OttOfans]

Re : Design Menu Module sur T3 Bs3 Blank Framework - Joomla! 3.3

Bonsoir

UP svp

[Rajoz]

Re : Design Menu Module sur T3 Bs3 Blank Framework - Joomla! 3.3

Bonjour OttOfans,

Le style des modules passe par du code CSS.

1) Création du code
Créer un fichier custom.css (s'il n'existe pas déjà) dans templates/t3_bs3_blank/css/ avec le code suivant.
Le code doit être édité avec un éditeur "propre" comme Notepad++ (surtout pas Word) et sauvegardé en mode UTF-8 sans BOM.

.t3-module.blue {
    border: 1px solid #00005a;
}
.t3-module.blue .module-title {
    margin: 0;
    padding-top: 10px;
    padding-bottom: 30px;
    width: 100%;
    height: 25px;
    background-color: #00005a;
    color: white;
    font-size: 15px;
    line-height: 20px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}
.t3-module.blue .module-ct {
    margin: 15px 10px;
    text-align: justify;
}
.t3-module.blue a, a:visited, a:link, a:focus {
    color: #00005a;
    font-weight: bold;
}

Explication du code:

• .t3-module : classe utilisée pour les modules par le template JA T3 BS3 Blank
• .blue : nouvelle classe crée pour les les modules en bleu (nom arbitraire) -> voir utilisation ci-après
• .t3-module.blue : CSS de la bordure bleue autour du module
• .t3-module.bleu .module-title : CSS pour l'affichage du titre du module
• .t3-module.bleu .module-ct : CSS pour l'affichage du contenu du module
• .t3-module.blue a, ... : CSS pour l'affichage des liens du module

2) Utilisation
Pour appliquer cette nouvelle classe "blue" à un module, aller dans les paramètres avancés du module (Extensions > Gestion des modules > [nom-du-module] > Paramètres avancés) et mettre (ou ajouter) dans le paramètre "Suffixe de classe CSS" la valeur " blue" (attention à l'espace devant).

3) Note importante
J'ai donné l'explication pour l'aspect "didactique" de comment changer le style d'un module.
En pratique, pour "copier" le style d'un site web, il faut en demander l'autorisation au propriétaire du copyright du site.

Amicalement,
Rajoz

[ghazal]

Re : Design Menu Module sur T3 Bs3 Blank Framework - Joomla! 3.3

[EDIT]OOPS, grillée par Rajoz.
Deux approches ....[/EDIT]

Salut,
avant tout, réfère-toi à la doc d'origine :
T3 Bootstrap 2 - T3 - Joomla Template Framework

http://t3-framework.org/documentation/t3-bootstrap-2

* mesures à prendre avant d'entamer la modif (propres à ce template)
1-Dans Gestion des templates : Styles--> t3_bs3_blank - Default-->
Général -->Optimize CSS->OFF

2-Dans le répertoire templates/t3_bs3_blank/css
ajouter un fichier custom.css

* Tuto
Là, il faut prendre avantage d'une spécificité de ce template.
L'ID de chaque module est reprise dans l'html de la page (des pages) où il apparait, sous la forme:
#Mod[ID du module]

Prenons le cas d'un module avec l'ID 113.
Pour réaliser ce que tu veux, tu peux ajouter ceci dans la feuille CSS custom.css

#Mod113{border: 1px solid #cacaca;}
#Mod113 .module-title {background: #000;padding: 5px;color: #fff;}
#Mod113 .module-ct{padding: 10px;}

Il y a encore d'autres possibilités de transformer un module via les surcharges (overrides).

[OttOfans]

Re : Design Menu Module sur T3 Bs3 Blank Framework - Joomla! 3.3

Bonjour,

parfait merci

Salutations