[Réglé] [Theme FLATO] Mise en page du bloc additionnel

Pour les recherches et les demandes de modifications de styles concernant votre forum phpBB3.

Modérateur: Equipe

Règles du forum
A lire impérativement : Règlement de phpBB-fr.com - Conditions générales de support graphique

Attention : pour éviter les bugs, votre style doit être mis à jour en même temps que votre forum, et ce, dans la dernière version disponible de phpBB !

[Réglé] [Theme FLATO] Mise en page du bloc additionnel

Messagepar tablettechinoise » 16 Mar 2014 à 23:51

Phpbb3 3.0.12
Theme Flato : http://themeforest.net/item/flato-metro ... me/6314993
Serveur de test : http://saturne.myqnapcloud.com/

Bonjour,

Je suis en train de créer un menu direct sur le coté gauche. Les explications fournis par le thème sont pas mal. Toutefois, j'aimerai avec sytle égal à celui du bloc menu situé au dessus "Forum Menu" avec la possibilité de fermer ou ouvrir celui-ci graçe à la main à droite du Titre du menu.

En ce qui concerne mon sidebar, voici ce que j'ai mis :

Code: Tout sélectionner
<!-- Sidebar block beginning -->
<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
    <div class="sblock">         
        <div class="search-block-content"> <!-- Sidebar content beginning -->
            <div class="sidebar-search-box">
                <form action="{U_SEARCH}" method="get" id="search" >
                    <fieldset>
                        <div class="sidebar-inside-sb">
                            <a class="adv-search-btn" title="{L_SEARCH_ADV}" href="{U_SEARCH}"><i class="icon-plus-circled"></i></a>
                            <input class="inputbox search"  type="text" name="keywords" id="search_keywords" size="20" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />                                
                            <input class="button2" type="submit" value="&#xf002" />
                                {S_SEARCH_LOCAL_HIDDEN_FIELDS}
                        </div>  
                    </fieldset>
                </form>
            </div>        
        </div> <!-- Sidebar content end -->
    </div>
<!-- ENDIF -->
<!-- Sidebar block end -->

<!-- Forum Menu start here -->
  <!-- INCLUDE forum_menu.html -->
<!-- Forum Menu ends here -->
              
<div class="sblock"><!-- Sidebar block beginning -->   
    <div class="sheader"><!-- Sidebar header beginning -->
        <h4 class="sh4"> MENU GENERAL</h4>
<!-- The button for collapse menu  -->   
                            <a  title="Click to Open/Close" class="btn-navbar" data-toggle="collapse" data-target="#collapse-menu">
                             <i class="icon-down-hand"></i>               
                            </a>
                        <!-- The button for collapse menu end -->                   

                </div><!-- forum menu header end -->
           <div id="collapse-menu" class="nav-collapse collapse in"><!-- Collapse div start -->    
            <div class="scontent list"><!--forum menu content beginning -->        
                       
    </div> <!-- Sidebar header end -->         
    <div class="scontent pb10"> <!-- Sidebar content beginning -->                             
            <p><a class="icon-ok-circled2"><a href="/les-sites-marchands-f11"> Les sites marchands</a></a></p>
            <p><a class="icon-ok-circled2"><a href="/les-tablettes-f17"> Les marques de tablettes</a></a></p>
            <p><a class="icon-ok-circled2"><a href="/section-commune-android-f66"> Applications / Themes / Problemes</a></a></p>
            <p><a class="icon-doc-text"><a href="/tutoriels-f72"> Rubirques Tutoriels</a></a></p>
            <p><a class="icon-doc-text"><a href="/pilotes-et-rootages-f148"> Rubirques Pilotes / Rootages</a></a></p>
            <p><a class="icon-ok-circled2"><a href="/les-customs-roms-f93"> Customs Roms</a></a></p>
            <p><a class="icon-ok-circled2"><a href="/vos-annonces-f84"> Achat / Ventes</a></a></p>
            
    </div><!-- Sidebar content end -->
</div><!-- Sidebar block end -->   


Toutefois, j'ai remarqué que pour le bloc menu qui etait au dessus de mon bloc Menu GENERAL, il etait génére par forum_menu.html

J'ai tenté de trouver la solution pour avoir la mise en page du bloc mais en vain.

