Blog d'aide de Blog4ever

Blog d'aide de Blog4ever

Petites flèche menu déroulant barre navigation

3184 appréciations
Hors-ligne
simon:ml!NanaBisonours

J'ai cherché je n'ai pas trouvé de sujet ou alors il me faut quatres paires de loouuunneettesss...

Y a t il une possibilité de changer l'image flèche indiquant qu'il y a un menu déroulant ou si ce n'est pas possible lui donner une autre couleur ???
Quels codes doit on mettre ???
Voir ma capture :


Merci d'avance :oe:

:sol:

1021 appréciations
Hors-ligne
Bonjour,

pour modifier la couleur de la flèche, il faut utiliser le code suivant :

nav .caret {
  border-top-color: ;
}


Pour s'en servir, il suffit remplacer par la couleur souhaitée.

Je t'ai ajouté le code dans ton CSS, ligne 122. J'ai mis la même couleur que les liens de ta barre de navigation mais si ça ne te convient pas, il te suffit de remplacer le code couleur par un autre.

Bonne journée.
Flora Maelyne
Responsable Blog4ever
Développeuse & Graphiste

3184 appréciations
Hors-ligne
:ml! "Maelyne"
Comme je te l'ai déjà dit j'adore ce prénom :oe:

Je vais aller voir ça tout de suite
Et d'avance je te dit GRAND 
:sol:

3184 appréciations
Hors-ligne
Ah bah voilà ! On la voit mieux.

J'ai essayé de mettre :
background-image: url(https://static.blog4ever.com/2013/02/727680/essai-fleche.gif);

Bon je reconnais que l'image est pas très jolie mais de toute manière cela ne fonctionne pas.

Pourquoi ?

Bonne journée
:sol:

1021 appréciations
Hors-ligne
Re,

Haha, merci.

Alors, mettre une image serait possible mais ça demande un certain nombre d'ajustements.

J'ai modifié ton CSS pour mettre ton image. Par contre, si jamais tu changes l'image, les ajustements risquent de devenir obsolètes (si ses dimensions sont différentes surtout).

Je te fais un petit topo sur le pourquoi du comment des règles que j'ai utilisé :

nav .caret {
  background-image: url(https://static.blog4ever.com/2013/02/727680/essai-fleche.gif);
  background-repeat: no-repeat;
  background-position: 0 0;
  width: 15px;
  height: 13px;
  border: 0 !important;
  margin: 13px 0 0 7px;
}


- background-x : gère l'url de l'image, sa façon de s'afficher et sa position. Quelque soit les dimensions de l'image, tu ne devrais pas avoir besoin d'y retoucher. Sauf l'url, bien sûr, si tu veux changer l'image.

- width/height : correspond aux dimensions largeur/hauteur (respectivement) de l'image choisie. Si tu changes l'image et que les dimensions diffèrent, il faut changer les valeurs en conséquences.

- border : ne pas toucher à cette instruction. C'est ce qui annule le style par défaut (la flèche colorée)

- margin: ça gère la position de la flèche par rapport au texte. Pareil, si les dimensions changent, il y aura des ajustements à faire. Si l'image est plus petite, il faudra ajuster la première valeur en l'augmentant. Si elle est plus grande, il faudra la réduire.

Si jamais tu veux revenir à la flèche basique, tu mets tout ça en commentaire, tu laisses juste le code que j'avais mis dans mon message initial.

Bonne journée.
Flora Maelyne
Responsable Blog4ever
Développeuse & Graphiste

3184 appréciations
Hors-ligne

 pour toutes tes explications, cela m'aide à mieux comprendre et je pense que cela va aider beaucoup de blogueurs


:sol:
Ce sujet est fermé, vous ne pouvez pas y répondre.
Vous ne disposez pas des permissions nécessaires pour répondre à un sujet de la catégorie Demandes d'assistance.

Inscrivez-vous au blog

Soyez prévenu par email des prochaines mises à jour

Rejoignez les 6127 autres membres