Proposer à vos visiteurs de changer le background de votre site

Voici un ensemble de scripts qui vous permettra d'intégrer dans votre site une application permettant à l'utilisateur de modifier l'image de fond de l'ensemble de la page ou d'un élément selon son envie.

Ces articles sont susceptibles de vous intéresser aussi :

Un portfolio HTML5 / CSS3 et JQuery

Un système d'onglets horizontaux

Generateur de formulaire JQuery

 

Ce que vous allez réaliser

Choisissez un thème ...

Changer de theme!

 

Telecharger

Téléchargez l'archive contenant les fichiers nécessaires à cette application, celle-ci comprend :

  • Les bibliothèques JQuery adéquates : JQuery-1.4.2.min.js , JQuery-cookie , JQuery.infinite-carousel
  • Le fichier Javascript theme-switcher.js
  • La feuille de règles de style
  • Le fichier HTML de démo
Pour télécharger ce pack, c'est ici :

 

Integration dans votre page HTML

Voici le code à intégrer dans votre page HTML

<head>

...

<link rel="stylesheet" href="css/styles.css" type="text/css" media="screen" />

<link rel="stylesheet" id="active-theme" type="text/css" href="themes/default/theme.css" />

<!-- JavaScript -->
<script type="text/javascript" src="js/lib/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/lib/plugins/jquery.infinite-carousel.js"></script>
<script type="text/javascript" src="js/lib/plugins/jquery.cookie.js"></script>
<script type="text/javascript" src="js/theme-switcher.js"></script>

...

</head>

 

<body>

...

<div id="theme-wrapper">
<div class="drawer-toggler">Changer le theme</div>
<div id="theme-drawer">
<div id="theme-carousel">
<div id="btn-previous">Prec</div>
<div id="themes-frame">

<ul>
<li><a href="#" rel="theme01"><img src="themes/theme01/mini_th1.jpg" alt="Theme 01"/></a></li>
<li><a href="#" rel="theme02"><img src="themes/theme02/mini_th2.jpg" alt="Theme 02"/></a></li>
<li><a href="#" rel="theme03"><img src="themes/theme03/mini_th3.jpg" alt="Theme 03"/></a></li>
<li><a href="#" rel="theme04"><img src="themes/theme04/mini_th4.jpg" alt="Theme 04"/></a></li>
<li><a href="#" rel="theme05"><img src="themes/theme05/mini_th5.jpg" alt="Theme 05"/></a></li>
</ul>

</div>
<div id="btn-next">suiv</div>
</div>
</div>

...

</body>

 

 

Personnaliser

Pour personnaliser cette application et modifier les images ou background des thèmes, ouvrez, par exemple, le dossier change_theme>themes>theme01, remplacer les images th et mini_th (format 126 x 71 px) par celles voulues et modifiez la feuille de style "theme.css" de la manière suivante :

#page { /*id ou designation de l'élément concerné*/
background: url(th1.jpg); /*définissez les règles à appliquer*/
}

Il va de soit que d'autres règles CSS peuvent etre modifiées !
Le principe restera identique : Saisissez dans le fichier "theme.css" les règles qui seront à modifier et n'oubliez pas, si des images sont à ajouter ou à modifier, de les inclure dans le dossier du thème correspondant.

Conclusion

Amusez vous bien et offrez la possibilité à vos visiteurs de personnaliser eux-memes votre site