WordPress.org

Forums

[resolved] 2011 - Changing the color of the 'background' page when using rounded corners (5 posts)

  1. bnabound
    Member
    Posted 2 years ago #

    Hi everyone,

    I'm a complete newbie at this and am attempting to create a website using the Twenty Elven theme.

    I have created a child theme and am making all my changes there and I am using Firebug to try and figure out which elements I need to change.

    However this one thing has got me stumped - I've been working on this for hours and am none the wiser! I'm in desperate need of help please!

    I am using the Twenty Eleven Theme Extensions plugin and under Theme Options I have changed the Page Background Color to red. (This was just to help me figure out which things I'm changing as I go along, no worries, the red won't stay!)

    Here's the screenshot of the problem. The arrows point to the area that I'm desperate to change but don't seem to be able to.

    screenshot

    I would like the content of the entire site to have rounded corners and I have used the following code in my child theme:

    #primary {
    		-webkit-border-radius: 30px;
    		-moz-border-radius: 30px;
    		border-radius: 30px;
    		-webkit-box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .8);
    		-moz-box-shadow: 2px 4px 8px 2px rgba(0, 0, 0, .8);
    		box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, .8);
    }

    It looks garish but helped me figure out that there seems to be a difference between the post/page and whatever is behind it.

    What I would like is to have (to use this screenshot as example) the post in red with rounded corners and the non-rounded current red background be the darkish blue I have on the rest of the page.

    I'm also quite happy to find a way to round those non-rounded red edges as this would yield the same result.

    I'd appreciate any help you guys can give me... I'll be losing my mind pretty soon otherwise!

    Many thanks in advance,

    Maria

  2. Andrew
    Forum moderator & snail smusher
    Posted 2 years ago #

    This forum specialises in CSS support.

    CSS queries this specific are beyond the scope of WordPress' forums.

  3. bnabound
    Member
    Posted 2 years ago #

    Thanks for that Andrew, I will trawl through that forum as well.

    However I don't see how this is not a WordPress question since it's part of the Twenty Eleven theme! There are so many queries here about very similar problems, I don't think mine is any different.

    Just in case there's any doubt, I need to understand how to differentiate between the background behind the rounded corners and the actual post (within the rounded corners). Which code in the theme is responsible for that?

    If anyone else could have a look at my problem and make any suggestions, I'd very much appreciate it!

  4. WPyogi
    Forum Moderator
    Posted 2 years ago #

    It's really impossible to answer CSS questions like this without seeing the actual site. Images don't let us see what's going on with the CSS code. If you can't post a link to the site, try using Firebug -- which will help you look at what's going on with the CSS code in those areas.

  5. bnabound
    Member
    Posted 2 years ago #

    @WPyogi - Thanks for trying but if you read the full description of my first post you will notice I mentioned I was already using Firebug and was still tearing my hair out.

    Either way after 5 hours I've finally figured it out. For anyone that might come across the same problem:

    The reason the red was showing even behind the rounded corners, is because the #primary background color was set to red AND the #page background color was also set to red. The parameter in #page covers the entire area, whereas the one in #primary only covers the actual space of the post/page. Once the two background-color parameters are set to the correct colors, the result looks just like I've wanted it to look like (see here with proper colors!)

    solution screenshot

    To make it look like the above screenshot, I now have the following code:

    #primary {
    		-webkit-border-radius: 30px;
    		-moz-border-radius: 30px;
    		border-radius: 30px;
    		background-color: #FFFFFF;
    }

    and

    #page {
        background-color: #3C4659;
    }

    Hope this helps someone save 5 hours of frustrations!

Topic Closed

This topic has been closed to new replies.

About this Topic