Easy-Design.Net forum




Aides sur les thèmes PHPBoost [Réglé] Comment élargir mon site ? Theme arond the world

Visiteur

EDN Helpers

Rang

Avatar

Message : 0

Le 03/06/2013 à 18h26
Eh bien regardes-moi ça si ça n'est pas beaux :cool Juste un petit truc, je ne sais si ça le fait chez toi, mais ici dans la description de cet article par exemple, on ne voit pas la totalité de la descirption du texte. Y aurait-il moyen délargir un peu la colonne centrale ?

Cordialement.
   
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 03/06/2013 à 20h19
On va faire plus simple : ouvre le "design.css" de ton thème à la ligne 24 :

Code CSS :
div#global {
    margin: auto;
    width: 914px; /* remplace par 1000px */
}


Pose moi ton header.tpl dans la foulée, pour que je te centre le slider par la suite :)

swan_signature

Site web    
Visiteur

EDN Helpers

Rang

Avatar

Message : 0

Le 03/06/2013 à 21h23
Voilà, j'ai mis à 1000 px. Ce n'était pas tout à fait la même chose dans mon design.css. Par précaution, j'ai gardé la VO.

Voici mon header.tpl :

Code TPL :
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{L_XML_LANGUAGE}" >
<head>
<title>{SITE_NAME} : {TITLE}</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="{SITE_DESCRIPTION} {TITLE}" />
<meta name="keywords" content="{SITE_KEYWORD}" />
<meta http-equiv="Content-Language" content="{L_XML_LANGUAGE}" />
<!-- Default CSS -->
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/default/theme/default.css" type="text/css" media="screen, print, handheld" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/default/framework/content/syndication/syndication.css" type="text/css" media="screen, print, handheld" />
<!-- Theme CSS -->
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/design.css" type="text/css" media="screen" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/global.css" type="text/css" media="screen, print, handheld" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/generic.css" type="text/css" media="screen, print, handheld" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/content.css" type="text/css" media="screen, print, handheld" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/bbcode.css" type="text/css" media="screen, print, handheld" />
<!-- Alternative CSS -->
{ALTERNATIVE_CSS}
 
<link rel="shortcut icon" href="{PATH_TO_ROOT}/favicon.ico" type="image/x-icon" />
<link rel="alternate" href="{PATH_TO_ROOT}/syndication.php?m=news" type="application/rss+xml" title="RSS {SITE_NAME}" />
 
<script type="text/javascript">
<!--
var PATH_TO_ROOT = "{PATH_TO_ROOT}";
var TOKEN = "{TOKEN}";
-->
</script>
# IF C_BBCODE_TINYMCE_MODE # <script type="text/javascript" src="{PATH_TO_ROOT}/kernel/framework/content/tinymce/tiny_mce.js"></script> # ENDIF #
 
<script type="text/javascript" src="{PATH_TO_ROOT}/kernel/framework/js/scriptaculous/prototype.js"></script>
<script type="text/javascript" src="{PATH_TO_ROOT}/kernel/framework/js/scriptaculous/scriptaculous.js"></script>
<script type="text/javascript" src="{PATH_TO_ROOT}/kernel/framework/js/global.js"></script>
<script type="text/javascript" src="{PATH_TO_ROOT}/templates/{THEME}/js/simple-slide-show.js"></script>
</head>
<body>
 
# IF C_MAINTAIN_DELAY #
# IF C_ALERT_MAINTAIN #
<div style="position:absolute;top:5px;width:99%;">
<div style="position:relative;width:400px;margin:auto;margin-top:30px;" class="warning">
{L_MAINTAIN_DELAY}
<br /><br />
<script type="text/javascript">
document.write('<div id="release">{L_LOADING}...</div>');
</script>
<noscript>
<strong>{DELAY}</strong>
</noscript>
</div>
</div>
# ENDIF #
 
<script type="text/javascript">
<!--
var release_timeout_seconds = 0;
function release(year, month, day, hour, minute, second)
{
if (document.getElementById('release'))
{
var sp_day = 86400;
var sp_hour = 3600;
var sp_minute = 60;
 
now = new Date({MAINTAIN_NOW_FORMAT}+release_timeout_seconds++);
end = new Date(year, month, day, hour, minute, second);
release_time = (end.getTime() - now.getTime())/1000;
 
if( release_time <= 0 )
{
document.location.reload();
release_time = '0';
}
else
timeout = setTimeout('release('+year+', '+month+', '+day+', '+hour+', '+minute+', '+second+')', 1000);
 
release_days = Math.floor(release_time/sp_day);
release_time -= (release_days * sp_day);
 
release_hours = Math.floor(release_time/sp_hour);
release_time -= (release_hours * sp_hour);
 
release_minutes = Math.floor(release_time/sp_minute);
release_time -= (release_minutes * sp_minute);
 
release_seconds = Math.floor(release_time);
release_seconds = (release_seconds < 10) ? '0' + release_seconds : release_seconds;
 
document.getElementById('release').innerHTML = '<strong>' + release_days + '</strong> {L_DAYS} <strong>' + release_hours + '</strong> {L_HOURS} <strong>' + release_minutes + '</strong> {L_MIN} <strong>' + release_seconds + '</strong> {L_SEC}';
}
}
if ({UNSPECIFIED})
release({MAINTAIN_RELEASE_FORMAT});
else
{
if (document.getElementById('release'))
document.getElementById('release').innerHTML = '<strong>{DELAY}</strong>';
}
-->
</script>
# ENDIF #
 
