BlueOwlCreative » Topic: Iconed Featured Texts (iconed_featured_text) main color inherit

Iconed Featured Texts (iconed_featured_text) main color inherit

BlueOwl — Thu, 23 Oct 2014 09:05:03 +0000

How to get the icons from the “iconed_featured_text” shortcode inherit your main theme color?

Reply To: Iconed Featured Texts (iconed_featured_text) main color inherit

BlueOwl — Thu, 23 Oct 2014 09:07:33 +0000

Edit your functions.php file, find this:

.shortcode_icon_solid.shortcode_icon.main_color {	background: '.$aqua_main_color.'; }
.shortcode_icon_simple.shortcode_icon.main_color  i { color: '.$aqua_main_color.'; }

and after it place this:

.iconed_featured_text .icon_feat.accent_color i { color: '.$aqua_main_color.';}
.iconed_featured_text .icon_feat.icon_solid.accent_color { background-color: '.$aqua_main_color.'; }

.section_featured_texts.type1 .icon_holder .icon_bgr { background-color: '.$aqua_main_color.'; }
.section_featured_texts.type1:hover .icon_holder .icon_bgr { border: 4px solid '.$aqua_main_color.'; }
.section_featured_texts.type1:hover .icon_holder .icon_bgr:after { border: 4px solid '.$aqua_main_color.'; }
.section_featured_texts.type1:hover .icon_holder i { color: '.$aqua_main_color.';}

.section_featured_texts.type2 .icon_holder .icon_bgr { background-color: '.$aqua_main_color.'; }
.section_featured_texts.type2:hover .icon_holder i { color: '.$aqua_main_color.';}

.section_featured_texts.type3:hover .icon_holder .icon_bgr { background-color: '.$aqua_main_color.'; }
.section_featured_texts.type3 .icon_holder .icon_bgr:after { border: 4px solid '.$aqua_main_color.'; }
.section_featured_texts.type3:hover .icon_holder .icon_bgr:after { border: 4px solid '.$aqua_main_color.'; }
.section_featured_texts.type3 .icon_holder i { color: '.$aqua_main_color.';}

.section_featured_texts.type4:hover .icon_holder  .icon_bgr { border: 4px solid '.$aqua_main_color.'; }
.section_featured_texts.type4:hover .icon_holder .icon_bgr:after { border: 4px solid '.$aqua_main_color.'; }
.section_featured_texts.type4 .icon_holder i{ color: '.$aqua_main_color.'; }
.section_featured_texts.type4:hover .icon_holder i { color:  '.$aqua_main_color.'; }

Reply To: Iconed Featured Texts (iconed_featured_text) main color inherit

jyotsna — Tue, 28 Oct 2014 17:15:22 +0000

Thanks. Please create a page builder (drag & drop) to make the Savia theme easy to use. Non-programmers like me have to learn html to use your theme. This process is too time consuming & boring for web designers like me.

Reply To: Iconed Featured Texts (iconed_featured_text) main color inherit

jyotsna — Tue, 28 Oct 2014 18:00:21 +0000

I just made this change to the functions.php file. By doing this, the iconed feature text shows the main color, but the other small icons in orange, savia blue & main color have turned grey! Please look into it. My site is http://smartmegh.awesomeliferesources.com

Reply To: Iconed Featured Texts (iconed_featured_text) main color inherit

BlueOwl — Wed, 29 Oct 2014 09:40:31 +0000

Sorry I mean after the first 2 lines add the rest, I edited my post.

Reply To: Iconed Featured Texts (iconed_featured_text) main color inherit

BlueOwl — Wed, 29 Oct 2014 09:41:42 +0000

And yes, the Visual editor is in progress, due to complications on the 2 separate systems integration there’s been a delay.

Reply To: Iconed Featured Texts (iconed_featured_text) main color inherit

jyotsna — Wed, 29 Oct 2014 10:01:21 +0000

Thanks. The icons colors are working fine now.

Reply To: Iconed Featured Texts (iconed_featured_text) main color inherit

jyotsna — Wed, 29 Oct 2014 16:01:42 +0000

The Iconed Featured Text can only have the main color? What part of the code should I change to have it in orange color?

Reply To: Iconed Featured Texts (iconed_featured_text) main color inherit

BlueOwl — Thu, 30 Oct 2014 12:47:54 +0000

You could easily create custom classes for the custom colored Featured Texts, for example copy in your CSS file the code from type2 into a new type 10 (replace all occurences of type4 with “type10″). Then put in your custom colors for backgruond/color wherever needed, then simply pass type=”10″ for the featured text:

/* pic info type10 */
.pic_info.type10{
	background: #fff;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
	box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
}

a .pic_info.type10  .img_overlay_icon {
	position:absolute;
	top: auto;
	bottom: 0;

	background: rgba(0, 0, 0, 0.0);
	border-bottom: 4px solid rgba(0, 229, 255, 0.9);
	opacity: 1;
	filter: alpha(opacity=100);
	text-align: center;
}
a:hover .pic_info.type10 .img_overlay_icon {
	background: rgba(0, 0, 0, 0.2);
	height: 100%;
}

a .pic_info.type10 .info_overlay {
	padding: 10px 0 24px;
	border-left: 1px solid rgba(0, 0, 0, 0.04);
	border-right: 1px solid rgba(0, 0, 0, 0.04);	
		
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;	
}

a:hover .pic_info.type10 .info_overlay {
	background: rgba(0, 0, 0, 0.03);
}

a .pic_info.type10 .img_overlay_icon .portfolio_icon{
	top: 50%;
	left: 50%;
	opacity: 0;	
	
	position: absolute;
	background-color: rgba(0, 0, 0, 0.7);
	background-image: url(../images/icon_plus.png);
	background-position: center center;
	background-repeat: no-repeat;
	color: #fff;
	width: 40px;
	height: 40px;	
	margin: 0 auto;
	margin-left: -20px;
	display: inline-block;
	border-radius: 50%;	
	
	-webkit-transition: all 0.1s cubic-bezier(.63,.08,.35,.92);
	-moz-transition: all 0.1s cubic-bezier(.63,.08,.35,.92);
	-o-transition: all 0.1s cubic-bezier(.63,.08,.35,.92);
	-ms-transition: all 0.1s cubic-bezier(.63,.08,.35,.92);
	transition: all 0.1s cubic-bezier(.63,.08,.35,.92);
}
a:hover .pic_info.type10 .img_overlay_icon .portfolio_icon{
	margin-top: -20px;
	opacity: 1;
	
	-webkit-transition: all 0.2s 0.1s cubic-bezier(.63,.08,.35,.92);
	-moz-transition: all 0.2s 0.1s cubic-bezier(.63,.08,.35,.92);
	-o-transition: all 0.2s 0.1s cubic-bezier(.63,.08,.35,.92);
	-ms-transition: all 0.2s 0.1s cubic-bezier(.63,.08,.35,.92);
	transition: all 0.2s 0.1s cubic-bezier(.63,.08,.35,.92);	
}
/* pic info type10 :: END */