Changing theme colour

  • Firstly, am I correct that there is not one single setting or command that will change the theme’s standard green/blue colour to a custom one?

    If that is the case, I have managed (by searching the existing threads and looking up some guides to css) to change most of the links to the colour I want (#8a211a). However there are a few that I can’t work out and would really appreciate some help with the css needed to change the following:
    1. The site title / name changes to blue/green on hover. How do I change the hover colour to match the non-hover.
    2. The three small horizontal lines for the menu and the cross once the menu is enabled.
    3. The “post comment” button.
    4. The hover colour in the comments section, when you hover over the reader’s name if they have linked to a website.

    Many thanks, and if anyone can help with any of these it would be much appreciated. It would be really helpful if all of this type of css was gathered in a pinned post!

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi @pinkgecko,

    am I correct that there is not one single setting or command that will change the theme’s standard green/blue colour to a custom one?

    That’s correct — the Customiser doesn’t contain colour options for this theme so the colour scheme of the whole site would need to be changed with CSS.

    The site title / name changes to blue/green on hover. How do I change the hover colour to match the non-hover.

    Do you mean you would like to change the hover colour of the site title to grey — the same grey currently used for the tagline? If so, please try this CSS:

    .site-title a:hover, .site-title a:focus, .site-title a:active {
	color: rgba(0, 0, 0, 0.6);
}

    The three small horizontal lines for the menu and the cross once the menu is enabled.

    This CSS can be used to change the colour of those areas:

    .sidebar-toggle, .sidebar-toggle.toggle-on:before{
	color: #8a211a;
}

.sidebar-toggle:hover {
	color: #000000;
}

    The “post comment” button.

    For this, you could try adding the .submit class to the existing button CSS. That should help keep all the button styles consistent.

    The hover colour in the comments section, when you hover over the reader’s name if they have linked to a website.

    This should help you change the hover colour:

    .comment-author a:hover {
	color: #8a211a;
}

    If you are looking to make a large number of CSS changes, I recommend contacting a developer for help — the WordPress Professional Network is a great place to search if you don’t already know someone who can help.

    Thread Starter pinkgecko

    (@pinkgecko)

    Thank you so much @gemmaevans – I’ve managed to achieve everything with your help, apart from changing the colour of the ‘post comment’ button. Are you suggesting this needs to be done via altering the theme CSS, or can I do it via adding additional? I’ve tried to play around with it, but can’t figure this one out…

    Thanks again! ??

    Hi there,

    Can you please try the following CSS code to alter the color of the Post Comment button?

    input#submit {
    background: blue;
}
    Thread Starter pinkgecko

    (@pinkgecko)

    @fstat Perfect! Thank you, that worked a charm. ??

    You’re welcome!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Changing theme colour’ is closed to new replies.