WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Eleven Sidebar color (13 posts)

  1. rickcosmos
    Member
    Posted 1 year ago #

    Hey Folks,
    I'm working on my site locally and have created a child theme from the Twenty Eleven theme. I'm trying to change the side bar color and I've found that if I change the .widget-area class it works great.

    The theme is responsive so I've been testing my site by reducing my browser window. At the point when the layout adjusts itself and the sidebar drops to the bottom of the page the background color ends up behind the Article tag - i.e. the post. I want there to be no background color behind the posts.

    I appreciate your help.
    Rick

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    There's really no way to help very specifically with something like this without seeing the actual site live. But you can try using Firebug to look at what's happening with the layout when it is resized. Also be sure that your pages don't have any coding errors as they can cause problems with how the CSS is working:

    http://codex.wordpress.org/Validating_a_Website

  3. rickcosmos
    Member
    Posted 1 year ago #

    WPyogi,
    There's not really much to show. The only change has been to create a child theme style.css and change the widget-area class

    /*
    Theme Name: Child Theme
    Description: A Child of Twenty Twelve
    Author: Rick Cosmos
    Version: 0.0.1
    Template: twentyeleven
    */
    @import url('../twentyeleven/style.css');

    .widget-area {
    background-color: #FF4400;
    }

    Any help is appreciated.
    R

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    If you want help with it, someone will likely need to look at the live site and the problem you are describing. Even if it's an "unchanged" twentyeleven page, it's not going to be identical to any other site/page.

  5. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Hey Rick,
    I looked at a twentyeleven site and tried to duplicate what you are describing - didn't appear obvious. Do you mean that the sidebar runs into the article in the main content section of the page?

  6. rickcosmos
    Member
    Posted 1 year ago #

    WPyogi,
    No it doesn't run into the main content, instead the color I assign to the side bar ends up being the background color of the main content once the sidebar drops below the main content.

    R

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Hmm, that should not be happening, and these things are so hard to diagnose remotely :( . It may be that you have a missing or unclosed tags or some other mark-up (HTML) errors -- they can easily happen when you are adding widgets or content to widgets. Try using Firebug to look for HTML errors on your page or copy the rendered HTML code (use view source and then copy/paste) to the w3c validator:

    http://validator.w3.org/

  8. rickcosmos
    Member
    Posted 1 year ago #

    WPyogi
    I'm using google Chrome to figure out what's what. I'm wondering if the results I'm getting are do to the fact that I'm testing the responsiveness on Chrome's browser window and not an actual smart phone.

    As you suggested I dropped my code into w3c validator and though it came up with 6 errors but nothing that I recognized as a HTML code error. It was stuff like: Duplicate ID searchform, etc.

  9. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Personally, I prefer Firebug/Firefox over Chrome, but Chrome should be fine too. I'm only looking on a resized desktop browser too -- but that should be okay for testing. So no missing tags or anything like that? It's also possible that Chrome is "fixing" missing tag problems when rendering the HTML. In Firefox, it does that, but they are in red when you use View Source...don't know if Chrome shows that. There may actually be a tool for validating code -- so check for that. Duplicate ID's should be corrected as well -- you can only have one instance of an ID on a page...it won't cause problems, but valid code is always better :).

    You could also validate your CSS just to be sure it's not something there.

  10. rickcosmos
    Member
    Posted 1 year ago #

    WP-
    As luck would have it I had Firebug loaded also. I I did the validation and the errors I received where:

    Line 98, Column 201: Attribute pubdate not allowed on element time at this point.

    Line 110, Column 203: Bad value category tag for attribute rel on element a: The string category is not a registered keyword or absolute URL. Whitespace in path component. Use %20 in place of spaces.

    Line 150, Column 116: Bad value generator for attribute rel on element a: Not an absolute IRI. The string generator is not a registered keyword or absolute URL.

    Can't say it was anything I did.
    R

  11. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    No those are not you or causing the issue. Nor a problem really. I'll try to think about this one! No bright ideas right now.

  12. rickcosmos
    Member
    Posted 1 year ago #

    WP-
    I appreciate all the help and look forward to more ideas. Once I'm done tweaking everything I can I'll upload the site and see if the problem still exists.

    THanks,
    Rick

  13. rickcosmos
    Member
    Posted 1 year ago #

    WP-
    Exploring my page with Chrome, what it really looks like is the code
    <div id="secondary" class "widget-area" role="complementary"> takes over the post area when the browser is reduced horizontally.

    Hope that makes sense.
    R

Topic Closed

This topic has been closed to new replies.

About this Topic