[catwingz]

Hi,

— The background color of the two footer areas. I’ve achieved partial results targeting div.widget-column.footer-widget-1. This still leaves a black box surrounding it and a second stripe below it. Failed experiments include [email protected]-auto-height  and  div.footer-bottom.

— There are multiple places with yellow #ffca27  that I’d like to change. I’ve tried taking selectors from the color sections of the style sheet and still not having success. The up/down arrow and the hover in the primary navigation are the most noticeable instances.

The website is aligningwithsoul.com but it’s hidden behind a “coming soon” page.

What am I missing?

Thank you

[Sakin]

@catwingz: Sorry, it’s really difficult to check without your site live. So, let me know once it’s live.

About the yellow #ffcs27, that is the main link hover color, button hover background color, and Secondary Link Hover Color. So, it has in many places and it will be difficult to replace all. But for the main places, you can change the color code in the following CSS and then add it in the “Appearance => Customize => Additional CSS” box:

/* Button Hover Background Color */
#scrollup:hover,
#scrollup:focus,
.widget_calendar tbody a:hover,
.widget_calendar tbody a:focus,
.entry-content-wrapper .more-link:hover,
.entry-content-wrapper .more-link:focus,
#feature-slider-section .more-link span:hover,
#feature-slider-section .more-link span:hover,
.custom-header-media .wp-custom-header-video-button.wp-custom-header-video-pause,
.custom-header-media .wp-custom-header-video-button:hover,
.custom-header-media .wp-custom-header-video-button:focus,
#feature-slider-section .cycle-pager span:hover,
#feature-slider-section .cycle-pager span:focus,
#feature-slider-section .cycle-pager .cycle-pager-active,
button:hover,
button:focus,
.button:hover,
.button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product form.cart .button:focus,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:focus,
.woocommerce a.button:focus,
.woocommerce button.button:focus,
.woocommerce input.button:focus,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:focus,
.woocommerce a.button.alt:focus,
.woocommerce button.button.alt:focus,
.woocommerce input.button.alt:focus,
.page-links a:hover,
.page-links a:focus,
.site-main #infinite-handle span:hover,
.site-main #infinite-handle span:focus,
.pagination .prev:hover,
.pagination .prev:focus,
.pagination .next:hover,
.pagination .next:focus,
.posts-navigation a:hover,
.posts-navigation a:focus,
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus,
.woocommerce nav.woocommerce-pagination ul li span.current,
.catch-instagram-feed-gallery-widget-wrapper .instagram-button .button:hover,
.catch-instagram-feed-gallery-widget-wrapper .instagram-button .button:focus,
.singular-content-wrap .entry-footer .cat-links a:hover,
.singular-content-wrap .entry-footer .cat-links a:focus,
.singular-content-wrap .entry-footer .tags-links a:hover,
.singular-content-wrap .entry-footer .tags-links a:focus,
.pagination .page-numbers:hover,
.pagination .page-numbers:focus,
.pagination .page-numbers.current {
	background-color: #ffca27;
}

