WordPress.org

Ready to get started?Download WordPress

Forums

Background color in Twenty Ten (14 posts)

  1. meseal
    Member
    Posted 3 years ago #

    How do I change the background color in Twenty Ten to black. I guess also, I will need to change the text to white and yellow (I want some in yellow, most in white). I am very, very new to CSS.

  2. Christopher Spires
    Member
    Posted 3 years ago #

    To change the background color in Twenty Ten, you simply need to go to Appearance -> Background and add #000000 to the Color display option, then save.

    To change the font colors you'll have to dig into the stylesheet. You can find any number of CSS tutorials, however you'll want to look for color: styles and alter them to white (color: #ffffff;) and yellow (color: #ffff00;) as you see fit.

    IN the Twenty Ten stylesheet there is a section commented off as /* Text elements */ which contain most of what you'll be looking for.

  3. meseal
    Member
    Posted 3 years ago #

    I changed the color to #000000 in background but it left the webpage white and changed behind the webpage (on the sides) black. I saw a place where you can add a background image, but don't have a black image and I'm not sure if I should go that way.

    I tried going into the stylesheet and changing the background-color to #000000, but that didn't work. Do I need to change that somewhere else? Why didn't the background color change when I went into the background section? This is really frustrating.

  4. govpatel
    Member
    Posted 3 years ago #

    Are you changing the style.css in twentyten theme if so its best to create a child theme for twentyten theme and make your changes in child theme style.css as if the theme is updated in future you will loose your settings and will have start over again.

    If post the url than can guide you on where you want make changes

    if its that white where pages are you want to change to black than you need to change
    .post, .type-page {
    background-color:#FFFFFF;
    clear:both;
    margin-bottom:40px;
    position:relative;

    Change #FFFFFF to what ever you want.

  5. meseal
    Member
    Posted 3 years ago #

    url is everythingaudio.biz

  6. govpatel
    Member
    Posted 3 years ago #

    I see that you have it all black so next thing you want to change is fonts in same code above
    .post, .type-page {
    background-color:#FFFFFF;
    clear:both;
    margin-bottom:40px;
    position:relative;

    add
    color:#FFFFFF;

    and that will change your fonts to white.

    What else did you want to change.

  7. everysandwich
    Member
    Posted 3 years ago #

    This is great, govpatel. This is exactly what I'm looking for, changing the large white area where posts are to another color. I hesitate to ask this rudimentary question, but what is the best way to make a child theme? Just copy the existing style.css and upload it to the same location? I mean, there's not a way to make a child theme from within the WP interface, is there?

  8. vandalvoyeur
    Member
    Posted 3 years ago #

    hello,

    i'm completely new to this gig so please have some patience with me!

    i would like to make my site completely black, with white text.

    so far i have a black logo and black background but the column is still white.

    how can i change this to black and the text to white

    the url is vandalvoyeur.wordpress.com/

  9. govpatel
    Member
    Posted 3 years ago #

    this is self hosted wordpres.org forum you need to go to wordpress.com forum for support

  10. govpatel
    Member
    Posted 3 years ago #

    @everysandwich you can follow steps here to create child theme

    http://codex.wordpress.org/Child_Themes

  11. HelenY
    Member
    Posted 3 years ago #

    hello,

    I'm having a similar problem.

    My posts background is white, but I'd like to change it to black. In other words, I'd like to have the entire container black, but can't figure where in the style sheet to make the change. Here is my blog: http://bloomcreativity.com/blog/

    I appreciate your help.

  12. govpatel
    Member
    Posted 3 years ago #

    looks like you using sticky and this the code

    .home .sticky {
    background: none repeat scroll 0 0 #F2F7FC;
    border-top: 4px solid #000000;
    margin-left: -20px;
    margin-right: -20px;
    padding: 18px 20px;
    Change
    #F2F7FC
    to
    #000000

  13. HelenY
    Member
    Posted 3 years ago #

    it worked! Thank you so much! :-)

  14. govpatel
    Member
    Posted 3 years ago #

    You are welcome

Topic Closed

This topic has been closed to new replies.

About this Topic