Vous êtes ici Forums
  |  Connexion
 Forums
HomeHomeForums DNNForums DNNDesign, présent...Design, présent...Style de la barre des menusStyle de la barre des menus
Précédente
 
Suivante
Nouveau message
11/01/2007 06:31
 

Bonjour à tous

Je suis emmerveillé par ce produit que je découvre depuis quelques jours. Il est vraiment extraordinaire.
Comme tout un chacun qui débute j'essaie plein de choses pour voir leur effet immédiatement.
Je voulais savoir comment modifier le style de la barre des menus, typo, couleur , position.
Quelqu'un pourrait m'indiquer la manière de le faire.
Encore merci et bonne journée à tous

OldChap

 
Nouveau message
11/01/2007 10:45
 
Bonjour OldChap,

Le menu est un contrôle DotNetNuke nommé SolPartMenu. C'est un composant Open Source qui est continuellement réadapté au grès des mises à jour de son concepteur.
La compréhension du SolPartMenu implique deux choses :
- La lecture du manuel : Les bases essentielles pour comprendre le contrôle.
- La manipulation : Les erreurs amenant aux déductions.
C'est le fruit de mes erreurs que je te livre ici; j'avais entamé là rédaction d'une explication complète sur le SolPartMenu il y a qques semaines.
Voici ce que j'ai écrit à ce jour.
Tu trouveras à la fin de ce texte la réponse à tes questions.

------------------------------------------------------------
Je vais tenter d'éclairer certains utilisateurs de DotNetNuke sur le SolPartMenu.

Il existe quatre types de classes qui à elles seules, régissent la maniere dont le SolPartMenu est affiché.
Tout d'abord, et avant d'entrer dans le détail de chacunes des classes, il est indispensable de les distinguer et de savoir sur quels éléments elles agissent.

1.1--- Les classes générales :

Ces classes sont dites générales car elles permettent de definir les éléments communs.

level="Root"
rootonly="False"
usearrows="False"
useskinpatharrowimages="False"
rightarrow="1x1.gif"
downarrow="1x1.gif"
userootbreadcrumbarrow="False"
rootbreadcrumbarrow="1x1.gif"
usesubmenubreadcrumbarrow="False"
submenubreadcrumbarrow="1x1.gif"
Display="horizontal"
menualignment="left"
delaysubmenuload="true"
separatorcssclass="MainMenuSeperator"
BackColor=""
IconBackgroundColor=""
highlightcolor=""
SelectedForeColor=""
SelectedColor=""
FontStyle="font-style: normal;"
menueffectsmenutransition=""
leftseparatoractive=""
rightseparatoractive=""
leftseparatorbreadcrumb=""
rightseparatorbreadcrumb=""

1.2---Les classes maîtresses :

Ces classes définissent le style pour l'ensemble du menu. Elles peuvent etre overridées (frangliscisme mais j'ai perdu le mot) par les classes plus précises en 1.3 et 1.4.
Néanmoins, il faudra les overrider si vous souhaitez différencier le premier niveau du neme niveau.

menucontainercssclass="MainMenu_MenuContainer"
menubarcssclass="MainMenu_MenuBar"
menuitemcssclass="MainMenu_MenuItem"
menuiconcssclass="MainMenu_MenuIcon"
menubreakcssclass="MainMenu_MenuBreak"
menuarrowcssclass="MainMenu_MenuArrow"
menurootarrowcssclass="MainMenu_RootMenuArrow"

1.3---Les classes du premier niveau du menu uniquement :

Ces classes ont la particularité de n'avoir d'effet que sur le premier niveau uniquement.

rootmenuitembreadcrumbcssclass="MainMenu_Out"
rootmenuitemcssclass="MainMenu_Out"
rootmenuitemactivecssclass="MainMenu_Active"
rootmenuitemselectedcssclass="MainMenu_Over"
rootmenuitemlefthtml=""
rootmenuitemrighthtml=""

1.4--- Les classes du sous-menu (pages qui sont enfantes du premier niveau) :

Ces classes n'ont d'effet que sur le second niveau et suivant. Elles n'ont aucun effet sur le premier niveau.

submenucssclass="MainMenu_SubMenu"
submenuitembreadcrumbcssclass=""
submenuitemactivecssclass=""
submenuitemselectedcssclass="SubMenu_Selected"
submenuitemlefthtml=""
submenuitemrighthtml=""

2.1--- A quoi correspondent les classes générales ?


useskinpatharrowimages=""
Ce parametre permet de spécifier, à l'aide de True ou False, l'endroit où les images communes se trouvent. Avec la valeur True, les images devront être dans ~/Portals/"PortalID"/Skins/"NomDuSkin"/. Avec la valeur false, les images devront se trouver dans ~/Images/. Ce parametre est utile si vous souhaitez que chaque site du portail puisse jouir d'images personnalisées pour une meme configuration, ou encore si vous souhaitez ordonner au mieux les dossier de DotNetNuke.

usearrows=""
Ce parametre permet d'indiquer au SolPartMenu s'il doit utiliser les flèches vers la droite et vers la gauche. Celle vers la droite indique le BreadCrumb (page visitée actuellement), ou encore indiquer que cette page possède un sous-menu.

rightarrow="spacer.gif"
Nom de l'image utilisée pour la fleche vers la droite.

downarrow="spacer.gif"

Nom de l'image utilisée pour la fleche vers le bas.

level=""
Indique le premier niveau du menu.
Avec la valeur Root, le premier niveau niveau sera toujours composé des pages mères de premiere classe.
Avec la valeur Child, le premier niveau sera constitué par les pages enfantes de la page sur laquelle vous êtes. Cette valeur est relative puisque si vous changez de page, le menu changera également. Elle peut etre utilisée afin de créer un "double SolPartMenu" comme sur www.dotnetnukerocks.com.
Avec la valeur Same, les pages du premier niveau seront celles qui sont au même niveau sémantique que la page sur laquelle vous vous trouverez. Cette valeur est relative elle aussi.

rootonly=""
Ce parametre permet de bloquer l'affichage des pages enfantes. Passé à True, le premier niveau du SolPartMenu uniquement sera montré, quelque soit les autres confgurations.

Display="vertical"
Ce parametre permet de choisir si l'affichage du SolPartMenu est vertical ou horizontal.

menualignment=""
Left, Center, ou Right. Ces valeurs définissent l'alignement à gauche, au centre, ou à droite du MenuContainer.

delaysubmenuload="true"
Cette valeur permet de différer le chargement du SolPartMenu afin de remédier à certains TimeOut lorsque la page charge tandisque le pointeur de souris se trouve sur le menu. Personnellement ce parametre est à True dans tous mes skins.