Voici les infos sur forum_menu.html
Code: Tout sélectionner
        <div id="forum-menu" class="sblock navbar"><!-- forum menu block beginning -->

            <div class="sheader"><!-- forum menu header beginning -->
                    <h4 class="sh4">Forum Menu</h4> 

                        <!-- The button for collapse menu  -->   
                            <a  title="Click to Open/Close" class="btn-navbar" data-toggle="collapse" data-target="#collapse-menu">
                             <i class="icon-down-hand"></i>               
                            </a>
                        <!-- The button for collapse menu end -->                   

                </div><!-- forum menu header end -->
           <div id="collapse-menu" class="nav-collapse collapse in"><!-- Collapse div start -->    
            <div class="scontent list"><!--forum menu content beginning -->           

                 
                <!-- IF not S_USER_LOGGED_IN and not S_IS_BOT --> 
                <ul>
                     <li><a href="{U_SEARCH_ACTIVE_TOPICS}"><i class="icon-fire"></i> {L_SEARCH_ACTIVE_TOPICS}</a></li>

                     <li><a href="{U_SEARCH_UNANSWERED}"><i class="icon-doc-inv"></i> {L_SEARCH_UNANSWERED}</a></li>

                     <li><a href="{U_DELETE_COOKIES}"><i class="icon-cancel"></i> {L_DELETE_COOKIES}</a></li>
                </ul>     
                     <!-- ENDIF -->  

            <!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
                <ul>
                      
                <!-- IF S_DISPLAY_SEARCH -->                    
                     <li><a href="{U_SEARCH_SELF}"><i class="icon-doc-text"></i> {L_SEARCH_SELF}</a></li> 

                     <li><a href="{U_SEARCH_NEW}"><i class="icon-doc"></i> {L_SEARCH_NEW}</a></li> 

                     <!-- IF S_LOAD_UNREADS -->
                     <li><a href="{U_SEARCH_UNREAD}"><i class="icon-doc-inv"></i> {L_SEARCH_UNREAD}</a></li><!-- ENDIF -->  
                    
                     <li><a href="{U_SEARCH_UNANSWERED}"><i class="icon-doc-text-inv"></i> {L_SEARCH_UNANSWERED}</a></li>

                     <li><a href="{U_SEARCH_ACTIVE_TOPICS}"><i class="icon-fire"></i> {L_SEARCH_ACTIVE_TOPICS}</a></li>    

                     <!-- IF not S_IS_BOT and U_MARK_FORUMS -->
                     <li><a href="{U_MARK_FORUMS}" accesskey="m"><i class="icon-ok-circled2"></i> {L_MARK_FORUMS_READ}</a></li><!-- ENDIF -->

                     <!-- IF U_MARK_TOPICS and .topicrow -->
                    <li><a href="{U_MARK_TOPICS}"><i class="icon-ok-circled2"></i> {L_MARK_TOPICS_READ}</a></li><!-- ENDIF -->  

                     <!-- IF S_WATCH_FORUM_LINK and not S_IS_BOT -->
                     <li><a href="{S_WATCH_FORUM_LINK}"><i class="icon-eye"></i> {S_WATCH_FORUM_TITLE}</a></li><!-- ENDIF -->
                    
                    <!-- IF U_WATCH_TOPIC -->
                    <li><a href="{U_WATCH_TOPIC}" title="{L_WATCH_TOPIC}"><i class="icon-eye"></i> {L_WATCH_TOPIC}</a></li><!-- ENDIF -->

                    <!-- IF U_BOOKMARK_TOPIC -->
                    <li><a href="{U_BOOKMARK_TOPIC}" title="{L_BOOKMARK_TOPIC}"><i class="icon-bookmark"></i> {L_BOOKMARK_TOPIC}</a></li><!-- ENDIF -->                    

                    <!-- IF U_BUMP_TOPIC -->
                    <li><a href="{U_BUMP_TOPIC}" title="{L_BUMP_TOPIC}"><i class="icon-angle-up"></i> {L_BUMP_TOPIC}</a></li><!-- ENDIF -->                     
                                      
                    <li><a href="{U_DELETE_COOKIES}"><i class="icon-cancel"></i> {L_DELETE_COOKIES}</a></li>
                    
                    <!-- IF U_PRINT_TOPIC -->
                    <li><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}"><i class="icon-print"></i> {L_PRINT_TOPIC}</a></li><!-- ENDIF -->

                    <!-- IF U_EMAIL_TOPIC -->
                    <li><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" accesskey="p"><i class="icon-mail-1"></i> {L_EMAIL_TOPIC}</a></li><!-- ENDIF -->                    
              
                <!-- ENDIF -->
                </ul>   
            <!-- ENDIF -->                  
                               
            </div><!--forum menu content beginning end-->
            </div><!-- collapse div end -->    
        </div><!-- forum menu block end -->         



@ plus tard ;)
Modifié en dernier par tablettechinoise le 22 Mar 2014 à 01:24, modifié 2 fois.
tablettechinoise
Posteur expérimenté
Posteur expérimenté
 
