Adaptation du menu sur Actiweb3.0

benflovideo Membre non connecté

Equipe Modération Equipe Communication Modérateur

Le 09/09/2014 à 21h24

Hello,

J'ai personnaliser le thème Actiweb 3 sous la v4.1 mais je galère beaucoup pour personnaliser le mini module connect.

Voici ce que ça donne actuellement (v4.0) : www.trains-et-trainz.fr

Et en local voici ce que ça donne (v4.1) :

capture_78cc5

J'ai, dans le dossier "modules" du template, créé un dossier "connect" dans lequel j'ai mis le fichier "connect_mini.css". Après de là je ne comprend rien du tout au nouveau css mis en place.

Pour info voici le code css actuellement en place dans le "connect_mini.css" (donc du site sous 4.0) :

Caché :

Code CSS :

.connect_form {
        background:#858585;
        border:1px solid #727272;
        border-radius:5px;
        -moz-border-radius:5px;
        -khtml-border-radius:5px;
        -webkit-border-radius:5px;
        padding-left:4px;
        padding-top:3px;
        margin:10px 30px 0px 0px;
        height:18px;
        width:115px;
        font-size:12px;
        color: #E9ECEF;
}
 
 
.connect_form:hover, .connect_form:focus {
        background:#898989;
        border-color:#858585;
}
 
div.connect_align {
        text-align:right;        
}
 
div.connect_align a {
        color:#ffffff;
}
 
.connect_align form {
        text-align:left;
        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;
}
 
 
p.auto_connect{ 
        margin:10px 0px 5px 10px;
        color:#969595;
}
 
p.auto_connect input.submit{ margin:0px 2px; }
 
p.connect_disconnect{
        clear:both;
        margin-top:8px; 
        padding:5px 0px; 
        text-align:center; 
        border-top:1px solid #3b3b3b;
}
 
 
 
 
.connect_align input.submit{ margin-left:23px; }
 
 
.connect_align ul, .connect_align li, .connect_align a {
  position: relative;
}
 
.connect_align {
  margin-top: -5px;
  height: 50px;
  float:right;
}
 
.left {
  height: 44px;
  float:left;
}
 
.connect_align > ul > li > a {
  display: inline-block;
  height: 32px;
  text-decoration: none;
}
 
 
.connect_align ul li {
  color: #ffffff;
  display: inline-block;
  font-size: 12px;
  height: 32px;
  padding: 17px 12px 0px 12px;
  text-decoration: none;
  float: left;
}
 
.connect_align > ul > li.submenu { color:white;background:#007E0F;height:33px; } /* COULEUR DU CONNECT NORMALE */
.connect_align > ul > li.submenu_alert { color:white;background:#B80000;height:33px;} /* COULEUR DU CONNECT ALERTE */
 
.connect_align ul { list-style: none; }
 
.connect_align .submenu { height: 32px; z-index: 200; }
.connect_align .submenu:hover > ul { 
        visibility:visible;
        opacity:1;
        transition:visibility 0s ease-out, opacity 0.3s ease-out ;
        -webkit-transition:visibility 0s ease-out, opacity 0.3s ease-out ;
        -moz-transition:visibility 0s ease-out, opacity 0.3s ease-out ;
        -o-transition:visibility 0s ease-out, opacity 0.3s ease-out ;
}
 
.connect_align > ul > li.submenu:hover > a{ height: 32px; }
 
img.connect_avatar{
        float:left;
        padding:5px;    
}
 
/* PLACEMENT DU SOUS-MENU DE CONNEXION */
.connect_align .submenu ul {
        position: absolute;
        background: #343434;
        left: -198px;
        top: 50px;
        height:133px;
        width:290px;
        z-index:200;
        border-top:3px solid #343434;
        border-bottom:3px solid #aeaeae;
        visibility:hidden;
        opacity:0;
        transition:visibility 1s ease-out, opacity 1s ease-out ;
        -webkit-transition:visibility 1s ease-out, opacity 1s ease-out ;
        -moz-transition:visibility 1s ease-out, opacity 1s ease-out ;
        -o-transition:visibility 1s ease-out, opacity 1s ease-out ;
}
 
.connect_align .submenu_alert ul { border-top:3px solid #602b1b; }
 
.connect_align .connect ul {
        left:0px;
        width:194px;
        height:135px;
}
 
.connect_align .submenu ul li{ 
        padding-top:3px;
        height: auto;
        text-align:left; 
}
 
.connect_align .submenu ul li a {
        font-size: 11px;
        line-height: 20px;
        text-align:left;
        border-bottom:1px solid #383838;
}
.connect_align .submenu ul li a:last-child { border-bottom:none; }
 
div.welcome{
        overflow:hidden;
        float:right;
        text-align:right;
        color:#ffffff;
        font-size:10px;
        font-style:Italic;
        padding:13px 10px 0px 0px;
}
div.welcome a, div.welcome a:hover{
        color:#ffffff;
        text-transform : capitalize;
        font-size:11px;
        font-style:normal;
        font-weight:bold;
}
div.welcome a:hover{ color:#ffffff; }
 
li.disconnect, li.subscribe{ 
        margin:0px 3px;
        height:29px !important; 
        border-bottom:2px solid #343434;
        transition: border 2s ease-out;
    -webkit-transition: border 2s ease-out;
    -moz-transition: border 2s ease-out;
    -o-transition: border 2s ease-out;
}
li.disconnect:hover, li.subscribe:hover{ 
        border-bottom:2px solid #343434;
        transition: border 0.5s ease-out;
    -webkit-transition: border 0.5s ease-out;
    -moz-transition: border 0.5s ease-out;
    -o-transition: border 0.5s ease-out;
}
 
li.disconnect a, li.subscribe a { 
        font-size:11px; 
        color:#ffffff;
        transition: color 2s ease-out;
        -webkit-transition: color 2s ease-out;
    -moz-transition: color 2s ease-out;
    -o-transition: color 2s ease-out;
}
li.disconnect a:hover, li.subscribe a:hovers{ 
        font-size:11px;
        color:#ffffff; 
        text-decoration:none; 
        transition: color 0.5s ease-out;
        -webkit-transition: color 0.5s ease-out;
    -moz-transition: color 0.5s ease-out;
    -o-transition: color 0.5s ease-out;
}

Si quelqu'un pouvait m'éclaircir sur la conversion à faire ça serait super

Merci d'avance,

Benji

benflovideo Membre non connecté

Equipe Modération Equipe Communication Modérateur

Le 11/09/2014 à 21h54

#139974

Hello,

Quelques nouvelles : j'ai pas mal avancer, seul soucis avec les liens. Voici mon code dans le connect_mini.tpl

Code TPL :

<ul>
            # IF U_ALERT #    
                <li class="submenu submenu_alert">{L_MY_PROFIL}  <span style="font-size:10px;vertical-align:top;">({NUMBER_TOTAL_ALERT})</span> 
            # ELSE #
                <li class="submenu">{L_MY_PROFIL}
            # ENDIF #
                <ul>
                    <img src="{U_AVATAR_IMG}" 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>
                    </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>
                    </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>
                    </li> 
                    # ENDIF #
                    <li class="disconnect">
                        <img src="{PATH_TO_ROOT}/templates/{THEME}/images/admin/ranks_mini.png" alt="" class="valign_middle" /> <a href="{U_DISCONNECT}" class="small_link">{L_DISCONNECT} </a>            
                    </li>
                </ul>
            </li>
 
        </ul>

Et seul le lien "Message privée" fonctionne. Les autres liens renvoient sur la page sur laquelle l'utilisateur se trouve. Et lorsque je me déconnecte (depuis l'administration), j'ai ceci : ERR_TOO_MANY_REDIRECTS.

A noter que sur le thème par défaut aucun soucis. Je vais essayer de corriger le soucis en me basant sur ce dernier, mais si c'est général une correction serait à prévoir

Benji

EDIT : dans le thème par défaut c'est :

Code TPL :

<a href="${relative_url(UserUrlBuilder::home_profile())}" class="small"> {L_PRIVATE_PROFIL}</a>

et non :

Code TPL :

<a href="{U_HOME_PROFILE}" class="small_link">{L_PRIVATE_PROFIL}</a>

Cependant j'ai toujours le soucis quand je me déconnecte (que ça soit sur le menu connect ou depuis l'admin et même avec le thème par défaut)

Répondre

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

benflovideo Membre non connecté

ElenWii Membre non connecté

benflovideo Membre non connecté

ElenWii Membre non connecté

benflovideo Membre non connecté

benflovideo Membre non connecté

babsolune Membre non connecté

benflovideo Membre non connecté

ElenWii Membre non connecté

benflovideo Membre non connecté

benflovideo Membre non connecté