/* Link Hover Color */
a:hover,
a:focus,
a:active,
.site-title a:hover,
.site-title a:focus,
.menu-toggle:hover,
.menu-toggle:focus,
.menu-toggle.toggled-on,
.menu-toggle.toggled-on:hover,
.menu-toggle.toggled-on:focus,
#search-toggle:hover,
#search-toggle:focus,
.search-submit:hover,
.search-submit:focus,
.dropdown-toggle:hover,
.dropdown-toggle:focus,
.ctsocialwidget a:hover,
.ctsocialwidget a:focus,
.post-navigation a:hover .nav-title,
.post-navigation a:focus .nav-title,
.required,
.entry-meta a:hover,
.entry-meta a:focus,
.entry-meta .icon:hover,
.entry-meta .icon:focus,
.site-info a:hover,
.site-info a:focus,
.author-name a:hover,
.author-name a:focus,
.comment-metadata a:hover,
.comment-metadata a:focus,
.pingback .comment-edit-link:hover,
.pingback .comment-edit-link:focus,
.comment-reply-link:hover,
.comment-reply-link:focus,
.comment-reply-title small a:hover,
.comment-reply-title small a:focus,
#feature-slider-section .entry-meta .icon:hover,
#feature-slider-section .entry-meta .icon:focus,
#feature-slider-section .cycle-prev:hover,
#feature-slider-section .cycle-prev:focus,
#feature-slider-section .cycle-next:hover,
#feature-slider-section .cycle-next:focus,
#testimonial-content-section .cycle-prev:hover,
#testimonial-content-section .cycle-prev:focus,
#testimonial-content-section .cycle-next:hover,
#testimonial-content-section .cycle-next:focus,
#testimonial-content-section .cycle-pager span.cycle-pager-active,
.site .skip-link,
.entry-title a:hover,
.entry-title a:focus,
#fullpage .hentry-inner .entry-meta a:hover,
#fullpage .hentry-inner .entry-meta a:focus,
.site-header + .breadcrumb-area .entry-breadcrumbs a:hover,
.site-header + .breadcrumb-area .entry-breadcrumbs a:focus,
.woocommerce .site-header + .breadcrumb-area .woocommerce-breadcrumb a:hover,
.woocommerce .site-header + .breadcrumb-area .woocommerce-breadcrumb a:focus {
	color: #ffca27;
}

.menu-toggle:hover,
.menu-toggle:focus,
.tagcloud a:hover,
.tagcloud a:focus {
	border-color: #ffca27;
}

.arrow-up:hover,
.arrow-up:focus {
	border-bottom-color: #ffca27;
}

.arrow-down:hover,
.arrow-down:focus {
	border-top-color: #ffca27;
}

#updownnav .arrow-up:hover,
#updownnav .arrow-up:focus,
#updownnav .arrow-down:hover,
#updownnav .arrow-down:focus {
	color: #ffca27;
}

/* Secondary Link Hover Color */
.site-navigation a:hover,
.site-navigation a:focus,
.social-navigation a:hover,
.social-navigation a:focus,
.entry-content-wrapper .entry-title a:hover,
.entry-content-wrapper .entry-title a:focus,
.site-footer a:hover,
.site-footer a:focus,
.entry-breadcrumbs a:hover,
.entry-breadcrumbs a:focus,
.entry-breadcrumbs a:active,
.woocommerce .woocommerce-breadcrumb a:hover,
.woocommerce .woocommerce-breadcrumb a:focus,
.woocommerce .woocommerce-breadcrumb a:active,
.site-navigation .current-menu-item > a,
.site-navigation .current-menu-ancestor > a,
.entry-content-wrapper .entry-meta a:hover,
.entry-content-wrapper .entry-meta a:focus,
.entry-content-wrapper a:hover,
.entry-content-wrapper a:focus {
	color: #ffca27;
}

body #fp-nav ul li a.active span,
body .fp-slidesNav ul li a.active span {
	background-color: #ffca27;
}

Regards,
Sakin

[catwingz]

Hi Sakin,

This looks like what I tried before, but I will repeat it in hopes of a better outcome. The website is now public — https://aligningwithsoul.com

The footer issue shouldn’t be a problem. I’ve tried so many things and I’m going to be really interested in seeing what I missed.

There is one other thing I would like to solve. The WP Header Image plugin is on the site so the About page can have a different image. I’ve used this plugin before and there appears to be some sort of a conflict with the theme. At this point it’s a three page site. The home page and blog each have their own rules. This leaves the About page where when you scroll down the page the header stays in place, effectively blocking the upper half of the viewport. It should scroll with the rest of the content. Can you help with this?

thank you

 

 

[Sakin]

Hi @catwingz: For all these color, it would have better you upgrade to pro version.

About the header image on About Page, that header image is above the header and that was causing issue. So, if you want to add related to that page then you can add the following CSS in “Appearance => Customize => Additional CSS” box:

body.page-id-1746 #header-content.main-nav-scrolled {
 position: relative;
}
.page-id-1746 .site-header {
 margin-bottom: -87px;
}

Regards,
Sakin

[Author]

Posts