• 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?

Viewing 15 replies - 1 through 15 (of 17 total)
  • Thread Starter dvmac

    (@dvmac)

    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.

    Thread Starter dvmac

    (@dvmac)

    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.

    Thread Starter dvmac

    (@dvmac)

    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?

    Thread Starter dvmac

    (@dvmac)

    Thread Starter dvmac

    (@dvmac)

    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?

    Thread Starter dvmac

    (@dvmac)

    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?

    Thread Starter dvmac

    (@dvmac)

    I’m using an @import to bring in an additional stylesheet:
    @import url(‘includes/css/signalize_bootstrap-1170.css’);

    Line 130 for example. Or 257. I’m clutching at straws now :/

    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.

    Thread Starter dvmac

    (@dvmac)

    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. :\

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Widget Styling’ is closed to new replies.