Messages: 343
Enregistré le: 21 Mar 2013 à 21:28

Re: [Theme FLATO] Mise en page du bloc additionnel

Messagepar cabot » 17 Mar 2014 à 15:51

Hello,

tu ne peux pas utiliser deux fois les même sélecteurs d'id sur ta page (id=forum-menu et id=collapse-menu), ce n'est pas valide et ça va entraîner des conflits dans le js pour la fonction afficher/masquer et les cookies attachés.

Remplace forum-menu par sushi-menu, et les deux occurrences collapse-menu par collapse-sushi-menu :
Code: Tout sélectionner
<div id="sushi-menu" class="sblock navbar">
    <div class="sheader">
        <h4 class="sh4"> menu général</h4>
		<a  title="Cliquer pour afficher / Masquer" class="btn-navbar" data-toggle="collapse" data-target="#collapse-sushi-menu"><i class="icon-down-hand"></i></a>
    </div>
	<div id="collapse-sushi-menu" class="nav-collapse collapse in">
		<div class="scontent pb10">                     
            <p><a class="icon-ok-circled2"><a href="/les-sites-marchands-f11"> Les sites marchands</a></a></p>
            <p><a class="icon-ok-circled2"><a href="/les-tablettes-f17"> Les marques de tablettes</a></a></p>
            <p><a class="icon-ok-circled2"><a href="/section-commune-android-f66"> Applications / Thèmes / Problèmes</a></a></p>
            <p><a class="icon-doc-text"><a href="/tutoriels-f72"> Rubriques Tutoriels</a></a></p>
            <p><a class="icon-doc-text"><a href="/pilotes-et-rootages-f148"> Rubriques Pilotes / Rootages</a></a></p>
            <p><a class="icon-ok-circled2"><a href="/les-customs-roms-f93"> Customs Roms</a></a></p>
            <p><a class="icon-ok-circled2"><a href="/vos-annonces-f84"> Achats / Ventes</a></a></p>
		</div>
	</div>
</div>  
N'oublie pas de convertir le fichier en UTF-8 sans bom pour éviter les problèmes d'accents.

Ensuite dans custom.js, il faut déclarer les sélecteurs pour le tootltip, et la fonction afficher/masquer.
- Ajoute , #sushi-menu a.btn-navbar dans la ligne, après #forum-menu a.btn-navbar
- Ajoute , #collapse-sushi-menu.collapse dans la ligne, après #collapse-menu.collapse

Il reste à déclarer ajouter les sélecteurs dans les fichiers colours.css, custom.css et responsive.css.

Pour ça, cherche toutes les occurrences #forum-menu dans les sélecteurs et ajoute un nouveau sélecteur avec #sushi-menu.

Exemple dans colours.css, trouve :
Code: Tout sélectionner
#right-content #forum-menu .btn-navbar:hover,
#right-content #forum-menu .btn-navbar:focus,
#right-content #forum-menu .btn-navbar:active,
#right-content #forum-menu .btn-navbar.active { 

Remplace par :
Code: Tout sélectionner
#right-content #forum-menu .btn-navbar:hover,
#right-content #sushi-menu .btn-navbar:hover,
#right-content #forum-menu .btn-navbar:focus,
#right-content #sushi-menu .btn-navbar:focus,
#right-content #forum-menu .btn-navbar:active,
#right-content #sushi-menu .btn-navbar:active,
#right-content #forum-menu .btn-navbar.active,
#right-content #sushi-menu .btn-navbar.active {

Les sélecteurs ont étés placés à la ligne, mais tu peux très bien avoir des sélecteurs sans retour à la ligne. Ça revient au même.

