Changer fond de la bannière (uniquement) et bien la caler
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Changer fond de la bannière (uniquement) et bien la caler
Bonjour,
Actuellement, je rencontre un léger soucis avec la bannière de mon forum. Je souhaiterais avoir une image de fond uniquement pour la partie supérieure du forum, donc du haut de la page jusqu'à la barre de menu. Ensuite, j'aimerais que ma bannière/logo soit bien calée contre la bordure du haut. Idéalement, j'aimerais faire disparaitre la description du forum pour que la barre de menu se rapproche de la bannière, mais ce n'est qu'un problème annexe.
Voici l'adresse dudit forum : http://orbedelegendes.guildjdr.net/
P.S. Ne faites pas trop attention aux nombreux autres problèmes présents sur le forum, notamment au niveau des couleurs et du calage des images. Ils feront l'objet d'autres posts.
Actuellement, je rencontre un léger soucis avec la bannière de mon forum. Je souhaiterais avoir une image de fond uniquement pour la partie supérieure du forum, donc du haut de la page jusqu'à la barre de menu. Ensuite, j'aimerais que ma bannière/logo soit bien calée contre la bordure du haut. Idéalement, j'aimerais faire disparaitre la description du forum pour que la barre de menu se rapproche de la bannière, mais ce n'est qu'un problème annexe.
Voici l'adresse dudit forum : http://orbedelegendes.guildjdr.net/
P.S. Ne faites pas trop attention aux nombreux autres problèmes présents sur le forum, notamment au niveau des couleurs et du calage des images. Ils feront l'objet d'autres posts.
Dernière édition par nxsnexus le Mar 3 Mai 2011 - 22:41, édité 1 fois
Re: Changer fond de la bannière (uniquement) et bien la caler
Bonsoir,
C'est une affaire de template et de css ^^
avez-vous déjà changer votre template général overall_header ? si oui pouvez-vous me le fournir.
Cordialement.
C'est une affaire de template et de css ^^
avez-vous déjà changer votre template général overall_header ? si oui pouvez-vous me le fournir.
Cordialement.
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Changer fond de la bannière (uniquement) et bien la caler
Absolument pas, je n'ai rien touché de toutes ces bêtes là.
Merci pour votre réponse rapide
Merci pour votre réponse rapide
Re: Changer fond de la bannière (uniquement) et bien la caler
Mettez déjà ceci dans votre css
adaptez au besoin le 20 pour positionner votre logo bien en haut de votre forum
- Code:
#i_logo {
position: relative;
top: -20px}
adaptez au besoin le 20 pour positionner votre logo bien en haut de votre forum
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Changer fond de la bannière (uniquement) et bien la caler
Bonjour,
Mettez comme description :
Cordialement.
Mettez comme description :
- Code:
<span id="desc">Forum pour la communauté RP de l'Orbe de Légendes</span>
- Code:
/* faire disparaitre la description */
#desc { display: none; }
/* remonter de 40 pixels ce qu'il y a en dessous du titre */
.maintitle h1 { margin-bottom:-40px; display: block; }
/* retirer la bordure au dessus de l'interieur du forum */
.bodyline { padding-top:0; }
/* remonter la banniere d'une pixel qui doit manquer probablement à cause d'un bord */
#i_logo { margin-top: -1px; }
Cordialement.
Ea- Aidactif
- Messages : 23583
Inscrit(e) le : 04/04/2008
Re: Changer fond de la bannière (uniquement) et bien la caler
@macema : Je l'ai mis et c'est parfait pour ça , merci bien ! Pour cette histoire de fond, j'imagine que c'est bien plus difficile, n'est-ce pas ?
@Etana : J'ai appliqué ce que vous m'avez donné à l'exception de votre ligne pour remonter le logo. J'ai préféré celle de macema qui donnait un résultat comme je le voulais Merci à vous aussi !
@Etana : J'ai appliqué ce que vous m'avez donné à l'exception de votre ligne pour remonter le logo. J'ai préféré celle de macema qui donnait un résultat comme je le voulais Merci à vous aussi !
Re: Changer fond de la bannière (uniquement) et bien la caler
Pour finir voici le template a modifier sans perdre votre description... mais en remontant la barre de navigation
changez le template overall_header par ceci ;
enregistrez puis publier votre template
changez le template overall_header par ceci ;
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB}>
<head>
<!-- BEGIN meta_emulate_ie7 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<!-- END meta_emulate_ie7 -->
<title>{SITENAME_TITLE}{PAGE_TITLE}</title>
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING};" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
<!-- END switch_canonical_url -->
{META_FAVICO}
{META}
{META_FB_LIKE}
<meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
{T_HEAD_STYLESHEET}
{CSS}
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
<link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
<!-- BEGIN switch_fb_login -->
<script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
<script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
<!-- END switch_fb_login -->
<!-- BEGIN switch_ticker -->
<link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
<script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker_new -->
<script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
/* Definir le sens de direction en fonction du panneau admin */
var tickerDirParam = "{switch_ticker.DIRECTION}";
var slid_vert = false;
var auto_dir = 'next';
var h_perso = parseInt({switch_ticker.HEIGHT});
switch( tickerDirParam )
{
case 'top' :
slid_vert = true;
break;
case 'left':
break;
case 'bottom':
slid_vert = true;
auto_dir = 'prev';
break;
case 'right':
auto_dir = 'prev';
break;
default:
slid_vert = true;
}
$(document).ready(function() {
var w_cont = $('#fa_ticker_container').width();
if (w_cont > 0)
{
$('#fa_ticker_container').width(w_cont);
/* Affichage de la liste */
$('#fa_ticker_content').css('display','block');
/* Calcul des dimensions du conteneur et des �l�ments */
var width_max = $('ul#fa_ticker_content').width();
var width_item = Math.floor(width_max / {switch_ticker.SIZE});
var height_max = h_perso;
/* Calcul de la hauteur maximale du contenur en fonction des �l�ments et de la hauteur personnalis�e dans l'admin */
$('ul#fa_ticker_content li').each( function () {
if ($(this).height() > height_max)
{
height_max = $(this).height();
}
} );
/* Redimensionnement des �l�ments et des images trop larges */
$('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
if ($(this).width() > width_item)
{
var ratio = $(this).width() / width_item;
var new_height = Math.round($(this).height() / ratio);
$(this).height(new_height).width(width_item);
}
});
/* Redimensionnement et centrage du conteneur en mode vertical */
if (slid_vert)
{
$('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
}
/* Initialisation du caroussel */
$('#fa_ticker_content').jcarousel({
vertical: slid_vert,
wrap: 'circular',
auto: {switch_ticker.STOP_TIME},
auto_direction: auto_dir,
scroll: 1,
size: {switch_ticker.SIZE},
height_max: height_max,
animation: {switch_ticker.SPEED}
});
}
else
{
$('ul#fa_ticker_content li:not(:first)').css('display','none');
$('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
}
});
//]]>
</script>
<!-- END switch_ticker_new -->
<script type="text/javascript">//<![CDATA[
$(document).ready(function(){
<!-- BEGIN switch_enable_pm_popup -->
pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
pm.focus();
<!-- END switch_enable_pm_popup -->
<!-- BEGIN switch_report_popup -->
report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
report.focus();
<!-- END switch_report_popup -->
<!-- BEGIN switch_ticker -->
ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
<!-- END switch_ticker -->
});
<!-- BEGIN switch_login_popup -->
var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
<!-- END switch_login_popup -->
<!-- BEGIN switch_login_popup -->
$(document).ready( function() {
$(window).resize(function() {
var windowWidth = document.documentElement.clientWidth;
var popupWidth = $("#login_popup").width();
var mypopup = $("#login_popup");
$("#login_popup").css({
"left": windowWidth/2 - popupWidth/2
});
});
});
<!-- END switch_login_popup -->
//]]>
</script>
{GREETING_POPUP}
<!-- BEGIN switch_ticker_new -->
<style>
.jcarousel-skin-tango .jcarousel-item {
text-align:center;
width: 10px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: {switch_ticker.SPACING}px;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
margin-bottom: {switch_ticker.SPACING}px;
}
</style>
<!-- END switch_ticker_new -->
<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//]]>
</script>
<!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
<div class="content">
<p>
{hitskin_preview.L_THEME_SITE_PREVIEW}
<br />
<span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
</p>
</div>
</div>
<!-- END hitskin_preview -->
<!-- BEGIN switch_login_popup -->
<div id="login_popup">
<table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
<tr height="25">
<td class="catLeft">
<span class="genmed module-title">{SITENAME}</span>
</td>
</tr>
<tr height="{LOGIN_POPUP_MSG_HEIGHT}">
<td class="row1" align="left" valign="top">
<div id="login_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">
<input type="submit" class="mainoption" value="{L_LOGIN}" />
<input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
<input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
</form>
</div>
<span class="genmed">{LOGIN_POPUP_MSG}</span>
</td>
</tr>
</table>
</div>
<!-- END switch_login_popup -->
<a name="top"></a>
{JAVASCRIPT}
<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
<tr>
<td class="bodyline">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<!-- BEGIN switch_logo_left -->
<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<!-- END switch_logo_left -->
<td align="center" width="100%" valign="middle">
<!-- BEGIN switch_logo_center -->
<a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
<!-- END switch_logo_center -->
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
<tr>
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
</tr>
</table>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr><td>
<br /><div class="maintitle">{MAIN_SITENAME}</div>
<br />
<span class="gen">{SITE_DESCRIPTION}<br /> </span>
</td>
<!-- BEGIN switch_logo_right -->
<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<!-- END switch_logo_right -->
</tr>
</table>
<div style="clear: both;"></div>
<!-- BEGIN switch_ticker_new -->
<div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
<tr>
<td {CLASS_TABLE_TYPE} align="left" class="row1">
<div id="fa_ticker_container">
<ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
<!-- BEGIN ticker_row -->
<li>{switch_ticker.ticker_row.ELEMENT}</li>
<!-- END ticker_row -->
</ul>
</div>
</td>
</tr>
</table>
</div>
<!-- END switch_ticker_new -->
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
<tr>
<td {CLASS_TABLE_TYPE} align="left" class="row1">
<div id="fa_ticker_container">
<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
<div class="fa_ticker_content">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
<!-- END switch_ticker -->
<div id="page-body">
<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
<table cellpadding="0" cellspacing="0" width="100%" class="three-col">
<tbody>
<tr>
<td valign="top" width="{C1SIZE}">
<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>
</td>
<td valign="top" width="100%">
<!-- BEGIN html_validation -->
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
<!-- END html_validation -->
enregistrez puis publier votre template
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Changer fond de la bannière (uniquement) et bien la caler
Bien, j'ai fait ce que vous m'avez proposé de faire. Ça a bien fait remonté ma barre de menu.
Maintenant, est-il possible grâce à cela de mettre une image de fond pour la zone au dessus de la barre de menu ?
Maintenant, est-il possible grâce à cela de mettre une image de fond pour la zone au dessus de la barre de menu ?
Re: Changer fond de la bannière (uniquement) et bien la caler
oula ^^
ça doit être faisable oui. Par contre, ça sera une image qui ne comprend que l'espace entre le logo et la navigation ? Dois-je baisser le contour du forum qui part à partir du logo ?
ça doit être faisable oui. Par contre, ça sera une image qui ne comprend que l'espace entre le logo et la navigation ? Dois-je baisser le contour du forum qui part à partir du logo ?
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Changer fond de la bannière (uniquement) et bien la caler
Je vais vous expliquer mieux tout ça.
Si vous regardez, j'ai fait un logo avec de la transparence. On voit aussi que le fond du forum est une couleur unie. Je voulais utiliser ma barre de navigation (que j'appelle "barre de menu") sépare le fond clair du forum d'un fond plus foncé qui se placera derrière le logo. Ce fond n'est qu'une texture plus foncée censée faire contraste avec la texture claire que j'ai utilisé pour les couleurs de fond de la chatbox, des catégories et du corps du forum. Je voulais aussi utiliser la texture plus foncée (donc celle que j'utiliserai pour toute la partie au dessus de la barre de navigation) comme texture de fond du forum, à la place de la couleur unie actuelle.
C'est comme si je voulais un fond pour ce que je considère le header (toute la partie au dessus de la barre de navigation) et une pour le body (incluant les catégories, les messages, le profil, la chatbox et tout ça). Le fond du forum, qui est actuellement une simple couleur, prendra aussi l'image de fond de ce que j'appelle ici le header.
D'ailleurs je remarque aussi que ma barre de navigation est tronquée à gauche et à droite, elle devrait aller normalement jusqu'au bord du cadre, à quelques chose comme 5 pixels plus loin.
Bon, j'espère avoir été clair et ne pas vous avoir embrouillé encore plus. Désolé si je vous donne du fil à retordre.
Merci pour toute l'aide que vous m'apportez en tous les cas.
Si vous regardez, j'ai fait un logo avec de la transparence. On voit aussi que le fond du forum est une couleur unie. Je voulais utiliser ma barre de navigation (que j'appelle "barre de menu") sépare le fond clair du forum d'un fond plus foncé qui se placera derrière le logo. Ce fond n'est qu'une texture plus foncée censée faire contraste avec la texture claire que j'ai utilisé pour les couleurs de fond de la chatbox, des catégories et du corps du forum. Je voulais aussi utiliser la texture plus foncée (donc celle que j'utiliserai pour toute la partie au dessus de la barre de navigation) comme texture de fond du forum, à la place de la couleur unie actuelle.
C'est comme si je voulais un fond pour ce que je considère le header (toute la partie au dessus de la barre de navigation) et une pour le body (incluant les catégories, les messages, le profil, la chatbox et tout ça). Le fond du forum, qui est actuellement une simple couleur, prendra aussi l'image de fond de ce que j'appelle ici le header.
D'ailleurs je remarque aussi que ma barre de navigation est tronquée à gauche et à droite, elle devrait aller normalement jusqu'au bord du cadre, à quelques chose comme 5 pixels plus loin.
Bon, j'espère avoir été clair et ne pas vous avoir embrouillé encore plus. Désolé si je vous donne du fil à retordre.
Merci pour toute l'aide que vous m'apportez en tous les cas.
Re: Changer fond de la bannière (uniquement) et bien la caler
Essayons ceci :
dans votre css rajouter cela
remplacez votre template overall_header par :
Dites moi si cela marche, s'il y a des problèmes ? ou si je me suis plantée ^^
dans votre css rajouter cela
- Code:
.fondplus {
background-image: url("url de votre image de fond au niveau du logo");
background-repeat: no-repeat;
}
remplacez votre template overall_header par :
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB}>
<head>
<!-- BEGIN meta_emulate_ie7 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<!-- END meta_emulate_ie7 -->
<title>{SITENAME_TITLE}{PAGE_TITLE}</title>
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING};" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
<!-- END switch_canonical_url -->
{META_FAVICO}
{META}
{META_FB_LIKE}
<meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
{T_HEAD_STYLESHEET}
{CSS}
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
<link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
<!-- BEGIN switch_fb_login -->
<script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
<script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
<!-- END switch_fb_login -->
<!-- BEGIN switch_ticker -->
<link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
<script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker_new -->
<script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
<script type="text/javascript">//<![CDATA[
/* Definir le sens de direction en fonction du panneau admin */
var tickerDirParam = "{switch_ticker.DIRECTION}";
var slid_vert = false;
var auto_dir = 'next';
var h_perso = parseInt({switch_ticker.HEIGHT});
switch( tickerDirParam )
{
case 'top' :
slid_vert = true;
break;
case 'left':
break;
case 'bottom':
slid_vert = true;
auto_dir = 'prev';
break;
case 'right':
auto_dir = 'prev';
break;
default:
slid_vert = true;
}
$(document).ready(function() {
var w_cont = $('#fa_ticker_container').width();
if (w_cont > 0)
{
$('#fa_ticker_container').width(w_cont);
/* Affichage de la liste */
$('#fa_ticker_content').css('display','block');
/* Calcul des dimensions du conteneur et des �l�ments */
var width_max = $('ul#fa_ticker_content').width();
var width_item = Math.floor(width_max / {switch_ticker.SIZE});
var height_max = h_perso;
/* Calcul de la hauteur maximale du contenur en fonction des �l�ments et de la hauteur personnalis�e dans l'admin */
$('ul#fa_ticker_content li').each( function () {
if ($(this).height() > height_max)
{
height_max = $(this).height();
}
} );
/* Redimensionnement des �l�ments et des images trop larges */
$('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
if ($(this).width() > width_item)
{
var ratio = $(this).width() / width_item;
var new_height = Math.round($(this).height() / ratio);
$(this).height(new_height).width(width_item);
}
});
/* Redimensionnement et centrage du conteneur en mode vertical */
if (slid_vert)
{
$('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
}
/* Initialisation du caroussel */
$('#fa_ticker_content').jcarousel({
vertical: slid_vert,
wrap: 'circular',
auto: {switch_ticker.STOP_TIME},
auto_direction: auto_dir,
scroll: 1,
size: {switch_ticker.SIZE},
height_max: height_max,
animation: {switch_ticker.SPEED}
});
}
else
{
$('ul#fa_ticker_content li:not(:first)').css('display','none');
$('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
}
});
//]]>
</script>
<!-- END switch_ticker_new -->
<script type="text/javascript">//<![CDATA[
$(document).ready(function(){
<!-- BEGIN switch_enable_pm_popup -->
pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
pm.focus();
<!-- END switch_enable_pm_popup -->
<!-- BEGIN switch_report_popup -->
report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
report.focus();
<!-- END switch_report_popup -->
<!-- BEGIN switch_ticker -->
ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
<!-- END switch_ticker -->
});
<!-- BEGIN switch_login_popup -->
var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
<!-- END switch_login_popup -->
<!-- BEGIN switch_login_popup -->
$(document).ready( function() {
$(window).resize(function() {
var windowWidth = document.documentElement.clientWidth;
var popupWidth = $("#login_popup").width();
var mypopup = $("#login_popup");
$("#login_popup").css({
"left": windowWidth/2 - popupWidth/2
});
});
});
<!-- END switch_login_popup -->
//]]>
</script>
{GREETING_POPUP}
<!-- BEGIN switch_ticker_new -->
<style>
.jcarousel-skin-tango .jcarousel-item {
text-align:center;
width: 10px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: {switch_ticker.SPACING}px;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
margin-bottom: {switch_ticker.SPACING}px;
}
</style>
<!-- END switch_ticker_new -->
<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//]]>
</script>
<!-- END google_analytics_code -->
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="http://2img.net/i/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
<div class="content">
<p>
{hitskin_preview.L_THEME_SITE_PREVIEW}
<br />
<span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
</p>
</div>
</div>
<!-- END hitskin_preview -->
<!-- BEGIN switch_login_popup -->
<div id="login_popup">
<table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
<tr height="25">
<td class="catLeft">
<span class="genmed module-title">{SITENAME}</span>
</td>
</tr>
<tr height="{LOGIN_POPUP_MSG_HEIGHT}">
<td class="row1" align="left" valign="top">
<div id="login_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">
<input type="submit" class="mainoption" value="{L_LOGIN}" />
<input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
<input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
</form>
</div>
<span class="genmed">{LOGIN_POPUP_MSG}</span>
</td>
</tr>
</table>
</div>
<!-- END switch_login_popup -->
<a name="top"></a>
{JAVASCRIPT}
<table class="fondplus" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<!-- BEGIN switch_logo_left -->
<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<!-- END switch_logo_left -->
<td align="center" width="100%" valign="middle">
<!-- BEGIN switch_logo_center -->
<a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
<!-- END switch_logo_center -->
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
<tr>
<td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
<tr>
<td class="bodyline">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr><td>
<br /><div class="maintitle">{MAIN_SITENAME}</div>
<br />
<span class="gen">{SITE_DESCRIPTION}<br /> </span>
</td>
<!-- BEGIN switch_logo_right -->
<td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
<!-- END switch_logo_right -->
</tr>
</table>
<div style="clear: both;"></div>
<!-- BEGIN switch_ticker_new -->
<div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
<tr>
<td {CLASS_TABLE_TYPE} align="left" class="row1">
<div id="fa_ticker_container">
<ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
<!-- BEGIN ticker_row -->
<li>{switch_ticker.ticker_row.ELEMENT}</li>
<!-- END ticker_row -->
</ul>
</div>
</td>
</tr>
</table>
</div>
<!-- END switch_ticker_new -->
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
<tr>
<td {CLASS_TABLE_TYPE} align="left" class="row1">
<div id="fa_ticker_container">
<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
<div class="fa_ticker_content">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
<!-- END switch_ticker -->
<div id="page-body">
<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
<table cellpadding="0" cellspacing="0" width="100%" class="three-col">
<tbody>
<tr>
<td valign="top" width="{C1SIZE}">
<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>
</td>
<td valign="top" width="100%">
<!-- BEGIN html_validation -->
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
<!-- END html_validation -->
Dites moi si cela marche, s'il y a des problèmes ? ou si je me suis plantée ^^
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Changer fond de la bannière (uniquement) et bien la caler
Comme il semble que je n'ai pas l'image de fond que j'aurais dû placer, je vais en mettre une autre en guise de test. Je met permet simplement de modifier votre code pour que le fond soit répétable (car c'est une texture).
Après test, c'est presque bon... je remet le fond du forum en très sombre pour illustrer ce que je vais vous demander là. Serait-il possible de faire démarrer la texture tout en haut de la page et pas avec un léger décalage comme l'avait mon logo au tout début ?
Et que dois-je toucher pour redescendre ma barre de navigation, du coup, pour que cela fasse office de séparation entre les deux fond ? (Ou bien remonter un iota le fond du "header" qu'importe .)
Merci d'avance pour toute l'aide que vous m'apportez.
Edit : Le problème est résolu, il suffit de mettre une image transparente pour le "header" et de ne mettre qu'une image de fond du forum qui prend alors tout l'espace. Du coup, il ne reste que la barre de navigation à déplacer. Je vais voir si je peux modifier ça avec un bout de code que vous m'avez donné tout à l'heure. Mais si vous voulez bien me dire comment le faire, je suis preneur
Et que dois-je toucher pour redescendre ma barre de navigation, du coup, pour que cela fasse office de séparation entre les deux fond ? (Ou bien remonter un iota le fond du "header" qu'importe .)
Merci d'avance pour toute l'aide que vous m'apportez.
Edit : Le problème est résolu, il suffit de mettre une image transparente pour le "header" et de ne mettre qu'une image de fond du forum qui prend alors tout l'espace. Du coup, il ne reste que la barre de navigation à déplacer. Je vais voir si je peux modifier ça avec un bout de code que vous m'avez donné tout à l'heure. Mais si vous voulez bien me dire comment le faire, je suis preneur
Dernière édition par nxsnexus le Mar 3 Mai 2011 - 22:31, édité 1 fois
Re: Changer fond de la bannière (uniquement) et bien la caler
Essyez ainsi :
.fondplus {
background-image: url("url de votre image de fond au niveau du logo");
background-repeat: no-repeat;
position: relative;
top: -20px;
}
.fondplus {
background-image: url("url de votre image de fond au niveau du logo");
background-repeat: no-repeat;
position: relative;
top: -20px;
}
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Changer fond de la bannière (uniquement) et bien la caler
En mettant une image transparente à .fondplus, on obtient ce qu'on voulait au début.
Maintenant, il ne me reste plus qu'à descendre un peu la barre de navigation de telle sorte qu'elle soit à la jonction entre les deux fonds, et le tout sera résolu
Avez-vous une idée ?
J'ai essayé en modifiant ça, mais ça n'a rien changé.
Maintenant, il ne me reste plus qu'à descendre un peu la barre de navigation de telle sorte qu'elle soit à la jonction entre les deux fonds, et le tout sera résolu
Avez-vous une idée ?
J'ai essayé en modifiant ça, mais ça n'a rien changé.
- Code:
/* remonter de 40 pixels ce qu'il y a en dessous du titre */
.maintitle h1 { margin-bottom:-40px; display: block; }
Re: Changer fond de la bannière (uniquement) et bien la caler
.mainmenu {
position: relative;
bottom: -15px;}
modifier le 15 pour obtenir le bon endroit
position: relative;
bottom: -15px;}
modifier le 15 pour obtenir le bon endroit
SoraNoHime- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Changer fond de la bannière (uniquement) et bien la caler
Merci beaucoup d'avoir passé tant de temps à m'aider et d'avoir supporter mon exigence.
Sujet résolu !
Sujet résolu !
Sujets similaires
» Changer la couleur de fond pour la lecture des MP (uniquement)
» Comment bien centrer la bannière du forum ?
» Changer la couleur du fond de la bannière
» Bien positionner sa bannière
» Bien centrer la bannière
» Comment bien centrer la bannière du forum ?
» Changer la couleur du fond de la bannière
» Bien positionner sa bannière
» Bien centrer la bannière
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum