WordPress.org

1. mgray1122
   Member
   Posted 7 months 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 7 months 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 7 months 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 7 months 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 7 months 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 7 months 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 7 months 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 7 months 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 7 months 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 7 months 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!

Reply

You must log in to post.