*RESOLU* [PHPBB2] Toolbar verticale à gauche du forum

Voir le sujet précédent Voir le sujet suivant Aller en bas

Phénix
avatar
Nouveau membre

MessagePhénix

  • 16px
  • 24px
  • Zoom
Bonjour à tous !

Je voudrais savoir s'il était possible de mettre la toolbar situé en haut du forum sur la gauche du forum dans un menu qui s'ouvrirait au clic. C'est surtout pour le centre de notification, la barre de recherche, les liens "connexion/s'enregistrer" de la toolbar




Bien sûr, j'aimerai ajouter d'autres choses dans ce menu vertical comme des liens importants. Autant je pense pouvoir me débrouiller pour cette seconde partie, autant pour la toolbar, beaucoup moins. J'ai un javascript pour mettre une barre vertical.

Code:
jQuery(document).ready(function() { jQuery('body').append('<div style="overflow: visible; position: fixed; bottom: 30px; height: 600px; left: 10px; z-index:1000;"><iframe src="http://" id="boxpop" scrolling="no" style="overflow: visible; width: 200px; height: 700px; display: none; float:left;" marginwidth="0" marginheight="0" frameborder="0"></iframe><div onClick="jQuery(\'#boxpop\').animate({width:\'toggle\'},1200); jQuery(\'#boxopen,#boxclose\').toggle();" style="margin-top: 10px; cursor :pointer; float:left"><img src="https://i.imgbox.com/tDJs9cKt.png" id="boxopen"/><img src="https://i.imgbox.com/lhAJJ9Cw.png" id="boxclose" style="cursor :pointer; display:none;"></div></div>'); } );


En général, je créais une page html que je mettais en ifram dans le javascript. 

Voilà, voilà ^^

Merci par avance :)


Dernière édition par Phénix le Lun 26 Juin 2017 - 21:54, édité 3 fois (Raison : Ajout de balises image)
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hello Phénix,
pour mettre la partie concernée de la toolbar, ajoutes ceci dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Code:

#fa_menulist{left:5px !important;}

Ensuite tu désires réellement a avoir cette toolbar à gauche?
Que veux tu garder sur cette toolbar ?
Sois précises stp clin oeil
Pour le reste de ta demande il faudra ouvrir un autre sujet car pour la recherche des sujets résolus c'est bien plus pratique clin oeil



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Phénix
avatar
Nouveau membre

MessagePhénix

  • 16px
  • 24px
  • Zoom