<div id="global">
<div id="header_container">
<div id="header">
<h1 style="display:none;font-size:9px;">{SITE_NAME}</h1>
# IF C_MENUS_HEADER_CONTENT #
{MENUS_HEADER_CONTENT}
# ENDIF #
</div>
<div id="sub_header">
# IF C_MENUS_SUB_HEADER_CONTENT #
{MENUS_SUB_HEADER_CONTENT}
# ENDIF #
</div>
<div id="slide-show">
<ul id="slide-images">
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/1.png" alt="1" title="1" /></li>
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/2.png" alt="2" title="2" /></li>
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/3.png" alt="3" title="3" /></li>
</ul>
</div>
<div class="spacer"></div>
</div>
 
# IF C_COMPTEUR #
<div id="compteur">
<span class="text_strong">{L_VISIT}:</span> {COMPTEUR_TOTAL}
<br />
<span class="text_strong">{L_TODAY}:</span> {COMPTEUR_DAY}
</div>
# ENDIF #
 
# IF C_MENUS_LEFT_CONTENT #
<div id="left_menu">
{MENUS_LEFT_CONTENT}
</div>
# ENDIF #
 
# IF C_MENUS_RIGHT_CONTENT #
<div id="right_menu">
{MENUS_RIGHT_CONTENT}
</div>
# ENDIF #
 
<div id="main">
# IF C_MENUS_TOPCENTRAL_CONTENT #
<div id="top_contents">
{MENUS_TOPCENTRAL_CONTENT}
</div>
# ENDIF #
<div id="main_content">&nbsp;
<div id="links">
&nbsp;&nbsp;<a class="small_link" href="{START_PAGE}" title="{L_INDEX}">{L_INDEX}</a>
# START link_bread_crumb #
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/breadcrumb.png" alt="" class="valign_middle" /> <a class="small_link" href="{link_bread_crumb.URL}" title="{link_bread_crumb.TITLE}">{link_bread_crumb.TITLE}</a>
# END link_bread_crumb #
</div>
 
   
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 04/06/2013 à 09h22
Bonjour,

De retour bien reposée ^^

Replace ton header.tpl par :

*J'ai juste ajourté une balise center à la ligne 119 et fermé celle-ci à la ligne 125.

Code TPL :
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{L_XML_LANGUAGE}" >
<head>
<title>{SITE_NAME} : {TITLE}</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="{SITE_DESCRIPTION} {TITLE}" />
<meta name="keywords" content="{SITE_KEYWORD}" />
<meta http-equiv="Content-Language" content="{L_XML_LANGUAGE}" />
<!-- Default CSS -->
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/default/theme/default.css" type="text/css" media="screen, print, handheld" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/default/framework/content/syndication/syndication.css" type="text/css" media="screen, print, handheld" />
<!-- Theme CSS -->
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/design.css" type="text/css" media="screen" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/global.css" type="text/css" media="screen, print, handheld" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/generic.css" type="text/css" media="screen, print, handheld" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/content.css" type="text/css" media="screen, print, handheld" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/bbcode.css" type="text/css" media="screen, print, handheld" />
<!-- Alternative CSS -->
{ALTERNATIVE_CSS}
 
<link rel="shortcut icon" href="{PATH_TO_ROOT}/favicon.ico" type="image/x-icon" />
<link rel="alternate" href="{PATH_TO_ROOT}/syndication.php?m=news" type="application/rss+xml" title="RSS {SITE_NAME}" />
 
<script type="text/javascript">
<!--
var PATH_TO_ROOT = "{PATH_TO_ROOT}";
var TOKEN = "{TOKEN}";
-->
</script>
# IF C_BBCODE_TINYMCE_MODE # <script type="text/javascript" src="{PATH_TO_ROOT}/kernel/framework/content/tinymce/tiny_mce.js"></script> # ENDIF #
 
<script type="text/javascript" src="{PATH_TO_ROOT}/kernel/framework/js/scriptaculous/prototype.js"></script>
<script type="text/javascript" src="{PATH_TO_ROOT}/kernel/framework/js/scriptaculous/scriptaculous.js"></script>
<script type="text/javascript" src="{PATH_TO_ROOT}/kernel/framework/js/global.js"></script>
retour à la ligne 34 dans ton design.css :
 
