entrée bis... ;)
Tout sur la création du Blog Wordpress des Voisins du dessus

Changer de feuille de style (css) à la volée

Afin d’ajouter un peu de fun, j’ai voulu permettre à l’utilisateur d’utiliser 2 styles différents pour le site des Voisins du Dessus. Comme le fond du site a des couleurs de ciel, l’idée d’avoir une version pour le jour et une version pour la nuit m’a semblé naturelle.

Les éléments qui changent entre le style « jour » et le style « nuit » ne seront pas nombreux. Il s’agit seulement du fond de la page et de la bannière en haut de page.

Graphisme

Pour le fond de page (le ciel), il suffit d’assombrir les couleurs du dégradé de départ, en vérifiant tout de même à ne pas être trop sombre dans le haut, histoire de voir encore les silhouettes dessinées en noir sur la bannière.

Pour la bannière, j’ai voulu montrer une façade de nuit avec des fenêtres éclairées. j’ai donc assombrit l’ensemble de la bannière, sauf les zones des fenêtres que j’ai éclaircies. Afin d’avoir une touche plus romantique, j’ai rajouté une belle lune dont j’ai forcé le contraste et sur laquelle j’ai rajouté un peu de jaune/orange.

Voici une image qui vous montrent les deux bannières :

Les bannières Jour et Nuit

La partie CSS

Les images sont insérées dans la page à l’aide des attributs css backround. On utilisera 3 fichiers différents : le fichier style.css qui contient l’ensemble des règles css pour le site, le fichier jour.css qui contiendra les spécifications pour le style diurne, et le fichier nuit.css pour le style nocturne. On pourrait utiliser deux fichiers seulement en recopiant tout le css dans les deux, mais je prefère charger 3 fichiers dont 2 très petits que 2 gros fichiers.

Code du fichier jour.css :

body { 
background:#dff1fd 
url(images/fond_jour.jpg) 
top left repeat-x;}

#head { 
background:transparent 
url('images/banniere_top_creuse.png') 
bottom  center  no-repeat;}

#head #banniere_plein {
background:transparent 
url('images/banniere_top_plein.png') 
bottom left no-repeat;}

Code du fichier nuit.css :

body {
background:#004fa8
url(images/fond_nuit.jpg)
top left repeat-x;}

#head {
background:transparent
url('images/banniere_top_creuse_nuit.png')
bottom center no-repeat;}

#head #banniere_plein {
background:transparent
url('images/banniere_top_plein_nuit.png')
bottom left no-repeat;}

Passage du jour à la nuit

Pour activer l’une ou l’autre des feuilles de styles, on va utiliser le language javascript.
On ne va pas ré-inventer la roue, vous pouvez trouver un petit script très bien fait pour effectuer cette tâche sur le site A list apart[an]. Une fois le script chargé avec le code

<script type="text/javascript" 
src="/scripts/styleswitcher.js">
</script>

à mettre en entête de votre page, il suffit d’écrire des liens contenant l’instruction javascript pour effectuer le changement de feuille de style. Exemple pour activer le mode nuit :

<a href="#" 
onclick="setActiveStyleSheet('nuit'); 
return false;">Nuit</a>

où ‘nuit’ correspond au nom du fichier nuit.css.
 

Ressources

Les ressources utilisées dans ce billet sont :
le styleswitcher de A list Apart
une photo de la lune prise par Galileo trouvée sur son blog via une recherche sur Google images

Merci à Galileo de nous avoir autorisé à utiliser sa photo.

Commentaires fermés sur Changer de feuille de style (css) à la volée

Impression « verte »

Dans le but d’économiser quelques feuilles de papier et un peu d’encre, j’ai décidé de mettre en place une feuille de style « light » pour l’impression.
Ainsi, si vous faites un « aperçu avant impression » de cette page, vous verrez que seul l’essentiel sera imprimé.
Exit la bannière, les menus, les widgets et le bas de page.
Si vous voulez vraiment imprimer ce que vous avez à l’écran, il suffit d’appuyer sur la touche « Impr écran » de votre clavier, d’ouvrir votre logiciel de dessin favori et de coller votre écran dans un nouveau document pour l’imprimer à partir de ce logiciel.
Merci pour les arbres de n’imprimer que ce qui est vraiment nécessaire !

Commentaires fermés sur Impression « verte »

NextGEN Gallery : personnalisation des pages diaporama

Pas évident à faire…
Contrairement à l’affichage en vignette, l’affichage en diaporama n’est pas facilement trouvable.
Il est dans le fichier nngfunctions.php.

nggShowGallery

C’est la fonction nggShowGallery qui nous intéresse.
On veut rajouter le nom et la description de la galerie en cours.
Après la ligne 133

$out .= '<div class="ngg-galleryoverview">';

on rajoutera le code suivant :

$out .= '<h2>'.
$picturelist[0]->title.'</h2>';
$out .= '<h4>'.
 html_entity_decode(stripslashes(
 $picturelist[0]->galdesc)).'</h4>
 <br />';

$picturelist[0]

Comme chaque « image » contient le titre et la description de la galerie, il suffit de les récupérer sur la première image.

html_entity_decode

Comme nous utilisons du code html dans la description de la galerie, il est nécessaire de les remettre en état avec la fonction html_entity_decode.

Commentaires fermés sur NextGEN Gallery : personnalisation des pages diaporama

Personnalisation du plug-in Nextgen Gallery…

Pour afficher des photos, nous avons choisi le plug-in NextGEN Gallery.

Installation de NextGEN Gallery

L’installation se fait facilement (comme tout bon plug-in qui se respecte 🙂 ), il suffit de copier tous les fichiers dans le répertoire « plugins » de votre installation wordpress et de l’activer via la console d’administration.
Activation du plug-in NextGen Gallery
Ensuite vient la phase de réglage des différentes options qui permettent d’utiliser toutes les fonctionnalités de cette extension.
Pour finir, on rajoute les images afin de créer des galeries, puis on remplit des albums avec ces galeries.

Seulement, voilà, quand on observe le résultat sur son site que l’on a peaufiné avec amour, les affichages d’albums, de galeries ou de photos ne sont pas forcément en harmonie avec le design de votre site.
C’est bien sûr ce qui est arrivé sur ce site comme vous pouvez le voir sur cette image tirée de la page qui montre le contenu d’un album (en fait, la page « photo » de notre site).
NextGEN - Style par défaut
Alors que l’esprit du site serait plutôt d’avoir ça :
Ce que l'on veut obtenir

Personnalisation

Bien que livré avec plusieurs feuilles de styles différentes, il y a peu de chance qu’elles s’accordent avec un thème cousu main comme le notre.
Heureusement, cette extension est très bien écrite, et permet une personnalisation très poussée.

Les feuilles de styles

L’utilisation des feuilles de styles nous permet de modifier tout ce qui a trait à l’apparence des informations sur la page.
Les feuilles de styles sont modifiables dans l'interface de NextGEN
En modifiant certaines valeurs, on arrive à avoir ce résultat, qui est plus proche du design du site.
On s'approche...

Le code HTML

Bon, c’est pas encore parfait, on veut obtenir la même chose que sur les autres pages.
Pour cela, on va devoir aller modifier le code qui permet d’afficher un album. Et encore une fois, merci à l’auteur de cette extension d’avoir si bien séparé les différentes fonctions car il suffit de se diriger vers le répertoire « view » pour avoir accès aux différents codes qui affichent les galeries et les albums.
Pour nous, la modification devra se faire dans le fichier « album-extend.php ».
On veut déplacer le titre de la galerie pour qu’il soit à droite de l’image, et retrouver la bande bleu derrière les images. Une fois le code modifié, le résultat est enfin satisfaisant.
Personnalisation réussie.
Vous pouvez admirer le résultat final sur la page photo.

Commentaires fermés sur Personnalisation du plug-in Nextgen Gallery…

Ajout page crédits

Ajout de la page Crédits – mention légales.

Le lien vers cette page est quelque peu atypique.
Il s’agit d’un texte à la vertical.

J’ai donc pris une image représentant le texte à la verticale. On a besoin de la couleur du texte (noir) et de la transparence, j’ai donc pris le format gif avec transparence qui est suffisant dans ce cas.
Le css est utilisé pour décorer le lien avec cette image

#credits a {
display: block;
height:181px; width:11px; 
background:transparent 
  url('images/credits.gif') 
  bottom left no-repeat;
}

puis une autre image en cas de survol de la souris.

#credits a:hover {
display: block;
height:181px; width:11px; 
background:transparent 
  url('images/credits_h.gif') 
  bottom left no-repeat;
}

display:block permet d’afficher comme un bloc ce qui est au format inline à la base, cela nous permet d’avoir l’image entièrement.

L’image étant à la vertical, il a fallu s’arranger pour que la hauteur de l’image ne perturbe pas l’affichage de la page.
Ce détail a été résolu avec un positionnement en absolu de la div qui contient l’image

#credits { position:absolute; 
bottom: 10px; left: 100px;
}

(au passage on place l’image où on veut qu’elle soit avec bottom et left)
et en spécifiant au conteneur de cette div un positionnement relatif

#footer { position:relative; }

Le code html associé :

&lt;div id=&quot;footer&quot;&gt;
 &lt;div id=&quot;credits&quot;&gt;
  &lt;a href=&quot;votre lien&quot;&gt;&lt;/a&gt;
 &lt;/div&gt;
&lt;/div&gt;
Commentaires fermés sur Ajout page crédits
Youtube Logo   Vimeo Logo   Flickr Logo   MySpace Logo   Facebook Logo   Twitter Logo   Wordpress Logo   MusicME Logo   Deezer Logo   iTunes Logo Connexion