Slide JustPlayForFun intégré dans Multi-Thème [Réglé]
olivierb Membre non connecté
- Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
- Equipe Assistance
J'aime beaucoup le slide de JustPlayForFun et je voudrais l'intégrer dans Multi-Thème
Sur ce site j'ai modifié /template/Multi_Theme/body.tpl et frame.tpl pour remplacer le slide d'origine mais j'ai trois soucis :
- les images ne sont pas placées au bon endroit
- un lien arrêt/marche du slide apparaît sous les images
- accessoirement, je voudrais supprimer l'espace séparant le haut de la page et le haut du menu recherche
J'ai donc modifié body.tpl à la ligne 35 entre la div id="top-header-content" et la div id="sub-header"
Code TPL :
<div id="slide-container"> <div id="slide-content"> <img src="{PATH_TO_ROOT}/templates/{THEME}/pics/ban_BF3.jpg" alt="Battelfield 3"> <img src="{PATH_TO_ROOT}/templates/{THEME}/pics/ban_DoW.jpg" alt="Dawn of War"> <img src="{PATH_TO_ROOT}/templates/{THEME}/pics/ban_Ghost.jpg" alt="Ghost Recon"> <img src="{PATH_TO_ROOT}/templates/{THEME}/pics/ban_GW2.jpg" alt="Guild Wars 2"> <img src="{PATH_TO_ROOT}/templates/{THEME}/pics/ban_ME.jpg" alt="Mass Effect"> <img src="{PATH_TO_ROOT}/templates/{THEME}/pics/ban_R6.jpg" alt="Rainbow 6"> <img src="{PATH_TO_ROOT}/templates/{THEME}/pics/ban_SC.jpg" alt="Splinter Cell"> </div>
J'ai ajouté dans frame.tpl à la ligne 37 juste avant la balise /body
Code TPL :
<script src="{PATH_TO_ROOT}/templates/{THEME}/js/jquery.slides.min.js"></script> <script> $(function() { $('#slide-content').slidesjs({ width: 1650, height: 305, play: { active: true, auto: true, interval: 10000, swap: true, effect: "fade", }, navigation: { active: false, effect: "fade" }, pagination: { active: false, effect: "fade" }, effect: { fade: { speed: 400 } } }); }); </script>
J'ai copié le dossier pics de JustPlayForFun dans Multi_Theme ainsi que le js au bon endroit.
Pouvez-vous m'aider ?
Cordialement,
Olivier.
Édité par olivierb Le 04/08/2016 à 18h06
Olivier
ElenWii Membre non connecté
- Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
- Equipe Graphique
Code CSS :
#slide-container { margin-top: 2px; overflow: hidden; } #slide-content { margin: auto; max-width: 1650px; max-height: 302px; } .slidesjs-navigation, .slidesjs-pagination { display: none !important; }
Après, il te faudra sûrement ajusté les marges et les tailles pour avoir exactement le rendu que tu souhaite.
olivierb Membre non connecté
- Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
- Equipe Assistance
Ah ben oui Je fais cela dans la journée et je te tiens au courant, cela pourra servir à @Patgame qui cherche lui aussi à intégrer ce slide
Merci beaucoup,
Cordialement,
Olivier.
Olivier
olivierb Membre non connecté
- Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
- Equipe Assistance
J'ai vraiment besoin de votre aide car je ne trouve pas le moyen d'intégrer correctement le slide JustPlayForFun dans Multi-Thème :
Voici à quoi ressemble le site avec le slide original Multi-Thème :
Voici à toute fin utile les fichiers modifiés :
Multi_Theme.zip
Edit :
Je viens de réinstaller en local une version toute neuve de PHPBoost et effectué les modifications dans le thème Multi_Theme et je rencontre exactement le même problème que dans l'image du premier post. Seul le bouton Stop/Start est maintenant invisible.
En réponse à ma question 3 : dans design.css j'ai modifié la ligne 44 comme suit afin de réduire la hauteur du header :
Code CSS :
header#header { max-width: 1005px; margin:5px auto auto;
Cordialement,
Olivier.
Édité par olivierb Le 10/08/2016 à 13h37
Olivier
ElenWii Membre non connecté
- Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
- Equipe Graphique
clear:both;sur la classe
#slide-container
Après il te faut gérer la taille des images. Pour cela, on retire le
max-width
dans le #slide-content
.Mais il te faut aussi toucher au fichier frame.tpl :
Code TPL :
$('#slide-content').slidesjs({ width: 1004, height: 228,
A toi de trouver la bonne valeur qui fera que ton slide soit pile poile la taille de ton site.
olivierb Membre non connecté
- Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
- Equipe Assistance
Vous allez dire que je suis une bille (c'est pourtant la vérité ) mais je ne m'en sors vraiment pas
Il doit y avoir des paramétrages spécifiques au slider de Multi-Theme qui empêche l'intégration correcte du slide de JustPlayForFun.
Cela m'aurait pourtant bien plu d'avoir un slide auto avec ce thème. Malheureusement, Swan est absente, je vais donc devoir attendre son retour à moins qu'un très grand graphique comme ElenWii veuille bien me rendre ce service
J'ai donc activé le module Choix du thème (en bas de page) avec les thèmes Multi_Theme (original avec mes images) et le Multi_Theme_JS (par défaut) si l'un de vous veut aller voir sur le site ce que cela donne.
Vous verrez que les flèches permettant de descendre en bas de page ne sont plus positionnées correctement
En mode "motto" (smartphone) le slide fonctionne mais l'affiche des noms des images ne devrait pas apparaître.
Je me rend compte qu'il y a un gros boulot pour adapter ce thème.
Cordialement,
Olivier.
Édité par olivierb Le 10/08/2016 à 14h27
Olivier
ElenWii Membre non connecté
- Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
- Equipe Graphique
remplace
right: 152px;par
right: 60px;sur les classes
div#gotop
(ligne 488 du fichier design.css) et div#gobottom
(ligne 504 du fichier design.css)pour le slide :
ajoute
#slide-container { clear: both;}dans le fichier design.css
augmente la valeur du width dans le frame.tpl afin de remplir plus de place.
Je n'ai pas de soucis de nom d'image de mon coté.
Renvoi moi ton thème une fois les modifications faite si tu as encore un soucis de slide.
olivierb Membre non connecté
- Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
- Equipe Assistance
Je regarde cela demain. Bonne nuitée.
Cordialement,
Olivier.
Olivier
olivierb Membre non connecté
- Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
- Equipe Assistance
Alors, malgré tous mes efforts et les conseils d'ElenWii, je n'arrive pas à placer le slide au bon endroit. Pour les flèches, c'est OK, merci
Concernant le thème, il fait maintenant 4 mo compressé et je ne peux pas l'upload ici.
ElenWii, si tu as un @Gmail (MP) je te partage mon Drive.
Cordialement,
Olivier.
Olivier
ElenWii Membre non connecté
- Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
- Equipe Graphique
C'est un menu de l'admin en dessous de ton slide ?
Tu veux le compteur à gauche du module search c'est ca ?
je vais te calé mieux les flèches, c'est moches là.
PS : La prochaine fois que je vais voir le spectacle de cape et d'épée à Richelieu, tu me payeras un verre
olivierb Membre non connecté
- Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
- Equipe Assistance
Le menu sous le slide est celui du thème. Le menu admin tu le vois dans mon premier post.
Pour le compteur et le nom du site, ils sont à gauche caché par le slide.
Par contre, même avec le thème original, je ne vois pas le slogan du site.
PS : concernant le spectacle de Richelieu, nous nous sommes peut-être rencontrés sans le savoir
J'ai fait des photos mais je ne les ai même pas mises en ligne sur mon groupe FB sur la Touraine
Cordialement,
Olivier.
Olivier
ElenWii Membre non connecté
- Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
- Equipe Graphique
olivierb Membre non connecté
- Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
- Equipe Assistance
Edit :
je viens d'activer le module téléchargement, j'ai un 404 sur la config du module et idem sur l'ajout d'un fichier (voir Edit4)
je précise que je ne peux pas activer l'urlrewriting, cela me plante le site.
rien dans les erreurs archivées et pour les erreurs 404
Url demandée | Url de provenance | Nombre | Supprimer |
/download/admin/config | http://braslou.esy.es/download/index.php | 1 |
Edit2 :
je vais te MP un compte FTP, ce sera plus simple
Edit3 :
Le thème est téléchargeable ici
Edit4 :
En vidant le cache du site, le module téléchargement est maintenant fonctionnel.
Cordialement,
Olivier.
Édité par olivierb Le 11/08/2016 à 17h10
Olivier
ElenWii Membre non connecté
- Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
- Equipe Graphique
Code CSS :
/*--------------------------------------------------------- * Theme : Multi_Theme * Par : Sakura * Porté en V5.0.XX : 01/04/2016 * Site web : http://news-manga.com | http://easy-design.net/ * Commentaire ou autre de l'auteur # Merci de ne pas toucher au entête des fichiers CSS. *--------------------------------------------------------- * Théme non compatible avec deux menus (droite et gauche) le choix reste possible sur un menu *----------------------------------------------------------*/ /*-------------------------------------- design.css Contient les conteneurs de mise en page. Le design.css permet de mettre en forme votre site web avec le design de votre choix --------------------------------------*/ /* -- Elements HTML generiques specifique au theme -- --------------------------------------*/ html { font-size: 100%; font-size: 10px; } body { background: url('images/global.jpg') repeat-x scroll 0 0 #c8d7dc; color: #2f404d; font-family: Verdana,Arial,Helvetica,sans-serif; position: relative; height: auto; min-height: 100%; font-size: 12px; } div#contenu { position: relative; background: rgba(0, 0, 0, 0) url('images/global.png') repeat-y scroll center top; margin: auto; width: 1060px; } /* -- En-tete de page - Header -- --------------------------------------*/ header#header { max-width: 1005px; margin:5px auto auto; } /* --- Partie superieure du header --- */ div#top-header { background: transparent url('images/header.png') no-repeat scroll center 0; min-height: 365px; max-width: 1005px; margin: auto; overflow: hidden; } div#top-header-content{ float: right; } /* --- Intégration du Slide de JustPlayForFun --- */ #slide-container { padding-top: 3px; overflow: hidden; clear:both; } #slide-content { margin: auto; /* max-width: 1000px; */ max-height: 228px; } .slidesjs-navigation, .slidesjs-pagination { display: none !important; } a.control_prev, a.control_next { position: absolute; top: 35%; z-index: 999; display: block; font-size: 30px; padding: 25px 10px; width: auto; height: auto; color: #cccccc; text-decoration: none; opacity: 0.8; cursor: pointer; } a.control_prev:hover, a.control_next:hover { opacity: 1; -webkit-transition: all 0.2s ease; } a.control_prev { border-radius: 0 2px 2px 0; } a.control_next { right: 0; border-radius: 2px 0 0 2px; } .slider_option { position: relative; margin: 10px auto; width: 160px; font-size: 18px; } /* --- Partie inferieur du header --- */ div#sub-header { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfdff+0,e6ebee+50,d7dee3+51,f2f5f6+100 */ background: #fcfdff; /* Old browsers */ background: -moz-linear-gradient(top, #fcfdff 0%, #e6ebee 50%, #d7dee3 51%, #f2f5f6 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #fcfdff 0%,#e6ebee 50%,#d7dee3 51%,#f2f5f6 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #fcfdff 0%,#e6ebee 50%,#d7dee3 51%,#f2f5f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfdff', endColorstr='#f2f5f6',GradientType=0 ); /* IE6-9 */ border-top: 2px solid #bccad3; border-bottom: 2px solid #bccad3; min-height: 35px; text-align: center; } div#sub-header-content{ max-width: 1024px; margin: auto; } div#sub-header-menu{ text-align:center; font-size:16px; margin-top:20px; } /* --- Logo et Nom du site web --- */ div#site-infos { max-width: 940px; margin: 1.5em 1.5em 0 1.5em; float: left; } div#site-logo { background: rgba(0, 0, 0, 0) url('images/logo.png') no-repeat scroll center center / cover ; float: left; height: 200px; margin: 10px 1em 0 0; position: absolute; width: 217px; z-index: 1000; } div#site-name-container { margin: 1em 0 0 20em; overflow: hidden; float: left; } a#site-name { color: #F9FCFF; font-size: 4em; font-weight: bold; line-height: 1em; letter-spacing: 0.02em; text-decoration: none; text-shadow: 0 0 0 rgb(0,0,0), 1px 0 0 rgb(-255,-255,-255), 2px 0 0.1px rgba(0,0,0,0.1), 2px 0 0.1px rgba(0,0,0,0.2), 0 0 1px rgba(0,0,0,.1); } span#site-slogan { display: block; padding: 0.1em 0 0 0.1em; color: #FFFFFF; font-size: 1em; letter-spacing: 0.1em; } @media (min-width:800px) { a#site-name {display:none;} div#site-infos {display:none;} } /* -- Conteneur global du site -- --------------------------------------*/ div#global { margin: auto; max-width: 1005px; } div#sous-global { max-width: 1060px; margin: auto; padding: 0 10px; } aside#menu-left, aside#menu-right { width: auto; } #main { width: auto; } /* -- Contenu de la page -- --------------------------------------*/ /* --- Contenu central --- */ div#main-content { padding: 1.5em 1em; } /* --- Emplacement au dessus et en dessous du contenu de la page --- */ div#top-content { margin: 0 0 2% 0; } div#bottom-content { margin: 2% 0 0 0; } /* --- Emplacement au dessus du pied de page --- */ div#top-footer { clear: both; padding: 2% 0; } /* -- Pied de page - Footer -- --------------------------------------*/ footer#footer { background: url('images/footer.png') no-repeat scroll center top transparent; clear: both; height: 299px; margin: auto; padding: 10px; text-align: center; } footer#footer .footer-content { margin: 0 auto 0 auto; max-width: 1024px; padding: 1.5em 0; border-bottom: 2px groove #444444; } footer#footer .footer-infos { min-height: 40px; padding-top: 10px; text-align: center; } footer#footer .footer-infos span { color: #403a3e; font-size: 0.8em; } /* -- Elements specifiques PHPboost -- --------------------------------------*/ /* --- Compteur de visite --- */ div#compteur { color: #445766; font-size: 0.9em; margin-right: 15px; padding-left: 10px; padding-top: 8px; position: absolute; text-align: right; } /* --- Barre d'outils --- */ #actions-links-menu { float:right; margin: 0 5px 5px 5px; } /* --- Barre de lien rapide --- */ nav#breadcrumb { height: 33px; margin: 0 0 20px 10px; padding: 4px; text-indent: 10px; } nav#breadcrumb ol { list-style: none; margin: 0; } nav#breadcrumb ol li { display: inline; } nav#breadcrumb ol li:not(.current):after { content: '/'; color: #616161; } /*################################ Barre de navigation #################################*/ #silverbarnav { background: rgba(0, 0, 0, 0) url('images/silverbar.jpg') repeat-x scroll left top; height: 51px; margin: auto; width: 1005px; } #silverbarnav b { background: url('images/silverbar.jpg') no-repeat scroll right -64px rgba(0, 0, 0, 0); display: block; float: left; height: 50px; width: 24px; } a.silverbar { background: url('images/silverbar.jpg') no-repeat scroll right -64px rgba(0, 0, 0, 0); color: #515c68; display: block; float: left; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 12px; font-weight: bold; line-height: 50px; padding: 0 20px; text-decoration: none; } a.silverbar:hover { background: url('images/silverbar.jpg') repeat-x scroll right -116px rgba(0, 0, 0, 0); color: #2f404d; text-decoration: none; } /*====================================== Todd Motto Labs - Flaunt JS Navigation Adapté pour phpboost 5.0 URL: www.toddmotto.com ========================================*/ section#Motto{ background: #3d3d3b; margin: auto; padding: 0px; vertical-align: top; width: 100%; height:auto; z-index:100; } #menu-title{ color: #ffffff; float: left; font-weight: bold; padding: 18px 0 0 87px; text-align: center; text-transform: uppercase; } .nav { position:relative; /*display:inline-block;*/ font-size:14px; font-weight:900; } .nav-list { text-align:left; } .nav-item { float:left; *display:inline; zoom:1; position:relative; } .nav-item a { background: #d7dee3 none repeat scroll 0 0; border-bottom:1px solid #bccad3; color: #445766; display: block; padding:15px 20px; } .nav-item > a:hover { background:#f2f5f6; } .nav-item:hover .nav-submenu { display:block; } /* Navigation submenu */ .nav-submenu { display:none; position:absolute; left:0; width:180px; } .nav-submenu-item a { background:#f2f5f6; border-bottom: 1px solid #bccad3; display:block; padding:15px; } .nav-submenu-item a:hover { background:#d7dee3 none repeat scroll 0 0; } /* Mobile navigation */ .nav-mobile { display:none; /* Hide from browsers that don't support media queries */ background: #3d3d3b url('images/nav.svg') no-repeat scroll center center / 22px auto; border-left: 1px solid #222222; cursor: pointer; height: 50px; position: absolute; right: 0; top: 0; width: 50px; } /* Mobile navigation, clickable area for revealing <ul> */ .nav-click { color: #445766; position:absolute; top:0; right:0; display:none; border-left: 1px solid #bccad3; height:49px; width:50px; cursor:pointer; } .nav-click i { display:block; height:48px; width:48px; background:url('images/drop.svg') no-repeat center center; background-size:20px; } .nav-click:hover { background-color:#f2f5f6; color: #445766; } .nav-rotate { -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -ms-transform:rotate(180deg); -o-transform:rotate(180deg); transform:rotate(180deg); } /*====================================== Navigation latérale "gadget de navigation" ========================================*/ div#gotop { display: block; position: fixed; top: 110px; z-index: 150; } div#gotop a { background:#C7D8E2; float: left; color: #445766; font-size:30px; padding:25px 10px; opacity: 0.3; border-radius: 0 10px 10px 0; } div#gobottom { display: block; position: fixed; top: 210px; z-index: 150; } div#gobottom a { background:#C7D8E2; float: left; color: #445766; font-size:30px; padding:25px 10px; opacity: 0.3; border-radius: 0 10px 10px 0; } /*====================================== Alls Media Queries CSS applique aux écrans PC ========================================*/ @media ( min-width: 769px ) { /* --- Menu gauche --- */ aside#menu-left { float: left; width: 25%; margin-right: 1%; } /* --- Menu droit --- */ aside#menu-right { float: right; width: 25%; margin-left: 1%; } /* --- Menu central : main --- */ div#main { float: left; width: 100%; overflow: hidden; } div#main.main-with-left, div#main.main-with-right { width: 74%; } div#main.main-with-left.main-with-right { width: 60%; } } @media (max-width:768px) { body {font-size: 1.4em;} div#contenu{background:none;margin: auto;width: auto;} header#header {margin: auto;} div#top-header { background:none; margin: auto; max-width: auto; min-height: auto; overflow: hidden; } div#compteur, div#site-infos, div#top-header-content, div#slider{display: none;} div#header-gsm {background-color:#222222; height:50px; text-align:center;} div#sub-header {background:#222222 none repeat scroll 0 0;border: none;} a#site-name { color: #f9fcff; font-size: 2em; font-weight: bold; letter-spacing: 0.02em; line-height: 1em; } div#global { background-color: #ffffff; border-top: 1px solid #000; margin: auto; max-width: 1000px; -webkit-box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.75); box-shadow: 0px 6px 10px 0px rgba(0,0,0,0.75); } div#sous-global { background-color: # faf6ee; margin: auto; padding: 0 10px; } footer#footer { background: #7d7e7d; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkN2U3ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZTBlMGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */ background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-8 */ border-left: 1px solid #fff; border-right: 1px solid #fff; border-top: 1px solid #222222; clear: both; margin: auto; width: 1000px; height: auto; } footer#footer .footer-infos { min-height: 40px; text-align: center; padding-top: 10px; } footer#footer {width:100%} .footer-infos span { display: block; padding: 0 0 5px; } footer#footer .footer-infos { min-height: 40px; padding-top: 5px; text-align: center; } footer#footer .footer-infos span { color: #eeeeee; font-size: 0.8em; } span.footer-infos-separator { display: none; } #silverbarnav{display: none;} } @media (min-width:769px) { section#Motto {display: none;} } @media only screen and (min-width: 320px) and (max-width: 768px) { .nav-mobile { display:block; } .nav { width:100%; padding:50px 0 0; } .nav-list { display:none; } .nav-item { width:100%; float:none; list-style: none outside none; } .nav-item > a { padding:15px; } .nav-click { display:block; } .nav-mobile-open { border-radius:5px 5px 0 0; -webkit-border-radius:5px 5px 0 0; -moz-border-radius:5px 5px 0 0; } .nav-item:hover .nav-submenu { display:none; } .nav-submenu { position:static; width:100%; } ul{margin-left:0px;} .nav-submenu{margin-bottom:0px} } div#menugo { position: absolute; top: 0px; right: 26px; } @media (max-width:768px) { div#menugo {display: none;} }
et le body.tpl par ceci :
Code TPL :
# INCLUDE MAINTAIN # <script src="{PATH_TO_ROOT}/templates/{THEME}/js/slide-show.js"></script> <script src="{PATH_TO_ROOT}/templates/{THEME}/js/flaunt.js"></script> <script src="{PATH_TO_ROOT}/templates/{THEME}/js/scroll-to.js"></script> <div id="top_page" /></div> <div id="contenu"> <header id="header"> <div id="header-gsm"> <a id="site-name" href="{PATH_TO_ROOT}/">{SITE_NAME}</a> </div> <div id="top-header"> <div id="compteur"> # IF C_COMPTEUR # :: <span>{L_VISIT} : {COMPTEUR_TOTAL} - {L_TODAY} : {COMPTEUR_DAY}</span> :: Bienvenue sur <a id="wellcome-name" href="{PATH_TO_ROOT}/">{SITE_NAME}</a> ! # ENDIF # </div> <div id="site-infos"> <div id="site-logo" # IF C_HEADER_LOGO #style="background: url('{HEADER_LOGO}') no-repeat;"# ENDIF #></div> <div id="site-name-container"> <a id="site-name" href="{PATH_TO_ROOT}/">{SITE_NAME}</a> <span id="site-slogan">{SITE_SLOGAN}</span> </div> </div> <div id="top-header-content"> # IF C_MENUS_HEADER_CONTENT # # START menus_header # {menus_header.MENU} # END menus_header # # ENDIF # </div> <div id="slide-container"> <div id="slide-content"> <img src="{PATH_TO_ROOT}/templates/{THEME}/pics/braslou.jpg" alt="Vue générale Braslou"> <img src="{PATH_TO_ROOT}/templates/{THEME}/pics/fontaine.jpg" alt="Fontaine"> <img src="{PATH_TO_ROOT}/templates/{THEME}/pics/faisan.jpg" alt="Faisan"> <img src="{PATH_TO_ROOT}/templates/{THEME}/pics/huppes.jpg" alt="Huppes"> </div> </div> <div id="silverbarnav"> <a href="./index.php" class="silverbar"><i class="fa fa-home"></i> Accueil</a> <a href="{PATH_TO_ROOT}/news/index.php" class="silverbar"><i class="fa fa-newspaper-o"></i> News</a> <a href="{PATH_TO_ROOT}/articles/index.php" class="silverbar"><i class="fa fa-rss"></i> Blog</a> <a href="{PATH_TO_ROOT}/wiki/wiki.php" class="silverbar"><i class="fa fa-file-text-o"></i> Tutoriels</a> <a href="{PATH_TO_ROOT}/faq/index.php" class="silverbar"><i class="fa fa-bars"></i> Divers</a> <a href="{PATH_TO_ROOT}/calendar/index.php" class="silverbar element"><i class="fa fa-calendar"></i> Calendrier</a> <a href="{PATH_TO_ROOT}/contact/index.php" class="silverbar"><i class="fa fa-envelope"></i> Contact</a> </div> <div id="sub-header"> <section id="Motto"> <div id="menu-title">Menu principal</div> <nav class="nav"> <ul class="nav-list"> <li class="nav-item"> <a href="?=about">Accueil</a> </li> <li class="nav-item"> <a href="?=about">News</a> </li> <li class="nav-item"> <a href="?=home">Divers</a> <ul class="nav-submenu"> <li class="nav-submenu-item"> <a href="?=submenu-1">Astuces</a> </li> <li class="nav-submenu-item"> <a href="?=submenu-2">Blog</a> </li> <li class="nav-submenu-item"> <a href="?=submenu-3">F.A.Q</a> </li> <li class="nav-submenu-item"> <a href="?=submenu-4">Calendrier</a> </li> </ul> </li> <li class="nav-item"> <a href="?=portfolio">Portfolio</a> </li> <li class="nav-item"> <a href="?=services">Services</a> <ul class="nav-submenu"> <li class="nav-submenu-item"> <a href="?=submenu-1">Submenu item 1</a> </li> <li class="nav-submenu-item"> <a href="?=submenu-2">Submenu item 2</a> </li> <li class="nav-submenu-item"> <a href="?=submenu-3">Submenu item 3</a> </li> <li class="nav-submenu-item"> <a href="?=submenu-4">Submenu item 4</a> </li> </ul> </li> <li class="nav-item"> <a href="?=testimonials">Staff</a> </li> <li class="nav-item"> <a href="?=contact">Contact</a> </li> </ul> </nav> </section> # IF C_MENUS_SUB_HEADER_CONTENT # # START menus_sub_header # {menus_sub_header.MENU} # END menus_sub_header # # ENDIF # </div> <div class="spacer"></div> </header> <div id="menugo"> <div id="gotop" style="display: block;"> <a id="gotop" class="js-scrollTo" href="#top_page"><i class="fa fa-chevron-up"></i></a> </div> <div id="gobottom" style="display: block;"> <a id="gobottom" class="js-scrollTo" href="#bottom_page"><i class="fa fa-chevron-down"></i></a> </div> </div> <div id="global"> <div id="sous-global"> # IF C_MENUS_LEFT_CONTENT # <aside id="menu-left"> # START menus_left # {menus_left.MENU} # END menus_left # </aside> # ENDIF # <div id="main" class="# IF C_MENUS_LEFT_CONTENT #main-with-left# ENDIF ## IF C_MENUS_RIGHT_CONTENT # main-with-right# ENDIF #" role="main"> # IF C_MENUS_TOPCENTRAL_CONTENT # <div id="top-content"> # START menus_top_central # {menus_top_central.MENU} # END menus_top_central # </div> <div class="spacer"></div> # ENDIF # <div id="main-content" itemprop="mainContentOfPage"> # INCLUDE ACTIONS_MENU # <nav id="breadcrumb" itemprop="breadcrumb"> <ol> <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="{START_PAGE}" title="{L_INDEX}" itemprop="url"> <span itemprop="title">{L_INDEX}</span> </a> </li> # START link_bread_crumb # <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" # IF link_bread_crumb.C_CURRENT # class="current" # ENDIF #> <a href="{link_bread_crumb.URL}" title="{link_bread_crumb.TITLE}" itemprop="url"> <span itemprop="title">{link_bread_crumb.TITLE}</span> </a> </li> # END link_bread_crumb # </ol> </nav> # INCLUDE KERNEL_MESSAGE # {CONTENT} </div> # IF C_MENUS_BOTTOM_CENTRAL_CONTENT # <div id="bottom-content"> # START menus_bottom_central # {menus_bottom_central.MENU} # END menus_bottom_central # </div> # ENDIF # </div> # IF C_MENUS_RIGHT_CONTENT # <aside id="menu-right"> # START menus_right # {menus_right.MENU} # END menus_right # </aside> # ENDIF # # IF C_MENUS_TOP_FOOTER_CONTENT # <div id="top-footer"> # START menus_top_footer # {menus_top_footer.MENU} # END menus_top_footer # <div class="spacer"></div> </div> # ENDIF # <div class="spacer"></div> </div> </div> </div><!-- fermeture du "Id:contenu"--> <footer id="footer"> # IF C_MENUS_FOOTER_CONTENT # <div class="footer-content"> # START menus_footer # {menus_footer.MENU} # END menus_footer # </div> # ENDIF # <div class="footer-infos"> <span class="cms"> {L_POWERED_BY} <a href="http://www.phpboost.com" title="PHPBoost">PHPBoost</a> {L_PHPBOOST_RIGHT} </span> # IF C_DISPLAY_BENCH # <span class="requete"> <span class="footer-infos-separator"> | </span>{L_ACHIEVED} {BENCH}{L_UNIT_SECOND} - {REQ} {L_REQ} - {MEMORY_USED} </span> # ENDIF # # IF C_DISPLAY_AUTHOR_THEME # <span class="author"> <span class="footer-infos-separator"> | </span>{L_THEME} {L_THEME_NAME} {L_BY} <a href="{U_THEME_AUTHOR_LINK}">{L_THEME_AUTHOR}</a> </span> # ENDIF # </div> </footer> <div id="bottom_page" /></div>
olivierb Membre non connecté
- Modérateur
- Voir le profil du membre olivierb
- Inscrit le : 07/02/2014
- Site internet
- Groupes :
- Equipe Assistance
Merci ElenWii !
J'espère que cela ne t'a pas trop donné de travail !
Le résultat est plus que parfait, merci encore !
Cordialement,
Olivier.
Olivier
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie