Le blog de syeric

C'est le retour du "tout le monde le sait sauf moi" :) Bon, en réalité je n'ai trouvé l'information que de manière détournée, je vois donc de l'intérêt dans ce billet :)

Lire la suite

Petite explication sur ce qui me semble important : ne pas imposer javascript à son visiteur.

Lire la suite

Je vous parlais il y a quelque temps d'une classe php qui permettait de générer une map pour son site de manière simple. Seulement, cette solution n'était en fait pas très stable...

Lire la suite

Il peut être intéressant d'actualiser le contenu d'un formulaire en fonction d'un choix dans un select, et ce sans changer de page. Pas de problème !

Lire la suite

jQuery, c'est tendance :) Et on comprend pourquoi ! La syntaxe est très aisée et jQuery présente d'autres avantages très intéressants. Voyons un petit exemple de menu déroulant.

Lire la suite

Salut

Juste un petit mot pour vous parler de l'extension WebDeveloper pour firefox.

Lire la suite

Bonjour !

Alors, comment ça marche cette bête là ? Vous allez voir, c'est pas si difficile ;-)

Déjà, commençons par rendre à César : je me suis très largement inspiré du blog de Sahid Ferdjaoui qui est au passage de grande qualité.

Et puis je me suis dit, son menu transparant me plait bien, alors pourquoi essayer de faire de même sur mon Dotclear ?

C'est partit ! Commencez par éditer votre fichier style.css, contenu dans le répertoire du style que vous avez appliqué. Il diffère très certainement du miens mais vous devriez vous en sortir. Rajouter à la fin :

[css]
/*menu transparent*/
div#header_2 {
	background: #fff url(img/page.png) repeat-y center top;
	height:30px;
	width:auto;
	font-size:13px;
	padding:4px 5px 0px 0px;
}
div#header_2 ul {
	list-style-type:none;
}
/*definition du bouton sur lequel il faudra passer */
div#header_2 div#menu span.bouton {
	position:absolute;
	left:260px; /*a modifier en fonction de votre thème !*/
	top:200px; /*pareil*/
	cursor:pointer;
	font-family:arial, "lucida console", sans-serif;
	background-color:#f3f3f3;
	border:1px solid #ccc;
}
div#header_2 div#menu span.bouton img { margin:0px 5px 0px 3px }
div#header_2 div#menu span.bouton div { padding-top:3px; margin-right:3px }
div#header_2 div#menu span.bouton:hover {
	background-color:#fdfdfd;
	border:1px solid #888
}
div#header_2 div#menu div#mainMenu { display:none; }
div#header_2 div#menu div#mainMenu a { text-decoration:none; color:#000; }
div#header_2 div#menu div#mainMenu a:hover { text-decoration:none; border:none; }


div#header_2 div#menu:hover div#mainMenu {
	position:absolute;
	top: 210px;
	left:260px;
	
	display:block;

	background-color:#F5F5FF;
	padding-right:6px;
	padding-bottom:6px;
	width:200px;
	
	z-index:50;

}
div#header_2 div#menu div#mainMenu div#search{
	background: transparent;
	color: inherit;
	line-height: 2.3em;
}
	
	#search fieldset, #search p{
		margin: 0;
		padding: 0;
	}

	#q{
		padding-left: 18px;
		background: #fff url(img/q.png) no-repeat 4px center;
	}

div#header_2 div#menu div#mainMenu ul {
	list-style-type : none;
	margin-top : 0.15em;
}
div#header_2 div#menu div#mainMenu li {
	list-style : square;
	margin-top : 0.15em;
	color : #999;
}
div#header_2 div#menu div#mainMenu li:hover {
	color : #425176;
}

div#header_2 div#menu div#mainMenu h2 {
	color: #4a629f;
	margin: 0 0 1ex 0;
	text-align: left;

}

div#header_2 div#menu div#mainMenu h3 {
	font-size: 1em;
	margin: 0;
}
div#header_2 span.bouton2 {
	position:absolute;
	left:390px;
	top:202px;
	cursor:pointer;
	font-family:arial, "lucida console", sans-serif;
	background-color:#f3f3f3;
	border:1px solid #ccc;
}

/* ombres
**************/
.shadow {
	float:left;
	background-color:#fff;
	background: url(img/shadowAlpha.png) no-repeat bottom right; /* ff */
	background: url(img/shadow.gif) no-repeat bottom right; /* ie */
	margin: 0px 0 0 30px;
	
	opacity: 0.8;
	-moz-opacity: 0.8;
	-khtml-opacity: 0.8;
	FILTER: alpha(opacity=80);
}

Bon, voilà ! Pour les images à la fin, les voilà :

http://ssaleur.free.fr/blog2/dotclear/themes/Blue%20Geek/img/shadowAlpha.png http://ssaleur.free.fr/blog2/dotclear/themes/Blue%20Geek/img/shadow.gif Il faut les mettre dans le dossier img de votre thème.

Bien ! Ensuite, il faut éditer votre fichier template.php, toujours dans le dossier de votre thème. Vous aurez une section, si le fichier est bien commenté, qui concerne "sidebar". La dedans se trouve votre menu. Vous remarquerez la ligne :

[php]
	<div id="calendar">
	<h2>Calendrier</h2>
	<?php #Affichage du calendrier
	dcCalendar('<table summary="Calendrier">%s</table>'); ?>
	<span></span>
	</div>

C'est le calendrier. En dessous commence le menu, avec search. Bien ! Copiez ce qui vous intéresse. Moi par exemple j'ai pris search, catégories et archives. Ca ressemble à ça :

[php]
	<div id="search">
		<form action="<?php dcInfo('search'); ?>" method="get">
		
			<h2><label for="q">Rechercher</label></h2>
			<p class="field"><input name="q" id="q" type="text" size="10"
			value="<?php dcSearchString(); ?>" accesskey="4" />
			<input type="submit" class="submit" value="ok" /></p>
		
		</form>
	</div>
	<div id="categories">
		<h2>Cat&eacute;gories</h2>
		<?php dcCatList(); ?>
	</div>
	
	<div id="archives">
		<h2>Archives</h2>
		<?php dcMonthsList(); ?>
	</div>

Bien, alors ensuite, rendez vous un peu plus haut dans le fichier. Juste en dessous de :

[php]
<div id="top">
	<h1><a href="<?php dcInfo('url'); ?>"><?php dcInfo(); ?></a></h1>
</div>

Et ensuite, c'est parti !

[php]
<div id="header_2">
	<div id="menu">
		<span class="bouton"><div>Navigation rapide</div></span>
			<div id="mainMenu" class="shadow">
				<div style="background-color:#fff; padding:10px; background-color:#f6f6f6; border:3px solid #aaa">
						<div id="search">
							<form action="<?php dcInfo('search'); ?>" method="get">
								<h2>Rechercher</h2>
								<p class="field"><input name="q" id="q" type="text" size="10" value="<?php dcSearchString(); ?>" accesskey="4" />
								<input type="submit" class="submit" value="ok" /></p>
							</form>
						</div>
	
						<div id="categories">
							<h2>Cat&eacute;gories</h2>
							<?php dcCatList(); ?>
						</div>
	
						<div id="archives">
							<h2>Archives</h2>
							<?php dcMonthsList(); ?>
						</div>
	
				</div>
		</div>
	
	</div>
</div>

Ca y'est, le menu transparent est en place ! Vous remarquerez que ce que nous avons copié avant se retrouve exactement dans notre ajout.

Voilà voilà !

A bientôt

Sylvain