Changing theme colors

Resolved darth_infamous
(@darth_infamous)

10 years, 5 months ago
I’ve spent several days trying to figure this out so I’m hoping someone can help me out.

I’m building my site offline and as of currently it looks like this: http://i.imgur.com/86S8g72.jpg

I’m using a child theme and my current CSS looks like this:
```
.navigation-main, .navigation-main ul, .navigation-main li {
	background: #000000;
	display: table;
	margin: 0 auto;
}

.navigation-main {
	background: #000000 !important;
}

.navigation-main a {
	background: #000000 !important;
}

.navigation-main ul > .current_page_item a:after, .navigation-main ul > .current-menu-item a:after, .navigation-main ul > .current-post-ancestor a:after, .navigation-main ul > .current-menu-parent a:after, .navigation-main ul > .current-post-parent a:after {
	border-top: 6px solid #000000 !important;
}

@media screen and (min-width: 600px) {
	.header-search {
		display: block;
		float: right;
		margin-top: 0;
		margin-right: 5px;
	}
}
```
I’ve been struggling to change the colors and hover colors. Specifically, I’d like the search button in menu to have a black background with white letters like the rest of the menu, and remain that way when hovered.

I’ve gotten titles of posts black, but they still change to blue when hovered over. I’d like them to remain black when hovered.

I’d also like to have the CONTINUE READING button to have a white background and black letters, and remain that way when hovered.

When looking at a post: http://i.imgur.com/xbf2mV2.jpg

I’d like every instance of blue to be black and remain black when hovered, including the user’s name and Log out?

At the bottom, I’d like POST COMMENT button to have a black background with white letters, and remain that way when hovered.

I’m still very very new at CSS, and the progress I have made so far is only from searching across support threads like these and piece-mealing code I find and seeing what works and what does.

Any help would be very much appreciated.

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

Thread Starter

darth_infamous

(@darth_infamous)

10 years, 5 months ago

With some more research, I’ve managaed to get the theme close to looking how I want.

Here is how my CSS looks now

button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .button-primary:hover, a.button-primary:hover,.wpm-button-primary:hover, a.wpm-button-primary:hover, button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, .button-primary:focus, a.button-primary:focus, .wpm-button-primary:focus, a.wpm-button-primary:focus, button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active, .button-primary:active, a.button-primary:active, .wpm-button-primary:active, a.wpm-button-primary:active, #infinite-handle span {
	color: #ffffff;
}

button, input[type="button"], input[type="reset"], input[type="submit"], .button-primary, a.button-primary, a.button-primary:visited, .wpm-button-primary, a.wpm-button-primary {
	color: #FFFFFF;
}

.navigation-main a,.navigation-main a:visited {
	color: #FFFFFF;
}

.navigation-main li.current_page_item a, .navigation-main li.current-menu-item a,.navigation-main li.current_page_item a:visited, .navigation-main li.current-menu-item a:visited {
	color: #FFFFFF;
}

.navigation-main ul > .current_page_item:hover, .navigation-main ul > .current-menu-item:hover, .navigation-main ul > .current-post-ancestor:hover, .navigation-main ul > .current-menu-ancestor:hover, .navigation-main ul > .current-menu-parent:hover, .navigation-main ul > .current-post-parent:hover {
	color: #FFFFFF;
}

.navigation-main, .main-small-navigation li, .navigation-main li {
	background-color: #000000;
}

.navigation-main ul > .current_page_item:hover, .navigation-main ul > .current-menu-item:hover, .navigation-main ul .current-post-ancestor:hover, .navigation-main ul > .current-menu-ancestor:hover, .navigation-main ul > .current-menu-parent:hover, .navigation-main ul > .current-post-parent:hover {
	background-color: #000000;
}

.navigation-main ul > .current_page_item:hover a:after, .navigation-main ul > .current-menu-item:hover a:after, .navigation-main ul > .current-post-ancestor:hover a:after, .navigation-main ul > .current-menu-ancestor:hover a:after, .navigation-main ul > .current-menu-parent:hover a:after, .navigation-main ul > .current-post-parent:hover a:after {
	border-top-color: #000000;
}

.navigation-main li:hover, .main-small-navigation li:hover {
	background-color: #000000;
}

a, a:hover, a:visited {
	color: #000000;
}

.comments-area footer .comment-meta:hover, .comments-area footer .comment-meta a:hover {
	color: #000000;
}

.navigation-paging a, .navigation-post a,.navigation-paging a:visited, .navigation-post a:visited {
	color: #000000;
}

.site-title a:hover, .entry-title a:hover, .comments-area footer .comment-author a:hover, .widget-area .widget-title a:hover, article:hover .entry-title a:hover, .featured-content-secondary .entry-title a:hover, article:hover .entry-title a, .featured-content-secondary .entry-title a:hover, .site-footer a:hover, .site-content .entry-meta a:hover {
	color: #000000;
}

.navigation-main ul > .current_page_item, .navigation-main ul > .current-menu-item, .navigation-main ul > .current-post-ancestor, .navigation-main ul > .current-menu-ancestor, .navigation-main ul > .current-menu-parent, .navigation-main ul > .current-post-parent {
	color: #ffffff;
}

.entry-thumbnail-category a, .entry-thumbnail-category a:hover {
	color: #ffffff;
}

.navigation-main a:hover, .main-small-navigation a:hover {
	color: #ffffff;
}

.navigation-main li.current_page_item a:hover, .navigation-main li.current-menu-item a:hover {
	color: #ffffff;
}

.navigation-main ul > .current_page_item a:after, .navigation-main ul > .current-menu-item a:after, .navigation-main ul > .current-post-ancestor a:after, .navigation-main ul > .current-menu-parent a:after, .navigation-main ul > .current-post-parent a:after {
	border-top-color: #000000;
}

.entry-thumbnail-category, .entry-thumbnail-category:hover {
	background-color: #000000;
}

.entry-thumbnail-category:before, .entry-thumbnail-category:hover:before {
	border-top-color: #000000;
}

.navigation-main ul > .current_page_item, .navigation-main ul > .current-menu-item, .navigation-main ul > .current-post-ancestor, .navigation-main ul > .current-menu-ancestor, .navigation-main ul > .current-menu-parent, .navigation-main ul > .current-post-parent, button, input[type="button"], input[type="reset"], input[type="submit"], .button-primary, a.button-primary, a.button-primary:visited, .wpm-button-primary, a.wpm-button-primary {
	background-color: #000000;
}

button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .button-primary:hover, a.button-primary:hover, .wpm-button-primary:hover, a.wpm-button-primary:hover, button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, .button-primary:focus, a.button-primary:focus, .wpm-button-primary:focus, a.wpm-button-primary:focus, button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active, .button-primary:active, a.button-primary:active, .wpm-button-primary:active, a.wpm-button-primary:active, #infinite-handle span {
	background-color: #000000;
}

.navigation-main ul > .current_page_item:hover, .navigation-main ul > .current-menu-item:hover, .navigation-main ul > .current-post-ancestor:hover, .navigation-main ul > .current-menu-ancestor:hover, .navigation-main ul > .current-menu-parent:hover, .navigation-main ul > .current-post-parent:hover {
	background-color: #000000;
}

.navigation-main ul > .current_page_item:hover a:after, .navigation-main ul > .current-menu-item:hover a:after, .navigation-main ul > .current-post-ancestor:hover a:after, .navigation-main ul > .current-menu-ancestor:hover a:after, .navigation-main ul > .current-menu-parent:hover a:after, .navigation-main ul > .current-post-parent:hover a:after {
	border-top-color: #000000;
}

@media screen and (min-width: 600px) {
	.header-search {
		display: block;
		float: right;
		margin-top: 0;
		margin-right: 5px;
	}
}

I’m still having trouble figuring out how to make the CONTINUE READING and COMMENT button as white with black text when both hovered and non-hovered.