sous-entête du site

sous-entête du site [Réglé]

il me plaît bien ... Créations de Thèmes

lobab Membre non connecté

Booster Mortier

Le 23/01/2013 à 17h59

#122064

Salut les gens,

Bien évidemment, je présente toutes les ficelles de mon caleçon à l'équipe pour la sortie finale de la 4

J'aime beaucoup le sous-entête du site concernant le menu horizontal et le design du module connect (avec son sous-menu

) et j'ai donc tenté de le reproduire

Je suis donc en train de faire quelques essais, mais je bloque sur l'affichage du sous-menu qui ne veut pas apparaître

...

Je modifie le tpl et le css du connect dans le dossier du thème (pas directement dans le module) donc là je suis quasi sûr que je suis au bon endroit, mais aucune de mes tentatives ne me donne le sous-menu

Pourriez-vous me donner quelques indices pour le reproduire

Voilà ce que j'ai modifié dans templatesloremmodulesconnectconnect_mini.tpl :

Caché :

Code TPL :

    <div class="connect_align">
        <ul>
            <li class="submenu">Bienvenue <strong><span style="color:green">{PSEUDO}</span></strong>
                <ul>
                    <img src="/templates/phpboost/images/{L_PRIVATE_AVATAR}" alt="avatar" title="Avatar" width="90px" class="connect_avatar"/>
                    <li>
                        <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;
                    </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="{U_ADMINISTRATION}" class="small_link">{L_ADMIN_PANEL} # IF C_UNREAD_ALERT # ({NUMBER_UNREAD_ALERTS}) # ENDIF # </a>&nbsp; 
                    </li>
                    # ENDIF #
                    <li>
                        # 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;
                            # 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;
                            # 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;
                        # ENDIF #
                    </li>
                    <li class="disconnect">
                            <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>
            </li>
    </div>

et bien sûr connect_mini.css dans le même dossier :

Caché :

Code CSS :

* {
    font-size: 100%;
    margin: 0;
    padding: 0;
}
a {
    font-weight: bold;
    text-decoration: none;
}
a.small_link {
    font-size: 11px;
}
.connect_form {
    background:url('images/form.png') no-repeat right bottom;
    border:none;
    padding-left:4px;
    padding-top:3px;
    height:19px;
    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 {
    text-align: right;
 
    float:right;
    margin-left:120px;
    border:1px solid #999;
    border-left:1px solid #555;
    border-right:1px solid #555;
    border-top:1px solid #111;
    padding: 5px 10px;
    border-radius:4px;
    background:url('../../theme/images/bg_tblack.png') repeat right bottom;
}
 
div.connect_align a {
    color:#FFFFFF;
}
div.connect_align a:hover {
    color#4C6500;
}
 
.connect_align {
    float:right;
    height:44px;
}
 
.connect_align .submenu ul {
    background: none repeat scroll 0 0 #353535;
    border-bottom: 2px solid #99B1CB;
    border-top: 3px solid #2E5C35;
    height: 115px;
    left: -101px;
    opacity: 0;
    padding-top: 10px;
    position: absolute;
    top: 43px;
    transition: visibility 1s ease-out 0s, opacity 0.4s ease-out 0s;
    visibility: hidden;
    width: 300px;
    z-index: 200;
}
 
.connect_align > ul > li.submenu {
    background: url("/templates/phpboost/modules/connect/images/green.png") repeat-x scroll 0 0 transparent;
}
.connect_align .submenu {
    height: 32px;
    z-index: 200;
}
.connect_align .submenu ul li a:last-child {
    border-bottom: medium none;
}
.connect_align .submenu ul li {
    height: auto;
    padding-top: 3px;
    text-align: left;
}
 
.connect_align .submenu ul li a {
    font-size: 11px;
    line-height: 20px;
    text-align: left;
}
.connect_align ul li {
    color: #FFFFFF;
    display: inline-block;
    float: left;
    font-size: 12px;
    height: 32px;
    padding: 12px 12px 0;
    text-decoration: none;
}
.connect_align ul li ul li {
    display: list-item;
    float: none;
    padding-left: 100px;
}
.connect_align ul {
     list-style: none outside none;
}
.connect_align ul, .connect_align li, .connect_align a {
    position: relative;
}
ul {
    line-height: normal;
    margin: 0;
}
.connect_align form {
    text-align:right;
    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;
}
img.connect_avatar {
    float: left;
    padding: 5px;
}
img {
    border: medium none;
    overflow: scroll;
}
.valign_middle {
    vertical-align: middle;
}

Merci pour l'aide

La puissance est un sommet de connaissances et l'intelligence est le moyen d'y accéder ... Est-ce pour ça qu'il y a tant de cons en bas des pistes ???
Heureux celui qui est sourd, lui au moins, peut écouter le silence