| Re: Menu CSS ciblage des onglets |
Titre du sujet : Re: Menu CSS ciblage des onglets
par Kris sur 30/08/2009 20:32:05
Si tu utilises un thème récent, tu as dans le fichier theme.html ceci :
<body id="<{$xoops_dirname}>" class="<{$xoops_langcode}>">
donc en css, tu peux faire celà par exemple :
/* Pour le menu horizontal du header */
#menuBar { margin: 0 0px; height: 30px; line-height: 30px; background: url("img/back_navi2.gif") no-repeat center bottom; clear: both; text-align: center; position: relative; width: 630px; voice-family: ""}""; voice-family:inherit; width: 630px; }
html>body #menuBar { width:630px;}
#menuBar a { background: transparent; border: none; text-indent: -9999px; overflow: hidden; }
/* lien normal */
#menuBar .navi1 a{width: 90px;height: 30px; float: left; left: 0px; }
#menuBar .navi2 a{width: 90px;height: 30px; float: left; left: 90px; }
#menuBar .navi3 a{width: 90px;height: 30px; float: left; left: 180px; }
#menuBar .navi4 a{width: 90px;height: 30px; float: left; left: 270px; }
#menuBar .navi5 a{width: 90px;height: 30px; float: left; left: 360px; }
#menuBar .navi6 a{width: 90px;height: 30px; float: left; left: 450px; }
#menuBar .navi7 a{width: 90px;height: 30px; float: left; left: 540px; }
/* lien hover */
#menuBar .navi1 a:hover {background: url("img/back_navi2.gif") no-repeat 5px 0px;}
#menuBar .navi2 a:hover {background: url("img/back_navi2.gif") no-repeat -85px 0px;}
#menuBar .navi3 a:hover {background: url("img/back_navi2.gif") no-repeat -175px 0px;}
#menuBar .navi4 a:hover {background: url("img/back_navi2.gif") no-repeat -265px 0px;}
#menuBar .navi5 a:hover {background: url("img/back_navi2.gif") no-repeat -355px 0px;}
#menuBar .navi6 a:hover {background: url("img/back_navi2.gif") no-repeat -445px 0px;}
#menuBar .navi7 a:hover {background: url("img/back_navi2.gif") no-repeat -535px 0px;}
/* lien active */
body#xhld0 .navi1 a {background: url("img/back_navi2.gif") no-repeat 5px -30px;}
body#smartmedia .navi2 a {background: url("img/back_navi2.gif") no-repeat -85px -30px;}
body#mylinks .navi3 a {background: url("img/back_navi2.gif") no-repeat -175px -30px;}
body#mydownloads .navi4 a {background: url("img/back_navi2.gif") no-repeat -265px -30px;}
body#rmmf .navi5 a {background: url("img/back_navi2.gif") no-repeat -355px -30px;}
body#smartpartner .navi6 a {background: url("img/back_navi2.gif") no-repeat -445px -30px;}
body#sitemap .navi7 a {background: url("img/back_navi2.gif") no-repeat -535px -30px;}
Plus simple que mettre du php ou javascript dans le fichier theme
@++
|
|