BackColor=""
Cette valeur représente la couleur du fond. Elle peut etre écrite en valeur HTML (#333333 pour noi par exemple), ou en valeur texte si celle ci est un standard. Yellow, Green, Red, Black ou encore White par exemple. Cette valeur peut également etre portée à Transparent.

IconBackgroundColor=""
Cette valeur représente la couleur du fond de la zone d'affichage de l'icône. Généralement mais pas toujours, elle est la même que Backcolor. La zone Icone s'affiche à gauche du nom de la page dans le menu ou sous-menu.

IconImgPath=""
Spécifie l'emplacement des icones. Par exemple "/Portals/0/". L'icone de la page Home s'appellera Home.ico obligatoirement.

highlightcolor=""
Cette valeur représente la couleur du texte changeant lorsque la souris passe sur une page. Elle reflette l'intuition "ca bouge donc ma souris se trouve ici".

SelectedForeColor=""
Cette valeur défini la couleur du fond pour le boutton de la page sur laquelle vous etes uniquement. Parametre associé à SelectedColor.

SelectedColor=""
Cette valeur défini la couleur du Texte pour le boutton de la page sur laquelle vous etes uniquement.

FontStyle="font-style: normal; "
Le style des polices du menu. Fonctionne pareillement à l'inclusion de code CSS dans du HTML ou ASP.

separatorcssclass="MainMenuSeperator"
Cette valeur permet d'activer le séparateur entre chaque boutton. Le séparateur se trouve entre chaque boutton, en bas lorsque Display="vertical", et à droite lorsque Display="horizontal".

MenuBarHeight="" **
Spécifie la hauteur en pixels de la barre du menu. Cette barre se trouve à gauche des bouttons.

MenuItemHeight=""  **
Spécifie la hauteur en pixels d'un boutton.

MouseOutDelay=""
Spécifie la valeur en millisecondes de la durée d'affichage du sous-menu lorsque la souris le quitte. Ainsi, avec la valeur 500, le sous-menu disparaitra une demi seconde apres etre sortie de sa zone d'effet Over.

** : Je préferre maintenant utiliser les parametres submenuitemlefthtml="" submenuitemrighthtml="" et rootmenuitemlefthtml="" rootmenuitemrighthtml="" en ajoutant un span ou un div de cette manière : "<span class='MenuspanFormat'>" et "</span>".
Avec côté CSS .MenuSpanFormat {margin : 0px 0px 0px 5px; text-align:left;}.



Voici le CSS associé à cette définition du contrôle SolPartMenu : (Skin.css)

/* Styles Solpart Menu */
/*---------------------*/
/* NOTE --> les classes remarquables sont
MainMenu_Out (pour les bouttons du menu non utilises),
MainMenu_Over (pour les bouttons en mode "selected"),
et MainMenu_Active (pour le boutton de la page que l'on visite) .  */
/*--------------------------------------------------------------------------------------------------------------------------------------------------*/

.MainMenu_MenuContainer { padding-left: 0; float:left;}
.MainMenu_MenuBar, .ModuleTitle_MenuBar { cursor: pointer; padding: 0; }
.MainMenu_SubMenu, .ModuleTitle_SubMenu { z-index: 1000; cursor: pointer; background: url(images/3x3+1.gif) repeat top left; margin: 6px 0 0 0; padding: 0 0 0 0; border: 1px solid #d8d9c8; }
.MainMenu_MenuItem, .ModuleTitle_MenuItem, .MainMenu_MenuArrow, .MainMenu_MenuIcon { color: #a1a1a1; background: #fbfcfa; font-weight: bold; padding: 0 0 0 0; height: 21px; border: 0; margin: 0 0 10px 0; }
.SubMenu_Selected, .ModuleTitle_MenuItemSel { font-weight: bold; cursor: pointer; color: #a1a1a1; background: #E0EEE5; padding: 0; height: 29px; border: 0; margin: 10px 0 0 0; }
.MainMenu_Out, .MainMenu_RootMenuArrow{ color: #fff; background: url(1x1.gif) no-repeat ; padding: 0; ; font-weight: bold; }
.MainMenu_Over { color: #fff; background: url(1x1.gif) no-repeat top right; padding: 0; text-align: left;  font-weight: bold; }
.MainMenu_Active, .MainMenu_BreadcrumbActive {color: #fff; background: url(1x1.gif) no-repeat top right ; padding: 0; ; font-weight: bold; }
.ModuleTitle_MenuBreak, .MainMenuSeperator, .MainMenu_MenuBreak, .ModuleTitle_MenuArrow, .ModuleTitle_RootMenuArrow, .ModuleTitle_MenuIcon { display: none; }


Donc si tu as bien compris, pour modifier :
- La typo : Regarde et modifie l'élément Font-Style définie dans le ascx. Regarde également si l'attribut CSS Font-style est utilisé autre part côté CSS.
- Couleur : Il faudra regarder les Attributs CSS Color, Background, et Background-color pour les éléments Root et niveau n.
- Position : C'est le contrôle lui même qu'il faudra déplacer côté ascx.

Seb
 
Nouveau message
11/01/2007 14:58
 
Wow ! Bien joué Seb !

C'est clair et complet !

Mais qui a dit qu'il utilisait SolParMenu ?
 
Nouveau message
12/01/2007 20:24
 

Bonsoir Seb et merci pour ta réponse.

Je vais analyser tout cela, je me suis aussi procurer de l'Aspégic 1000 pour le mal de tête ;-)

Non je plaisantais, merci, je vais essayer de dechiffrer tout cela.

++

Oldchap

 
Nouveau message
09/05/2007 17:34
 

Coucou a vous,

de mon cote j'essaye desesperement d'encadrer avec une bordure mon item du menu qui est le root de la page en cours. J'ai essaye quelques classes comme MainMenu_Active, _Over ... Auriew vous une idee ?

 
Nouveau message
09/05/2007 18:31
 

J'ai finalement trouve la classe correspondante : CSSNodeSelectedRoot

Par contre les attributs de bordure ne semblent pas marcher :(

 
Précédente
 
Suivante
HomeHomeForums DNNForums DNNDesign, présent...Design, présent...Style de la barre des menusStyle de la barre des menus