WordPress.org

Forums

Fictive
[resolved] Colour editing ability lost? How to change the brown heading colour (18 posts)

  1. YenTaylor
    Member
    Posted 2 years ago #

    Hello!
    I need help editing out the Brown colour that the headings are. When I used this theme in wordpress.com it allowed me to customise the colours easily however, when I moved over to wordpress.org most of this customisation capability disappeared.
    Has anyone else managed to get rid of this brown colour?
    Any ideas how I can do this?

    Any help would be so appreciated. I love this theme, I really want to keep it but need to change this colour to do so.

    Thank you!
    Yen

  2. Justin "WP Guru" Hemker
    Member
    Posted 2 years ago #

    Shouldn't be a problem. Go to your Dashboard/Appearance/Customize/Colors/Header Text Color

    You can change the brown out of the header text there (if you have any).

    For the post titles you will have to add some custom css via a custom css plugin. Just change #bd5532 to whatever color code you want.

    .entry-title a {
       color: #bd5532;
    }

    Cheers!

  3. YenTaylor
    Member
    Posted 2 years ago #

    Thank you Justin, you are a genius. Have added that and it worked. I've never added custom css so was pretty exciting <geeking out>

    i'm also wanting to change the brown ( colour: #bd5532) thick lines at the beginning of posts and the brown text featured in the sidebar widgets. Is there somewhere I can look up the css to add for this or would you know what I should add?

    pretty, much, I want to get rid of all the brown. Ugh.

    Thanks so much.
    :) Yen

  4. YenTaylor
    Member
    Posted 2 years ago #

    ps. this is the link to my site so you can see what I mean
    http://bluebirdgreen.com

  5. Justin "WP Guru" Hemker
    Member
    Posted 2 years ago #

    Add this css to take care of the brown above posts:

    .entry-format, .hentry:before {
       background: #6f9d9f;
     }
    
     .hentry:after {
       border-top: 8px solid #6f9d9f;
     }

    If you want ALL links to appear in the blue/green color add:

    a {
       color: #6f9d9f;
     }

    If you want just the widget area links blue/green add:

    .widget-area a {
       color: #6f9d9f;
     }

    For the thick brown line in your header add:

    .site-branding:after {
       border-top: 8px solid #6f9d9f;
    }

    Too see the css that is being applied you can right-click on the element and select 'Inspect Element' and your browser will show you what is being used.

  6. YenTaylor
    Member
    Posted 2 years ago #

    Thanks So much Jason! Have applied all these (but picked some slightly different colours)

    I've also just noticed 2 more areas I will need to remove the brown colour from

    1. the highlight colour when the mouse is hovering over a tag at the end of the post or any other buttons

    2. The Profile names of people commenting at the end of the posts (that are not linked)

    Would you be able to write a css code for me to overwrite these?

    Yen

  7. YenTaylor
    Member
    Posted 2 years ago #

    Also,
    3. when I click on a post, the heading text colour changes to brown (on the posts actual page)

  8. Justin "WP Guru" Hemker
    Member
    Posted 2 years ago #

    Tag hover css:

    .tags-links a:hover {
      background-color: #000;
     }
    .tags-links a:hover:after {
      background-color: #000;
     }

    Button hover css:

    button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {
      background-color: #000;
     }

    Comment author css:

    .comment-author {
      color: #000;
     }

    Post title css:

    .entry-title {
      color: #000;
     }
  9. YenTaylor
    Member
    Posted 2 years ago #

    Thank you so much!
    All updated. I might leave this stream open while I finish designing my site incase I find something else.

    So helpful
    Thanks :)

  10. YenTaylor
    Member
    Posted 2 years ago #

    Hi Justin,
    Have just found another colour setting that I need to over-ride with a CSS code. It's the colour of links within the text of a post. Could you write me a css code to change this?

    Thank u!!

  11. Justin "WP Guru" Hemker
    Member
    Posted 2 years ago #

    Links

    .entry-content a {
       color: #000;
     }

    Links on hover

    .entry-content a:hover {
       color: #000;
     }

    Links visited

    .entry-content a:visited {
       color: #000;
     }

    Just change the colors to suit your needs! ;)

    Cheers!

  12. YenTaylor
    Member
    Posted 2 years ago #

    Thanks So much Justin! :)))

  13. YenTaylor
    Member
    Posted 2 years ago #

    Hi Justin, all your above CSS code worked brilliantly

    The profile code for comment authors (see below)
    .comment-author {
    color: #000;
    }

    changed the colours for anyone commenting, but my name in the comments is still brown. Could you please write me a css for this?

    Yen

  14. YenTaylor
    Member
    Posted 2 years ago #

    And, also to change the body text colour and the info at the top of the post (date etc)

  15. Justin "WP Guru" Hemker
    Member
    Posted 2 years ago #

    Body Text

    .entry-content {
       color: #000;
    }

    Date and Name

    .entry-meta a{
       color: #000;
    }

    Looking at this post http://bluebirdgreen.com/diy-beginner-sew-tea-towel-apron/ your name appears to be the same blue/green color as the other comment author's names. Maybe it is a browser cache issue?

  16. YenTaylor
    Member
    Posted 2 years ago #

    Thanks Justin, Will have a look at it :)

  17. YenTaylor
    Member
    Posted 2 years ago #

    Hi Justin, Doesn't seem to be a browser cache issue. Any ideas?

    Also, I'm wanting add a menu to my blog. When I do however, the unselected menu titles are in brown, which I'd like to change.
    Could you please write me a css code to fix this?

    Thanks as always!

  18. sacredpath
    Automattic Happiness Engineer
    Posted 2 years ago #

    Hi, add a color declaration to .comment-author a in your custom CSS like this:

    .comment-author a {
        color: #00cfcf;
        text-decoration: none;
    }

    For the menu items, this controls the color on the current page item (non-hover):

    .main-navigation .current_page_item > a, .main-navigation .current-menu-item > a {
        color: #bd5532;
    }

    To change the hover color on the menu items, this is where it is set:

    .main-navigation a:hover {
        color: #bd5532;
    }

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic