Page 1 sur 1
[phpBB 3.0.x] Créer un header/footer extensible
Posté : lun. 24 oct. 2011 05:11
par Dakin Quelia
» Créer un header/footer extensible
A l'aide de cette documentation, vous pourrez étendre votre header.
Avant toute modification, il est important de faire une sauvegarde de ses fichiers.
Créer un header extensible
Posté : lun. 24 oct. 2011 15:08
par Dakin Quelia
» Créer un header extensible
Ces modifications vous permettent d'étendre le header.
Ouvrez le fichier
styles/{VOTRE_STYLE}/theme/common.css.
Cherchez:
Code : Tout sélectionner
.headerbar {
background: #ebebeb none repeat-x 0 0;
color: #FFFFFF;
margin-bottom: 4px;
padding: 0 5px;
}
Remplacez par:
Code : Tout sélectionner
.headerbar {
background: #ebebeb none repeat-x 0 0;
color: #FFFFFF;
margin: -12px 0 12px 0;
padding: 0 5px;
}
Ouvrez le fichier
styles/{VOTRE_STYLE}/template/overall_header.html.
Cherchez et supprimez:
Code : Tout sélectionner
<div class="headerbar">
<div class="inner"><span class="corners-top"><span></span></span>
<div id="site-description">
<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
<h1>{SITENAME}</h1>
<p>{SITE_DESCRIPTION}</p>
<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
</div>
<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
<div id="search-box">
<form action="{U_SEARCH}" method="get" id="search">
<fieldset>
<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
<input class="button2" value="{L_SEARCH}" type="submit" /><br />
<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
</fieldset>
</form>
</div>
<!-- ENDIF -->
<span class="corners-bottom"><span></span></span></div>
</div>
Cherchez:
Avant, ajoutez:
Code : Tout sélectionner
<div class="headerbar">
<div id="site-description">
<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
<h1>{SITENAME}</h1>
<p>{SITE_DESCRIPTION}</p>
<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
</div>
<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
<div id="search-box">
<form action="{U_SEARCH}" method="get" id="search">
<fieldset>
<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
<input class="button2" value="{L_SEARCH}" type="submit" /><br />
<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
</fieldset>
</form>
</div>
<!-- ENDIF -->
</div>
Créer un footer extensible
Posté : lun. 24 oct. 2011 15:09
par Dakin Quelia
» Créer un footer extensible
Ces modifications vous permettent d'étendre le footer.
Ouvrez le fichier
styles/{VOTRE_STYLE}/theme/content.css.
A la fin du fichier, ajoutez:
Code : Tout sélectionner
/* Header and Footer extended
---------------------------------------- */
.footerbar {
background-color: #12A3EB;
margin: 12px 0 -12px 0;
width: 100%;
height: 200px;
color: #FFFFFF;
}
#footer-block {
width: 95%;
margin: 0 auto;
text-align: center;
padding-left: 30px;
}
#footer-block ul {
display: block;
float: left;
position: relative;
width: 250px;
padding: 34px 30px 0 30px;
list-style-type: none;
}
#footer-block ul li.footer-title{
color: #000000;
font-size: 16px;
font-style: italic;
font-weight: bold;
padding-left: 20px;
border-bottom: none;
}
#footer-block a {
font-size: 13px;
color: #FFFFFF;
padding-left: 12px;
line-height: 30px;
text-align: left;
text-decoration: none;
}
#footer-block a:hover {
color: #3D3D3D;
}
Ouvrez le fichier
styles/{VOTRE_STYLE}/template/overall_footer.html.
Cherchez:
Code : Tout sélectionner
<div>
<a id="bottom" name="bottom" accesskey="z"></a>
<!-- IF not S_IS_BOT -->{RUN_CRON_TASK}<!-- ENDIF -->
</div>
Après, ajoutez:
Code : Tout sélectionner
<div class="footerbar">
<div id="footer-block">
<ul>
<li class="footer-title">Titre 1</li>
<li><a href="#" title="">Lorem ipsum dolor</a></li>
<li><a href="#" title="">Lorem ipsum dolor</a></li>
<li><a href="#" title="">Lorem ipsum dolor</a></li>
<li><a href="#" title="">Lorem ipsum dolor</a></li>
</ul>
<ul>
<li class="footer-title">Titre 2</li>
<li><a href="#" title="">Lorem ipsum dolor</a></li>
<li><a href="#" title="">Lorem ipsum dolor</a></li>
<li><a href="#" title="">Lorem ipsum dolor</a></li>
<li><a href="#" title="">Lorem ipsum dolor</a></li>
</ul>
<ul>
<li class="footer-title">Titre 3</li>
<li><a href="#" title="">Lorem ipsum dolor</a></li>
<li><a href="#" title="">Lorem ipsum dolor</a></li>
<li><a href="#" title="">Lorem ipsum dolor</a></li>
<li><a href="#" title="">Lorem ipsum dolor</a></li>
</ul>
<ul>
<li class="footer-title">Titre 4</li>
<li><a href="#" title="">Lorem ipsum dolor</a></li>
<li><a href="#" title="">Lorem ipsum dolor</a></li>
<li><a href="#" title="">Lorem ipsum dolor</a></li>
<li><a href="#" title="">Lorem ipsum dolor</a></li>
</ul>
</div>
</div>
Rafraîchissement et résultat final
Posté : lun. 24 oct. 2011 15:10
par Dakin Quelia
» Rafraîchissement et résultat final
Dès que toutes les modifications sont effectuées, vous devez rafraîchir le template et le thème (onglet Styles) et de vider le cache (onglet Général).
Une fois ceci fait, vous pouvez voir un aperçu:
Remerciements spéciaux dédiés à
Cabot,
membre de l'équipe des graphistes de phpbb-fr.com, sans qui cette documentation n'existerait pas car je me suis inspiré de son
style.