Widget Styling
-
Hi there, I’m a noob on here but have using/theming WP for some time. I’m in the process of creating a new theme, but EVERY attempt to style my widgets is failing.
The problem is that it’s a local installation so it’s not easy to share my code.
I’ve done this before but for some reason this time it won’t play ball.
Following a suggestion, I tried to specifically target all widgets using:ul li.widget{ display:block; background-color:white; padding:1em; }
But with no success. What am I missing?
-
Here’s the page source:
[Excessive code moderated. Please use a pastebin.]
Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.
Thanks for the suggestion, I’ve tried Firebug but it’s not helping. I’ve tried targeting the elements generically, their parents, the individual
<li>
s – all giving back nothing.I know this sounds stupid, but try verifying that your stylesheet is being linked correctly. If you’re using Chrome (Or Firefox with Firebug, as Esmi mentioned above) and you inspect an element, it will tell you what stylesheet it’s calling and even what line on the stylesheet itself. It’s at least a first step in debugging your code.
After that, I would try checking for unclosed styles such as:
.widget { background-color:#f4f4f4 <- No ending semicolon color: #000; <- No closing bracket .this { color #000; }
Unclosed styles oftentimes leave undesired results such as stopping any styles below them from being read.
The stylesheet is being called as other elements are working perfectly. Just NONE of the widgets.
Have you validated your site for mark-up or CSS errors – which can cause CSS to not work?
Pastebin added:
Markup validated without errors but still no dice. Thanks again for any assistance!
It almost not possible to give you assistance without seeing it on live site.
Can’t you setup a test installation with this theme?
I’ve temporarily activeated it at:
http://www.signalizeuk.com/about-us/Can you point me on which line of
style.css
is not getting implemented on your widgets?First thing I saw that your style.css is being called two times.
Also, there’s no selector in
signalize_bootstrap-1170.css
to point any widgets.There was a hard-coded link to the stylesheet plus an enqueue script call. Rectified now but for example, why won’t something like this work?:
#search-2 .widget_search {display:block;background-color:red;padding:.5em;}
Because there isn’t any ID defined ‘search-2’ in HTML.
Or perhaps I am not getting your point. :\
- The topic ‘Widget Styling’ is closed to new replies.