Changing Accent colors (Lines, separators, hover links etc) Without Pro.

Tagged: bold photography, changing colours, custom colours

This topic has 1 reply, 2 voices, and was last updated 4 years, 5 months ago by Skandha.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Posts

May 26, 2020 at 12:51 am #247875

Participant

Hello, pretty inexperienced coder here. Small graphic design business with just over 10 domains.
Firstly, I Absolutely LOVE catch themes, I have never had to use support, but find myself reusing the theme for different applications.
Everything is easily edited, I find slim-to-no bugs in my build.

I am currently building on Bold Photography free, and my client has very specific color requests.
I am finding that the current style sheet is throwing everything off, specifically hover, link, and built in separator colors (Currently Orange). I use Custom CSS plugin from SiteOrigin for most of my adjustments, but do not want to manually edit my style sheet (I am this much a of a noob, don’t know how i’ve made it where I am from visuals)

Is there any way to adjust this without playing with my theme editor too much, simply swapping out this orange color wherever it is found with another hex? Any feedback is helpful!

Thanks again for providing us a simple, to the point, visually pleasing theme!
Jordan.

May 26, 2020 at 5:14 am #247923

Skandha

Participant

@jordanharedesign: Hello Jordon,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

mark,
ins,
.contact-details a:hover .contact-details-icon-wrapper,
.contact-details a:focus .contact-details-icon-wrapper,
.social-floating-navigation:not(.hide-label) .social-navigation li + li a:after {
	background-color: #f23456 !important;
}

a:focus,
a:hover,
.site-title a:hover,
.site-title a:focus,
#feature-slider-section .owl-dot:hover,
#feature-slider-section .owl-dot:focus,
#feature-slider-section .owl-dot.active,
#feature-slider-section .owl-prev:hover,
#feature-slider-section .owl-prev:focus,
#feature-slider-section .owl-next:hover,
#feature-slider-section .owl-next:focus,
#feature-slider-section .entry-container a:hover,
#feature-slider-section .entry-container a:focus,
.menu-toggle:hover,
.menu-toggle:focus,
.dropdown-toggle:hover,
.dropdown-toggle:focus,
.search-submit:hover,
.search-submit:focus,
.entry-meta a:hover,
.entry-meta a:focus,
#testimonial-content-section .entry-meta a:hover,
#testimonial-content-section .entry-meta a:focus,
#feature-slider-section .entry-meta .cat-links a:hover,
#feature-slider-section .entry-meta .cat-links a:focus,
.main-navigation ul :hover > a
.main-navigation ul :hover > a,
.main-navigation ul .focus > a,
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.social-navigation a:hover,
.social-navigation a:focus,
.site-header-cart .cart-contents:hover,
.site-header-cart .cart-contents:focus,
.site-navigation .current-menu-item > a,
.site-navigation .current-menu-ancestor > a,
.navigation-classic.absolute-header .main-navigation ul ul :hover > a,
.navigation-classic.absolute-header .main-navigation ul ul .focus > a,
.contact-details li .contact-details-label,
.contact-info-details li a:hover,
.contact-info-details li a:focus,
.post-navigation a:hover .post-title,
.post-navigation a:focus .post-title,
.section-title a:hover,
.section-title a:focus,
.entry-title a:hover,
.entry-title a:focus,
#stats-section .entry-title,
#stats-section .entry-title a,
#testimonial-content-section .owl-prev:hover,
#testimonial-content-section .owl-prev:focus,
#testimonial-content-section .owl-next:hover,
#testimonial-content-section .owl-next:focus,
#testimonial-content-section .section-content-wrapper:before,
.portfolio-content-wrapper .entry-title a:hover,
.portfolio-content-wrapper .entry-title a:focus,
blockquote:before,
.entry-breadcrumbs .sep,
.woocommerce .woocommerce-breadcrumb .sep {
	color: #f23456 !important;
}

You can change the color according to your choice.
Let me know if this works out!
Kind Regards,
Skandha