Hey wordmax!

Do this, http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/, and add a class to your iconbox of “test”.

And then add this to your custom CSS.

.test {
  border: 1px solid red !important; 
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) !important;
}
.test .iconbox_content { background: blue !important; }

Regards,
Elliott

Hey surfersp!

Try adding this to your custom CSS.

.iconbox .entry-content-header {
  text-align: center;
}
.iconbox .entry-content-header * {
  float: none;
  display: inline;
}

Best regards,
Elliott

Hey elianab!

First off do this, http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/.

And then add a class of “iconbox1”, “iconbox2”, etc etc, to the iconbox elements in your page.

And then add this to your custom CSS.

.iconbox1 .iconbox_icon:before {
  content: "1" !important;
}
.iconbox2 .iconbox_icon:before{
content: "2" !important; 
}
.iconbox3 .iconbox_icon:before{
content: "3" !important;
}

Best regards,
Elliott

Hey!

Set a custom class to that icon box and add this to Quick CSS:

.custom_icon_class .iconbox_content a{
color: red;
}

Regards,
Josue

Hi!

Try adding this to your custom CSS.

.iconbox_icon { display: block; }

Best regards,
Elliott

Hi fidesco!

1. Add this to your custom CSS.

 .iconbox_content_title { text-transform: capitalize !important; }

2. See here, http://kriesi.at/archives/enfold-version-2-3-say-hello-to-our-new-iconfont-uploader. When you add a new font from fontello.com it should be available to select with the icon box shortcode.

Regards,
Elliott

Hey afarahani!

First off do this, http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/, and then add a class to your iconbox such as “icon_one”.

And then add this to your custom CSS.

.icon_one .iconbox_icon:before {
    content: "1" !important;
}
.icon_two .iconbox_icon:before {
    content: "2" !important;
}
.icon_three .iconbox_icon:before {
    content: "3" !important;
}

Regards,
Elliott

Hi!

Sorry, try adding this to your custom CSS.

.iconbox_icon { background: transparent !important; }

If you need to do it on certain elements then try this, http://kriesi.at/documentation/enfold/custom-css-and-quick-css/, to add a custom class to each element.

Best regards,
Elliott

Hey!

This is kind of bordering on custom work but it seemed easy enough to do so we’ll try it. Open up /enfold/config-templatebuilder/avia-shortcodes/iconbox.php and around line 380 find this.

$output .= 		'<div class="iconbox_content">';

Change it to this.

$output .= 		'<div class="iconbox_content" data-avia-icon-tooltip = "'.htmlspecialchars(do_shortcode($iconbox_tooltip)).'">';

Next find line 291.

'custom_font'=>'',

Add this beneath it.

'iconbox_tooltip'=>'',

Next find this code around line 130.

array(
		"name" 	=> __("Content",'avia_framework' ),
		"desc" 	=> __("Add some content for this IconBox",'avia_framework' ),
		"id" 	=> "content",
		"type" 	=> "tiny_mce",
		"std" 	=> __("Click here to add your own text", "avia_framework" )),

And add this above it.

					array(
						"name" 	=> __("Optional Tooltip",'avia_framework' ),
						"desc" 	=> __("Add a tooltip for this Icon. The tooltip will appear on mouse over",'avia_framework' ),
						"id" 	=> "iconbox_tooltip",
						"type" 	=> "textarea",
						"std" 	=> ""),

Cheers!
Elliott

Hi!

Try adding this to your custom CSS.

.iconbox_icon:hover {
    background: blue !important;
}

Or if you only want it done to that page then drag a codeblock element over to your page content and add this inside.

<style type = "text/css">
.iconbox_icon:hover {
    background: blue !important;
}
</style>

Best regards,
Elliott

Hey!

First make sure you have selected “Display small icon at the left side of the title” in the Icon Box Shortcode settings.

Then add the following code to your Quick CSS or custom.css

.home .iconbox .entry-content-header{width:90%; margin: 0 auto;}

You can adjust the width according to your design.

Cheers!
Arvish