unique styling of a specific widget

Here are your unique IDs of your widgets https://snag.gy/8YMnF.jpg (look at HTML in bottom toolbar)

thanks for replying Andrew,

but where do i find them (in what file that is).
if i understand correctly i need to give the the class widget.unique?

Try a CSS-specific forum to brush up on your understanding of CSS.

thanks, when i finally managed to change the class (using ‘widgit logic’) my widget disappears. any idea what’s wrong with the style i defined?

.widget.unique {
background: #FFFFFF; no-repeat scroll left bottom;
margin: 0 0 15px;
padding: 0 0 30px;
}

Run your CSS through a syntax checker like that provided by W3C https://jigsaw.w3.org/css-validator/

As these are not WordPress-related issues, reconsider the CSS-specific forum (above).

the css class .unique simply does not appear in the html output of your site in the browser. (full stop; period; end-of-story)

which widget are you targeting?
with this info, somebody could have presented a solution within minutes (probably rahter wihin seconds).

you will need to find the specific css id or class of that specific widget and use it in the stylesheet.

working with a browser inspection tool such as Firebug might be useful for finding the css information.

yes i got this – but this is not a CSS issue:

whenever i change the class of the widget (regardless of the CSS i now realize) – the widget itself does not show.

any thoughts?

whenever i change the class of the widget

how are you doing that?

and which widget are you changing?

is that part of the ‘widget logic’ plugin ?

yes sir, i used the ‘widget logic’ plugin to rename the class to ‘widget.unique’

I just installed the plugin, and there is no option to add a class to a widget with ‘widget logic’;

the field that appears per widget, is for a logic expression to define where the widget is supposed to show up.

please tell us which widget you want to style differently, so somebody can give you the exact css styles to achieve this.

there’s a widget called text box, i added the text “test” in it.
i just want to get rid of it’s picture background…
many many thanks!

that particular textwidget has teh css id #text-5;

so you could use the style:

#text-5 {
background: #FFFFFF;
    margin: 0 0 15px;
padding: 0 0 30px;
}

to find those specific css ids, look into the html output of your site in the browser (‘view’ – ‘view source’ or similar in the browser toolbar):

this is the corresponding output of that textwidget:
<div id="text-5" class="widget-1 widget-first widget-odd widget widget_text"> <div class="textwidget">test</div>

that indeed did the trick.

thank you so much alchymyth !! really appreciated!

Jon