WordPress.org

Forums

Twenty Thirteen
Change Color of Footer to Match header image (30 posts)

  1. RainCityChick
    Member
    Posted 1 year ago #

    I was able to change the header image, but now need to change the footer color. There's no option to do so in appearance, so I assume I need to change something in the CSS under Appearance-->Editor

    I'm a relative newbie at editing CSS, so please be very specific.

    I do know the color I need it to be is #47ad54 and I'd prefer the type to be either #000000 or #191919.

    Thanks!

  2. RainCityChick
    Member
    Posted 1 year ago #

    Ack! Not the footer--the Widget area is what I need to recolor. Sorry all, I did say I was a newbie.

  3. esmi
    Forum Moderator
    Posted 1 year ago #

    Do not edit the Twenty Thirteen theme. It is the current default WordPress theme and having access to an original, unedited, copy of the theme is vital in many situations. First create a child theme for your changes. Or install a custom CSS plugin.

  4. RainCityChick
    Member
    Posted 1 year ago #

    Esmi, it's good to know not to edit the original, but I still don't know what I'd need to change, how to make a child theme or which plugin to use.

    I'm a rank beginner...can you give me some more clues (point me to proper threads or help files)?

  5. esmi
    Forum Moderator
    Posted 1 year ago #

    Is your child theme active yet? If so, can we have a link to your site?

  6. RainCityChick
    Member
    Posted 1 year ago #

    @esmi Thanks for your tips--I do still need some help.

    My child theme is created, but I've not done anything with it. The URL is: http://iaap-wa-ak-conf.org/

    What I need is to change the entire color scheme of the template from what it is to another using the following colors:
    Primary color: 47ad54
    Secondary color: EBB316
    Tertiary color: 4F4E4A
    Highlight/pop-out color: 1B8DC9

    I realize that I need to put info in the child theme about the colors, but I'm at a loss. If someone could give me the code to copy and paste that would be so very helpful.

    Thank you!!

  7. esmi
    Forum Moderator
    Posted 1 year ago #

    Goodness! I think that is probably far more in the way of customisation than a support forum can provide. Doubly so if you are not CSS-savvy.

  8. RainCityChick
    Member
    Posted 1 year ago #

    Ugh...I was thinking that as I started to get into this.

    Any suggestions for a simple template with more of a primary color scheme?

  9. batharoy
    Member
    Posted 1 year ago #

    Lets just take it step by step.
    With your child theme loaded navigate to Appearance > Editor.
    On the right hand side click on style.css
    Paste this block of code and change the colors #'s to the one you want.

    #navbar {
        background-color: #EBB316;
    }
    #colophon {
        background-color: #EBB316;
    }
  10. RainCityChick
    Member
    Posted 1 year ago #

    I'll try that out this evening at home....Thanks for the guidance.

  11. RainCityChick
    Member
    Posted 1 year ago #

    YEs, that worked a treat! What are my next options, @batharoy?

  12. batharoy
    Member
    Posted 1 year ago #

    This is for the font color & hover font & background color for the navigation links in your menu. You should add the sample page to the menu to see all the effects.

    .nav-menu li a {
        color: #000;
    }
    .nav-menu li:hover > a, .nav-menu li a:hover {
        background-color: #EBB316;  color: #fff;
    }
  13. batharoy
    Member
    Posted 1 year ago #

    This will change the menu background color & font color on the current page only.

    .nav-menu .current_page_item > a {
    color: white;
    background-color: #EBB316;
  14. RainCityChick
    Member
    Posted 1 year ago #

    Thank you batharoy! These look great.

    What's next?

  15. batharoy
    Member
    Posted 1 year ago #

    Sorry it's taken so long to get back. Lets add some of the blue color you supplied.

    .entry-meta a {
        color: #1B8DC9;
    }
    .entry-meta > span {
        color: #1B8DC9;
    }
  16. batharoy
    Member
    Posted 1 year ago #

    Lets also add the dark grey color to most of the text. And make that super big text a little smaller.

    body {
        color: #4F4E4A;
    }
    .entry-title a {
        color: #4F4E4A;
        font-size:38px;
    }
  17. RainCityChick
    Member
    Posted 1 year ago #

    batharoy, the asynchronous communication is working for me. No apologies needed.

    I've made these two changes.

    My next concern is the colors on the special post types (like the link type I've already used) is that muddy brownish orange color.

  18. batharoy
    Member
    Posted 1 year ago #

    Blue color, or change to color you want.

    .entry-content a {
        color: #1B8DC9;
    }
  19. RainCityChick
    Member
    Posted 1 year ago #

    batharoy--that didn't seem to change any of the pages/posts I have up now.

    The current link post type is

    .format-link {
    background-color: #f7f5e7;
    }

    (if I'm reading the inspect element information correctly. When I changed f7f5e7 to 1B8DC9 and refreshed, nothing happened. Should I have used something different? I shouldn't have to delete and re-post, right?

  20. akdmcnicoll
    Member
    Posted 1 year ago #

    Nice use of the 20-13 theme, RCC!

    Did you decide on leaving that widget background color to that light tan color?

    If not, in the editor under Styles, search for this code and change the RGBa values. The widget background color is not a Hex color.

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

    In Photoshop, you can find out the RGB equivalent to your desired Hex color and plug in those values. The 0.7 adjusts the opacity (I believe) from 0.1 to 0.9. Play with that and see what it does to your RGB color.

    Good luck.

  21. akdmcnicoll
    Member
    Posted 1 year ago #

    batharoy,

    You mentioned adjusting the size of the entry title header via CSS. However, can you tell me where I can find it in the Style editor, specifically the font size for the entry title header?

    .entry-title a {
    color: #4F4E4A;
    font-size:38px;
    }

    Thanks in advance.

  22. RainCityChick
    Member
    Posted 1 year ago #

    Thanks akdmcnicoll--I'm about 85% happy with it.

    I'd love to change several things though. The segment you gave me plus the blue color correction to some of the post entries batharoy gave aren't working:

    .entry-content a {
        color: #1B8DC9;
    }
    
    .widget {
    background-color: rgba(27,141,201, 0.7)
    }

    That is, everything that's tan now, I'd prefer to have in blue.

    Finally, the widget area at the bottom, I'd love to get rid of that hideous baby-shit-brown color (apologies to the theme creator, I just hate that color) and have it be #4f4e4a (a dark grey) which would still show off the orange and white type.

    I've learned a lot through this process--thanks to all for your help!

  23. RainCityChick
    Member
    Posted 1 year ago #

    By the way akdmcnicoll, I quite like http://www.colorhexa.com/ for obtaining color equivalencies. You can enter what you have: RGB, CMYK, or Hex and get equivalents in 14 different schemes, plus gradients and complimentary colors.

  24. batharoy
    Member
    Posted 1 year ago #

    For the baby-****-brown color:

    .site-footer .sidebar-container {
    background-color: #4f4e4a;
    }
  25. batharoy
    Member
    Posted 1 year ago #

    @akdmcnicoll

    However, can you tell me where I can find it in the Style editor

    You should not use the style editor unless you are using a child theme, all changes will be overwritten if the theme is upgraded. If all you are doing is CSS edits then install a custom css plugin.

    If you are using a child theme just adding the code to the style.css will override the default.

  26. batharoy
    Member
    Posted 1 year ago #

    @RainCityChick
    Will work on the link colors and hopefully have something in a couple hours.

  27. akdmcnicoll
    Member
    Posted 1 year ago #

    @RainCityChick:

    The rgba code I gave you is not CSS. Search for .widget in your style editor (child theme, of course) and you'll see those rgba background-color values. Replace the tan color rgba values with yours.

    Thanks for the colorhexa site link. Will check it out.

    As for the brown color, I just changed it in the style editor from #220e10 to #000000.

    @batharoy:

    Thanks for your quick reply. Yes, using child theme. I will try your CSS, but I was just wondering what it's name is in the editor because I could not find it.

    I found where to change the site-title and site-description font sizes, but not the page title/header.

    Any thoughts would be appreciated.

  28. batharoy
    Member
    Posted 1 year ago #

    @RainCityChick

    I think this covers the link color as well as the hover color, let me know if I missed something.

    .categories-links a {
    color: #1B8DC9;
    }
    .categories-links a:hover {
    color: #ea9629;
    }
    .widget-title a {
    color: #1B8DC9;
    }
    .widget-title a:hover {
    color: #ea9629;
    }
    .textwidget a {
    color: #1B8DC9;
    }
    .textwidget a:hover {
    color: #ea9629;
    }
    .date a {
    color: #1B8DC9;
    }
    .date a:hover {
    color: #ea9629;
    }
    .entry-content a {
    color: #1B8DC9;
    }
    .entry-content a:hover {
    color: #ea9629;
    }
    .site-footer .widget a {
    color: #1B8DC9;
    }
    .site-footer .widget a:hover {
    color: #ea9629;
    }
  29. RainCityChick
    Member
    Posted 1 year ago #

    @batharoy I think I've got some conflicting instructions in my child theme, because the colors are not switching up as I want. I'm attending a conference, so I'll take a hard look over the late weekend,and then post any Q's I may have. AGain thank you!!

  30. batharoy
    Member
    Posted 1 year ago #

    @akdmcnicoll
    @RainCityChick

    Made a mistake on the entry title code above.

    .entry-title {
    font-size: 12px;
    }

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic