Styling individual Widgets

[barbeluk1]

Hi,

I’m trying to learn how to style individual widgets and have searched the forum, but nothing I’ve tried so far is working. I must be doing something wrong.

I’m working on this test site:

http://specialistfishingworld.co.uk/

I want to style the widget at the top of the sidebar (newsletter sign up). I go to Firefox, gone to Firebug and come up with the following based on what Firebug says the widget is called and the class it uses:

#easysignup-widget-2 .widget-1 widget-first widget-odd widget easysignup widget-1 widget-first widget-first-vert widget-odd {border-bottom:1px solid #7A6E6E;}

I’ve put the above in the custom CSS on on the Fonts & Custom page.

Where am I going wrong please!? 

Many thanks,

Andy 

[scrambler]

You need to learn a minimum of CSS to be able to understand what the browser developer tool gives you.

It tells you two things. All the classes use by the widget and the ID of the widget if it has one.

In your case the most useful is the ID of the widget which is #easysignup-widget-2

So your rule (to be placed in Main Options > Fonts & Custom > Custom CSS Rule box) should be

#easysignup-widget-2 {border-bottom:1px solid #7A6E6E;}

Sometimes when the rule does not work it is because there is a weaver rule that takes precedence. In that case you can try to add !important to each property (with a space) like

#easysignup-widget-2 {border-bottom:1px solid #7A6E6E !important;}

Wen you see classes=”widget-1 widget-first widget-odd right widget easysignup widget-1 widget-first widget-first-vert widget-odd”

This is not one class, but several, when listed in the class attribute, they are separated by a space.

When you build a rule, you use a number of selectors followed by properties inside curly brackets

selectors {properties}

The selectors can include one or more selectors (classes or IDs), but there is a logic on how you combine them. If selectors are on the same item, there should be no space between them. So if for example you decided you needed to use both the ID and the widget-1 class, the selector would be

#easysignup-widget-2.widget-1

When selectors are not on the same objects, then they area separated by a space, but must be in order or the HTML hierarchy.

For example a rule

selector1 selector2 selector3 {properties}

Applies to an object that has the selector3, and has a parent with the selector 2, which itself has a parent with the selector1.

If you want to learn more about using the browser developer tools, read the thread below, and review the reference site at the bottom.

http://forum.weavertheme.com/discussion/1207/basic-tips-on-using-the-developer-tools-like-firebug-to-resolve-styling-issues

[Bobthearch]

You might be interested in this plugin, Widget Customizer.  https://wordpress.org/plugins/asd-123-456-widget/
The free version allows such custom functions as rounded borders, border color, and background color.  The Premium version has much more functionality, but I’ve never used that.
When you place this into any widget area, the customizations apply to the very next widget only.  I successfully use this with WeaverX.

[Author]

Posts