Merci beaucoup pour la réponse !
Alors les éléments de la toolbar que je souhaite garder et mettre sur la gauche :
- le logo de fa (parce que je n'ai pas le choix)
- la barre de recherche
- le centre de notifications
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hello Phenix,
si tu ajoutes ceci dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Code:
#fa_left,#fa_share,#fa_hide{display:none !important;}
#fa_right {float: left !important;}

#fa_menulist{left:5px !important;}


Penses à valider les modifications en cliquant sur le bouton Valider


Est ce que cela répond à ta demande ?



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Phénix
avatar
Nouveau membre

MessagePhénix

  • 16px
  • 24px
  • Zoom
Bonjour !

Alors les éléments sont bien à gauche mais j'aimerai qu'ils soient les uns en dessous des autres pour au final avoir une barre latéral comme dans mon montage

Merci d'avance ^^
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Ok merci ,
ensuite si j'ai bien comprit tu veux que ce contenu soit rétractable ?



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Phénix
avatar
Nouveau membre

MessagePhénix

  • 16px
  • 24px
  • Zoom
C'est tout à fait ça ! Avec la possibilité de mettre d'autres choses en dessous (mais si j'ai compris je devrais ouvrir un autre sujet, c'est ça ?)
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Ok merci, il me faudrait des images pour afficher et masquer cette toolbar.
Ensuite on reste dans le contexte de ta demande pour ajouter du contenu Phenix.
Il faudra me donner ce que tu souhaites ajouter car tout va se passer dans un script,
je t'expliquerais ensuite comment en ajouter d'autre clin oeil



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Phénix
avatar
Nouveau membre

MessagePhénix

  • 16px
  • 24px
  • Zoom
Alors voici les images que j'ai pour le moment


et 


J'aimerai mettre un quadrillage des scénarios comme celui là 
Code:
[table class="forumline" style="width: 852.59375px; color: rgb(102, 102, 102); font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif; font-size: 10.5600004196167px;" align="center" border="0" cellpadding="4" cellspacing="1" width="85%"][tr style="margin: 0px; padding: 0px;"][td class="row1" style="margin: 0px; padding: 4px; font-family: 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; font-size: 1em; line-height: 1.2em; color: rgb(79, 79, 79); background-color: rgb(236, 243, 247);"][size=11][size=11]http://powerbehindpowerful.forumactif.org/h8-quadrillage-avatar[/size][/size][/td]
[/tr]
[/table]
code du quadrillage:

Code:
<meta charset="UTF-8" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Great+Vibes|Lobster|Lobster+Two:400,400i,700,700i|Marck+Script|Dancing+Script:400,700|Philosopher:400,400i,700,700i&subset=latin-ext" /><style>
/* scenario */

.avatarscenario {
  position:relative;
  width:63px;
  height:100px;
  overflow:hidden;
  box-shadow: 1px 2px 3px #000000;
}

.avatarscenario:hover .imgcoul {
  margin-top:-100px;
}

.imgcoul {
position: relative;
bottom:0;
  left:0;
    transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
 transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.perso {
  height:100px;
  width: 63px;
background-image:url('https://i.imgbox.com/xO8CRQiG.png');
          box-shadow: 0px 0px 10px 4px  #01121a inset;
  overflow: auto;
  position:absolute;
   height:100px;;
   width: 63px;
  background-color: #ffffff;
  text-align: justify
bottom:0;
  left:0; }

texte1 {color:#ffffff; font-size: 10px; font-weight: bold; font-family: 'Playfair Display SC'; }
texte2 {color:#993634; font-size: 10px; font-weight: bold; font-family: 'Playfair Display SC'}
texte3 {color:#000000; font-size: 10px; font-weight: bold; font-family: 'Playfair Display SC'}


 </style>    
<table>
                                          
 <tbody>
                                          
 <tr>
                                          
 <td>
                                          
 <div class="avatarscenario">
                                                          
 <div class="perso">
                         <br />                                    
 <center>
                         <texte1>Cléa Wolf </texte1><br /> <texte3>with</texte3> <br /> <texte2>Danielle Campbell</texte2> <br /><texte3><a href="http://powerbehindpowerful.forumactif.org/t13-pv-famille-wolf-en-cours">Sa fiche</a></texte3>                              
 </center>
                                                    
 </div><img src="http://i84.servimg.com/u/f84/19/44/48/05/6nna10.png" div="" class="imgcoul" style="width: 63px; height: 100px;" />                      
 </div>
              
                                          
 </td>
                                          
 <td>
                                          
 <div class="avatarscenario">
                                                          
 <div class="perso">
                         <br />                                    
 <center>
                         <texte1>Cléa Wolf </texte1><br /> <texte3>with</texte3> <br /> <texte2>Danielle Campbell</texte2> <br /><texte3><a href="http://powerbehindpowerful.forumactif.org/t13-pv-famille-wolf-en-cours">Sa fiche</a></texte3>                              
 </center>
                                                    
 </div><img src="http://i84.servimg.com/u/f84/19/44/48/05/6nna10.png" div="" class="imgcoul" style="width: 63px; height: 100px;" />                      
 </div>
                    
 </td>
                                          
 <td>
                                          
 <div class="avatarscenario">
                                                          
 <div class="perso">
                         <br />                                    
 <center>
                         <texte1>Cléa Wolf </texte1><br /> <texte3>with</texte3> <br /> <texte2>Danielle Campbell</texte2> <br /><texte3><a href="http://powerbehindpowerful.forumactif.org/t13-pv-famille-wolf-en-cours">Sa fiche</a></texte3>                              
 </center>
                                                    
 </div><img src="http://i84.servimg.com/u/f84/19/44/48/05/6nna10.png" div="" class="imgcoul" style="width: 63px; height: 100px;" />                      
 </div>
              
                                          
 </td>
                                
 <td>
                                          
 <div class="avatarscenario">
                                                          
 <div class="perso">
                         <br />                                    
 <center>
                         <texte1>Cléa Wolf </texte1><br /> <texte3>with</texte3> <br /> <texte2>Danielle Campbell</texte2> <br /><texte3><a href="http://powerbehindpowerful.forumactif.org/t13-pv-famille-wolf-en-cours">Sa fiche</a></texte3>                              
 </center>
                                                    
 </div><img src="http://i84.servimg.com/u/f84/19/44/48/05/6nna10.png" div="" class="imgcoul" style="width: 63px; height: 100px;" />                      
 </div>
              
                                          
 </td>
                                
 <td>
                                          
 <div class="avatarscenario">
                                                          
 <div class="perso">
                         <br />                                    
 <center>
                         <texte1>Cléa Wolf </texte1><br /> <texte3>with</texte3> <br /> <texte2>Danielle Campbell</texte2> <br /><texte3><a href="http://powerbehindpowerful.forumactif.org/t13-pv-famille-wolf-en-cours">Sa fiche</a></texte3>                              
 </center>
                                                    
 </div><img src="http://i84.servimg.com/u/f84/19/44/48/05/6nna10.png" div="" class="imgcoul" style="width: 63px; height: 100px;" />                      
 </div>
                                          
 </td>
                              
 </tr>
                                            
 <tr>
                              
 <td>
                                          
 <div class="avatarscenario">
                                                          
 <div class="perso">
                         <br />                                    
 <center>
                         <texte1>Noémie Wolf </texte1><br /> <texte3>with</texte3> <br /> <texte2>Naya Riveira</texte2> <br /><texte3><a href="http://powerbehindpowerful.forumactif.org/t13-pv-famille-wolf-en-cours">Sa fiche</a></texte3>                              
 </center>
                                                    
 </div><img src="http://i84.servimg.com/u/f84/19/44/48/05/92557710.png" div="" class="imgcoul" style="width: 63px; height: 100px;" />                      
 </div>
                                          
 </td>
                                          
 <td>
                                          
 <div class="avatarscenario">
                                                          
 <div class="perso">
                         <br />                                    
 <center>
                         <texte1>Nina Wolf </texte1><br /> <texte3>with</texte3> <br /> <texte2>Rainie Yang</texte2> <br /><texte3><a href="http://powerbehindpowerful.forumactif.org/t13-pv-famille-wolf-en-cours">Sa fiche</a></texte3>                              
 </center>
                                                    
 </div><img src="http://i84.servimg.com/u/f84/19/44/48/05/tumblr10.jpg" div="" class="imgcoul" style="width: 63px; height: 100px;" />                      
 </div>
                                          
 </td>
                                  
 <td>
                                          
 <div class="avatarscenario">
                                                          
 <div class="perso">
                         <br />                                    
 <center>
                         <texte1>Ben Dixen-Wolf </texte1><br /> <texte3>with</texte3> <br /> <texte2>Jared Padalecki</texte2> <br /><texte3><a href="http://powerbehindpowerful.forumactif.org/t13-pv-famille-wolf-en-cours">Sa fiche</a></texte3>                              
 </center>
                                                    
 </div><img src="http://i84.servimg.com/u/f84/19/44/48/05/tumblr11.png" div="" class="imgcoul" style="width: 63px; height: 100px;" />                      
 </div>
                                          
 </td>
                                          
 <td>
                                          
 <div class="avatarscenario">
                                                          
 <div class="perso">
                         <br />                                    
 <center>
                         <texte1>Aaron Dixen-Wolf </texte1><br /> <texte3>with</texte3> <br /> <texte2>Kit Harington</texte2> <br /><texte3><a href="http://powerbehindpowerful.forumactif.org/t13-pv-famille-wolf-en-cours">Sa fiche</a></texte3>                              
 </center>
                                                    
 </div><img src="http://img15.hostingpics.net/pics/527558kitharington.png" div="" class="imgcoul" style="width: 63px; height: 100px;" />                      
 </div>
                                          
 </td>
                          
 <td>
                                          
 <div class="avatarscenario">
                                                          
 <div class="perso">
                         <br />                                    
 <center>
                         <texte1>Aaron Dixen-Wolf </texte1><br /> <texte3>with</texte3> <br /> <texte2>Kit Harington</texte2> <br /><texte3><a href="http://powerbehindpowerful.forumactif.org/t13-pv-famille-wolf-en-cours">Sa fiche</a></texte3>                              
 </center>
                                                    
 </div><img src="http://img15.hostingpics.net/pics/527558kitharington.png" div="" class="imgcoul" style="width: 63px; height: 100px;" />                      
 </div>
                                          
 </td>
                                                
 </tr>
                                            
 </tbody>
</table>


Et des liens types : Facebook - Twitter - Coupe des milles maisons.
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Ok, je regarde tout cela Phenix,
la toolbar fera au moins 300px de large afin que l'on puisse insérer l'iframe de ta page html .

Ensuite tu peux aussi ajouter les boutons ci-dessous dans cette même page non ?:
Facebook - Twitter - Coupe des milles maisons.

Cette toolbar devra être masquée ou affichée Phenix ?



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Alors,
cela n'a pas été évident car la toolbar est assez capricieuse pour le style.
Il a fallut ruser un peu.
Toute la c.s.s a été commenté.
Il faudra respecter la largeur de basse de 400px afin de laisser la place à l'iframe.

Les aperçus imagés.

Le clic pour ouvrir






Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajoutes ceci:
Code:

/*On remonte le body en haut de page*/
body{margin-top:0px !important;}
/*on cache le reste*/
#fa_left,#fa_share,#fa_hide{display:none !important;}
/*on donne une largeur pour tous les mdoules*/
#fa_toolbar,.fa_toolbar_XL_Sized,#fa_right,.M14_Fa_Titre,#fa_search ,.M14_Fa_cont
{width:400px !important;}
.fa_toolbar_XL_Sized {min-width:300px !important;left:-400px !important;}
#fa_toolbar{height:100% !important;}
#fa_right {float: none !important;font-size: 14px;text-align: center;margin-top: 100px !important;}
/*Le titre du menu*/
.M14_Fa_Titre{margin-top: 60px;position: absolute;text-align: center;font-size:16px;}
#fa_search {margin-left:0px !important;text-align: center !important;}
#notif_list{left: 0px !important;width: 260px !important;margin-left:70px !important;}
#notif_list li.see_all{text-align: center!important;}


/*L iframe */
.M14_Fa_cont iframe{width: 380px;margin-left: 20px;height: 260px;border: none;}
/*On contre les liens Facebook Twitter et coupes des milles maisosn*/
.M14_Fa_cont{text-align:center;}
/*l animation au clic sur les boutons ouvrir et fermer*/
#fa_toolbar.fa_toolbar_toggle{left:0px !important;}
/*Les boutons d ouverture et fermeture*/
.M14_close_toolbar,.M14_open_toolbar
{cursor:pointer;left:400px !important;position:absolute !important; width:70px;height:130px;}
/*on cache la fermeture*/
.M14_close_toolbar{display:none;}




Penses à valider les modifications en cliquant sur le bouton Valider


La première ligne place le body en haut de page.
Ensuite , tu peux mettre des couleurs de police , couleur de fond en ajoutant le hack !important à chaque fois .

Comme pour les liens Facebook, Twitter et coupe:
Code:

.M14_Fa_cont a{color:orange !important;}
Comme le conteneur de l iframe et des liens:
Code:

.M14_Fa_cont{background-color:grey !important;}


Ensuite le script qui va placer des sauts de ligne afin d'avoir le résultat escompté et les clics pour afficher et masquer.

Le lien de ta page html a été déposé dans l'iframe
Code:
<iframe src="http://powerbehindpowerful.forumactif.org/h8-quadrillage-avatar"></iframe>

Par défaut la toolbar est masquée.


Modules/HTML JAVASCRIPT/Gestion des codes JavascriptCréer un nouveau javascript


Mets un titre explicite.
Coches sur toutes les pages.

Déposes ceci:
Code:

$(function(){
$(function(){
$('#fa_right ').before('<div class="M14_Fa_Titre">Menu</div>');
$('#fa_menu').after('<br />');
$('.M14_Fa_Titre').before('<div class="M14_close_toolbar"title="Masquer la toolbar"><img src="https://i.imgbox.com/lhAJJ9Cw.png"/></div><div class="M14_open_toolbar"title="Afficher la toolbar"><img src="https://i.imgbox.com/tDJs9cKt.png"/></div>');
$('.M14_open_toolbar').click(function(){
$(this).fadeOut();
$('.M14_close_toolbar').fadeIn();
$(this).closest('#fa_toolbar').removeClass('fa_toolbar_XL_Sized').addClass('fa_toolbar_toggle');
});
$('.M14_close_toolbar').click(function(){
$(this).fadeOut();
$('.M14_open_toolbar').fadeIn();
$(this).closest('#fa_toolbar').removeClass('fa_toolbar_toggle').addClass('fa_toolbar_XL_Sized');
});  
$('#fa_search').after('<br /><div class="M14_Fa_cont"><iframe src="http://powerbehindpowerful.forumactif.org/h8-quadrillage-avatar"></iframe><br />
<a href="le lien facebook">Facebook</a>-<a href="le lien Twitter">Twitter</a>-<a href="le lien Coupe des milles maisons">Coupe des milles maisons</a> .<br />                       </div>');  
  
  
})});



Penses a cliquer sur le bouton Valider

Ici , c'est la div qui va contenir ton iframe et les liens:
Code:

<div class="M14_Fa_cont">
<iframe src="http://powerbehindpowerful.forumactif.org/h8-quadrillage-avatar"></iframe><br />
<a href="le lien facebook">Facebook</a>-<a href="le lien Twitter">Twitter</a>-<a href="le lien Coupe des milles maisons">Coupe des milles maisons</a> .<br />                       </div>

Penses a mettre les liens Facebook, Twitter et Coupe des milles maisons



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Phénix
avatar
Nouveau membre

MessagePhénix

  • 16px
  • 24px
  • Zoom
C'est super ! J'ai pas encore testé parce qu'une migraine pointe le bout de son nez et que je veux faire ça à tête reposé mais vraiment merci beaucoup ! 
Du coup, j'ajouterai tous mes liens et autre dans l'ifram !

Petite question cependant, je peux changer par moi-même la largueur de cette barre ? Si  je fais le quadrillage plus petit, est-ce que je pourrai la mettre en 200px par exemple ?

Encore un énorme merci pour cet aide et pour la rapidité.  
Je préviens que je repasserai, si ce n'est pas demain matin, ça sera lundi dans la journée ^^
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Hello Phénix,
oups désolé je n'avais pas vu cette partie:


Petite question cependant, je peux changer par moi-même la largueur de cette barre ? Si  je fais le quadrillage plus petit, est-ce que je pourrai la mettre en 200px par exemple ?

Non car je me suis basé sur l'iframe avec le contenu des photos il fallait au moins cette largeur chère amie clin oeil



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Phénix
avatar
Nouveau membre

MessagePhénix

  • 16px
  • 24px
  • Zoom
Comme promis je repasse !
Je me répète mais merci beaucoup ! Mon message précédent n'a plus lieu d'être j'ai réussi à modifier les tailles et tout ce qui va avec
J'ai cependant deux nouvelles questions.

La première : comment ajouter le logo de Forumactif et le lien comme sur la toolbar classique ? En effet, sans paiement, on a pas le droit de la retirer. Du coup, j'aimerai éviter tout soucis de ce côté là. 

La seconde concerne l'ouverture de la barre. Est-ce qu'il est possible qu'elle apparaisse de manière moins rapide comme sur mon gif ? 

Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Bonjour Phénix,

pour ta demande css:

Ici:
Code:

#fa_left,#fa_share,#fa_hide{display:none !important;}

Il faut donc supprimer le :
Code:
#fa_left,

Puis ajouter ceci en modifiant suivant ta config les valeurs:

Code:

#fa_left
{
position: relative !important;
margin-left: 10px !important;
top: -150px; !important;
}


puis ceci pour l'affichage ralenti:
Code:
#fa_toolbar , .fa_toolbar_toggle
{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Phénix
avatar
Nouveau membre

MessagePhénix

  • 16px
  • 24px
  • Zoom
C'est tout bon ! 
Un énorme merci !
xxxbncnn bougies priere

Edit : je n'arrive pas à mettre le sujet en résolu alors que la dernière fois je n'ai eu aucun problème...
Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
Tu devrais pouvoir mettre en résolu Phénix désormais



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Milouze14
avatar
Fondateur

MessageMilouze14

  • 16px
  • 24px
  • Zoom
-Staff du Forum Milouze14-



  • Hello 
    Sujet résolu et déplacé dans le forum adéquat.

Pour toute information,merci de contacter un Membre du Staff



-Le respect de nos semblables est la règle de notre conduite.-

Fondateur des forums





Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum