forum test team boulet
 
AccueilS'enregistrerConnexion

Partagez | 
 

 sauvegarde codes pour panneau coulissant

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
éléa
Administrateur
Administrateur
avatar

Cancer
Messages : 603
Age : 47

MessageSujet: sauvegarde codes pour panneau coulissant   Sam 27 Fév - 16:49

Widgets FA dans un volet coulissant


Afficher les Widgets



Il faut bien sûr commencer par aller activer les Widgets. Pour cela allez dans l'onglet "Modules" de votre Panneau d'administration. Dans la première partie de liens de la colonne de gauche, dans "Portail & Widgets", cliquez sur "Gestion des Widgets du forum".
Pour "Afficher les widgets du forum" mettez bien sûr "oui".
Le LS utilise les widgets de gauche, dans un premier temps, donc mettez 200 dans la largeur du widget gauche et laissez 0 dans celui de droite.
Enregistrez.
Sur la même page pensez ensuite à personnaliser les widgets que vous souhaitez voir apparaitre. Vous avez tout les widgets FA en bas, il suffit de cliquer sur l'un, maintenir le clic et le faire glisser dans la colonne de gauche sur le schéma au-dessus. Pensez bien à enregistrer à chaque fois !

Modification du template




Afin de pouvoir inclure proprement le bouton d'ouverture et de fermeture du widget nous allons devoir modifier le template "haut de page", ou "overall_header" de son autre nom.
Pour ceux qui ont déjà modifié le template pour autre chose, vous devez simplement réaliser les modifications que je vais vous donner ci-dessous. Cela vous permettra de ne pas perdre vos précédentes modif'.
Au passage, je signale que je donne le numéro des lignes selon le template de base, si vous l'avez déjà modifié ces numéros risquent d'avoir changé.


Ligne 249, juste après ce code :

Code:
<a name="top"></a>
   {JAVASCRIPT}

Ajoutez celui-ci :
Code:
<div id="open">

Ligne 345, juste avant la fermeture du body, donc juste avant ceci :
Code:
   </body>
    </html>
    <!-- END html_validation -->

Ajoutez ça :
Code:
</div>

Pour finir, ligne 325, repérez ce code-là (qui est le code d'affichage des Widgets) :
Code:
   <div id="{ID_LEFT}">
             <!-- BEGIN giefmod_index1 -->
                {giefmod_index1.MODVAR}
                   <!-- BEGIN saut -->
                   <div style="height:{SPACE_ROW}px"></div>
                   <!-- END saut -->
             <!-- END giefmod_index1 -->
    </div>

Et ajoutez juste avant lui ce code :
Code:
   <div class="button_widgets">
     <a href="#open" class="open"></a>
     <a href="#close" class="close"></a>
     </div>

   N'oubliez pas de valider votre template.

Le CSS

Code:
   /* WIDGETS */

    #left /* changer par right pour le widget de droite */
    {
      position: fixed;
      top: 0;
      left: 0; /* changer par right pour le widget de droite */
      width: 235px !important;
      height: 100%;
      overflow: auto;
      border-right: 20px solid #ae3e2c; /* changer la couleur bordure - changer par border-left pour le widget de droite */
      margin-left: -235px; /* changer par margin-right pour le widget de droite */
      transition: 1s;
    }
    .button_widgets
    {
      position: fixed;
      z-index: 999;
      top: 50%;
      left: 0; /* changer par right pour le widget de droite */
      margin-top: -30px;
      margin-left: 0px; /* changer par margin-right pour le widget de droite */
      width: 60px;
      height: 150px;
      background: white; /* mettre ici image du bouton - taille ci-dessus 60par150 */
      transition: 1s;
    }
    .button_widgets a
    {
      display: block;
      width: 100%;
      height: 100%;
    }
    .button_widgets .close
    {
      display: none;
    /* si vous voulez une autre image pour le close la mettre ici en background - meme taille que image de fond bouton */
    }
    #open:target #left /* changer par juste left par right pour le widget de droite */
    {
      margin-left: 0px; /* changer par margin-right pour le widget de droite */
      transition: 1s;
    }
    #open:target .button_widgets
    {
      margin-left: 235px; /* changer par margin-right pour le widget de droite */
      transition: 1s;
    }
    #open:target .close
    {
      display: block;
    }
    #open:target .open
    {
      display: none;
    }

Modifications

Image bouton - vous devez mettre une image de 60*150px pour votre bouton. Cette image est la même pour ouvrir et fermer, mais si vous souhaitez une image différente pour fermer vous devrez mettre une image en fond dans le bloc ".button_widgets .close", qui soit de la même taille que votre image onglet. Attention car l'image sera par dessus l'autre, donc si elle a de la transparence on risque de voir celle de base.
Si vous voulez du coup un bouton différent pour les deux avec transparence, le plus simple est d'enlever le fond de ".button_widgets" et mettre vos deux images en fond dans : ".button_widgets .open" (que vous devrez ajouter), et ".button_widgets .close", pour respectivement le bouton ouvrir et fermer.

Widgets à droite - si vous souhaitez utiliser ce système pour des widgets à droite, il vous faut tout d'abord activer vos widgets, bien placer vos éléments voulus dans la colonne de droite et indiquer 200px en largeur pour la colonne de droite et 0px pour celle de gauche. Puis, toutes les annotations CSS vont vous aider à modifier le code pour remplacer les "left" par "right" là où il faut, y compris pour les marges.

Widgets gauche ET droite - pour utiliser les deux côtés d'onglets, vous devez donc tout d'abord les activer tout les deux. Puis, là où vous avez mis une ouverture de bloc div id="open" ous devrez ajouter une seconde fois ce code en renommant le bloc, avec "open2" par exemple. Pensez également à mettre une seconde fois la fermeture du bloc en bas, là où vous avez ajouté "/div", il faut qu'il y soit deux fois.
Vous devez également mettre deux fois le code des boutons dans le template (le dernier donné), en changeant les noms là-aussi.
Il vous faut ensuite mettre le CSS de l'onglet gauche, puis une seconde fois ce CSS avec les modifications expliquées pour l'onglet droit.
Attention : dans le CSS de l'onglet droit pensez bien à remplacer le #open:target par un open2, de la même façon, si vous voulez des images de bouton différentes vous devrez les mettre en fond dans les blocs respectifs.
Revenir en haut Aller en bas
http://tous-amis.forumactif.com
éléa
Administrateur
Administrateur
avatar

Cancer
Messages : 603
Age : 47

MessageSujet: Re: sauvegarde codes pour panneau coulissant   Sam 27 Fév - 16:54

Pour faire le panneau en "OnMouseOver" :

On va commencer par faire une toute petite modification dans le HTML.
Actuellement les boutons sont ici :
Code:
    <div class="button_widgets"><a href="#open" class="open"></a><a href="#close" class="close"></a></div>

On va les déplacer dans le code pour les mettre juste après cette ligne là :
Code:
<div id="left">

Comme on n'a plus besoin du click, on peu même supprimer tout ça :
Code:
    <a href="#open" class="open"></a><a href="#close" class="close"></a>

Maintenant, on va venir enlever toute cette partie là du CSS :
Code:
    .button_widgets a
    {
      display: block;
      width: 100%;
      height: 100%;
    }
    .button_widgets .close
    {
      display: none;
    /* si vous voulez une autre image pour le close la mettre ici en background - meme taille que image de fond bouton */
    }
    #open:target #left /* changer par juste left par right pour le widget de droite */
    {
      margin-left: 0px; /* changer par margin-right pour le widget de droite */
      transition: 1s;
    }
    #open:target .button_widgets
    {
      margin-left: 235px; /* changer par margin-right pour le widget de droite */
      transition: 1s;
    }
    #open:target .close
    {
      display: block;
    }
    #open:target .open
    {
      display: none;
    }

Et à la place on met juste ces petites lignes :
Code:

    #left:hover /* changer par juste left par right pour le widget de droite */
    {
      margin-left: 0px; /* changer par margin-right pour le widget de droite */
      transition: 1s;
    }
    #left:hover .button_widgets
    {
      margin-left: 235px; /* changer par margin-right pour le widget de droite */
      transition: 1s;
    }
Revenir en haut Aller en bas
http://tous-amis.forumactif.com
éléa
Administrateur
Administrateur
avatar

Cancer
Messages : 603
Age : 47

MessageSujet: Re: sauvegarde codes pour panneau coulissant   Sam 27 Fév - 16:55

Tutos NerverUtopia, liens :

[Seuls les administrateurs ont le droit de voir ce lien]

[Seuls les administrateurs ont le droit de voir ce lien]
Revenir en haut Aller en bas
http://tous-amis.forumactif.com
éléa
Administrateur
Administrateur
avatar

Cancer
Messages : 603
Age : 47

MessageSujet: Re: sauvegarde codes pour panneau coulissant   Sam 27 Fév - 16:57

Sauvegarde de mon propre CSS (juste la partie concernant le panneau widget) une fois modifié:

Code:

    /* WIDGETS */

    #left /* changer par right pour le widget de droite */
    {
      position: fixed;
      top: 0;
      left: 0; /* changer par right pour le widget de droite */
      width: 235px !important;
      height: 100%;
  background: black;
      overflow: auto;
      border-right: 20px solid #87674c; /* changer la couleur bordure - changer par border-left pour le widget de droite */
      margin-left: -235px; /* changer par margin-right pour le widget de droite */
      transition: 1s;
    }
    .button_widgets
    {
      position: fixed;
      z-index: 999;
      top: 50%;
      left: 0; /* changer par right pour le widget de droite */
      margin-top: -30px;
      margin-left: 0px; /* changer par margin-right pour le widget de droite */
      width: 60px;
      height: 150px;
      background: url(http://i84.servimg.com/u/f84/12/49/77/06/widget12.png);/* mettre ici image du bouton - taille ci-dessus 60par150 */
      transition: 1s;
    }
   
    #left:hover /* changer par juste left par right pour le widget de droite */
    {
      margin-left: 0px; /* changer par margin-right pour le widget de droite */
      transition: 1s;
    }
    #left:hover .button_widgets
    {
      margin-left: 235px; /* changer par margin-right pour le widget de droite */
      transition: 1s;
    }
Revenir en haut Aller en bas
http://tous-amis.forumactif.com
éléa
Administrateur
Administrateur
avatar

Cancer
Messages : 603
Age : 47

MessageSujet: Re: sauvegarde codes pour panneau coulissant   Sam 27 Fév - 16:58

sauvegarde code widget Discord:

Code:
<div align="center">
         <iframe style="width: 220px; height: 450px;" src="https://discordapp.com/widget?id=151305658908672001&theme=dark" allowtransparency="true" frameborder="0"> </iframe><br />
</div>
Revenir en haut Aller en bas
http://tous-amis.forumactif.com
Contenu sponsorisé




MessageSujet: Re: sauvegarde codes pour panneau coulissant   

Revenir en haut Aller en bas
 
sauvegarde codes pour panneau coulissant
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Gagner des codes pour les barres de surf
» Des codes pour les tous petits.
» Guide - Embellir vos RP
» Outil - Codes pour les signatures
» Pétition européenne pour sauvegarder la médecine naturelle

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
 :: catégorie-2 :: test-3-
Sauter vers: