Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Changing page colours..

  1. monaleasaa
    Member

    Hi, I new to CSS, but I having fun and it actually makes sense to me.. go figure..lol... Anyway I am using the "Twenty Eleven's" template and I have all my pages set up and they look good. I found that the limitations of the template could be modified by applying CSS. And what I've done so far works. The problem that I have at the moment is that all my pages back gound colour went from Black to White.

    My question is, do I apply the actual colour code to each "back ground" reference and if so, is there a search function that will help me?

    Thanks, Monaleasaa

    The blog I need help with is millgrovewoodproductsltd.wordpress.com.

  2. timethief
    Member

    The blog linked to your username is not wearing the Twenty Eleven theme. Please post an active link starting with http:// to the blog in question so Staff will find it when they enter this thread to help you.

  3. monaleasaa
    Member

    sorry .. i didn't put in the proper link...

    hope that is correct... thx

  4. monaleasaa
    Member

    Millgrove wood products ltd.

  5. timethief
    Member

    Thank you. Staff can access private blogs if required to do so and it's Staff who will be helping you with your CSS editing.

  6. monaleasaa
    Member

    Well I changed all the colour references to the background to "#0a0000" (black) and it worked... neet...

    now I need to figure out how to change all the "tab and Text" colours to White....

    Also, I would like to remove the "search" box... can i do this by deleting the CSS code for them or is that done only in HTML?

    Thanks,,,

  7. designsimply
    Staff

    now I need to figure out how to change all the "tab and Text" colours to White....

    Looks like you've figured out how to change the top menu background to black and link colors to white. Do you still need any help with that part?

    To change the color of the submenu items in the top menu to white, add this:

    #access ul ul a {
  color: #eee;
}

  8. designsimply
    Staff

    Also, I would like to remove the "search" box... can i do this by deleting the CSS code for them or is that done only in HTML?

    In the Twenty Eleven theme, there is a search form built into the header area. That one you need to remove with CSS. This should do the trick:

    #branding #searchform {
  display: none;
}

  9. monaleasaa
    Member

    WOW... thanks for both replies... I'm sure, now that I know what I'm looking for, I can fix it.... Cheers... and thanks,..

  10. designsimply
    Staff

    Sweet. Check out the web inspector built in to your browser if you're using Chrome or Safari, or check out Firebug if you use Firefox. Stuff like that is super handy when working with CSS.

  11. monaleasaa
    Member

    How do I get the main header not to "word wrap?". I have tried different size fonts but that doesn't work... it seems like there is something at the right side that is creating the word wrap..

  12. designsimply
    Staff

    This should fix it:

    #site-title {
  margin-right: 0;
}

  13. monaleasaa
    Member

    thanks,... I want you to know that I am not just copying the code and inserting it, I am actually trying to find the reference in your code... but that is a real challenge especially with this much code... lol... so my question is:

    is the a "search code/string" that I can use to help me find what I'm looking for within the CSS code?

    The reason I want to find the reference is to, see and learn, the "logical layout" of the CSS format. I need to know what comes first, second, etc...

    It's a quirk that I have... Thanks very much... :)

  14. monaleasaa
    Member

    Well I looked up your reference.... "site title" and found it and then change the value to 0 and it worked... YES ... What i find a bit confusing is the wording that is used... like using Header on the Dashboard and then using Site Title in CSS... i'm just trying to figure out what all the references mean.... lol... thanks...

  15. designsimply
    Staff

    is the a "search code/string" that I can use to help me find what I'm looking for within the CSS code?

    That's one way, yes.

    I would recommend a couple things. One, use the original stylesheet link below the editor on the Appearance → Custom Design → CSS page to see how the theme author added code.

    If you use one of the tools I mentioned, the browser web inspector or Firebug for Firefox, then you can right-click on an element on a page and select 'Inspect Element' and it will show you the HTML for what you clicked on as well as all of the relevant CSS that applies to that element. The nice thing about that view is that you can see what later CSS overrides earlier CSS because if something gets overridden it will show up crossed out.

  16. designsimply
    Staff

    i'm just trying to figure out what all the references mean

    I think that's great!

    In CSS, you can use whatever terms you'd like. Generally in most designs though, a header is the top part of a web page and the site title is one of the components inside the header. So, if you were setting a background image for example, you might want to use the header id or class whereas if you wanted to change the color or font of the blog name (or site title) then you would want to make a rule just for that.

    You may also want to check out some beginner tutorials. I think you'll like them.
    http://en.support.wordpress.com/css-basics/
    http://www.htmldog.com/guides/cssbeginner/

  17. monaleasaa
    Member

    WOW ... so much to learn ... and so little time .. lol ... just kidding thx :)

  18. designsimply
    Staff

    Cheers :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags