WordPress.org

Ready to get started?Download WordPress

Forums

Color Editing (9 posts)

  1. thesiegesound
    Member
    Posted 1 year ago #

    Greetings WordPress. I'm currently working with various color themes for my website and I'm trying to identify the white space that my header, body and sidebar float over (essentially the white area between my grey background and my rounded black borders). Here is my website - http://www.weareallmachines.com

    I would like to change the color of this area to match my grey background but I can't figure out what this area is called, nor is there a function within my theme(WPZOOM Meeta) that allows me to edit this area.

    What is this area called and where can I go in my editor to change the color? any help is greatly appreciated.

  2. elames
    Member
    Posted 1 year ago #

    You can download FIREBUG for Chrome and Firefox. I find this very helpful to see and edit the code right then and there. It doesn't change the style sheet, but you copy the code changes you make and then paste them to the style sheet.
    Good luck

  3. Good Guy
    Member
    Posted 1 year ago #

    It is called "class="wrap wide"" and you can put the background-color to this and everything would be fine.

    Good luck.

  4. thesiegesound
    Member
    Posted 1 year ago #

    Here is the code that I found in my editor under global styles

    .wrap {
    margin: 0 auto;
    width: 1060px;
    }

    .wide {
    margin-top: 60px;
    background: #fff;
    border: 1px solid #dadada;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);

    However, when I change my the background under .wide, it only affects the area that encompasses the sidebar and it also changes the color within the sidebar. I'm basically just trying to affect the areas outside the black rounded borders. How can I do this?

  5. Good Guy
    Member
    Posted 1 year ago #

    OK then try to put the color in body to color everything on the page and the contents will take the color defined in the css.

    body {
         background-color: red;
    }

    I didn't understand the question.

  6. thesiegesound
    Member
    Posted 1 year ago #

    Still not working for me. There is a second navigation inside of the meeta theme so I'm working on eliminating that. I think it's serving as s problem because it's another layer within side the floating space.

  7. Good Guy
    Member
    Posted 1 year ago #

    So you want to change all the white background to something else, right? If so then have a look at this picture:

    http://tinyurl.com/9cpyty8

    You can enter the hex code (or browse) for the color of your choosing.

    Hope this helps.

  8. thesiegesound
    Member
    Posted 1 year ago #

    nah.... I already know that. there is something else happening like WPZOOM Meeta theme has a built in second navigation layer. For instance, notice under my header image to the bottom right where you see the words "no categories". That is built into that layer. therefore, when you change the background color, that area does not change with it.

    I have to manually edit the color of parts of the website (index.php, header.php, sidebar.php) to find continuity in the color scheme. Merely changing the background color itself doesn't give the desired effect.

    If I can just eliminate this secondnav where it displays the "no categories" (which I find to be a useless edition to the Meeta theme), then I can solve most of my problems with the color scheme.

    I've tried identifying the area in firebug and then deleting the code. However, deleting the code through firebug does not delete the code permanently. If only I could just have my edits take effect through firebug then all the problems will be solved.

  9. Good Guy
    Member
    Posted 1 year ago #

    God knows what the question is but I disected the entire page and these color coding does the trick for the home page:

    .wrap, .wide {
    background-color: red;
    }
    .post-content {
    background-color: yellow;
    }
    #main {
    background-color: blue;
    }

    If you put the above code in your child theme, then you will be able to see the various colors to highlight the respective areas of the page.

    This is the picture I am getting:

    http://tinyurl.com/9985lo9

    It has also got a background color to know that area as well.

    Good luck and time to relax now for me.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.