Rebalance theme, Change hover and tags colour

Hi there,

You can change the background colour of the posts on hover with the following custom CSS:

@media screen and (min-width: 640px) {
    .card:hover {
        background: #663399;
    }
}

You can change the value of #663399 to any hex colour code of your choice. If you’d like to experiment with different colours, try a few Google searches to get a list of hex colour codes and their corresponding values. Here’s an example of a site that I’ve used before:

https://www.color-hex.com/

The tags can then be changed with the following:

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

Hope that’s helpful! Let me know if extra questions come up.

Thanks Siobhan, that did the trick.

Would you also happen to know how to change the colour to various other links on the site? i.e. comments, links to other sites, etc (everything that is still orange basically).

And lastly, how to change the font for header and paragraph in posts?

Thanks again.

Hi there,

Glad to hear that helped!

Would you also happen to know how to change the colour to various other links on the site? i.e. comments, links to other sites, etc (everything that is still orange basically).

I found all other instances of the default red (#f35029) appearing in the theme’s style.css below. You can add this to your site’s custom CSS and replace the #f35029 to completely replace the red:

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea {
	color: #F35029;
}

a:hover,
a:focus,
a:active {
	color: #F35029;
}

.site-title a:hover {
	color: #F35029;
}

.main-navigation .sub-menu li:hover:before,
.main-navigation .children li:hover:before,
.main-navigation ul > li:hover > a,
.main-navigation ul ul > li:hover > a {
	color: #F35029;
}

.menu-toggle,
.menu-toggle:focus {
	color: #F35029;
}

@media screen and (max-width: 880px) {
	.dropdown-toggle:hover,
	.dropdown-toggle.toggled-on {
		border-color: #F35029;
	}

	.dropdown-toggle:hover::after,
	.dropdown-toggle.toggled-on:after,
	.dropdown-toggle:active,
	.dropdown-toggle:hover,
	.dropdown-toggle:focus {
		color: #F35029;
	}
}

.entry-title a:hover,
.entry-title a:active {
	color: #F35029;
}

.entry-content a,
.comment-content a,
.entry-content blockquote,
.comment-content blockquote,
.entry-content q,
.comment-content q {
	color: #F35029;
}

.card .entry-title a:hover {
	border-bottom-color: #F35029;
}

#infinite-handle span button {
	color: #F35029;
}

.posts-navigation a	{
	color: #F35029;
}

.bypostauthor .fn:before {
	color: #F35029;
}

.comment .comment-author a,
.comment .comment-reply-link {
	color: #F35029;
}

.widget_calendar table a {
	color: #F35029;
}

.widget_tag_cloud a[style] {
	color: #F35029;
}

And lastly, how to change the font for header and paragraph in posts?

If you want to experiment with special fonts then you’ll need to make sure your site pulls in that font somehow (it’s called “enqueuing” the font). A Google Font plugin is one way to do that.

https://www.ads-software.com/plugins/search/google+fonts/

Some of these plugins also let you also assign different elements to your selected font within the plugin’s settings area, without needing to write any CSS.

Take a look and let me know if extra questions come up.