WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Colored boxes/border around content and widget area (10 posts)

  1. mgray1122
    Member
    Posted 1 year ago #

    I recently changed my site, http://www.eatingwithgrace.com, from the Bouquet theme to a Bouquet child theme (probably not the best idea, but my client really wanted the Bouquet theme and I didn't think I could rebuild it from a basic theme like Sandbox). I was sure to copy any changes I made in the .css and .php files, but I've had a few issues with the change: there is now a light blue (default color from original Bouquet theme) border around my content box and behind my widget area. It wasn't like that before I made the change to the child theme, and I copied my .css file from my old Bouquet theme before I changed to the child one so that I wouldn't lose any of the style changes I had previously made.

    Any thoughts on how to get ride of those weird borders? Thanks!

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    That color is coming from here:

    #content {
        background: none repeat scroll 0 0 #EDF6FE;
    }

    and here:

    #main .widget-area {
        background: none repeat scroll 0 0 #D0E6FA;
    }

    So copy the above code to the child theme and change or remove the color -- or if you have the entire style.css file there, find the above and change it.

  3. mgray1122
    Member
    Posted 1 year ago #

    I added the above code to the child theme CSS, but it still didn't change the color. I noticed in the "Inspect Element" for the site that is says:

    #content {
    background: #EDF6FE;}

    which is causing the light blue border around the content. However, I can't find that anywhere in my style sheet. It looks like it may be coming from a different stylesheet altogether (the URL next to it says forget-me-not.css:1). I'm not quite sure what that means or how it's taking code from a different stylesheet. Any thoughts?

    Thank you so much for your help!

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    That code is coming from this stylesheet:

    http://eatingwithgrace.com/wp-content/themes/bouquet/colors/forget-me-not/forget-me-not.css

    That appears to possibly be a color scheme option in that theme?

    So possibly try using the !important in the code you add to your child theme stylesheet -- this will override all other color code on that element:

    #content {
        background: #XXXXXX !important;
    }

    I'd strongly suggest that you learn how to use Firebug and brush up on basic CSS :) -- especially if you are doing this for a client?

  5. mgray1122
    Member
    Posted 1 year ago #

    Thank you SO much- that worked perfectly! Yes, that code was coming from the stylesheet for a color scheme option.

    I will look into Firebug, and definitely learn some more CSS. I don't have a lot of experience with it and was originally only supposed to switch this site over to a Wordpres format for blogging purposes, but got in a little over my head when the client wanted to change a few colors and I learned that you lose your css changes when you install theme updates (which is why I created the child theme)!

    Thanks again for saving me!

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You're welcome and learning is what it's all about :)! Firebug truly is a GREAT help with CSS -- I can't imagine how anyone does anything without it (or another equivalent tool)...

  7. mgray1122
    Member
    Posted 1 year ago #

    One more question- sorry!

    So, after I applied that bit of code that you gave me, it got rid of most of the colored boxes. However, there is still a colored border around the main widget area that I can't seem to get rid of.

    I went in and played a bit with Firebug, and I was able to find out that there is a 5px border in the #secondary wrapper that is causing that border around my widget area. Once I set the border to 0px in the "Layout" option of Firebug, it goes away and then there's a box shadow, which I can get rid of by setting box-shadow: none.

    However, I tried making those changes in the live edit of Firebug, but it doesn't work! I even went back to the WordPress theme editor and tried the code there, but that border is still there.

    Perhaps I am doing something wrong in Firebug? It is completely new to me and am still figuring out how to navigate it.

    Thanks again!

  8. mgray1122
    Member
    Posted 1 year ago #

    Oh, nevermind, got it! I needed to edit the main widget area, not the secondary wrapper...still getting used to this!

  9. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You cannot make changes in Firebug permanent -- you can use it to test changes to the CSS code. Then you have to go into the CSS file and make the same changes. Looks like you fixed whatever was not working -- there are no borders now.

  10. mgray1122
    Member
    Posted 1 year ago #

    Oh, okay. For some reason I thought you could make permanent changes in Firebug. It was very helpful in finding the solution to that border issue though!

    Thank you again for all your help- I appreciate it!

Topic Closed

This topic has been closed to new replies.

About this Topic