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

Toutes les documentations phpBB seront ici.
Verrouillé
Avatar du membre
Dakin Quelia
Webmaster
Webmaster
Messages : 563
Enregistré le : ven. 27 nov. 2009 05:47
Localisation : Belgique
Contact :

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

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

Avatar du membre
Dakin Quelia
Webmaster
Webmaster
Messages : 563
Enregistré le : ven. 27 nov. 2009 05:47
Localisation : Belgique
Contact :

Créer un header extensible

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

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>

Avatar du membre
Dakin Quelia
Webmaster
Webmaster
Messages : 563
Enregistré le : ven. 27 nov. 2009 05:47
Localisation : Belgique
Contact :

Créer un footer extensible

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

Avatar du membre
Dakin Quelia
Webmaster
Webmaster
Messages : 563
Enregistré le : ven. 27 nov. 2009 05:47
Localisation : Belgique
Contact :

Rafraîchissement et résultat final

Message 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:
01.png
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.

Verrouillé

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 1 invité