Changing the colors on the Twenty thirteen theme

  • Unknown's avatar
    lacorietowers · Member ·

    im trying to change certain parts of the theme to other colors, but i dont know how to do that in the editor.

    The space under the header where the pages are listed is a light brownish color. i want to make that white. also the footer or bottom of the page where its dark brown, i want to change that to be blue.
    i’m also trying to change the color when u select something from orange to blue.

    can anyone help with this?

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS. You can edit the color code on the footer background as desired. I just grabbed a random dark blue from a color wheel.

    .navbar {
    background: #FFFFFF;
}
.site-footer .sidebar-container {
	background-color: #000088 ;
}

    If you are not yet familiar with the web inspector built into your browser, I would suggest looking at our How to Find Your Theme’s CSS support page which has a few short screencasts to get you started with it. I find the web inspector an invaluable tool for CSS.

  • Unknown's avatar
    mollysplate · Member ·

    I am having the same problem only I want to change the background color to my sidebar; it’s set to an ugly beige color and I want to do a light green. How can I change the sidebar background color? or it is prohibited? I only have the free wordpress site with the $30 customization upgrade.

  • Unknown's avatar
    thesacredpath · Member ·

    @wollymalsh, add the following custom CSS and you can adjust the background color for the sidebar widgets. The original was given in RGB values with a opacity setting of 0.7, but you can replace that with a hex color code if you wish.

    .widget {
    background-color: rgba(247, 245, 231, 0.7);
}

    If you want to use a hex color, use the following code and edit the color code as desired.

    .widget {
    background-color: #CC0000;
}
  • Unknown's avatar
    mollysplate · Member ·

    Thank you so much!!!! Worked great!

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • The topic ‘Changing the colors on the Twenty thirteen theme’ is closed to new replies.