+- MyBB.support, le portail francophone de MyBB (https://mybb.fr)
+-- Forum : MyBB.fr (https://mybb.fr/forum-1.html)
+--- Forum : Support (https://mybb.fr/forum-5.html)
+--- Sujet : [Résolue]Header (/thread-4164.html)
Pages :
1
2
RE: Header - valentin45000 - 19-05-2011
AH je viens de comprendre.
Le problème c'est que vous avez du texte qui s'affiche alors que normalement tout dois passer par des variables.
Je vais vous mettre la procédure, elle va être un peu longue.
RE: Header - valix - 19-05-2011
D'accord merci de votre aide Valentin
RE: Header - valentin45000 - 19-05-2011
Dans votre header (côté template du forum) ajoutez tout en haut :
Code PHP :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.hoverIntent.minified.js"></script>
<script type="text/javascript">
/*
* jQuery Mega Drop Down Menu script by Soh Tanaka
* http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/
*
*/
$(document).ready(function(){
function megaHoverOver(){
$(this).find(".sub").stop().fadeTo('fast', 1).show();
//Calculate width of all ul's
(function($) {
jQuery.fn.calcSubWidth = function() {
rowWidth = 0;
//Calculate row
$(this).find("ul").each(function() {
rowWidth += $(this).width();
});
};
})(jQuery);
if ( $(this).find(".row").length > 0 ) { //If row exists...
var biggestRow = 0;
//Calculate each row
$(this).find(".row").each(function() {
$(this).calcSubWidth();
//Find biggest row
if(rowWidth > biggestRow) {
biggestRow = rowWidth;
}
});
//Set width
$(this).find(".sub").css({'width' :biggestRow});
$(this).find(".row:last").css({'margin':'0'});
} else { //If row does not exist...
$(this).calcSubWidth();
//Set Width
$(this).find(".sub").css({'width' : rowWidth});
}
}
function megaHoverOut(){
$(this).find(".sub").stop().fadeTo('fast', 0, function() {
$(this).hide();
});
}
var config = {
sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
interval: 0, // number = milliseconds for onMouseOver polling interval
over: megaHoverOver, // function = onMouseOver callback (REQUIRED)
timeout: 0, // number = milliseconds delay before onMouseOut
out: megaHoverOut // function = onMouseOut callback (REQUIRED)
};
$("ul#topnav li .sub").css({'opacity':'0'});
$("ul#topnav li").hoverIntent(config);
// Add class to the current element
$("ul#topnav li").click(function(){
$("ul#topnav").find("li.current").removeClass().removeAttr("class");
$(this).addClass("current");
});
// Change arrow on hover
$("li.liSub").hover(function(){
$(this).find("span img").attr("src", "arrow_hover.png");
},function(){
$(this).find("span img").attr("src", "arrow.png");
});
// Delete the border for the last li of the submenu
$("ul#topnav .sub ul li:last-child a").css("border", "none");
});
</script>
<style type="text/css">
body {
background:url("body_bg.png") repeat-x scroll 0 0 transparent;
margin: 0; padding: 0;
font: normal 10px Tahoma, Verdana, Arial, Helvetica, sans-serif;
}
*{outline: none;}
img {border: 0;}
.container {
width: 960px;
padding: 0;
margin: 0 auto;
}
#header {
line-height:5;
color:Yellow;
width: 568px; height: 163px;
float: left;
}
#nav_wrapper {
clear: left;
}
span#menu_end {
display:block;
float:left;
height:46px;
width:5px;
}
span#menu_start {
display:block;
float:left;
height:46px;
width:52px;
}
ul#topnav {
margin: 0; padding: 0;
float:left;
list-style: none;
font-size: 1em;
background: url("back_nav.png") repeat-x;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
position: relative;
background: url(li_border.png) no-repeat right top;
}
ul#topnav li#last-li {
background: none;
}
ul#topnav li#last-li a span.single_wrapper {
float:left;
margin:6px 6px 6px 10px;
padding:0 10px;
}
ul#topnav li.liSub a, ul#topnav li a {
color: white;
float: left;
height: 46px;
line-height: 34px;
padding: 0;
text-decoration: none;
text-shadow: 0 0 2px black;
text-transform: uppercase;
z-index: 200;
}
span#menu_start a {
background: url(home_nav.png) no-repeat left top;
width: 52px; height: 46px;
text-indent: -9999px;
padding:0; margin:0;
}
span#menu_start a:hover { background-position: left -46px; }
span#menu_start a:active { background-position: left -92px; }
span#menu_start a { display:block; line-height: 46px; }
ul#topnav li .sub {
position: absolute;
top: 46px; left: 10px;
background: #FFFFFF;
background-color: #f8f8f8\9; /* le \9 est un hack pour cibler IE8, IE7 et IE6 */
border-bottom: 1px solid #cbcbcb\9;
border-left: 1px solid #cbcbcb\9;
border-right: 1px solid #cbcbcb\9;
padding: 10px 10px 10px;
float: left;
border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-khtml-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-khtml-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
box-shadow:0px 0px 5px #5a5a5a;
-moz-box-shadow:0px 0px 5px #5a5a5a;
-webkit-box-shadow:0px 0px 5px #5a5a5a;
display: none;
z-index: -10;
}
ul#topnav li .row {clear: both; float: left; width: 100%; margin-bottom: 10px;}
ul#topnav li .sub ul{
list-style: none;
margin: 0; padding: 0;
width: 150px;
float: left;
}
ul#topnav .sub ul li {
width: 100%;
color: #fff;
background: none;
}
ul#topnav .sub ul li h2 {
padding: 0; margin: 0;
font-size: 1.3em;
font-weight: normal;
}
ul#topnav .sub ul li h2 a, ul#topnav .sub ul li h2 a:hover {
padding: 5px 0;
background-image: none;
color: #c10707;
}
ul#topnav .sub ul li h2 a:hover {
background-image: none;
text-decoration: underline;
}
ul#topnav .sub ul li a {
float: none;
text-indent: 0;
height: auto;
background: url(navlist_arrow.png) no-repeat 0px 10px;
padding: 0 0 0 18px;
margin: 0 10px;
display: block;
text-decoration: none;
color: #757575;
font-size:1.1em;
text-shadow: none;
border-bottom: 1px solid #e6e6d8;
text-transform: none;
line-height:27px;
}
ul#topnav .sub ul li a:hover {
color: #c50a0a;
background: url(navlist_arrow_hover.png) no-repeat 0px 10px;
text-decoration: underline;
}
span.dd_action {
height:6px;
padding:0 0 0 10px;
width:9px;
}
span.single_wrapper {
float:left;
margin:6px 10px;
padding:0 15px;
}
span.single_wrapper:hover, li.current a span.single_wrapper {
background: white;
color: black;
/* -- CSS3 stuff -- */
text-shadow: none;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#FFFFFFFF, endColorstr=#FFe5e5e5);
background-image: -moz-linear-gradient( top, #FFFFFF, #e5e5e5);
background-image: -webkit-gradient( linear, left top, left bottom, from(#FFFFFF), to(#e5e5e5));
border-radius: 7px; /* Propriété CSS3 générale et pour Opera */
-moz-border-radius: 7px; /* Propriété CSS3 pour Firefox */
-khtml-border-radius: 7px; /* Propriété CSS3 pour navigateurs KHTML */
-webkit-border-radius: 7px; /* Propriété CSS3 pour navigateurs Webkit */
box-shadow: 0px 0px 2px #343333; /* Propriété CSS3 */
-webkit-box-shadow: 0px 0px 2px #343333; /* Propriété CSS3 pour Firefox */
-moz-box-shadow: 0px 0px 2px #343333; /* Propriété CSS3 pour navigateurs Webkit */
}
span.single_wrapper:active {
background: white;
color: black;
/* -- CSS3 stuff -- */
text-shadow: none;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#FFe5e5e5, endColorstr=#FFFFFFFF);
background-image: -moz-linear-gradient( top, #e5e5e5, #FFFFFF);
background-image: -webkit-gradient( linear, left top, left bottom, from(#e5e5e5), to(#FFFFFF));
border-radius: 7px;
-moz-border-radius: 7px;
-khtml-border-radius: 7px;
-webkit-border-radius: 7px;
box-shadow: 0px 0px 2px #343333;
-webkit-box-shadow: 0px 0px 2px #343333;
-moz-box-shadow: 0px 0px 2px #343333;
}
span.dd_wrapper {
float:left;
margin:6px 10px 0;
padding:0 11px 6px 18px;
}
li.liSub a:hover span.dd_wrapper, li.liSub:hover a span.dd_wrapper {
z-index: 100;
background: white;
color: black;
border-top: 1px solid #e5e5e5;
border-right: 1px solid #989898;
padding: 0 10px 6px 18px;
/* -- CSS3 stuff -- */
text-shadow: none;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr=#dfdfdf, endColorstr=#f8f8f8); /* Pour IE */
background-image: -moz-linear-gradient( top, #e5e5e5, #FFFFFF); /* Pour Firefox */
background-image: -webkit-gradient( linear, left top, left bottom, from(#e5e5e5), to(#FFFFFF)); /* Pour Webkit */
border-top-right-radius: 7px;
-moz-border-radius-topleft: 7px;
-webkit-border-top-left-radius: 7px;
-khtml-border-radius-topleft: 7px;
border-top-left-radius: 7px;
-moz-border-radius-topright: 7px;
-webkit-border-top-right-radius: 7px;
-khtml-border-radius-topright: 7px;
}
</style>
<?php include "Menu/";
echo $affichage;
?>
Ensuite sur votre fichier Menu/index.php vous allez tout supprimez et mettre :
Code PHP :
<?php
$affichage = ' <div id="header"><h1>Dark-Security</h1></div>
<div id="nav_wrapper">
<span id="menu_start"><a href="#" class="home">Home</a></span>
<ul id="topnav">
<center><li class="liSub">
<li>
<a href="#">
<span class="single_wrapper">Forum</span>
</a>
</li>
<li>
<a href="#">
<span class="single_wrapper">Donation</span>
</a>
</li>
<li>
<a href="#">
<span class="single_wrapper">L\'equipe du forum</span>
</a>
</li>
<li>
<a href="#">
<span class="single_wrapper">Recherche</span>
</a>
</li>
<li>
<a href="#">
<span class="single_wrapper">Liste des membres</span>
</a>
</li>
<li id="last-li">
<a href="#">
<span class="single_wrapper">Contact</span>
</a>
</li>
</ul></center>
<span id="menu_end"><img src="last_li.png" width="5" height="46" alt="" /></span>
</div>';
?>De cette façon ça marcheras.
Par contre le css poseras peut être problème là c'est à vous de le modifier
En fait quand on fait un include, le plugin va l'inclure dans global.php mais le problème c'est que du texte est affiché et ça fait planté le global.php qui n'est pas fait pour afficher du texte. Donc on enregistre tout dans une variable et on l'affiche sur le template
RE: Header - exdiogene - 19-05-2011
(19-05-2011, 18:00)valentin45000 a écrit : Essai avec :
Code PHP :
<?php
include "Menu/";
?>
Je tiens à signaler qu'il est nécessaire d'avoir un nom de fichier pour un include et "Menu/" est un nom de répertoire!
Il serait donc beaucoup plus approprié d'écrire "Menu/index.php"...
RE: Header - remysimpson - 19-05-2011
sa commence bien j'ai pas acces a la page ( page blanche )
RE: Header - valentin45000 - 19-05-2011
Pas forcément si il un fichier index la plupart de sserveur vont le chercher donc ça reviens un peut au même sauf que ton écriture fait plus propre
... Mais tu vois je suis flémmard et ça me faisait 9 lettres de plus à écrire xD ... la flemme va loin hein ? xD
@remysimpson : Merci d'ouvrir un sujet.
RE: Header - valix - 19-05-2011
C'est quelle template exactement que je doit editer ? :p
RE: Header - valentin45000 - 19-05-2011
Entête > header
RE: Header - exdiogene - 19-05-2011
Si ce "header" est statique, ma suggestion serait de simplement copier son contenu HTML ici :
Panneau d'Administration -> Templates et Style -> Templates -> Choisir le Thème -> Entête Templates -> header
RE: Header - valix - 19-05-2011
Sa ne marche pas ..
RE: Header - valentin45000 - 19-05-2011
@valix : Normalement si je viens de le faire en local et ça marche. Sinon fait comme exdiogene viens de le suggéré se sera plus simple
RE: [Résolue]Header - valix - 20-05-2011
Bonjour , je vous annonce que le probleme a étés résolue grâce a Valentin45000
Merci a toi !
RE: [Résolue]Header - valentin45000 - 20-05-2011
Oui après de longue et périlleuse aventure lol