• Mettre un fond différent à chaque article

     

    Tout petit tuto qui fait suite à une demande que m'a faite Zébuline.

    Par les menus Eklablog, vous pouvez définir pour vos articles une couleur ou une image de fond pour vos articles. Oui mais voilà, c'est toujours la même et vous souhaiteriez en changer pour certains de vos articles.

    En fait, c'est extrêmement simple. Je vais vous proposer un tout petit code javascript qui ne nécessite pas de connaître le numéro de l'article. Ce code est à insérer par le bouton HTML de la boite d'édition de votre article.

    Dans ce tuto, le code modifie la propriété background-image de l'id module_contenu_html1261340. Alors vous allez me dire : "Mais tu avais dit qu'il n'était pas nécessaire de connaître le numéro de l'article!". Eh bien oui c'est pourtant vrai. Quand on ne peut pas entrer par la porte, alors on passe par la fenêtre. 

    L'astuce réside dans la mise en place dans l'article d'une balise dont on connait le nom. Or cette balise se situe forcément sous la balise module_contenu_block de l'article qui elle même se situe sous module_contenu_html1261340. Il suffit donc depuis notre balise connue  de remonter de deux niveaux de noeuds avec la propriété parentNode.

     

    S'agissant d'une Id et par conséquent utilisable une seule fois par page, veillez à modifier le nom de la div à chaque fois que vous placerez ce code dans vos articles.

     

    Voyons maintenant le code:

    <div id="madiv1">&nbsp;</div>
    <script type="text/javascript">// <![CDATA[
    var x=document.getElementById('madiv1').parentNode.parentNode;
    x.style.backgroundImage='url(http://data0.ek.la/le-blog-facile/perso/poison_dart_frog.jpg)';
    x.style.backgroundSize="100%";
    // ]]></script>

    Voilà, il ne vous reste plus quà mettre le code ci-dessus dans votre article en mettant une id différente à chaque fois que vous l'utilisez (nom surligné en jaune) et en mettant le lien de votre image (surligné en orange).

    Bien entendu, il est possible aussi de modifier d'autres propriétés que l'image de fond.