Affichage des articles par vignettes

Affichage des articles par vignettes - Résolu

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.

rap

| Aide | Le Lundi 21/04/2008 | 16 commentaires | Lu 220 fois

Commentaires

css

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.

OlivierMG | Le Lundi 21/04/2008 à 11:24 |

| Répondre

← Re: css

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

rap | Le Lundi 21/04/2008 à 11:26 |

| Répondre

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>

rap | Le Vendredi 02/05/2008 à 20:23 |

| Répondre

← Re:

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;
...
}

mitra | Le Vendredi 02/05/2008 à 22:56 |

| Répondre

← Re:

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 ?

Jean-Luc | Le Dimanche 04/05/2008 à 12:31 |

| Répondre

← Re:

Moi non plus j'ai pas de "sidebar_lrg"

rap | Le Dimanche 04/05/2008 à 12:42 |

| Répondre

← Re:

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.

OlivierMG | Le Dimanche 04/05/2008 à 13:15 |

| Répondre

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 ?

rap | Le Lundi 05/05/2008 à 19:23 |

| Répondre

← Re:

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 !

mitra | Le Lundi 05/05/2008 à 21:43 |

| Répondre

←

rap | Le Mardi 06/05/2008 à 17:34 |

| Répondre

← Re:

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

mitra | Le Mardi 06/05/2008 à 18:16 |

| Répondre

← Re:

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

rap | Le Mercredi 07/05/2008 à 16:58 |

| Répondre

← Re:

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;
}

mitra | Le Mercredi 07/05/2008 à 17:12 |

| Répondre

← Re:

Et on fait comment pour modifier ce css ?

rap | Le Mercredi 07/05/2008 à 19:15 |

| Répondre

← Re:

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

Stephane | Le Mercredi 07/05/2008 à 19:33 |

| Répondre

← Re:

Merci Stéphane ça marche super bien

rap | Le Jeudi 08/05/2008 à 11:44 |

| Répondre

Session

Pour participer plus facilement, ouvrez une session :

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.