:!: Il est important de ne pas oublier la virgule après chaque sélecteur, sauf le dernier (celui qui précède {).
Exemple, trouve :
Code: Tout sélectionner
#right-content #forum-menu a, #forum-menu {

Remplace par :
Code: Tout sélectionner
#right-content #forum-menu a, #right-content #sushi-menu a, #forum-menu, #sushi-menu { 

Il faut faire ces modifs pour les deux sélecteur d'ID ajoutés, #sushi-menu et #collapse-sushi-menu.

Prends ton temps, regarde bien les exemples donnés pour comprendre comment ajouter tes sélecteurs.
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26830
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: [Theme FLATO] Mise en page du bloc additionnel

Messagepar tablettechinoise » 17 Mar 2014 à 21:46

Re cabot,

Wouah le boulot, j'en reviens pas. Bon j'ai essayé d'honorer ton travail mais je pense que j'ai du oublier un truc...

Quand on passe la souris par dessus le menu, effectivement le texte réagit un peu mais par contre la mise en page,elle n'a pas changé.

Merci par avance
tablettechinoise
Posteur expérimenté
Posteur expérimenté
 
Messages: 343
Enregistré le: 21 Mar 2013 à 21:28

Re: [Theme FLATO] Mise en page du bloc additionnel

Messagepar cabot » 17 Mar 2014 à 23:06

Vérifie toutes les modifs, je viens de tester et ça fonctionne nickel.
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26830
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: [Theme FLATO] Mise en page du bloc additionnel

Messagepar tablettechinoise » 18 Mar 2014 à 00:45

Re,

Bien, aprés une relecture et compréhension, j'ai apporté les modifs.

Toutefois, je me demande si j'ai bien fait les choses car la mise en page ne s'affiche pas comme celui du dessus... Après avoir trouvé quelques erreurs de ma part, y a eu du mieux... Mais là je planche ;)

Voici un package des fichiers que j'ai modifier :
http://saturne.myqnapcloud.com/Modif_menu.rar

Je sens que je vais me faire engueuler :roll: ...
tablettechinoise
Posteur expérimenté
Posteur expérimenté
 
Messages: 343
Enregistré le: 21 Mar 2013 à 21:28

Re: [Theme FLATO] Mise en page du bloc additionnel

Messagepar cabot » 18 Mar 2014 à 10:34

C'est déjà pas mal, tu as encore des petits problèmes car les CSS contiennent quelques erreurs.

Dans première règle modifiée du fichier custom.css, il manque une virgule après le deuxième sélecteur :
Code: Tout sélectionner
#forum-menu .nav-collapse, #sushi-menu .nav-collapse
#forum-menu .nav-collapse.collapse, #sushi-menu .nav-collapse.collapse {


Dans les trois fichiers CSS, tu as doublé certains sélecteurs. Exemple, toujours dans custom.css :
Code: Tout sélectionner
#sidebar a,#forum-menu a, #sidebar a,#sushi-menu a { 

Il y a ça en double :
Code: Tout sélectionner
#sidebar a

Une fois que tu auras corrigé tout ça, tu devrais avoir terminé les modifs pour ce bloc. :)
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26830
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: [Theme FLATO] Mise en page du bloc additionnel

Messagepar tablettechinoise » 18 Mar 2014 à 20:12

RE,

J'ai corrigé suivant les infos données, mais cela reste toujours pareil... J'avance un peu à taton... Voici les css que j'ai modifier :

http://saturne.myqnapcloud.com/Modif_V2.rar

Merci pour ton coup de main
tablettechinoise
Posteur expérimenté
Posteur expérimenté
 
Messages: 343
Enregistré le: 21 Mar 2013 à 21:28

Re: [Theme FLATO] Mise en page du bloc additionnel

Messagepar cabot » 18 Mar 2014 à 20:35

Il y a encore deux petites modifs à faire dans ces règles de custom.css :
Code: Tout sélectionner
#collapse-menu.collapse.in {
  height: auto;
}

#collapse-menu.collapse {
  height: 0;
  overflow: hidden;
  position: relative;    
}
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26830
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: [Theme FLATO] Mise en page du bloc additionnel

Messagepar tablettechinoise » 18 Mar 2014 à 21:26

re ;)

Je dois mettre ce code aprés ? ou remplacer ?
Code: Tout sélectionner
#collapse-sushi-menu.collapse.in {
  height: auto;
}

#collapse-sushi-menu.collapse {
  height: 0;
  overflow: hidden;
  position: relative;    
}


Car j'ai tenté les 2 versions et cela reste toujours pareil.
tablettechinoise
Posteur expérimenté
Posteur expérimenté
 
Messages: 343
Enregistré le: 21 Mar 2013 à 21:28

Re: [Theme FLATO] Mise en page du bloc additionnel

Messagepar cabot » 19 Mar 2014 à 12:57

Fais les mêmes modifications que dans les autres règles, ajoute tes sélecteurs. ^^
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26830
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: [Theme FLATO] Mise en page du bloc additionnel

Messagepar tablettechinoise » 19 Mar 2014 à 13:53

Là je vois pas du tout... Tu sais mon niveau à des limites, donc n'hésite pas à me donner un peu plus d'information pour me guider ;)

Je pense pas le customs.js ensuite j'ai suivi à la lettre tes autres informations par contre là.

En reprenant nos conversations, je pense qu'il y a des choses à rajouter dans le custom.css

Mais là je comprends rien.

J'ai tenté de mettre dedans ceci mais toujours pareil.