[b][u]Modifie comme suit :[/u][/b]
 
[code=css]div#header_container, div#header_admin_container {
    background: url("images/header.png") no-repeat scroll 41px 20px transparent;
    margin-bottom: 8px;
}[/code]
 
Tu auras avec cela le centrage du headerr par rapport à la largeur de ton site.
 
 
<script type="text/javascript" src="{PATH_TO_ROOT}/templates/{THEME}/js/simple-slide-show.js"></script>
</head>
<body>
 
# IF C_MAINTAIN_DELAY #
# IF C_ALERT_MAINTAIN #
<div style="position:absolute;top:5px;width:99%;">
<div style="position:relative;width:400px;margin:auto;margin-top:30px;" class="warning">
{L_MAINTAIN_DELAY}
<br /><br />
<script type="text/javascript">
document.write('<div id="release">{L_LOADING}...</div>');
</script>
<noscript>
<strong>{DELAY}</strong>
</noscript>
</div>
</div>
# ENDIF #
 
<script type="text/javascript">
<!--
var release_timeout_seconds = 0;
function release(year, month, day, hour, minute, second)
{
if (document.getElementById('release'))
{
var sp_day = 86400;
var sp_hour = 3600;
var sp_minute = 60;
 
now = new Date({MAINTAIN_NOW_FORMAT}+release_timeout_seconds++);
end = new Date(year, month, day, hour, minute, second);
release_time = (end.getTime() - now.getTime())/1000;
 
if( release_time <= 0 )
{
document.location.reload();
release_time = '0';
}
else
timeout = setTimeout('release('+year+', '+month+', '+day+', '+hour+', '+minute+', '+second+')', 1000);
 
release_days = Math.floor(release_time/sp_day);
release_time -= (release_days * sp_day);
 
release_hours = Math.floor(release_time/sp_hour);
release_time -= (release_hours * sp_hour);
 
release_minutes = Math.floor(release_time/sp_minute);
release_time -= (release_minutes * sp_minute);
 
release_seconds = Math.floor(release_time);
release_seconds = (release_seconds < 10) ? '0' + release_seconds : release_seconds;
 
document.getElementById('release').innerHTML = '<strong>' + release_days + '</strong> {L_DAYS} <strong>' + release_hours + '</strong> {L_HOURS} <strong>' + release_minutes + '</strong> {L_MIN} <strong>' + release_seconds + '</strong> {L_SEC}';
}
}
if ({UNSPECIFIED})
release({MAINTAIN_RELEASE_FORMAT});
else
{
if (document.getElementById('release'))
document.getElementById('release').innerHTML = '<strong>{DELAY}</strong>';
}
-->
</script>
# ENDIF #
 
<div id="global">
<div id="header_container">
<div id="header">
<h1 style="display:none;font-size:9px;">{SITE_NAME}</h1>
# IF C_MENUS_HEADER_CONTENT #
{MENUS_HEADER_CONTENT}
# ENDIF #
</div>
<div id="sub_header">
# IF C_MENUS_SUB_HEADER_CONTENT #
{MENUS_SUB_HEADER_CONTENT}
# ENDIF #
</div>
<div id="slide-show">
<center>
<ul id="slide-images">
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/1.png" alt="1" title="1" /></li>
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/2.png" alt="2" title="2" /></li>
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/3.png" alt="3" title="3" /></li>
</ul>
</center>
</div>
<div class="spacer"></div>
</div>
 
# IF C_COMPTEUR #
<div id="compteur">
<span class="text_strong">{L_VISIT}:</span> {COMPTEUR_TOTAL}
<br />
<span class="text_strong">{L_TODAY}:</span> {COMPTEUR_DAY}
</div>
# ENDIF #
 
# IF C_MENUS_LEFT_CONTENT #
<div id="left_menu">
{MENUS_LEFT_CONTENT}
</div>
# ENDIF #
 
# IF C_MENUS_RIGHT_CONTENT #
<div id="right_menu">
{MENUS_RIGHT_CONTENT}
</div>
# ENDIF #
 
<div id="main">
# IF C_MENUS_TOPCENTRAL_CONTENT #
<div id="top_contents">
{MENUS_TOPCENTRAL_CONTENT}
</div>
# ENDIF #
<div id="main_content">&nbsp;
<div id="links">
&nbsp;&nbsp;<a class="small_link" href="{START_PAGE}" title="{L_INDEX}">{L_INDEX}</a>
# START link_bread_crumb #
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/breadcrumb.png" alt="" class="valign_middle" /> <a class="small_link" href="{link_bread_crumb.URL}" title="{link_bread_crumb.TITLE}">{link_bread_crumb.TITLE}</a>
# END link_bread_crumb #
</div>
 

swan_signature

Site web    
Visiteur

EDN Helpers

Rang

Avatar

Message : 0

Le 04/06/2013 à 16h22
OK. Juste : dans le dernier message, à quoi est destiné la toute dernière partie de code. C'est le desing.css modifié ?

CDT.
   
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 04/06/2013 à 17h33
Bonsoir Sch,

On récapitule... Car on va se perdre ^^

1/ Pour élargir le site



Ouvre le "design.css" de ton thème à la ligne 24 :

Code CSS :
div#global {
    margin: auto;
    width: 914px; /* remplace par 1000px */
}


2/ On centre la bannière



Toujours dans le "design.css" de ton thème à la ligne 34 :

* Rajoute le 40px dans le background ...

Code CSS :
div#header_container, div#header_admin_container {
    background: url("images/header.png") no-repeat scroll 40px 20px transparent;
    margin-bottom: 8px;
}


3/ On centre le slider



Remplace ton header.tpl dans ton thème par :

*J'ai juste ajourté une balise center à la ligne 119 et fermé celle-ci à la ligne 125.

Code TPL :
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{L_XML_LANGUAGE}" >
<head>
<title>{SITE_NAME} : {TITLE}</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="{SITE_DESCRIPTION} {TITLE}" />
<meta name="keywords" content="{SITE_KEYWORD}" />
<meta http-equiv="Content-Language" content="{L_XML_LANGUAGE}" />
<!-- Default CSS -->
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/default/theme/default.css" type="text/css" media="screen, print, handheld" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/default/framework/content/syndication/syndication.css" type="text/css" media="screen, print, handheld" />
<!-- Theme CSS -->
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/design.css" type="text/css" media="screen" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/global.css" type="text/css" media="screen, print, handheld" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/generic.css" type="text/css" media="screen, print, handheld" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/content.css" type="text/css" media="screen, print, handheld" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/bbcode.css" type="text/css" media="screen, print, handheld" />
<!-- Alternative CSS -->
{ALTERNATIVE_CSS}
 
<link rel="shortcut icon" href="{PATH_TO_ROOT}/favicon.ico" type="image/x-icon" />
<link rel="alternate" href="{PATH_TO_ROOT}/syndication.php?m=news" type="application/rss+xml" title="RSS {SITE_NAME}" />
 
<script type="text/javascript">
<!--
var PATH_TO_ROOT = "{PATH_TO_ROOT}";
var TOKEN = "{TOKEN}";
-->
</script>
# IF C_BBCODE_TINYMCE_MODE # <script type="text/javascript" src="{PATH_TO_ROOT}/kernel/framework/content/tinymce/tiny_mce.js"></script> # ENDIF #
 
<script type="text/javascript" src="{PATH_TO_ROOT}/kernel/framework/js/scriptaculous/prototype.js"></script>
<script type="text/javascript" src="{PATH_TO_ROOT}/kernel/framework/js/scriptaculous/scriptaculous.js"></script>
<script type="text/javascript" src="{PATH_TO_ROOT}/kernel/framework/js/global.js"></script>
<script type="text/javascript" src="{PATH_TO_ROOT}/templates/{THEME}/js/simple-slide-show.js"></script>
</head>
<body>
 
# IF C_MAINTAIN_DELAY #
# IF C_ALERT_MAINTAIN #
<div style="position:absolute;top:5px;width:99%;">
<div style="position:relative;width:400px;margin:auto;margin-top:30px;" class="warning">
{L_MAINTAIN_DELAY}
<br /><br />
<script type="text/javascript">
document.write('<div id="release">{L_LOADING}...</div>');
</script>
<noscript>
<strong>{DELAY}</strong>
</noscript>
</div>
</div>
# ENDIF #
 
<script type="text/javascript">
<!--
var release_timeout_seconds = 0;
function release(year, month, day, hour, minute, second)
{
if (document.getElementById('release'))
{
var sp_day = 86400;
var sp_hour = 3600;
var sp_minute = 60;
 
now = new Date({MAINTAIN_NOW_FORMAT}+release_timeout_seconds++);
end = new Date(year, month, day, hour, minute, second);
release_time = (end.getTime() - now.getTime())/1000;
 
if( release_time <= 0 )
{
document.location.reload();
release_time = '0';
}
else
timeout = setTimeout('release('+year+', '+month+', '+day+', '+hour+', '+minute+', '+second+')', 1000);
 
release_days = Math.floor(release_time/sp_day);
release_time -= (release_days * sp_day);
 
release_hours = Math.floor(release_time/sp_hour);
release_time -= (release_hours * sp_hour);
 
release_minutes = Math.floor(release_time/sp_minute);
release_time -= (release_minutes * sp_minute);
 
release_seconds = Math.floor(release_time);
release_seconds = (release_seconds < 10) ? '0' + release_seconds : release_seconds;
 
document.getElementById('release').innerHTML = '<strong>' + release_days + '</strong> {L_DAYS} <strong>' + release_hours + '</strong> {L_HOURS} <strong>' + release_minutes + '</strong> {L_MIN} <strong>' + release_seconds + '</strong> {L_SEC}';
}
}
if ({UNSPECIFIED})
release({MAINTAIN_RELEASE_FORMAT});
else
{
if (document.getElementById('release'))
document.getElementById('release').innerHTML = '<strong>{DELAY}</strong>';
}
-->
</script>
# ENDIF #
 
