[phpBB 3.0.x] Créer un header/footer extensible

[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
• Créer un footer extensible
• Rafraîchissement et résultat final

[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:

Code : Tout sélectionner

<div id="wrap">

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>

[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>

[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.