• Infobulle [EklaBlog]

    Par Nagalia le 25 Décembre 2011 à 14:00
     
    /!\ Le JavaScript doit être activé!

    Passes la souris sur ce texte ;)Du texte apparaît ! 
    On peut même mettre des images ;)

    Pour ajouter cet effet dans vos articles ou vos modules, nous allons réutiliser un script d'EklaBlog. Rassurez-vous, nous n'allons pas toucher au JS

    <a class="infobulle" onmouseover="Help.bubble(this)">ELEMENT VISIBLE</a><span class="help_content">CONTENU INVISIBLE</span>

    Remplacez "ELEMENT VISIBLE" par votre objet qui déclenchera l'infobulle. Dans mon exemple, c'est du texte, mais vous pourriez très bien le mettre sur une image : Remplacez URL par le lien de votre image dans le code ci-dessous

    <a class="infobulle" onmouseover="Help.bubble(this)"><img src="URL"/></a><span class="help_content">CONTENU INVISIBLE</span>

    A la place de "CONTENU INVISIBLE", mettez le texte et/ou les images qui apparaitrons.

    /!\ Vous ne pouvez pas insérer de lien de l'infobulle avec ce code. Si vous souhaiter pouvoir cliquer dans l'infobulle, je vous renvoie à l'article suivant :
    => http://fanstasy-graph.eklablog.net/infobulle-amelioree-a108139450

    Vous pouvez également personnaliser cet affichage grâce au CSS

    On appelle l'infobulle avec un lien. Si vous ne voulez pas que le texte ait la même apparence que les liens de votre blog, vous pouvez créer une nouvelle classe.

    a.infobulle {propriété: valeur;}

    Ensuite, pour modifier l'apparence générale, il faut utiliser le sélecteur #help_bubble, par défaut sur Ekla (je vous donne le code par défaut)

    #help_bubble {
       propriété : valeur; /*personnalisez*/
    }

    Remarque : ce sélecteur concerne également les infobulles qui apparaissent en survolant les derniers visiteurs.


    77 commentaires

  • Image en titre de module

    Par Nagalia le 20 Novembre 2011 à 11:27

    Créez votre module, puis affichez le code source de votre page.
    Chercher le titre de votre module ( Ctrl + F)



    Récupérez "module_menu_titreXXXXXX"
    Copiez le dans la css avec ce code: 

    #module_menu_titreXXXXXX { display: block;
          height: Xpx;
          width: Xpx;
          background: url("IMAGE") no-repeat 50% 0%;
    }

    La propriété display : block; nous permet de transformer l'élément span (inline) en élément de type div (block), ce qui permet de définir une hauteur et une largeur.
    Pour finir, vous n'avez plus qu'à ajouter votre image préalablement créer.


    53 commentaires

  • Header Cliquable

    Par Nagalia le 4 Septembre 2011 à 15:33
    Revenir à l'accueil quand on clique sur le header


    On va utiliser le titre du blog. Voici le code, et je vous explique:
    #titre_header a {
                              display: block;
                              width: Xpx;
                              height: Xpx;}

    Il vaut mieux ne pas écrire de titre. Dans "apparence => modifier le thème => Header => titre", mettez la position du titre à (0;0)
    width = largeur Remplacez le X par la largeur de votre header
    height = hauteur Remplacez le X par la hauteur de votre header

    Et voilà, votre header vous ramène à la page d'accueil quand vous cliquez dessus.

    38 commentaires

  • Selecteur Eklablog

    Par Nagalia le 23 Août 2011 à 23:13
    >>Page wiki des sélecteur<<



    Article

    .module_contenu {propriété: valeur;}

    Article titre

    .module_titre {propriété: valeur;}

    Article bas

    #module_bottom {propriété: valeur;}

    Barre d'outil >>Article détaillé<<

    #menubar {propriété: valeur;}

    Commentaire

    .comment_normal {propriété: valeur;}

    Commentaire auteur

    .comment_admin {propriété: valeur;}

    Commentaire avatar

    .commentavatar {propriété: valeur;}

    Dernier Visiteur

    .module_menu_type_lastvisitors {propriété: valeur;}

    Fond de fenêtre

    #body {propriété: valeur;}

    Fenêtre d'information >>Article détaillé<<

    .window {propriété: valeur;}

    Fond de page

    #background {propriété: valeur;}

    Forum Liste

    #module_contenu_pageforums {propriété: valeur;}

    Header

    #header {propriété: valeur;}

    Menu contenu

    module_menu_contenu_block {propriété: valeur;}

    Menu gauche

    #menu1 {propriété: valeur;}

    Menu droit

    #menu2 {propriété: valeur;}

    Menu titre

    .module_menu_titre {propriété: valeur;}

    Menu de l'en tête

    #menu {propriété: valeur;}

    Pied de page

    #footer {propriété: valeur;}

    209 commentaires


    Suivre le flux RSS des articles de cette rubrique
    Suivre le flux RSS des commentaires de cette rubrique