<div id="global">
<div id="header_container">
<div id="header">
<h1 style="display:none;font-size:9px;">{SITE_NAME}</h1>
# IF C_MENUS_HEADER_CONTENT #
{MENUS_HEADER_CONTENT}
# ENDIF #
</div>
<div id="sub_header">
# IF C_MENUS_SUB_HEADER_CONTENT #
{MENUS_SUB_HEADER_CONTENT}
# ENDIF #
</div>
<div id="slide-show">
<center>
<ul id="slide-images">
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/1.png" alt="1" title="1" /></li>
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/2.png" alt="2" title="2" /></li>
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/3.png" alt="3" title="3" /></li>
</ul>
</center>
</div>
<div class="spacer"></div>
</div>
 
# IF C_COMPTEUR #
<div id="compteur">
<span class="text_strong">{L_VISIT}:</span> {COMPTEUR_TOTAL}
<br />
<span class="text_strong">{L_TODAY}:</span> {COMPTEUR_DAY}
</div>
# ENDIF #
 
# IF C_MENUS_LEFT_CONTENT #
<div id="left_menu">
{MENUS_LEFT_CONTENT}
</div>
# ENDIF #
 
# IF C_MENUS_RIGHT_CONTENT #
<div id="right_menu">
{MENUS_RIGHT_CONTENT}
</div>
# ENDIF #
 
<div id="main">
# IF C_MENUS_TOPCENTRAL_CONTENT #
<div id="top_contents">
{MENUS_TOPCENTRAL_CONTENT}
</div>
# ENDIF #
<div id="main_content">&nbsp;
<div id="links">
&nbsp;&nbsp;<a class="small_link" href="{START_PAGE}" title="{L_INDEX}">{L_INDEX}</a>
# START link_bread_crumb #
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/breadcrumb.png" alt="" class="valign_middle" /> <a class="small_link" href="{link_bread_crumb.URL}" title="{link_bread_crumb.TITLE}">{link_bread_crumb.TITLE}</a>
# END link_bread_crumb #
</div>
 


Une fois rafraichi tes caches cela devrait être bon :)

swan_signature

Site web    
Visiteur

EDN Helpers

Rang

Avatar

Message : 0

Le 04/06/2013 à 22h54
Bonsoir Swan,

C'est pas possible, je n'arrive pas à retrouver ce satané header.tpl. Peux-tu me rappeler où il se trouve ? J'ai beau fouiller dans le dossier Ldownload/ : pas moyen :(

Cordialement.
   
janus57 Membre non connecté

EDN Erudit(e)

Rang

Avatar

Inscrit le : 14/01/2013 à 21h59

Messages: 1018

Le 04/06/2013 à 23h51
Bonsoir,

le header.tpl et footer.tpl doivent se trouver dans le dossier de ton thème.

Cordialement, janus57
   
Visiteur

EDN Helpers

Rang

Avatar

Message : 0

Le 05/06/2013 à 09h10
Ah ok. Je pensais pourtant l'avoir trouvé la dernière fois le dossier download. D'autant que c'est la présentation du module download que l'on veut modifier. Donc, avant de faire une erreur, est-ce bien du header.tpl de mon thème dont parle swan ?

Cordialement.
   
janus57 Membre non connecté

EDN Erudit(e)

Rang

Avatar

Inscrit le : 14/01/2013 à 21h59

Messages: 1018

Le 05/06/2013 à 09h25
Bonjour,

je rappel le titre du post : "Comment élargir mon site ?"

Donc oui pour faire une modif global faut toucher au fichiers qui gère l'affichage global.

Cordialement, janus57
   
Visiteur

EDN Helpers

Rang

Avatar

Message : 0

Le 05/06/2013 à 10h59
Bonjour,

Voilà c'est fait. Est-ce ce auquel tu voulais arriver swan ?

Par contre, je n'ai pas fait la toute dernière manip que du décris dans le header.tpl, quand tu renvoies à la ligne 34 du design.css. Comme elle se trouvait en plein milieu du code tpl, je me suis demandé s'il fallait la faire. D'autre part, elle me semble la même que celle décrite plus avant, la 2E étape du même message, sauf que là tu mets à 41 px ou lieu de 40 plus avant.

Est-ce en trop cette dernière manipe donc ?

Cordialement.

Edité par Visiteur Le 05/06/2013 à 11h30
   
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 05/06/2013 à 12h15
Bonjour,

Citation:
Voilà c'est fait. Est-ce ce auquel tu voulais arriver Swan ?


Alors oui ^^ C'est bien dans ton thème que les modification sont à faire "../templates/around_the_world/".

1/ Le header



Par contre j'ai glisser une erreur dans ton "header tpl", tu peux le changer encore une fois (désolée).

Code TPL :
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{L_XML_LANGUAGE}" >
<head>
<title>{SITE_NAME} : {TITLE}</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="{SITE_DESCRIPTION} {TITLE}" />
<meta name="keywords" content="{SITE_KEYWORD}" />
<meta http-equiv="Content-Language" content="{L_XML_LANGUAGE}" />
<!-- Default CSS -->
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/default/theme/default.css" type="text/css" media="screen, print, handheld" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/default/framework/content/syndication/syndication.css" type="text/css" media="screen, print, handheld" />
<!-- Theme CSS -->
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/design.css" type="text/css" media="screen" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/global.css" type="text/css" media="screen, print, handheld" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/generic.css" type="text/css" media="screen, print, handheld" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/content.css" type="text/css" media="screen, print, handheld" />
<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/bbcode.css" type="text/css" media="screen, print, handheld" />
<!-- Alternative CSS -->
{ALTERNATIVE_CSS}
 
<link rel="shortcut icon" href="{PATH_TO_ROOT}/favicon.ico" type="image/x-icon" />
<link rel="alternate" href="{PATH_TO_ROOT}/syndication.php?m=news" type="application/rss+xml" title="RSS {SITE_NAME}" />
 
<script type="text/javascript">
<!--
var PATH_TO_ROOT = "{PATH_TO_ROOT}";
var TOKEN = "{TOKEN}";
-->
</script>
# IF C_BBCODE_TINYMCE_MODE # <script type="text/javascript" src="{PATH_TO_ROOT}/kernel/framework/content/tinymce/tiny_mce.js"></script> # ENDIF #
 
<script type="text/javascript" src="{PATH_TO_ROOT}/kernel/framework/js/scriptaculous/prototype.js"></script>
<script type="text/javascript" src="{PATH_TO_ROOT}/kernel/framework/js/scriptaculous/scriptaculous.js"></script>
<script type="text/javascript" src="{PATH_TO_ROOT}/kernel/framework/js/global.js"></script>
<script type="text/javascript" src="{PATH_TO_ROOT}/templates/{THEME}/js/simple-slide-show.js"></script>
</head>
<body>
 
# IF C_MAINTAIN_DELAY #
# IF C_ALERT_MAINTAIN #
<div style="position:absolute;top:5px;width:99%;">
<div style="position:relative;width:400px;margin:auto;margin-top:30px;" class="warning">
{L_MAINTAIN_DELAY}
<br /><br />
<script type="text/javascript">
document.write('<div id="release">{L_LOADING}...</div>');
</script>
<noscript>
<strong>{DELAY}</strong>
</noscript>
</div>
</div>
# ENDIF #
 
<script type="text/javascript">
<!--
var release_timeout_seconds = 0;
function release(year, month, day, hour, minute, second)
{
if (document.getElementById('release'))
{
var sp_day = 86400;
var sp_hour = 3600;
var sp_minute = 60;
 
now = new Date({MAINTAIN_NOW_FORMAT}+release_timeout_seconds++);
end = new Date(year, month, day, hour, minute, second);
release_time = (end.getTime() - now.getTime())/1000;
 
if( release_time <= 0 )
{
document.location.reload();
release_time = '0';
}
else
timeout = setTimeout('release('+year+', '+month+', '+day+', '+hour+', '+minute+', '+second+')', 1000);
 
release_days = Math.floor(release_time/sp_day);
release_time -= (release_days * sp_day);
 
release_hours = Math.floor(release_time/sp_hour);
release_time -= (release_hours * sp_hour);
 
release_minutes = Math.floor(release_time/sp_minute);
release_time -= (release_minutes * sp_minute);
 
release_seconds = Math.floor(release_time);
release_seconds = (release_seconds < 10) ? '0' + release_seconds : release_seconds;
 
document.getElementById('release').innerHTML = '<strong>' + release_days + '</strong> {L_DAYS} <strong>' + release_hours + '</strong> {L_HOURS} <strong>' + release_minutes + '</strong> {L_MIN} <strong>' + release_seconds + '</strong> {L_SEC}';
}
}
if ({UNSPECIFIED})
release({MAINTAIN_RELEASE_FORMAT});
else
{
if (document.getElementById('release'))
document.getElementById('release').innerHTML = '<strong>{DELAY}</strong>';
}
-->
</script>
# ENDIF #
 
<div id="global">
<div id="header_container">
<div id="header">
<h1 style="display:none;font-size:9px;">{SITE_NAME}</h1>
# IF C_MENUS_HEADER_CONTENT #
{MENUS_HEADER_CONTENT}
# ENDIF #
</div>
<div id="sub_header">
# IF C_MENUS_SUB_HEADER_CONTENT #
{MENUS_SUB_HEADER_CONTENT}
# ENDIF #
</div>
<div id="slide-show">
<center>
<ul id="slide-images">
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/1.png" alt="1" title="1" /></li>
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/2.png" alt="2" title="2" /></li>
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/3.png" alt="3" title="3" /></li>
</ul>
</center>
</div>
<div class="spacer"></div>
</div>
 
# IF C_COMPTEUR #
<div id="compteur">
<span class="text_strong">{L_VISIT}:</span> {COMPTEUR_TOTAL}
<br />
<span class="text_strong">{L_TODAY}:</span> {COMPTEUR_DAY}
</div>
# ENDIF #
 
# IF C_MENUS_LEFT_CONTENT #
<div id="left_menu">
{MENUS_LEFT_CONTENT}
</div>
# ENDIF #
 
# IF C_MENUS_RIGHT_CONTENT #
<div id="right_menu">
{MENUS_RIGHT_CONTENT}
</div>
# ENDIF #
 
<div id="main">
# IF C_MENUS_TOPCENTRAL_CONTENT #
<div id="top_contents">
{MENUS_TOPCENTRAL_CONTENT}
</div>
# ENDIF #
<div id="main_content">&nbsp;
<div id="links">
&nbsp;&nbsp;<a class="small_link" href="{START_PAGE}" title="{L_INDEX}">{L_INDEX}</a>
# START link_bread_crumb #
<img src="{PATH_TO_ROOT}/templates/{THEME}/images/breadcrumb.png" alt="" class="valign_middle" /> <a class="small_link" href="{link_bread_crumb.URL}" title="{link_bread_crumb.TITLE}">{link_bread_crumb.TITLE}</a>
# END link_bread_crumb #
</div>
 


2/ Le slider



Pour l'image manquante du slider :

Regarde dans le dossier "../templates/around_the_world/js/images/" si le "1.png"" , n'est pas manquant , apparement si ...

la partie du code dans le "../templates/around_the_world/header tpl" qui gère le silder est celui-ci :
* à partir de la ligne 118.

Code TPL :
<div id="slide-show">
<center>
<ul id="slide-images">
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/1.png" alt="1" title="1" /></li>
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/2.png" alt="2" title="2" /></li>
<li><img src="{PATH_TO_ROOT}/templates/{THEME}/js/images/3.png" alt="3" title="3" /></li>
</ul>
</center>
</div>

swan_signature

Site web    
Visiteur

EDN Helpers

Rang

Avatar

Message : 0

Le 05/06/2013 à 14h05
VOilà, modification du header.tpl effectuée. J'ai vérifié : j'ai bien le 1.png dans le thème/js/images.

Est-ce comme cela que tu voyais les choses à présent ? Rencontres-tu toujours avec limage 1.png ?

Cordialement.
   
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 05/06/2013 à 14h47
Après une CTrl+f5 de mon coté, part cela que tu n'as pas du faire :

Citation:


2/ On centre la bannière



Toujours dans le "design.css" de ton thème à la ligne 34 :

* Rajoute le 40px dans le background ...

Code CSS :
div#header_container, div#header_admin_container {
    background: url("images/header.png") no-repeat scroll 40px 20px transparent;
    margin-bottom: 8px;
}



Le reste est parfait :)

swan_signature

Site web    
Visiteur

EDN Helpers

Rang

Avatar

Message : 0

Le 05/06/2013 à 15h04
Pourtant je l'ai fait. A moins que ce ne soit mal fait, regardes ici :

Code CSS :
 
/* --------------------------------------
design.css
Contient les conteneur, fortement dépendant du design.
--------------------------------------*/ /* Corps du site 
--------------------------------------*/
* {
    margin:auto;
    padding:0;
    font-size:100%;
}
 
body {
    background:#eaeaea url(images/global.png)  repeat-x;
    font-size:12px;
    font-family:"tahoma","Lucida Grande", "Lucida Sans Unicode", Verdana, 'Bitstream Vera Sans', Times, serif;
    color:#0E2A48;
    margin:0;
    padding:0;
}
 
/* Conteneurs 
--------------------------------------*/
/* ##### Conteneur global du site ###### */
div#global {
/* Extensible
margin:auto 5px;
margin-bottom:15px;
*/
width:1000px;
    margin:auto;
}
 
/* ##### Entéte de la page ###### */
div#header_container,div#header_admin_container {
    background: url(images/header.png) no-repeat scroll 40px 20px transparent;
    background-position:0px 20px;
margin-bottom:8px;
}
 
/* ##### Entéte de la page ###### */
div#header,div#header_admin {
    height:135px;
}
 
/* ##### SlideShow ###### */
div#slide-show {
    height:120px;
}
 
/* #####  Conteneur en dessous de l'entéte ###### */
div#sub_header,div#sub_header_admin {
    height:22px;
}
 
/* Lien du subheader */
div#header .dynamic_menu h5.links {
    background:none;
    border:none;
    color:#edfff0;
    width:134px;
    background:url(images/button.png) no-repeat;
    padding:5px 0px;
    font-size:12px;
    margin-right:1px;
}
 
div#header .dynamic_menu h5.links:hover {
    color:#edfff0;
    cursor:default;
    background:url(images/button_click.png) no-repeat;
}
 
div#header .dynamic_menu h5 a {
    color:#FFFFFF;
    text-decoration:none;
}
 
/* ##### Compteur de visites  ###### */
div#compteur {
    color:#E9ECD9;
    position:absolute;
    top:50px;
right:0;
font-size:12px;
    margin-right:15px;
text-align:right;
}
 
/* ##### Menu de gauche ###### */
div#left_menu {
    float:left;
    width:200px;
    margin:0;
    margin-top:10px;
    margin-right:2px !important;
    margin-right:-1px;
    padding:0;
}
 
/* ##### Menu droit ###### */
div#right_menu {
    float:right;
    width:190px;
    margin:0;
    margin-top:10px;
    margin-left:10px !important;
    margin-left:7px;
}
 
/* #####  Contenu de la page ###### */
div#main {
    width:auto;
    min-width:450px;
    overflow:hidden !important;
    height:auto !important;
    overflow:visible;
    height:1%;
    padding:0;
    margin:0;
    float:none;
}
 
/* ##### Contenu central ###### */
div#main_content {
    width:auto;
    margin-top:10px;
    padding:20px 10px;
    padding-top:5px;
    border-spacing:1px;
    background:#F7F8F5 url(images/contentbg.png) repeat-x;
    -moz-border-radius:25px;
    -khtml-border-radius:25px;
    -webkit-border-radius:25px;
    border-radius:25px;
}
 
/* ##### Barre de lien rapide ###### */
div#links { /*width:96%;*/
    text-indent:5px;
    margin-bottom:20px;
}
 
/* Menu Horizontal */
div.menu_horizontal {
    padding-top: 106px;
padding-left:30px;
}
 
div.menu_horizontal li{
height:40px;
}
 
ul.menu_horizontal li img{
margin-right:10px;
}
 
ul.menu_horizontal a{
padding-top:24px;
padding-bottom:21px;
padding-left:10px;
padding-right:10px;
color:#FFF;
font-size:14px;
}
 
ul.menu_horizontal li a:hover{
color:#FFF;
font-size:14px;
text-decoration:none;
background: url(images/link_bg.png) no-repeat;
}
 
ul.menu_horizontal li {
    display: inline;
margin-left:10px;
}
 
 
/* ##### Emplacement au dessus de contenu de la page ###### */
div#top_contents {
margin-top:8px;
    margin-bottom:8px;
}
 
/* ##### Emplacement en dessous de contenu de la page ###### */
div#bottom_contents {
margin-top:8px;
    margin-bottom:8px;
}
 
/* ##### Bloc au dessus du pied de page ###### */
div#top_footer {
    clear:both;
    padding:0.75em;
}
 
/* ##### Pied de page ###### */
div#footer {
height:30px;
clear:both;
    margin:auto;
    margin-top:0px;
    padding:0px;
    padding-top:36px;
    padding-right:20px;
    text-align:right;
background:#F5F4ED url(images/footer.png) repeat-x;
}
div#footer span {
    color:#FFF;
    font-size:12px;
}
div#footer span a {
    color:#FFF;
    font-size:12px;
}
 
/* ##### Liens rapides ###### */
div#links_vertical {
    display:block !important;
    display:none;
    position:fixed;
    background:url(images/vertical_menu_repeat.png) repeat-y;
    top:45%;
    margin-left:989px;
    width:27px;
    text-align:center;
    padding-left:2px;
}
 
div#links_vertical_top {
    width:29px;
    background:url(images/vertical_menu_top.png) no-repeat;
    text-align:center;
    margin-left:-2px;
    padding-top:8px;
}
 
div#links_vertical_central {
    width:27px;
    text-align:center;
    margin-left:-2px;
    padding:4px 0px;
}
 
div#links_vertical_bottom {
    width:29px;
    background:url(images/vertical_menu_bottom.png) no-repeat;
    text-align:center;
    height:32px;
    margin-left:-2px;
}
 
.bglinks {
    background:url(images/bgmenu_links.jpg) no-repeat bottom right;
    margin:0px;
    padding:0px;
    list-style-type:none;
    padding-bottom:7px;
    margin-bottom:5px;
}
 
 
#slide-images{
display:block;
height:127px;
margin:26px 0 0;
overflow:hidden;
/*padding-top:30px;*/
position:relative;
width:914px;
}
 
#slide-images li{
position:absolute;
display:block;
list-style-type:none;
margin:0px;
padding:0px;
}
 
#slide-images li img{
display:block;
}
 
   
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie