Change Theme color Per Page

ariddleberger — Wed, 06 Apr 2016 17:15:11 +0000

I have several different products on different pages, many of them have completely different color schemes than the official logo color. Is there a way I can change the accent colors on a page-by-page basis? I’d like to have one page have orange and other one blue, but I can’t since my main theme color is green for my primary product.

If you have a CSS code I can use to change the individual VC element color scheme that doesn’t align with the main theme color, that would work as well.

Reply To: Change Theme color Per Page

BlueOwl — Thu, 07 Apr 2016 08:33:18 +0000

Hi there,

You could basically apply colors that will override the main theme color on a per page basis.
Since doing all elements would take quite some CSS code, I would only apply the changes to the elements I am using on the particular page.
You can see how all theme colors are set here: \fortuna\includes\boc_framework.php

Look for this line:

// Main Color

Below it you will see the CSS that gets applied to set the theme color.
Basically you would override those in your Page Setting (in your Editor).

Reply To: Change Theme color Per Page

ariddleberger — Mon, 11 Apr 2016 20:40:05 +0000

So, what code would I need to get and where would I need to put it to change the color on a per page basis? I’m not really fluent in CSS.

Reply To: Change Theme color Per Page

BlueOwl — Tue, 12 Apr 2016 08:18:11 +0000

Again, below this line: // Main Color

You can replace this ‘.$boc_main_color.’ with your color and place the code into your Page Settings (the Cog Wheel icon in the editor – top right)!
Again… you may not need all elements changed, only the ones you use.

a:hover, a:focus,
.post_content a:not(.button), 
.post_content a:not(.button):visited,
.post_content .wpb_widgetised_column a:not(.button):hover {	color: '.$boc_main_color.'; }

.post_content .wpb_widgetised_column .side_bar_menu a:not(.button):hover { color: #333; }

.boc_preloader_icon:before { border-color: '.$boc_main_color.' rgba(0,0,0,0) rgba(0,0,0,0); }

.dark_links a:hover, .white_links a:hover, .dark_links a:hover h2, .dark_links a:hover h3 { color: '.$boc_main_color.' !important; }

.side_icon_box h3 a:hover, 
.post_content .team_block h4 a:hover,
.team_block .team_icons a:hover{ color:'.$boc_main_color.'; }

.button:hover,a:hover.button,button:hover,input[type="submit"]:hover,input[type="reset"]:hover,	input[type="button"]:hover, .btn_theme_color, a.btn_theme_color { color: #fff; background-color:'.$boc_main_color.';}
input.btn_theme_color, a.btn_theme_color, .btn_theme_color { color: #fff; background-color:'.$boc_main_color.';}
.btn_theme_color:hover, input.btn_theme_color:hover, a:hover.btn_theme_color { color: #fff; background-color: #444444;}

input.btn_theme_color.btn_outline, a.btn_theme_color.btn_outline, .btn_theme_color.btn_outline {
	color: '.$boc_main_color.' !important;
	border: 2px solid '.$boc_main_color.';
}
input.btn_theme_color.btn_outline:hover, a.btn_theme_color.btn_outline:hover, .btn_theme_color.btn_outline:hover{
	background-color: '.$boc_main_color.' !important;
}

#boc_searchform_close:hover { color:'.$boc_main_color.';}

.section_big_title h1 strong, h1 strong, h2 strong, h3 strong, h4 strong, h5 strong { color:'.$boc_main_color.';}
.top_icon_box h3 a:hover { color:'.$boc_main_color.';}

.htabs a.selected  { border-top: 2px solid '.$boc_main_color.';}
.resp-vtabs .resp-tabs-list li.resp-tab-active { border-left: 2px solid '.$boc_main_color.';}
.minimal_style.horizontal .resp-tabs-list li.resp-tab-active,
.minimal_style.resp-vtabs .resp-tabs-list li.resp-tab-active { background: '.$boc_main_color.';}

#s:focus {	border: 1px solid '.$boc_main_color.';}

.breadcrumb a:hover{ color: '.$boc_main_color.';}

.tagcloud a:hover { background-color: '.$boc_main_color.';}
.month { background-color: '.$boc_main_color.';}
.small_month  { background-color: '.$boc_main_color.';}

.post_meta a:hover{ color: '.$boc_main_color.';}

.horizontal .resp-tabs-list li.resp-tab-active { border-top: 2px solid '.$boc_main_color.';}
.resp-vtabs li.resp-tab-active { border-left: 2px solid '.$boc_main_color.'; }

#portfolio_filter { background-color: '.$boc_main_color.';}
#portfolio_filter ul li div:hover { background-color: '.$boc_main_color.';}
.portfolio_inline_filter ul li div:hover { background-color: '.$boc_main_color.';}

.counter-digit { color: '.$boc_main_color.';}

.tp-caption a:hover { color: '.$boc_main_color.';}

.more-link1:before { color: '.$boc_main_color.';}
.more-link2:before { background: '.$boc_main_color.';}

.image_featured_text .pos { color: '.$boc_main_color.';}

.side_icon_box .icon_feat i.icon { color: '.$boc_main_color.';}
.side_icon_box .icon_feat.icon_solid { background-color: '.$boc_main_color.'; }

.boc_list_item .li_icon i.icon { color: '.$boc_main_color.';}
.boc_list_item .li_icon.icon_solid { background: '.$boc_main_color.'; }

.top_icon_box.type1 .icon_holder .icon_bgr { background-color: '.$boc_main_color.'; }
.top_icon_box.type1:hover .icon_holder .icon_bgr { border: 2px solid '.$boc_main_color.'; }
.top_icon_box.type1 .icon_holder .icon_bgr:after,
.top_icon_box.type1:hover .icon_holder .icon_bgr:after { border: 2px solid '.$boc_main_color.'; }
.top_icon_box.type1:hover .icon_holder i { color: '.$boc_main_color.';}

.top_icon_box.type2 .icon_holder .icon_bgr { background-color: '.$boc_main_color.'; }
.top_icon_box.type2:hover .icon_holder .icon_bgr { background-color: #fff; }
.top_icon_box.type2:hover .icon_holder i { color: '.$boc_main_color.';}

.top_icon_box.type3 .icon_holder .icon_bgr:after { border: 2px solid '.$boc_main_color.'; }
.top_icon_box.type3:hover .icon_holder .icon_bgr { background-color: '.$boc_main_color.'; }
.top_icon_box.type3:hover .icon_holder .icon_bgr:after { border: 2px solid '.$boc_main_color.'; }
.top_icon_box.type3 .icon_holder i { color: '.$boc_main_color.';}
.top_icon_box.type3:hover .icon_holder i { color: #fff; }

.top_icon_box.type4:hover .icon_holder .icon_bgr { border: 2px solid '.$boc_main_color.'; }
.top_icon_box.type4:hover .icon_holder .icon_bgr:after { border: 3px solid '.$boc_main_color.'; }
.top_icon_box.type4 .icon_holder i{ color: '.$boc_main_color.'; }
.top_icon_box.type4:hover .icon_holder i { color:  '.$boc_main_color.'; }

.top_icon_box.type5 .icon_holder i{ color: '.$boc_main_color.'; }
.top_icon_box.type5:hover .icon_holder i { color: '.$boc_main_color.'; }

a .pic_info.type11 .plus_overlay { border-bottom: 50px solid '.boc_HexToRGB($boc_main_color, 0.8).'; }
a:hover .pic_info.type11 .plus_overlay { border-bottom: 1000px solid '.boc_HexToRGB($boc_main_color, 0.8).';}

a .pic_info.type12 .img_overlay_icon,
a:hover .pic_info.type12 .img_overlay_icon { background: '.boc_HexToRGB($boc_main_color, 0.8).';}

h2.title strong {  color: '.$boc_main_color.';}
ul.theme_color_ul li:before { color: '.$boc_main_color.'; }

.custom_slides.nav_design_1 .cs_nav_item.active .cs_nav_icon i.icon{ color: '.$boc_main_color.';}
.custom_slides.nav_style_1.nav_design_1 .cs_nav_item:hover .cs_nav_icon i.icon,
.custom_slides.nav_style_1.nav_design_2 .cs_nav_item:hover .cs_nav_icon i.icon { color: '.$boc_main_color.';}
.custom_slides.nav_design_2 .cs_nav_item.active .cs_nav_icon { background: '.$boc_main_color.';}
.cs_nav_item.has_no_text:hover .cs_nav_icon i.icon { color: '.$boc_main_color.';}
.custom_slides.nav_style_2 .cs_txt { color: '.$boc_main_color.';}

.acc_control, .active_acc .acc_control,
.acc_holder.with_bgr .active_acc .acc_control { background-color: '.$boc_main_color.';}

.text_box.left_border {	border-left: 3px solid '.$boc_main_color.'; }

.owl-theme .owl-controls .owl-nav div { background: '.$boc_main_color.';}
.owl-theme .owl-dots .owl-dot.active span { background: '.$boc_main_color.';}
.img_slider.owl-theme .owl-controls .owl-nav div:not(.disabled):hover { background: '.$boc_main_color.';}		

.testimonial_style_big.owl-theme .owl-controls .owl-nav div:hover,
.posts_carousel_holder.owl_side_arrows .owl-theme .owl-controls .owl-nav div:hover, 
.img_carousel_holder.owl_side_arrows .owl-theme .owl-controls .owl-nav div:hover,
.content_slides_arrowed.owl-theme .owl-controls .owl-nav div:hover,
.portfolio_carousel_holder.owl_side_arrows .owl-theme .owl-controls .owl-nav div:hover	{ color: '.$boc_main_color.';}

.boc_text_slider_word, .boc_text_slider_word_start { background: '.$boc_main_color.'; }

.post_item_block.boxed .pic { border-bottom: 3px solid '.$boc_main_color.'; }

.team_block .team_desc { color: '.$boc_main_color.';}

.bar_graph span, .bar_graph.thin_style span { background-color: '.$boc_main_color.'; }

.pagination .links a:hover{ background-color: '.$boc_main_color.';}
.hilite{ background: '.$boc_main_color.';}
.price_column.price_column_featured ul li.price_column_title{ background: '.$boc_main_color.';}

blockquote{ border-left: 3px solid '.$boc_main_color.'; }
.text_box.left_border { border-left: 3px solid '.$boc_main_color.'; }

.fortuna_table tr:hover td { background: '.boc_HexToRGB($boc_main_color, 0.08).';}

.header_cart ul.cart_list li a, .header_cart ul.product_list_widget li a { color: '.$boc_main_color.';}
.header_cart .cart-notification { background-color: '.$boc_main_color.';}
.header_cart .cart-notification:after { border-bottom-color: '.$boc_main_color.';}

.woocommerce .product_meta a { color: '.$boc_main_color.';}

.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit, .woocommerce #content input.button, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button, .woocommerce-page #respond input#submit, .woocommerce-page #content input.button { background-color: '.$boc_main_color.'!important; }
.header_cart .cart-wrap	{ background-color: '.$boc_main_color.'; }
.header_cart .cart-wrap:before { border-color: transparent '.$boc_main_color.' transparent; }
.woocommerce .widget_price_filter .ui-slider .ui-slider-range, .woocommerce-page .widget_price_filter .ui-slider .ui-slider-range{ background-color: '.$boc_main_color.' !important;}

.woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li a:focus, .woocommerce #content nav.woocommerce-pagination ul li a:hover, .woocommerce #content nav.woocommerce-pagination ul li a:focus, .woocommerce-page nav.woocommerce-pagination ul li a:hover, .woocommerce-page nav.woocommerce-pagination ul li a:focus, .woocommerce-page #content nav.woocommerce-pagination ul li a:hover, .woocommerce-page #content nav.woocommerce-pagination ul li a:focus{ background-color: '.$boc_main_color.' !important;}

.info h2{ background-color: '.$boc_main_color.';}
#footer a:hover { color: '.$boc_main_color.';}

a .pic_info.type1 .plus_overlay {	border-bottom: 50px solid '.boc_HexToRGB($boc_main_color,0.8).';}
a:hover .pic_info.type1 .plus_overlay { border-bottom: 1000px solid '.boc_HexToRGB($boc_main_color,0.8).'; }

a .pic_info.type2 .plus_overlay { border-bottom: 50px solid '.boc_HexToRGB($boc_main_color,0.75).'; }
a:hover .pic_info.type2 .plus_overlay {	border-bottom: 860px solid '.boc_HexToRGB($boc_main_color,0.8).';}

a .pic_info.type3  .img_overlay_icon {	background: '.boc_HexToRGB($boc_main_color,0.8).'; }
a:hover .pic_info.type3 .img_overlay_icon {	background: '.boc_HexToRGB($boc_main_color,0.8).';}

a .pic_info.type4 .img_overlay_icon { border-bottom: 2px solid '.boc_HexToRGB($boc_main_color,0.9).';}

a:hover .pic_info.type5 .info_overlay {	background: '.$boc_main_color.';}

.pic_info.type6 .info_overlay {	background: '.$boc_main_color.';}
a .pic_info.type6 .plus_overlay { border-bottom: 50px solid '.$boc_main_color.'; }

.pic_info.type7 .info_overlay {	background: '.boc_HexToRGB($boc_main_color,0.85).';}				

@media only screen and (max-width: 768px) {
	.cs_nav .cs_nav_item.active { background: '.$boc_main_color.' !important;}
}

BlueOwlCreative » Topic: Change Theme color Per Page

Change Theme color Per Page

Reply To: Change Theme color Per Page

Reply To: Change Theme color Per Page

Reply To: Change Theme color Per Page