Fork me on GitHub






Laila
Modification thème (ajout styles ...)
#1
Régulier
Inscrit: 29/11/2009 20:45
Messages: 246
Bonjour tout le monde,

J'adopte le xl-one que j'ai modifié (couleurs ...), cependant j'aimerai faire de bons menus avec la même forme.

En surfant sur différents site web xoops, je suis tombé sur un menu simple et qui m'a trop attirée, je vous ai fait une copie, ainsi que les points que j'aimerai faire !

Voici un apercu du menu que j'ai aimé :
Open in new window


Voici un apercu de mon menu :
Open in new window



1 : au survol de la souris, j'aimerai bien que le fond change de couleur ( tout comme frxoops.org) !
2 : J'aimerai ajouter pour chaque menu le petit cadre (voir première image)
3 : J'aimerai ajouter des séparateurs entre chaque titres de modules (voir image)
4 & 5 : ajouter une rubrique comme dans la photo que je nommerai " ajouter " avec des sous rubrique comme dans la photo : téléchargement, articles ...
6 : Ajouter les traits "----" en haut comme dans ce module (design :))

voici le site où j'ai vu le menu qui m'a plu : Cliquez ici pour voir le site !!

Merci d'avance

Posté le : 09/05/2010 17:31
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Kris
Re: Modification thème (ajout styles ...)
#2
Supporter Xoops
Inscrit: 09/01/2005 13:37
De Breizh
Messages: 16972
hi,

menus réalisés avec le module multimenu
le css utilisé :
/* Menu */
#menu {
    background: url(../img/menu.gif) repeat-x;
    height: 32px;
    margin: 0 10px 0 10px;
 * margin: 0 1px 0 1px; /*ie*/
    line-height: 32px;
    clear: both;
}
#menu a {
    overflow: hidden;
    text-indent: -9999px;
    float: left;
    height: 32px;
}
/* Accueil */
#menu .accueil a {
    width: 99px;
    background: url(../img/accueil.gif) no-repeat;
    left: 0px;
}
/* Actualité */
#menu .actu a {
    width: 135px;
    background: url(../img/actu.gif) no-repeat;
    left: 0px;
}
/* Galerie */
#menu .galerie a {
    width: 170px;
    background: url(../img/galerie.gif) no-repeat;
    left: 0px;
}
/* Agenda */
#menu .agenda a {
    width: 183px;
    background: url(../img/agenda.gif) no-repeat;
    left: 0px;
}
/* Annonces */
#menu .annonces a {
    width: 189px;
    background: url(../img/annonces.gif) no-repeat;
    left: 0px;
}
/* Forums */
#menu .forums a {
    width: 102px;
    background: url(../img/forums.gif) no-repeat;
    left: 0px;
}
/* Contact */
#menu .contact a {
    width: 87px;
    background: url(../img/contact.gif) no-repeat;
    left: 0px;
}
#menu-left {
    width: 4px;
    height: 32px;
    background: url(../img/menu_left.gif) no-repeat;
    float: left;
}
#menu-right {
    width: 4px;
    height: 32px;
    background: url(../img/menu_right.gif) no-repeat;
    float: right;
}
#submenu {
 * margin: 0 10px 0 10px; /*ie*/
    margin-left: 20px;
    margin-right: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #e2f0f4;
    border: 1px solid #cedfe4;
    height: 14px;
}
#submenu-left {
    background: url(../img/submenu_l.gif) no-repeat bottom left;
    float: left;
    width: 2px;
    height: 21px;
    position: relative;
    left: -1px;
}
#submenu-right {
    background: url(../img/submenu_r.gif) no-repeat bottom right;
    float: right;
    width: 2px;
    height: 21px;
    position: relative;
    right: -1px;
}

et
/* block main menu */
#mainmenu {
    font-size: 12px;
}
#mainmenu a {
    background: url(../icons/arrow_marron.gif) no-repeat left;
    display: block;
    margin: 0 0 1px 0;
    padding: 3px 4px 4px 20px;
    font-weight: normal;
    border-bottom: 1px solid #e9e9e9;
    color: #484848;
    font-size: 11px;
}
#mainmenu a:hover {
    background: #fff url(../icons/arrow_blue.gif) no-repeat left;
}
#mainmenu a.menuTop {
    padding-left: 20px;
}
#mainmenu a.menuMain {
    padding-left: 20px;
}
#mainmenu a.menuSub {
    font-size: 11px;
    font-style: italic;
    border: none;
    padding-left: 12px;
    background: none;
    margin-left: 8px;
}
#mainmenu a.menuSub:hover {
    background-color: #fff;
}
/* block user menu */
#usermenu {
    font-size: 12px;
}
#usermenu a {
    display: block;
    margin: 0;
    padding: 3px 4px 4px 20px;
    background: url(../icons/arrow.gif) no-repeat left;
    font-weight: normal;
    font-size: 11px;
}
#usermenu a:hover {
    color: #484848;
    background-color: #fff;
}
#usermenu a.menuTop {
}
#usermenu a.highlight {
    background-color: #fcc;
}

Posté le : 09/05/2010 17:52

La connaissance s'accroît quand on la partage ...
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Laila
Re: Modification thème (ajout styles ...)
#3
Régulier
Inscrit: 29/11/2009 20:45
Messages: 246
Bonsoir Kris,

J'avoue que je n'ai rien compris, tu as certainement oublié que je suis débutante, pourrais tu y aller doucement avec moi stp ^^ !!

Bon, étape par étape, je t'explique ce que j'ai :
Xoops : 2.4.4
J'ai le module multimenu téléchargé sur frxoops.org fraichement installé (aucune manipulation).

Les styles que tu m'as donné est ce que je dois les faire sur style.css de mon thème, ou sur les styles de multimenu !

Pourrais tu m'expliquer dans les 2 cas, comment je devrai procéder merci !

Posté le : 09/05/2010 22:10
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Re: Modification thème (ajout styles ...)
#4
Guest_
b'soir

Si cela peut t'aider, un peu de syntaxe.

Les liens ont différents comportements :
• a {...} : instructions de mise en forme des liens
• a:hover {...} : instructions de mise en forme des liens lorsque l'utilisateur les survole
• a:active {...} : instructions de mise en forme des liens lorsque l'utilisateur clique dessus (peu utilisé, généralement on n'a pas le temps de voir cet état)
• a:visited {...} : instruction de mise en forme des liens que l'utilisateur a déjà cliqué (utilisé surtout pour les listes de liens, cela permet d'indiquer au visiteur que la page liée a déjà été consultée)

Les sites Xoops ont des dénominations standard pour certains liens :
• #mainmenu a {...} : pour la mise en forme des liens du menu principal du site
• #mainmenu a.menuSub {...} : instructions pour la mise en forme des liens de second niveau (= lorsque le module est affiché, ses sous-menu apparaissent)
• #usermenu a {...} : pour la mise en forme des liens du menu utilisateur

Si tu veux faire varier les liens contenus dans le bloc du menu principal, il faut par conséquent agir sur #mainmenu
• #mainmenu a {...} : instructions pour mettre en forme les liens du menu principal
• #mainmenu a:hover {...} : instructions pour mettre en forme les liens du menus principal lorsqu'ils sont survolés par l'utilisateur

Parmi les instructions permettant de différencier clairement les états a et a:hover, tu peux utiliser :
• la couleur de fond (ex: background-color: #ff0000)
• le soulignement (ex: text-decoration: underline)
• la couleur (ex: color: #cccccc}
• etc.

Tu utilises le module Multimenu, tu dois donc te fier aux éléments que t'a indiqué Kris...

Posté le : 09/05/2010 22:40
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Laila
Re: Modification thème (ajout styles ...)
#5
Régulier
Inscrit: 29/11/2009 20:45
Messages: 246
Bonsoir Burning,

Déjà merci pour toutes ces explications, je dois avouer que ça m'a permis de distinguer énormément de choses, et ça m'a aidé à régler le problème de la couleur de fond :) !

Je commence à comprendre le principe, mais je suis plutôt perdue par où faire ça ... !

On va faire une scène simple :
J'ai mis 3 Menus avec multimenu qui sont :

Menu d'utilisateur : voir son compte ...
Menu principal : NEWBB + MYTUBE + ARTICLES
Menu secondaire : uniquement du content

Voilà : je veux que dans les 3 menus, il y ait des séparateurs + le cadrage comme sur l'image en haut (première image), je dois fouiller dans les styles, mais où ?

Posté le : 09/05/2010 23:52
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Re: Modification thème (ajout styles ...)
#6
Guest_
re'

arf... désolé, je n'ai jamais réussi à comprendre le module que tu utilises, je ne vais pas pouvoir t'aider

J'espère qu'un expert de Multimenu pourra te guider !

Posté le : 10/05/2010 00:30
Partager Twitter Partagez cette article sur GG+
Rapport Haut
Laila
Re: Modification thème (ajout styles ...)
#7
Régulier
Inscrit: 29/11/2009 20:45
Messages: 246
Moi ce que je voudrai, ou est ce que je devrais faire les manipulations que Kris m'a donné ? sur le style.css du thème ou sur le css du module ? quel fichier et où ?

Posté le : 10/05/2010 22:07
Partager Twitter Partagez cette article sur GG+
Rapport Haut

 Haut   Précédent   Suivant



Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

40 Personne(s) en ligne (30 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 40 | Plus ...