Menu de connexion

Menu de connexion [Réglé]

Créations de Thèmes

Hugo Membre non connecté

Booster Roquette

Le 25/10/2013 à 16h15

#133207

Reprise du message précédent

Voici mon code TPl:

Code TPL :

<div id='cssmenu'>
<ul>
<li class='active'><a href='{PATH_TO_ROOT}/'><span>Accueil</span></a>
<li class="has-sub">
<a href="#"><span>Les News</span></a>
<ul>
         <li><a href="#"><span>Evénements</span></a></li>
         <li><a href="#"><span>L'Association</span></a></li>
         <li><a href="#"><span>L'Airsoft en général</span></a></li>
 <li><a href="#"><span>Magazines & WebMagazines</span></a></li>
 <li><a href="#"><span>Shops</span></a></li>
 <li><a href="#"><span>Associations et équipes</span></a></li>
 <li><a href="#"><span>Autres</span></a></li>
</ul>
</li>
<li class="active"></li>
<li class="has-sub">
<a href="{PATH_TO_ROOT}/forum"><span>Forum</span></a>
<ul>
         <li><a href="#"><span>L'Airsoft en général</span></a></li>
         <li><a href="#"><span>Forum Airsoft33</span></a></li>
         <li><a href="#"><span>Les reviews</span></a></li>
         <li><a href="#"><span>Forums Departementaux</span></a></li>
</ul>
</li>
<li class="active"></li>
<li class="has-sub"><a href="#"><span>L'Association</span></a>
<ul>
<li><a href="#"><span>Qui sommes-nous ?</span></a></li>
<li><a href="#"><span>Organigrames</span></a></li>
<li><a href="#"><span>Status</span></a></li>
<li><a href="#"><span>Réglement</span></a></li>
<li><a href="#"><span style="color:red;">Adhésion</span></a></li>
<li><a href="#"><span>Histoire</span></a></li>
<li><a href="#"><span>Aider l'Association</span></a></li>
<li><a href="#"><span>Partenaires</span></a></li>
<li><a href="#"><span>Nos logos</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Le Site</span></a>
<ul>
<li><a href="#"><span>La Charte</span></a></li>
<li><a href="{PATH_TO_ROOT}/user/"><span>Les Membres</span></a></li>
<li><a href="#"><span>L'équipe de Modération</span></a></li>
<li><a href="#"><span>Recrutement</span></a></li>
<li><a href="{PATH_TO_ROOT}/faq/"><span>Foire Aux Questions</span></a></li>
</ul>
</li>
<li class="active"></li>
<li class="has-sub"><a href="#"><span>La Communauté</span></a>
<ul>
<li><a href="#"><span>Les Petites Annonces</span></a></li>
<li><a href="#"><span>Liste des équipes</span></a></li>
<li><a href="{PATH_TO_ROOT}/calendar/"><span>Le Calendrier</span></a></li>
<li><a href="{PATH_TO_ROOT}/gallery/"><span>La Galerie Photos</span></a></li>
<li><a href="{PATH_TO_ROOT}/media/"><span>Les Vidéos</span></a></li>
<li><a href="{PATH_TO_ROOT}/download/"><span>Les Téléchargements</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>{PSEUDO}</span></a>
</li>
</ul>
</div>

Teki Membre non connecté

Booster Mortier

Le 27/10/2013 à 17h05

#133266

Je ne t'avais pas oublié (;

Alors, efface tout ce que tu as fait et tout ce qui concerne ce menu.
Ensuite, ouvre le fichier design.css, et applique un margin-top de 40px au div#main.
Met un margin-top de 42px au div#left_menu et enfin, supprime le 'height' du #subheader.

Je précise que j'ai testé sous le thème Base, il se peut que ça diffère un peu sur ton thème.

Ensuite, ouvre ton connect_mini.tpl. Supprime tout ce qui s'y trouve, et place y ça :

Code TPL :

# IF C_VERTICAL #
# IF C_USER_NOTCONNECTED #
<script type="text/javascript">
<!--
function check_connect()
{
return checkForms(new Array(
'login', "{L_REQUIRE_PSEUDO}", 
'password', "{L_REQUIRE_PASSWORD}"
));
}
-->
</script>
<form action="{U_CONNECT}" method="post" onsubmit="return check_connect();">
<div class="module_mini_container">
<div class="module_mini_top">
<h5 class="sub_title">{L_CONNECT}</h5>
</div>
<div class="module_mini_contents connect_vertical"">
<p>
<label>{L_PSEUDO}
<br />
<input type="text" class="text" id="login" name="login" maxlength="25" /></label>
<br />
<label>{L_PASSWORD}
<br />
<input type="password" id="password" name="password" class="text" maxlength="30" /></label>
<br />
<label>{L_AUTOCONNECT} <input checked="checked" type="checkbox" name="auto" /></label>
</p>
<p>
<input type="hidden" name="redirect" value="{REWRITED_SCRIPT}" />
<input type="hidden" name="token" value="{TOKEN}" />
<input type="submit" name="connect" value="{L_CONNECT}" class="submit" />
</p>
<p class="connect_register">
# IF C_USER_REGISTER # 
<a class="small_link" href="${relative_url(UserUrlBuilder::registration())}"><img src="{PATH_TO_ROOT}/templates/{THEME}/images/register_mini.png" alt="" class="valign_middle" /> {L_REGISTER}</a> 
# ENDIF #
<br />
<a class="small_link" href="${relative_url(UserUrlBuilder::forget_password())}"><img src="{PATH_TO_ROOT}/templates/{THEME}/images/forget_mini.png" alt="" class="valign_middle" /> {L_FORGOT_PASS}</a>
</p>
</div>
<div class="module_mini_bottom">
</div>
</div>
</form>
# ELSE #
<div class="module_mini_container">
<div class="module_mini_top">
<h5 class="sub_title">{L_PROFIL}</h5>
</div>
<div class="module_mini_contents connect_content">
<ul>
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/images/admin/members_mini.png" alt="" class="valign_middle" /> <a href="${relative_url(UserUrlBuilder::home_profile())}" class="small_link">{L_PRIVATE_PROFIL}</a></li>
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/images/{IMG_PM}" class="valign_middle" alt="" /> <a href="{U_USER_PM}" class="small_link">{L_NBR_PM}</a>&nbsp;</li>
 
# IF C_ADMIN_AUTH # 
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/images/admin/ranks_mini.png" alt="" class="valign_middle" /> <a href="{PATH_TO_ROOT}/admin/admin_index.php" class="small_link">{L_ADMIN_PANEL}
# IF C_UNREAD_ALERT #
({NUMBER_UNREAD_ALERTS})
# ENDIF #
</a></li> 
# ENDIF #
 
# IF C_MODERATOR_AUTH # 
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/images/admin/modo_mini.png" alt="" class="valign_middle" /> <a href="${relative_url(UserUrlBuilder::moderation_panel())}" class="small_link">{L_MODO_PANEL}</a></li> 
# ENDIF #
 
# IF C_UNREAD_CONTRIBUTION #
# IF C_KNOWN_NUMBER_OF_UNREAD_CONTRIBUTION #
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/images/contribution_panel_mini_new.gif" alt="" class="valign_middle" /> <a href="{U_CONTRIBUTION}" class="small_link">{L_CONTRIBUTION_PANEL} ({NUM_UNREAD_CONTRIBUTIONS})</a></li> 
# ELSE #
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/images/contribution_panel_mini_new.gif" alt="" class="valign_middle" /> <a href="{U_CONTRIBUTION}" class="small_link">{L_CONTRIBUTION_PANEL}</a></li> 
# ENDIF #
# ELSE #
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/images/contribution_panel_mini.png" alt="" class="valign_middle" /> <a href="{U_CONTRIBUTION}" class="small_link">{L_CONTRIBUTION_PANEL}</a></li> 
# ENDIF #
 
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/images/admin/home_mini.png" alt="" class="valign_middle" /> <a href="{U_DISCONNECT}" class="small_link">{L_DISCONNECT}</a></li>
</ul>
</div>
<div class="module_mini_bottom">
</div>
</div>
# ENDIF #
# ELSE #
<div id='cssmenu'>
<ul>
<li class='active'><a href='{PATH_TO_ROOT}/'><span>Accueil</span></a>
<li class="has-sub">
<a href="#"><span>Les News</span></a>
<ul>
         <li><a href="#"><span>Evénements</span></a></li>
         <li><a href="#"><span>L'Association</span></a></li>
         <li><a href="#"><span>L'Airsoft en général</span></a></li>
 <li><a href="#"><span>Magazines & WebMagazines</span></a></li>
 <li><a href="#"><span>Shops</span></a></li>
 <li><a href="#"><span>Associations et équipes</span></a></li>
 <li><a href="#"><span>Autres</span></a></li>