Code: Tout sélectionner
#collapse-sushi-menu.collapse.in {
  height: auto;
}

#collapse-sushi-menu.collapse {
  height: 0;
  overflow: hidden;
  position: relative;    
}
Modifié en dernier par tablettechinoise le 19 Mar 2014 à 14:02, modifié 1 fois.
tablettechinoise
Posteur expérimenté
Posteur expérimenté
 
Messages: 343
Enregistré le: 21 Mar 2013 à 21:28

Re: [Theme FLATO] Mise en page du bloc additionnel

Messagepar cabot » 19 Mar 2014 à 13:56

Mais c'est ce que tu as fait sur tous les sélecteurs, pourquoi n'y arrives-tu pas sur ces deux là ? :o
Ex :
Code: Tout sélectionner
#collapse-menu.collapse.in, #collapse-sushi-menu.collapse.in
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26830
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: [Theme FLATO] Mise en page du bloc additionnel

Messagepar tablettechinoise » 19 Mar 2014 à 22:23

Aaaaahhh ;) ok bon mon imaginaire m'avait joué des tours...
Alors ça marche toujours pas ;) Toutefois, j'ai une personne qui nous aide de mon forum qui m'a dit ceci :

J'ai jeté un rapide coup d'oeil en regardant le code source.
Avant d'aller plus loin dans le css, tu as déjà une mise en page différente dans ton code html

Dans le premier menu (forum-menu), le div contenant la classe ".scontent list" contient des listes <ul><li> alors que dans ton second menu(sushi-menu), la classe "scontent pb10" contient des <p><a>

Je n'ai pas le code sous les yeux, mais je pense que le .css se base sur les balises <ul><li> pour les sélecteurs. Ce qui expliquerai pourquoi tu n'as pas trouvé ou placer tes sélecteurs dans ton fichier. Je pense que le soucis n'est pas CSS mais HTML.


Peux tu me dire ce que tu en penses car je veux pas interférer avec ta maitrise ;)

Merci par avance.
tablettechinoise
Posteur expérimenté
Posteur expérimenté
 
Messages: 343
Enregistré le: 21 Mar 2013 à 21:28

Re: [Theme FLATO] Mise en page du bloc additionnel

Messagepar cabot » 19 Mar 2014 à 22:28

Que le contenu soit des listes, des paragraphes ou même des images, ça ne change rien. C'est le bloc parent qui est concerné par la fonction afficher/masquer. :wink:

D'ailleurs, je ne sais pas si tu as vidé le cache de ton navigateur, mais tes deux blocs sont désormais correctement affichés et la fonction "collapse" est opérationnelle sur les deux. :)
Avatar de l’utilisateur
cabot
Equipe site
Equipe site
 
Messages: 26830
Enregistré le: 13 Fév 2011 à 20:42
Localisation: Rarement sur la plaque

Re: [Theme FLATO] Mise en page du bloc additionnel

Messagepar tablettechinoise » 19 Mar 2014 à 22:46

Re,

J’étais en train de tester cette version :
Code: Tout sélectionner
<ul>
            <li><a class="icon-ok-circled2"><a href="/les-sites-marchands-f11"> Les sites marchands</a></a></li>
            <li><a class="icon-ok-circled2"><a href="/les-tablettes-f17"> Les marques de tablettes</a></a></li>
            <li><a class="icon-ok-circled2"><a href="/section-commune-android-f66"> Applications / Thèmes / Problèmes</a></a></li>
            <li><a class="icon-doc-text"><a href="/tutoriels-f72"> Rubriques Tutoriels</a></a></li>
            <li><a class="icon-doc-text"><a href="/pilotes-et-rootages-f148"> Rubriques Pilotes / Rootages</a></a></li>
            <li><a class="icon-ok-circled2"><a href="/les-customs-roms-f93"> Customs Roms</a></a></li>
            <li><a class="icon-ok-circled2"><a href="/vos-annonces-f84"> Achats / Ventes</a></a></li>
</ul>


Du coup, c'est peut étre cette version que tu as vue. là j'ai remis comme avant. Peux tu me dire si c'est ok chez toi car chez moi ça fonctionne pas... Tout cache vidé ainsi que le cache de mon chrome...
Si tu pouvais me faire une impression d'écran de ton résultat de ton coté. Merci par avance
tablettechinoise
Posteur expérimenté
Posteur expérimenté
 
Messages: 343
Enregistré le: 21 Mar 2013 à 21:28

Suivante

Retourner vers Modifications et recherche de styles

 


  • Articles en relation
    Réponses
    Vues
    Dernier message

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 4 invités