S'identifier - S'inscrire - Ecrire un article - Contact

Affichage des articles par vignettes - Résolu

Par rap • Aide • Lundi 21/04/2008 • 16 commentaires  • Lu 2503 fois • Version imprimable


Bonjours à tous, j'aimerais savoir comment configurer l'affichage des articles par vignette, voila le code que j'utilise :

[ [afficher les articles] ].[ [mots-clés] ].images(image;titre)

Le problème c'est que les vignettes et le titre apparaissent dans un cadre blanc et la couleur de fond de mon article est noir, j'aimerais donc savoir comment faire pour rendre ce cadre de la même couleur que l'article.

Merci.

Commentaires

css par OlivierMG le Lundi 21/04/2008 à 11:24

OlivierMG Apparemment, le tableau des images est dans une classe "similar_articles_by_keywords hoverbox", dans la feuille /public_images/hoverbox.css, tu pourrais donc peut-être ajouter du css dans ton modèle pour modifier l'affichage.


Re: css par rap le Lundi 21/04/2008 à 11:26

rap Oui mais qu'est-ce qu'il faut utilisé comme nom dans le css ?


par rap le Vendredi 02/05/2008 à 20:23

rap Bon j'ai testé un peu des truc dans le css et j'ai remarqué que ".image" paramètre la vignette mais je n'arrive pas à paramétrer l'ensemble.

Dans le code html final, l'affichage apparait dans les balises : <ul class="hoverbox"><li><div class="image"></div>/li></ul>


Re: par mitra le Vendredi 02/05/2008 à 22:56

Rap,

J'ai fait un essai en rajoutant "border: none;" au CSS de ma liste qui est dans un "sidebar_lrg" et ça a l'air de marcher.

Si tu as un problème de fond gris, il suffit de mettre le fond en transparent : "background-color: transparent;"

Ainsi, ça donnera :

#sidebar_lrg ul li {
...
background-color: transparent;
border: none;
...
}


Re: par Jean-Luc le Dimanche 04/05/2008 à 12:31

Jean-Luc Je n'ai pas de "sidebar_lrg" dans ma CSS ! Comment je peux faire aussi pour afficher les vignettes mosaïques sans bordure et avec un background transparent ?


Re: par rap le Dimanche 04/05/2008 à 12:42

rap Moi non plus j'ai pas de "sidebar_lrg"


Re: par OlivierMG le Dimanche 04/05/2008 à 13:15

OlivierMG "sidebar_lrg" est le nom de la colonne de blocs large du modèle ithème. Pour les autres modèles, il suffit que tu remplaces "sidebar_lrg" par le nom de la colonne de blocs ("sidebar", "column", "column_left", etc.) utilisé par ton modèle.

EDIT : bien sûr, si ta mosaïque est dans un autre type de bloc, il faut utiliser le nom de ce bloc à la place de sidebar. ça peut être aussi appliqué directement à tout le blog, avec par exemple un #main ul li{.....} ,si par exemple toutes les colonnes sont dans un ensemble "main", mais attention, dans ce cas, ce style sera appliqué à tous les éléments de toutes les listes du blog.


par rap le Lundi 05/05/2008 à 19:23

rap Bon j'arrive toujours pas à paramétrer ces vignettes, mon skin est personnalisé donc j'ai configurer moi même les couleurs de fond pour tous les blocs, mes articles apparaissent dans une div class avec une image de fond mais les affichages d'articles avec vignettes apparaissent toujours dans un fond blanc, quoi que je fasse.

Il y a bien un moyen pour paramétrer ces vignettes, logiquement on pourrait même changer la taille des miniatures et la façon dont elles apparaissent lorsqu'on pointe la souris dessus non ?


Re: par mitra le Lundi 05/05/2008 à 21:43

Peux-tu m'envoyer ton modèle personnalisé pour voir si je peux le faire (cliquer sur le contact sur karafarin.viabloga.com) ? C'est vrai que parfois on n'arrive pas à faire faire aux css ce que l'on veut ! J'ai toujours pensé que c'est parce que je ne maîtrisais pas assez !

Par contre, je ne sais pas si on peut changer la taille des miniatures !


par rap le Mardi 06/05/2008 à 17:34

rap

 


Re: par mitra le Mardi 06/05/2008 à 18:16

rap,
Peux-tu (aussi) nous mettre un lien vers la page de ton blog qui pose problème ?


Re: par rap le Mercredi 07/05/2008 à 16:58

rap http://rap.viabloga.com/news/test-affichage


Re: par mitra le Mercredi 07/05/2008 à 17:12

As-tu déjà essayé dans ton css externalisé (<link rel="stylesheet" href='/public_images/hoverbox.css' type="text/css" media="screen, projection" />) de remplacer :

.hoverbox li
{
background-color: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;

    color: inherit;
    display: inline;
    float: left;
    margin: 3px;
    padding: 5px;
    position: relative;
    width:155px;
}
Par :
.hoverbox li
{
background-color: transparent;
border: none;

    color: inherit;
    display: inline;
    float: left;
    margin: 3px;
    padding: 5px;
    position: relative;
    width:155px;
}


Re: par rap le Mercredi 07/05/2008 à 19:15

rap Et on fait comment pour modifier ce css ?


Re: par Stephane le Mercredi 07/05/2008 à 19:33

Stephane Tu mets les styles sur des éléments encore plus précis dans ton CSS à toi :

#tonelement .hoverbox li {
   tes css
}

si ta définition est plus spécifique, elle prendra le pas sur celles qui sont définies dans le fichier externe pour .hoverbox 


Re: par rap le Jeudi 08/05/2008 à 11:44

rap Merci Stéphane ça marche super bien



Session

Pour participer plus facilement, ouvrez une session :

Identifiant de
mon blog
Nom d'utilisateur
Mot de passe

Si vous avez déjà un blog sur ViaBloga ou si vous avez ouvert un compte sur l'un d'entre eux, vous pouvez vous identifier avec votre nom d'utilisateur et mot de passe en précisant d'abord l'identifiant de votre blog.

S'inscrire

Ailleurs sur ViaBloga


Archives par mois