</ul>
</li>
<li class="active"></li>
<li class="has-sub">
<a href="{PATH_TO_ROOT}/forum"><span>Forum</span></a>
<ul>
         <li><a href="#"><span>L'Airsoft en général</span></a></li>
         <li><a href="#"><span>Forum Airsoft33</span></a></li>
         <li><a href="#"><span>Les reviews</span></a></li>
         <li><a href="#"><span>Forums Departementaux</span></a></li>
</ul>
</li>
<li class="active"></li>
<li class="has-sub"><a href="#"><span>L'Association</span></a>
<ul>
<li><a href="#"><span>Qui sommes-nous ?</span></a></li>
<li><a href="#"><span>Organigrames</span></a></li>
<li><a href="#"><span>Status</span></a></li>
<li><a href="#"><span>Réglement</span></a></li>
<li><a href="#"><span style="color:red;">Adhésion</span></a></li>
<li><a href="#"><span>Histoire</span></a></li>
<li><a href="#"><span>Aider l'Association</span></a></li>
<li><a href="#"><span>Partenaires</span></a></li>
<li><a href="#"><span>Nos logos</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Le Site</span></a>
<ul>
<li><a href="#"><span>La Charte</span></a></li>
<li><a href="{PATH_TO_ROOT}/user/"><span>Les Membres</span></a></li>
<li><a href="#"><span>L'équipe de Modération</span></a></li>
<li><a href="#"><span>Recrutement</span></a></li>
<li><a href="{PATH_TO_ROOT}/faq/"><span>Foire Aux Questions</span></a></li>
</ul>
</li>
<li class="active"></li>
<li class="has-sub"><a href="#"><span>La Communauté</span></a>
<ul>
<li><a href="#"><span>Les Petites Annonces</span></a></li>
<li><a href="#"><span>Liste des équipes</span></a></li>
<li><a href="{PATH_TO_ROOT}/calendar/"><span>Le Calendrier</span></a></li>
<li><a href="{PATH_TO_ROOT}/gallery/"><span>La Galerie Photos</span></a></li>
<li><a href="{PATH_TO_ROOT}/media/"><span>Les Vidéos</span></a></li>
<li><a href="{PATH_TO_ROOT}/download/"><span>Les Téléchargements</span></a></li>
</ul>
</li>
# IF C_USER_NOTCONNECTED #
<script type="text/javascript">
<!--
function check_connect(){
if(document.getElementById('login').value == "") {
alert("{L_REQUIRE_PSEUDO}");
return false;
}
if(document.getElementById('password').value == "") {
alert("{L_REQUIRE_PASSWORD}");
return false;
}
return true;
}
-->
</script>
<li class="has-sub"><a href="#"><span>Invité</span></a>
<ul>
<div class="connect_align">
<form action="{U_CONNECT}" method="post" onsubmit="return check_connect();" class="connect_align">
<p class="connect_inline"><input type="text" id="login" name="login" value="{L_PSEUDO}" class="connect_form" onfocus="if( this.value == '{L_PSEUDO}' ) this.value = '';" maxlength="25" />
<input type="password" id="password" name="password" class="connect_form" value="******" onfocus="if( this.value == '******' ) this.value = '';" maxlength="30" />
<input checked="checked" type="checkbox" name="auto" />
<input type="hidden" name="redirect" value="{REWRITED_SCRIPT}" />
<input type="submit" name="connect" value="{L_CONNECT}" class="submit" /></p>
</form>
# IF C_USER_REGISTER #
<form action="{U_REGISTER}" method="post" class="connect_align">
<p class="connect_inline"><input type="submit" name="register" value="{L_REGISTER}" class="submit" /></p>
</form>
# ENDIF #
</div>
# ELSE #
<li class="has-sub"><a href="#"><span>{PSEUDO}</span></a>
<ul>
<div class="connect_align">
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/admin/members_mini.png" alt="" class="valign_middle" /> <a href="{U_HOME_PROFILE}" class="small_link">{L_PRIVATE_PROFIL}</a>&nbsp;<br/>
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/{IMG_PM}" class="valign_middle" alt="" /> <a href="{U_USER_PM}" class="small_link">{L_NBR_PM}</a>&nbsp;<br/>
# IF C_ADMIN_AUTH #
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/admin/ranks_mini.png" alt="" class="valign_middle" /> <a href="{U_ADMINISTRATION}" class="small_link">{L_ADMIN_PANEL} # IF C_UNREAD_ALERT # ({NUMBER_UNREAD_ALERTS}) # ENDIF # </a>&nbsp; <br/>
# ENDIF #
# IF C_UNREAD_CONTRIBUTION #
# IF C_KNOWN_NUMBER_OF_UNREAD_CONTRIBUTION #
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/contribution_panel_mini_new.gif" alt="" class="valign_middle" /> <a href="{U_CONTRIBUTION}" class="small_link">{L_CONTRIBUTION_PANEL} ({NUM_UNREAD_CONTRIBUTIONS})</a>&nbsp;<br/>
# ELSE #
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/contribution_panel_mini_new.gif" alt="" class="valign_middle" /> <a href="{U_CONTRIBUTION}" class="small_link">{L_CONTRIBUTION_PANEL}</a>&nbsp;<br/>
# ENDIF #
# ELSE #
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/contribution_panel_mini.png" alt="" class="valign_middle" /> <a href="{U_CONTRIBUTION}" class="small_link">{L_CONTRIBUTION_PANEL}</a>&nbsp;<br/>
# ENDIF #
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/admin/home_mini.png" alt="" class="valign_middle" /> <a href="{U_DISCONNECT}" class="small_link">{L_DISCONNECT}</a>
</div>
# ENDIF #
</ul>
</li>
</ul>
</div>
# ENDIF #
<div class="spacer" style="clear:both"> </div>

