Bandeau CSS en vacances …

Et oui certains d’entre nous prennent des vacances (pour mon cas tout est relatif dans le terme vacances … mais c’est un autre histoire)

Et pour ceux qui n’utilise leur WP qu’avec les outils WP voilà comment intégrer facilement un bandeau en haut à gauche de votre site histoire de faire jolie et indiquer que les posteurs de votre plateforme sont en permission longue durée 😉

Créez une image de 300×300 transparante (png pas jpeg) avec un bandeau qui part de en haut à gauche vers en bas à droite en pensant bien que la partie visible doit être au dessus de la diagonales …

Comme par example :

 

 

 

 

 

 

 

 

 

 

et non pas … :

 

 

 

 

 

 

 

 

 

Oui ça sent bien l’essai foireux 🙂

Bref

Une foie que vous avez votre jolie bandeau dans le fichier header de votre theme WP que vous trouerez dans :

<PathDeVotreSite>/wp-content/themes/VotreTheme/header.php

Placez vous entre les balise <head></head>

Et ajoutez le code suivant:

<style type= »text/css »> div#vacances {position: fixed; top: 0; right: 0; z-index: 9999;} div#vacances a {text-decoration: none; border: 0;} div#vacances a:hover {text-decoration: none; border: 0;} </style> <!–[if lte IE 6]> <style type= »text/css »> div#vacances { position: absolute; right: 0; top: 0; right: expression( ( 20 + ( ignoreMe2 = document.documentElement.scrollRight ? document.documentElement.scrollRight : document.body.scrollRight ) ) + ‘px’ ); top: expression( ( 10 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + ‘px’ ); } </style> <![endif]–>

Et après votre balide <body> (à la fin de votre header.php théoriquement mais ça dépend des themes) ajoutez :

<div id= »vacances »> <img src= »/Path/de/votre/image/vacances.png » width= »300px » height= »300px » alt= »Lâchez moi la grape » /></a> </div>

 

Voilà … à la rentrée 🙂