Gérer indépendamment les propriétés de chaque widget image

Statut : non résolu

Ce sujet contient 8 réponses, 3 participants et a été mis à jour pour la dernière fois par ty.blot, le il y a 13 années et 6 mois.

9 sujets de 1 à 9 (sur un total de 9)

Auteur

Messages

27 juin 2011 à 19 h 16 min #496732

ty.blot

Membre

Padawan WordPress

74 contributions

Bonjour,

voici mon site: Clos des vignes Amboise

ma petite carte repose sur fond gris, c’est apparemment celui lié à tous mes widgets. J’aimerais bien pouvoir contrôler le fond de chaque widget image, et plus particulièrement celui de ma carte

cordialement et merci d’avance de votre aide

Thierry

27 juin 2011 à 23 h 45 min #778566

arena

Participant

Maître WordPress

844 contributions

il faut changer le style.css de ton theme wordpress

et ajouter en fin de fichier

(pour un fond bleu)

div#sidebar > li#widget_sp_image-5 {
background-color: #0000FF;
}

pour un fond transparent

div#sidebar > li#widget_sp_image-5 {
background-color: transparent;
}

etc …

28 juin 2011 à 7 h 22 min #778567

ty.blot

Membre

Padawan WordPress

74 contributions

bonjour,

ok, ça fonctionne, et merci beaucoup de l’aide

autre détail:

j’ai pu aussi changé la couleur du texte, le mettre en italic, … mais au moment de passer en capitales, pas moyen !

alors, peut-on aussi modifier indépendamment les attributs du texte de chaque widget ?

cordialement

Thierry

28 juin 2011 à 8 h 29 min #778568

Li-An

Participant

Maître WordPress

28916 contributions

Peut aider:http://www.li-an.fr/wpplugins/plugins/dp-widget-plus/ ou http://www.li-an.fr/wpplugins/plugins/zig-widget-class/

28 juin 2011 à 15 h 10 min #778569

ty.blot

Membre

Padawan WordPress

74 contributions

bonjour Li-lan,

je vais télécharger le plug et je vous tiens au courant de la suite …

bien merci pour l’astuce

cordialement

Thierry

28 juin 2011 à 21 h 43 min #778571

ty.blot

Membre

Padawan WordPress

74 contributions

bonsoir Li-an,

j’ai installé le plug ZigClass.

Petit problème (qui vient de moi, bien sur …)

je suppose qu’il faut remplir la fenêtre « Zigclass » du widget, et qu’ensuite, l’on doit retrouver quelque chose de similaire dans la feuille CSS.

Mais je ne sais pas quoi mettre comme « ZigClass » . De plus, j’ai suivi le conseil d’Arena, et j’ai déjà rajouter une ligne de code (la dernière de la CSS). Dois-je laisser cette ligne ou la retirer si j’utilise ZigClass »?

Pouvez vous m’aider, ou me donner un exemple.

merci bien d’avance.

Voici ma feuille CSS

/*
Theme Name: picture-perfect_child
Description: Thème enfant pour picture perfect
Author: Thierry BLOT
Template: picture-perfect
*/

* {
list-style : none;
margin : 0;
padding : 0;
}
body {
text-align : center;
color : #521c3f;
font-family : Arial, « Lucida Grande », Tahoma, « Lucida Sans Unicode », Verdana, sans-serif;
background-color : #521c3f;
min-width : 1024px;
}
body a {
color : #5f518a;
text-decoration : none;
}
body a:hover {
color : white;
text-decoration : underline;
}
#upperBar {
height : 0;
background : #01bcff;
}
#wrapper {
text-align : left;
position : relative;
margin : 20px auto 0;
width : auto;
}
#welcomeheading a {
font-family : arial;
font-size: 14px;
color : #ebedff;
text-decoration : none;
}
#welcomeheading {
text-align : left;
position : absolute;
margin-left : 300px;
margin-right : 0;
margin-top : -14px;
}
#welcomeheading a:hover {
color : #999;
}
#middleword {
color : #909090;
}
#welcomeheading a:hover #middleword {
color : #fff;
}
#description {
font-family: Garamond, arial, Helvetica, Sans-serif;
font-size: 59px;
color : #ebedff;
margin-top : 27px;
position : relative;
}
#content {
margin-left : 290px;
margin-right : 310px;
float : none;
padding : 49px 0px 0px 2px;
display : block;
}
#content .notice p {
border-top : 1px solid #bbb;
border-bottom : 1px solid #bbb;
padding : 5px;
font-size : 12px;
margin : 1px;
}
#content .notice {
margin-bottom : 20px;
}
#content .post {
padding-top : 10px;
background-color : #b6b7bf;
border : 1px solid #521c3f;
padding : 10px;
margin-top : 20px;
margin-bottom : 20px;
height: 700px
}
#content form {
padding-right : 5px;
padding-left : 5px;
}
#content h1 {
color : #fff;
text-decoration : none;
font-size : 32px;
font-weight : bold;
padding-bottom : 20px;
}
#content h1, #content h2, #content h3 {
padding-bottom : 8px;
}
#content .post h2 a {
color : #fff;
text-decoration : none;
padding : 3px 0 8px;
font-size : 24px;
font-weight : bold;
}
#content .post h2 a:hover {
color : #999;
}
#content .post h3 {
font-size : 12px;
font-weight : normal;
color : #999;
margin-bottom : 0;
margin-top : 5px;
padding-bottom : 8px;
}
#content .post h3 a {
color : #999;
}
#content .post h3 a:hover {
text-decoration : underline;
color : white;
}
#content .post img {
margin-bottom : 10px;
margin-top : -5px;
}
#content .post .gallery {
overflow : auto;
}
.aligncenter, div.aligncenter {
display : block;
margin-left : auto;
margin-right : auto;
margin-bottom : 7px;
}
.alignleft {
float : left;
}
.alignright {
float : right;
}
.wp-caption {
border : 1px solid #ddd;
text-align : center;
background-color : #f3f3f3;
padding-top : 4px;
margin : 10px;
}
.wp-caption img {
margin : 0;
padding : 0;
border : 0 none;
}
#content p.wp-caption-text {
font-size : 11px;
line-height : 17px;
margin : 10px;
color : #000;
text-align : center;
}
#content .post ul {
margin-left : 20px !important ;
}
#content .post ul li {
list-style-type : disc !important ;
}
#content p, #content .post ul li {
font : normal 15px/20px Verdana, Helvetica, Sans-serif;
margin-bottom : 10px;
margin-top : 0;
color : #521c3f;
margin-right : 0;
text-align : justify;
}
#content blockquote {
margin-left : 10px;
padding-left : 10px;
font-style : italic;
color : #888;
background : #333;
padding : 2px 6px;
}
#content p a:hover {
text-decoration : underline;
color : #521c3f;
}
#content small {
margin : 0 auto;
text-align : center;
display : block;
border-top : 3px solid #333;
border-bottom : 1px solid #333;
font-size : 11px;
color : #999;
}
#content ol {
line-height : 1.6;
}
#content ol.commentlist {
margin-top : 10px;
}
#content ol.commentlist li {
margin-bottom : 10px;
display : inline-block;
margin-top : 20px;
}
#content ol.commentlist li .commentMeta {
width : 140px;
float : left;
margin-top : 5px;
}
#content ol.commentlist li .commentMeta span {
display : block;
}
#content ol.commentlist li .commentMeta span.author, #content ol.commentlist li .commentMeta span.author a {
color : #ccc;
text-decoration : none;
margin-bottom : 5px;
}
#content ol.commentlist li .commentMeta span.date a {
color : #666;
text-decoration : none;
font-size : 11px;
}
#content ol.commentlist li .commentText {
width : 400px;
float : right;
font-size : 12px;
padding-left : 20px;
}
#content ol.commentlist .avatar {
float : left;
}
#content h3 {
color : #999;
}
#content #commentform input {
padding : 5px;
font-family : Arial, Helvetica, Sans-serif;
}
#content #commentform textarea {
width : 410px;
padding : 10px;
font-family : Arial, Helvetica, Sans-serif;
}
#content .nextprevious {
height : 40px;
display : block;
margin-top : 20px;
font : normal 13px/20px Verdana, Helvetica, Sans-serif;
}
#content .nextprevious a {
color : white;
}
#content .nextprevious .left {
float : left;
}
#content .nextprevious .right {
float : right;
}
#content .adBrite {
display : block;
margin-bottom : 20px;
border : 1px solid #333;
}
#sitemeter {
text-align : center;
width : 160px;
font-size : 11px;
color : #999;
}
#sitemeter img {
padding-bottom : 8px;
padding-top : 8px;
}
#sidebar {
width : 210px;
float : right;
text-align : left;
margin-right : 60pt;
padding-top : 57px;
display : inline;
}
#sidebar li {
padding-left : 11px;
}
div#sidebar > li {
margin-top : 10px;
background-color : #b6b7bf;
border : 1px solid #424242;
padding : 0;
width : 225px;
text-align : left;
font-size : 15px;
}
#sidebar h2 {
font-weight : bold;
font-size : 17px;
text-align : center;
text-transform : uppercase;
margin-bottom : 10px;
padding-top : 8px;
}
#sidebar a img {
border : none;
}
#sidebar ul {
margin-top : 10px;
margin-bottom : 10px;
text-decoration : none;
}
#sidebar ul li {
font-size : 15px;
padding : 0 10px;
margin : 0 0 5px 5px;
text-decoration : none;
}
#sidebar ul li a {
color : #999;
text-decoration : none;
}
#sidebar ul li span {
color : #c8f70c;
margin-left : 5px;
}
#sidebar ul li a:hover {
color : #521c3f;
text-decoration : none;
}
#sidebar ul#nav {
margin : 10px 0 20px 0;
}
#sidebar ul#nav li {
margin : 0;
padding : 0;
}
#sidebar ul#nav li a {
display : block;
height : 17px;
padding : 7px 10px;
background : url(img/nav_off.png) no-repeat 0% 0%;
margin-bottom : 5px;
text-decoration : none;
font-size : 12px;
text-transform : uppercase;
font-weight : bold;
color : #999;
}
#sidebar ul#nav li a:hover {
background : url(img/nav_off.png) no-repeat 0% -31px;
}
#sidebar ul#nav li a.active {
background : url(img/nav_on.png) no-repeat 0% 0%;
color : #fff;
}
#footer hr {
height : 1px;
}
div#footer {
font-size : 11px;
float : none;
clear : left;
border : 1px solid #4d4d4d;
background-color : #b6b7bf;
padding : 5px 0 2px;
position : relative;
margin : 10px 310px 20px 290px;
}
#footer p {
margin-bottom : 5px;
color : #eee;
text-align : center;
}
#footer a {
color : #521c3f;
text-decoration : none;
}
#footer a:hover {
text-decoration : none;
color : #fff;
}
.clearfix {
clear : both;
}
.ctc {
text-align : center;
text-decoration : none;
line-height : 80%;
background-color : #000;
margin-bottom : 10px;
padding-right : 10px;
padding-top : 0;
padding-bottom : 10px;
}
.ctc a {
text-decoration : none;
text-transform : lowercase;
font-family : « Lucida Grande », Tahoma, « Lucida Sans Unicode », Verdana, sans-serif;
margin : 4px;
border : thin none #060606;
}
.ctc a:hover {
color : #fff;
margin : 3px;
border : thin solid #8acef3;
background-color : #0c0c0c;
}
[disabled] {
color : #dddddd;
border-color : #dddddd !important ;
background : none !important ;
}
#upperBox {
margin-bottom : 10px;
text-align : center;
position : absolute;
right : 0;
padding-top : 5px;
}
#upperBox a img {
display : block;
margin : 0 auto;
border : none;
}
#upperBox p {
margin : 5px 0;
font-size : 10px;
text-align : center;
}
#upperBox input {
height : 18px;
padding : 5px 5px 5px 25px;
background : url(img/upperBox_search.png) no-repeat left top;
border : 0;
width : 100px;
color : #999;
margin-top : 5px;
}
#upperBox input:focus {
color : #fff;
}
.clear {
clear : both;
}
h3 {
color : #ebedff;
font-family : Garamond, « Lucida Grande », Tahoma, « Lucida Sans Unicode », Verdana, sans-serif;
font-size : 22px;
margin-left : 382px;
margin-top : 168px;
position : absolute;
}
.widget_sp_image-description p {
padding : 6px 7px 7px 5px;
text-align : justify;
}
#dc_jqaccordion_widget-2-item {
border-top : 1px solid #013d6c;
border-right : 1px solid #013d6c;
border-left : 1px solid #013d6c;
}
#dc_jqaccordion_widget-2-item ul, #dc_jqaccordion_widget-2-item ul li {
margin : 0;
padding : 0;
border : none;
}
#dc_jqaccordion_widget-2-item ul a {
padding : 10px 10px 10px 15px;
background : #424242;
text-decoration : none;
display : block;
color : #fff;
border-bottom : 1px solid #013d6c;
border-top : 1px solid #4695d3;
}
#dc_jqaccordion_widget-2-item ul ul a {
padding : 10px 10px 10px 25px;
}
#dc_jqaccordion_widget-2-item ul a.dcjq-parent, #dc_jqaccordion_widget-2-item ul a.dcjq-parent:hover {
padding : 10px 10px 10px 15px;
}
#dc_jqaccordion_widget-2-item ul a.dcjq-parent.active {
background : #0d5995 url(skins/images/checkers.png) repeat 0% 0%;
}
#dc_jqaccordion_widget-2-item ul a:hover {
background : #b6b7bf;
}
#imageMenu {
width : 240px;
overflow : hidden;
background-color : #521c3f;
border-style : none;
height : 708px;
float : left;
text-align : left;
border-bottom-style : solid;
border-bottom-width : 1px;
left : 24px;
position : fixed;
margin : 0;
padding : 0;
margin-top : 32px;
}
#imageMenu ul {
list-style : none;
display : block;
height : 100px;
margin : 0;
padding : 0;
}
#imageMenu ul li {
border-top-style : solid;
border-top-width : 1px;
}
#imageMenu ul li a {
background : #ffffff none repeat scroll 0%;
border-right : 2px solid #fff;
cursor : pointer;
display : block;
overflow : hidden;
width : 240px;
height : 100px;
font-weight : inherit;
font-style : inherit;
font-size : 100%;
font-family : inherit;
vertical-align : baseline;
font-weight : bold;
font-size : 19px;
font-family : Garamond, « Helvetica Neue », Arial, Helvetica, Geneva, sans-serif;
color : #521c3f;
text-align : left;
text-indent : 10px;
margin : 0;
padding : 0;
}
#imageMenu ul li.bk1 a {
background : url(images/1.jpg) repeat scroll;
}
#imageMenu ul li.bk2 a {
background : url(images/2.jpg) repeat scroll;
}
#imageMenu ul li.bk3 a {
background : url(images/3.jpg) repeat scroll;
}
#imageMenu ul li.bk4 a {
background : url(images/4.jpg) repeat scroll;
}
#imageMenu ul li.bk5 a {
background : url(images/5.jpg) repeat scroll;
}
#imageMenu ul li.bk6 a {
background : url(images/6.jpg) repeat scroll;
}
#imageMenu ul li.bk7 a {
background : url(images/7.jpg) repeat scroll;
border-right-style : none;
}	

div#sidebar > li#widget_sp_image-5 {
background-color: transparent;
font-style: italic;
color:#D8E620;
border:none;

}

cordialement

Thierry

29 juin 2011 à 7 h 10 min #778570

Li-An

Participant

Maître WordPress

28916 contributions

En effet, vous pouvez mettre n’importe quel nom de classe pour chacun des widgets. Il faut juste que ça ne recoupe pas une classe déjà utilisée.
Par exemple « classe-widget-1 » ou « ananas » si le coeur vous en dit.
Ensuite, dans votre fichier css vous définissez votre classe du genre:

.ananas {
color: black;
etc…
}

Ça peut être indépendant de la ligne rajoutée. À vous de faire des essais, de potasser le CSS et SURTOUT, de faire des sauvegardes de vos fichiers de départ en cas de problème (tester à chaque modif).

29 juin 2011 à 16 h 24 min #778572

ty.blot

Membre

Padawan WordPress

74 contributions

merci de la réponse et je teste

thierry

29 juin 2011 à 18 h 15 min #778573

ty.blot

Membre

Padawan WordPress

74 contributions

bonsoir Li-lan,

Ça fonctionne .

Cependant, et d’après le contenu original de mon CSS, j’ai du apporter des modifs sur certains aspects CSS de la Sidebar pour que chaque widget sous « Zigclass » puissent e^tre gérer indépendemment.

Donc, malgré ces réglages , c’est ✅

merci bien et à la prochaine

cordialement

Thierry

(j’ai fait une save de mon ccs au cas ou !!! )

Auteur

Messages

9 sujets de 1 à 9 (sur un total de 9)

Vous devez être connecté pour répondre à ce sujet.