Ensuite, ouvre ton fichier connect_mini.css et remplace tout le contenu par :

Code CSS :

.connect_form {
background:url('images/form.png') no-repeat right bottom;
border:none;
padding-left:4px;
padding-top:3px;
height:18px;
width:115px;
font-size:12px;
color: #E9ECEF;
}
.connect_form:hover {
background:url('images/form.png') no-repeat right bottom;
border:none;
}
.connect_form:focus {
background:url('images/form.png') no-repeat right bottom;
border:none;
}
 
div.connect_align {
padding:7px 8px;
}
 
div.connect_align a {
color:#FFF;
}
 
.connect_align form {
display:inline;
}
 
.connect_inline {
display:inline;
}
 
.connect_content {
text-align:left;
}
 
.connect_content ul{
margin:0;
padding:0;
padding-left:4px;
list-style-type:none;
line-height:18px;
}
 
.connect_register {
margin:0;
margin-top:5px;
}
 
.connect_vertical input#login, .connect_vertical input#password {
width:120px;
}
 
#cssmenu{ height:40px; display:block; padding:0; margin:20px auto;  border:1px solid; border-radius:5px; } 
#cssmenu > ul {list-style:inside none; padding:0; margin:0;} 
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;} 
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); } 
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;} 
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; } 
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;} 
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; } 
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;} 
#cssmenu ul li.has-sub:hover > a{ background:#435401; border-color:#435401; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } 
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;} 
#cssmenu ul li.has-sub > a:hover{background:#435401; border-color:#435401;} 
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#435401; border-radius:0 0 5px 5px; z-index:999; } 
#cssmenu ul li > ul{width:200px;} 
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} 
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); } 
 
#cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#435401; background:-moz-linear-gradient(top,  #668000 0%, #668000 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#435401), color-stop(100%,#435401)); background:-webkit-linear-gradient(top,  #668000 0%,#435401 100%); background:-o-linear-gradient(top, #668000 0%,#435401 100%); background:-ms-linear-gradient(top, #668000 0%,#435401 100%); background:linear-gradient(top,  #668000 0%,#435401 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#4D5050', endColorstr='#435401',GradientType=0 ); } 
#cssmenu{border-color:#804000;} 
#cssmenu > ul > li > a{border-right:1px solid #804000; color:#fff;} 
#cssmenu > ul > li > a:after{border-color:#435401;} 
#cssmenu > ul > li > a:hover{background:#435401;}

J'ai mis tout le code HTML de ton menu et le CSS associé dans les fichiers du mini_connect.
Dis-moi si tu rencontres un soucis (;

PS : Le code n'est pas le plus propre possible, j'avoue que j'ai fait ça un peu rapidement ..

Édité par Teki Le 27/10/2013 à 17h06

"Je suis un mec simple, y'a pas plus compliqué que moi"

Répondre

Vous n'êtes pas autorisé à écrire dans cette catégorie