Changing theme colors

  • Resolved darth_infamous

    (@darth_infamous)


    11 years, 3 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: https://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: https://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)

    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.

    darth_infamous, which lines change this one?

    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.

    Could u please help me with that?

    @jedrzejde – please start your own thread if you need help. You also need to post a link to your site.

    Theme Author Konstantin Kovshenin

    (@kovshenin)

    You’ll probably find this thread fairly useful too: https://www.ads-software.com/support/topic/arrow-rest-color-nav-hover-color?replies=12

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