Metro Header Text Widget Styling

[jeff9661]

In the Metro child theme I need to align the text widget in the header (phone number) to the right and make it bigger. This should be easy, but I'm not really identifying the proper class or ID (using Firebug). I'm looking at the rule at line 508 ( see below). When I try and separate out #header .widget, to style separately the whole layout falls apart.

http://acmesign.wwwsr4.supercp.com/wp-three/

.content-sidebar-sidebar #sidebar-alt,
.footer-widgets-3,
.home-middle-right,
.sidebar,
.sidebar-content #content,
.sidebar-content-sidebar #content-sidebar-wrap,
.sidebar-sidebar-content #content,
.sidebar-sidebar-content #content-sidebar-wrap,
#footer .creds,
#header .widget-area {
float: right;

}

[Bill Murray]

You can target it specifically with an ID of #text-13.

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[jeff9661]

Thanks Bill, that did work. The only problem is if the widget gets updated the target id changes and the CSS has to been updated. I've assigned a specific class within the widget area itself.  That also works, but can be tricky regrading specificity and the cascade, I had to use !important to get some of the style to work.

[Bill Murray]

1) You can change the text of the widget without triggering a new ID. The only thing that would trigger a new ID would be changing the widget that's there. And yes, if you change that widget, the ID will change.

2) Assigning a specific class in a text widget works too.

3) !important is best avoided here. Having to use it just means you haven't gotten the CSS specific enough.

4) From your original post, your problem might have been separating out the header styling. Instead of separating out, you can simply add new styling rules for this area. You presently have rules for ...

#header .wrap .widget-area #text-13 .widget-wrap

...which is ultra specific.

You could simply use ...

#header .widget-area

...which would make it less specific but therefore less likely to require changing due to just changing the widget. Of course, any widget change might require styling changes anyway.

If you find that your styling rules aren't working the way you expect, they might be getting mixed with your media queries for mobile responsive styling at the bottom of your stylesheet.

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[Author]

Posts