Ajouter image sur le coté
2 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
Ajouter image sur le coté
Bonjour,
Je suis l'admin du forum http://lrdp.forumgratuit.org/. La version du forum est en phpBB2.
Je voudrais rajouter cette image sur le coté gauche du forum .
J'ai regardé plusieurs tuto et post mais après différents tests je n'y arrive toujours pas.
Des plus un ancien membre de notre légion qui était web master m'a aidé a améliorer le forum mais a aussi modifier des templates et CSS donc cela m'a pas mal perdu.
CSS
template général overall_header
Merci d'avance pour votre aide
Je suis l'admin du forum http://lrdp.forumgratuit.org/. La version du forum est en phpBB2.
Je voudrais rajouter cette image sur le coté gauche du forum .
J'ai regardé plusieurs tuto et post mais après différents tests je n'y arrive toujours pas.
Des plus un ancien membre de notre légion qui était web master m'a aidé a améliorer le forum mais a aussi modifier des templates et CSS donc cela m'a pas mal perdu.
CSS
- Spoiler:
- #i_icon_mini_site{
background-image:url('http://www.alderia-world.com/Illy/Phoenix/nav/1.png');
width:33px;
height:15px;
margin-top:3px;
}
#i_icon_mini_site:hover {
}
#i_icon_mini_index {
background-image:url('http://www.alderia-world.com/Illy/Phoenix/nav/2.png');
width:40px;
height:15px;
}
#i_icon_mini_index:hover {
}
#i_icon_mini_search{
background-image:url('http://www.alderia-world.com/Illy/Phoenix/nav/5.png');
width:65px;
height:15px;
}
#i_icon_mini_search:hover {
}
#i_icon_mini_members{
background-image:url('http://www.alderia-world.com/Illy/Phoenix/nav/6.png');
width:49px;
height:15px;
}
#i_icon_mini_members:hover {
}
#i_icon_mini_groups{
background-image:url('http://www.alderia-world.com/Illy/Phoenix/nav/7.png');
width:47px;
height:15px;
}
#i_icon_mini_groups:hover {
}
#i_icon_mini_profile{
background-image:url('http://www.alderia-world.com/Illy/Phoenix/nav/8.png');
width:40px;
height:15px;
}
#i_icon_mini_profile:hover {
}
#i_icon_mini_message{
background-image:url('http://www.alderia-world.com/Illy/Phoenix/nav/9.png');
width:58px;
height:15px;
}
#i_icon_mini_message:hover {
}
#i_icon_mini_new_message{
background-image:url('http://www.alderia-world.com/Illy/Phoenix/nav/9_1.png');
width:98px;
height:15px;
}
#i_icon_mini_new_message:hover {
}
#i_icon_mini_logout{
background-image:url('http://www.alderia-world.com/Illy/Phoenix/nav/10.png');
width:76px;
height:15px;
}
#i_icon_mini_faq{
background-image:url('http://www.alderia-world.com/Illy/Phoenix/nav/3.png');
width:25px;
height:15px;
}
#i_icon_mini_register{
background-image:url('http://www.alderia-world.com/Illy/Phoenix/nav/11.png');
width:79px;
height:15px;
}
#i_icon_mini_login{
background-image:url('http://www.alderia-world.com/Illy/Phoenix/nav/12.png');
width:72px;
height:15px;
}
/*----------------------------------- IPPIKIGAMI - Squelette HA --------------*/
body {
background-color:#ebebeb;
margin:0px;
}
}
.ipp1 {
background:url('http://www.alderia-world.com/Illy/Phoenix/centre.png') repeat-y top center;
}
.ipp2 {
background:url('http://www.alderia-world.com/Illy/Phoenix/top_repeat.png') repeat-x top center;
}
.ipp3 {
background:url('http://www.alderia-world.com/Illy/Phoenix/head%20v2.png') no-repeat top center;
}
.ipp4 {
background:url('http://www.alderia-world.com/Illy/Phoenix/foot_repeat.png') repeat-x bottom center;
}
.ipp5 {
background:url('http://www.alderia-world.com/Illy/Phoenix/foot.png') no-repeat bottom center;
}
.ipp_t1 {
background:url('http://www.neo-verona.com/NeoVerona/VII/Index/Top.png') repeat;
width:19px;
height:82px;
}
.ipp_t2 {
position:fixed;
width:19px;
height:82px;
right:50%;
bottom:20%;
}
/*----------------------------------- NAVIGATION + NEWS --------------*/
#position_nav{
width: 1200px; margin-left: auto; margin-right: auto;}
#navigation_phoenix{
padding-top: 67px; padding-left: 112px; width: 628px;}
.last_news{
padding-left: 5px; padding-right: 5px; padding-top: 3px; text-align: justify; color: #474f82; font-family: Tw Cen MT; font-size: 12px; padding-top: 10px;}
#nav_ha{
margin-top: -167px; margin-left: -450px;}
.ajustement_news{
height: 14px;}
#mention_legal_fa
{
float: left;
padding-left: -50px;
padding-top: 100px;
font-size: 11px;
font-family: century gothic;
}
.module {-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
span.imageGauche {
margin-left: 20px;
margin-right: 50px;
top: 27px;
float:left;
}
template général overall_header
- Spoiler:
- <!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" />
{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 language="javascript" src="http://alderia.power-heberg.be/V8/JS/gradual.js"></script>
<script language="javascript" src="http://alderia.power-heberg.be/V8/JS/gradualks.js"></script>
<link rel="stylesheet" type="text/css" href="http://alderia-world.com/Illy/Forum/js/shadowbox.css"/>
<script type="text/javascript" src="http://alderia.power-heberg.be/V8/JS/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
handleOversize: "drag",
modal: true
});
</script>
<script type="text/javascript" src="shadowbox.js"></script>
<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="https://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 -->
<script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
<!-- 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 = false, logInBackgroundClass = false;
<!-- 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}">
<div class="ipp1"/>
<div class="ipp2"/>
<div class="ipp3"/>
<div id="position_nav">
<table cellpadding="0" cellspacing="0" border="0" width="100%" id="navigation_phoenix">
<tr>
<td valign="top" width="100%">
<div class="ajustement_news"></div>
</td>
</tr>
<tr>
<td valign="top" width="100%">
<div class="last_news">
Forum en cours de réalisation | Alliance avec La brigade des Loups
</div>
</td>
</tr>
</table>
</div>
<div style="margin-top: -200px;"></div>
<div class="ipp4"/>
<div class="ipp5"/>
<table class="ipp_t2" border="0" style="margin-right: 447px;"><tr><td>
<table class="ipp_t1"><tr><td>
<center><a href=""><img src="https://2img.net/i/fa/empty.gif" border="0" height="47px" width="13px"></a></center>
</td></tr></table>
</td></tr></table>
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="https://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 cellpadding="0" cellspacing="0" border="0" height="335px" width="100%"><tr><td align="center" valign="bottom">
<div id="nav_ha">{GENERATED_NAV_BAR}</div>
<table cellpadding="0" cellspacing="0" border="0" height="23px" width="898px">
<tr><td class="ippnsie1" align="center" valign="center">
<a href="#"><img src="https://2img.net/i/fa/empty.gif" id="ipp_nsie_a" border="0"/></a>
<a class="subavant" href="#"><img src="https://2img.net/i/fa/empty.gif" id="ipp_nsie_b" border="0"/></a>
<a href="#"><img src="https://2img.net/i/fa/empty.gif" id="ipp_nsie_c" border="0"/></a>
<a href="http://www.neoverona.com/la-gazette-f4/news-du-serveur-t292.htm"><img src="https://2img.net/i/fa/empty.gif" id="ipp_nsie_d" border="0"/></a>
<a href="#"><img src="https://2img.net/i/fa/empty.gif" id="ipp_nsie_e" border="0"/></a>
<a href="#"><img src="https://2img.net/i/fa/empty.gif" id="ipp_nsie_f" border="0"/></a>
<a href="http://www.neoverona.com/points-h5.htm"><img src="https://2img.net/i/fa/empty.gif" id="ipp_nsie_g" border="0"/></a>
</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>
</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 -->
Merci d'avance pour votre aide
Dernière édition par shaldeball le Sam 18 Mai 2013 - 15:39, édité 1 fois
Re: Ajouter image sur le coté
Bonjour et Bienvenue Vu que vous êtes nouveau, voici quelques sujets importants :sur le Forum des Forums Forumactif Sécurité : mail de fondation - Ce qu'il ne faut pas faire
|
Vous pouvez ajouter ce code à la ligne 191 de votre template overall_header :
- Code:
<div class="leftimg"><img src="http://nsm08.casimages.com/img/2013/05/16//mini_13051606511414133411195369.gif" alt="" /></div>
et dans votre CSS, rajoutez ceci :
- Code:
.leftimg {
bottom: 5px;
position: absolute;
}
PS : Vous avez signalé que votre forum était en phpBB3 dans votre profil. Pour information, il s'agit d'un phpBB2
Cordialement.
Dernière édition par Tech le Sam 18 Mai 2013 - 14:57, édité 1 fois
Re: Ajouter image sur le coté
Dans le premier code, remplacez ceci : https://nsm08.casimages.com/img/2013/05/16//mini_13051606511414133411195369.gif
par ceci : https://nsm08.casimages.com/img/2013/05/14//13051407122114133411188507.png
et dans le deuxième code, remplacez ceci : bottom: 5px;
par ceci : bottom: 0px;
Pouvez-vous laisser le code actif sur votre forum pour que je vois le résultat ?
Cordialement.
par ceci : https://nsm08.casimages.com/img/2013/05/14//13051407122114133411188507.png
et dans le deuxième code, remplacez ceci : bottom: 5px;
par ceci : bottom: 0px;
Pouvez-vous laisser le code actif sur votre forum pour que je vois le résultat ?
Cordialement.
Re: Ajouter image sur le coté
merci.
C'est fais et ça a tout décalée
j'ai laissé le code actif
amicalement
C'est fais et ça a tout décalée
j'ai laissé le code actif
amicalement
Re: Ajouter image sur le coté
Remplacez le code CSS par :
Cordialement.
- Code:
.leftimg {
top: 600px;
position: absolute;
}
Cordialement.
Re: Ajouter image sur le coté
Ça marche nickel merci pour tout.
Juste une dernière question je recherche un autre image pour mettre sur la droite.
Quel code devrais-je mettre et surtout au niveau du template je devrais le mettre juste après ligne 192?
Merci pour tout
Amicalement
Juste une dernière question je recherche un autre image pour mettre sur la droite.
Quel code devrais-je mettre et surtout au niveau du template je devrais le mettre juste après ligne 192?
Merci pour tout
Amicalement
Re: Ajouter image sur le coté
Oui vous pouvez, il faudra aussi changer la class="leftimg" par exemple par class="rightimg" et dans le CSS ceci :
Cordialement.
- Code:
.rightimg {
top: 600px;
left: Xpx;
position: absolute;
}
Cordialement.
Re: Ajouter image sur le coté
Merci pour tout
amicalement
amicalement
Sujets similaires
» Ajouter une image sur le côté.
» Code html image côte a côte
» Ajouter un cliché coté droit du QEEL
» Ajouter une icône à côté du titre forum
» Ajouter 2 images (left et right) à coté du logo
» Code html image côte a côte
» Ajouter un cliché coté droit du QEEL
» Ajouter une icône à côté du titre forum
» Ajouter 2 images (left et right) à coté du logo
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