En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour vous proposer des contenus et services adaptés. Politique de confidentialité.
Forum - GuppY 5.0 - Vos questions - Personnaliser boîtes latérales

 

actif  Sujet n° 206

le 02/05/2014 @ 18:47
par rod

rod



Bonsoir Sabine,

J'ai réussi à personnaliser les boîtes latérales. Mais est-il possible de personnaliser les items de chaque boîte ?

Voici ce que j'avais ajouté pour une boîte dans mon fichier extra.css sous Guppy 4.6

#am2 a {
    color:#333333;
    text-decoration:none;
    -webkit-transition: all .4s ease-in;
    -moz-transition: all .4s ease-in;
    -o-transition: all .4s ease-in;
    transition: all .4s ease-in;
}
#am2 a:hover{
    color:#fff;
    background-color: #01B0F0;
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    -khtml-border-radius: 5px 5px 5px 5px;
    padding: 2px 10px 4px 10px;
}
#am2 .curr_item a {
  color:#01B0F0;
  font-weight: bold;
}
#am2 .curr_item a:hover {
  color:#FFFFFF;
  font-weight: normal;
}

Est-ce possible de reproduire ces effets sous Guppy 5 ?

Merci.

Site essai v5
Rectifié par rod le 02/05/2014 @ 18:48
Ecrire à rod Site web rod
Poster une réponse Haut  

Réponse n° 1
--------
le 03/05/2014 @ 06:21
par Sabine

Sabine



Bonjour Rod,

Oui, on peut personnaliser les items de chaque boîte, voir ici dans le tuto (onglet "items de la boîte") : http://ghc.freeguppy.org/tuto50skins/articles.php?lng=fr&pg=133&tconfig=0

Sabine
Site web Sabine
Poster une réponse Haut  
Réponse n° 2
--------
le 03/05/2014 @ 08:35
par rod

rod

visiteur

Merci Sabine,
J'ai bien suivi le tuto, mais juste quelques précisions :

1) Quelle est la différence entre :
.MNU79 .curr_item : il me semblait que cela concernait l'item affiché mais les modifs n'engendrent rien

et

.MNU79 ul.item li.curr_item a : là effectivement les modifs sont prises en compte pour l'item affiché.


2)Je veux également personnaliser l'item sélectionné quand il est survolé :
J'ai donc rajouté :
MNU79 .curr_item a:hover {
  color:#FFFFFF;
  font-weight: normal;
}
Mais ça ne fonctionne pas...

(bien sûr j'ai remplacé 79 par le n° de ma boîte)
Rectifié par rod le 03/05/2014 @ 08:38
Ecrire à rod Site web rod
Poster une réponse Haut  
Réponse n° 3
--------
le 03/05/2014 @ 08:43
par Sabine

Sabine



Pour le lien hover, tu as mis # devant MNU561... il faut mettre un point.

Code : css
#MNU561 .curr_item a:hover { 
color:#FFFFFF;
font-weight: normal; }
 Sabine
Site web Sabine
Poster une réponse Haut  
Réponse n° 4
--------
le 03/05/2014 @ 08:49
par rod

rod

visiteur

Oups la boulette...désolé !
Même avec le point ça n'a pas eu d'effet...

Par contre en mettant
.MNU561 ul.item li.curr_item a:hover
Ca fonctionne.

Il y a donc une différence entre MNU561 .curr_item a et .MNU561 ul.item li.curr_item a ??
Rectifié par rod le 03/05/2014 @ 09:06
Ecrire à rod Site web rod
Poster une réponse Haut  
Réponse n° 5
--------
le 03/05/2014 @ 09:06
par rod

rod

visiteur

Je viens de remarquer pour l'item sélectionné, un espace avec la puce. Peut-on le supprimer ?

Merci.
Site web rod
Poster une réponse Haut  
Réponse n° 6
--------
le 03/05/2014 @ 09:55
par Sabine

Sabine



oui, on peut réduire l'espace avec "padding" (marge intérieure) pour les 2 sections de curr_item.

Sabine
Site web Sabine
Poster une réponse Haut  
Réponse n° 7
--------
le 03/05/2014 @ 15:12
par rod

rod

visiteur

Merci Sabine. En jouant avec le padding, c'est le texte que je ramène vers la gauche.
En fait, je voudrais pousser la puce de l'item sélectionné vers la droite.
Site web rod
Poster une réponse Haut  
Réponse n° 8
--------
le 03/05/2014 @ 20:49
par Sabine

Sabine



Bonjour,

Il faut ajout une marge à gauche (margin-left) à .curr_item (environ 25px).

Sabine
Site web Sabine
Poster une réponse Haut  
Réponse n° 9
--------
le 04/05/2014 @ 04:55
par rod

rod

visiteur

Bonjour Sabine,

C'est nickel !

Merci.
Site web rod
Poster une réponse Haut  
actif sujet actif   clos sujet clos   Important! Important!   Nouveau Nouveau message
Rectifier Rectifier message   Clôturer Clôturer sujet   Remonter Remonter  
Catégories de discussion  Forum  



Vous êtes ici :   Accueil » Forum » GuppY 5.0 » Vos questions » Personnaliser boîtes latérales