►  

Comme beaucoup m'ont demandé comment j'ai fait pour faire coulisser ma shoutbox, je me suis dit autant faire un tuto. (fonctionne également pour n'importe quel module, ou même tout un menu) Autre exemple, mon menu ici.

Lire la suite...

Bonjour, dans cet article, quelques sélecteurs et exemples pour modifier l'apparence de vos messages dans vos forums. En gros, ça.

Lire la suite...

 ► 

Je ne sais pas comment appeler ça...^^ bref, les images parlent d'elle-même (image 2, au survol). Il s'agit de mettre un fond derrière vos liens. Pour ceux qui me suivent depuis un petit moment, c'était mon ancien menu (thème #2). Je n'avais pas trouvé de tuto sur le forum d'ekla, j'avais donc dû me débrouiller toute seule pour faire ce genre de menu...  ici je vais vous donner les codes.

I- Liens dans votre module.

Avant de s'occuper de l'apparence de vos liens, créez-les dans un module de votre menu. Une fois fait, on passe au CSS.

II- Codes CSS

1- On commence évidemment par le sélecteur. En rouge, mettre le numéro du module. (Clique droit sur le module > inspecter) Ne pas oublier le "a" après le numéro. (le "a" est utilisé pour les liens.)

#module_menu_contenu152016260 a { propriété: valeur; }

2- Maintenant, les propriétés. Commencez par le plus simple, le fond que vous voulez, la police, la taille, couleur, etc. Ce qui vous donne un truc dans ce genre-là.

3- Définissez une taille, pour mon exemple, mes liens font presque toute la largeur de mon module (width: 96%;).

4- Puis utilisez : display : inline-block. La propriété display permet de modifier ou supprimer un élément et la valeur, inline-block voie l'élément comme une seule ligne. 

#module_menu_contenu152016260 a {
      width: 96%;
     display: inline-block;}

Si vous êtes sur Firefox et que ça ne fonctionne pas, ajoutez: display: moz-inline-box;  

Mon code final :

#module_menu_contenu152016260 a {
    color: white;
    font-size: 12px;
    text-align: center;
    display: inline-block;
    display: moz-inline-box;
    margin-top: 3px;
    margin-bottom: 2px;
    width: 96%;
    background-color: #844F8D;
    text-shadow: 1px 1px 0px #844F8D;  }

5- Pour le survol, même chose :

Je n'ai que le fond à changer.

#module_menu_contenu152016260 a:hover {
    background: #B48ABB;
    color: white;
    text-shadow: 1px 1px 0px  #B48ABB;}

Si vous préférez faire votre menu dans une page ou un article c'est pareil, il suffit juste de changer le sélecteur.

Voilà, j’espère que ce petit tuto vous sera utile !

Bonjour ! Petite astuce pour mettre des flèches qui vous permettront de monter ou de descendre plus rapidement de votre page. Le code est en deux parties, une HTML et une CSS.

Partie HTML.

<p><a title="#footer" href="#footer"><img id="id1" src="FLÈCHE BAS.PNG" alt="" /></a> <a title="#top" href="#top"><img id="id2" src="FLÈCHE HAUT.PNG" alt="" /></a></p>

Ce code HTML est à coller dans le code source (<>) d'un module simple, ou dans les statistiques, ça marche aussi.

• En rouge: les identifiants, j'ai noté id1 et id2, vous pouvez changer, mais dans ce cas, il faudra noter ces mêmes identifiants dans le code CSS plus tard.
• En rose: adresses URL de vos images (flèches), une qui part vers le bas et l'autre vers le haut.
• En vert: le titre / nom qui apparaîtra au survol de l'image (vous pouvez noter ce que vous voulez "monter", "top"...).

Partie CSS.

#id1{position: fixed;
    right: 5px;
    bottom: 10%;   }
   
#id2{position: fixed;
    right: 5px;
    bottom: 20%;   }

• En rouge, on retrouve bien les mêmes identifiants utilisé dans le code HTML.
• En vert, la position fixed permet à vos images de rester fixe sur votre blog. Elles ne bougeront pas en cas de scroll, et donc seront toujours visibles.
• En rose : la position des flèches sur votre blog, right par rapport au bort droit et bottom du bas. Vous pouvez mettre les valeurs en % ou en px.

Une fois les deux parties installées, vos flèches Monter/Descendre sont fonctionnelles. Vous pouvez également les personnaliser, comme les rendre plus discrètes par exemple en jouant sur l'opacité.

#id1{position: fixed;
    right: 5px;
    bottom: 20px;
    opacity: 0.3;}
   
#id2{position: fixed;
    right: 5px;
    bottom: 70px;
    opacity: 0.3;}

#id1:hover {opacity: 1;}

#id2:hover {opacity:1;}

Les flèches auront une opacité de 0.3 (légèrement transparente) et au survol (:hover), une opacité de 1, soit totalement visible.

Où trouver des flèches ?

Iconsdb ou Icones8

Voilà le tuto est terminé, j’espère qu'il vous sera utile !