Hey kevinmkelly!

Please turn on custom CSS field on ALB elements firstly – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
then give a custom class to one of your iconboxes and add following code to Quick CSS in Enfold theme options under General Styling tab

.custom-class .iconbox_top .iconbox_icon {
background: red!important;
}

Regards,
Yigit

Hi!

2- Please add following code to Quick CSS in Enfold theme options under General Styling tab and adjust as needed

.iconbox .iconbox_content .iconbox_content_title { font-size: 18px; color: red; }

– You can use custom CSS as following

.ls-l {
font-family: arial;
}

Regards,
Yigit

Hi SMDNAS!

Thank you for visiting the support forum!

Yes, that is possible but first you need to add the avia_template_builder_custom_css support. You’ll be able to add a unique selector for each Avia Elements. Edit functions.php, find this code:

if(isset($avia_config['use_child_theme_functions_only'])) return;

Below, add this code:

add_theme_support('avia_template_builder_custom_css');

Edit any avia elements like the iconbox element then scroll below. Add a unique css selector on “Custom Css Class” field. For example, add “iconbox-bg”.

You can add something like this on your custom.css or Quick CSS:

.iconbox.iconbox-bg .iconbox_content {
background: red;
}

Refer to this link for more info: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

Best regards,
Ismael

Hey vastaffer!

Please turn on Custom CSS field – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
and give your iconboxes custom class, for example “remove-icon” and then add following code to Quick CSS in Enfold theme options under General Styling tab

.remove-icon .iconbox_icon { display: none!important; }

Regards,
Yigit

Hey ElementArt!

Please turn on custom CSS field for Avia Layout Builder elements – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
then add custom class to each iconbox element and use following code instead

.custom-class-1 .iconbox_icon { background-color: orange !important; }
.custom-class-2 .iconbox_icon { background-color: red !important; }

Best regards,
Yigit

Hi!

Yes, you can use it as following

.custom_icon_2 .iconbox_icon {
    color: red !important;
    border-color: orange !important; 
}

Cheers!
Yigit

Hey!

Thank you for using the theme!

Please add this at the very bottom of Quick CSS or custom.css then delete the enfold.css file and save the theme options again to regenerate the file. Make sure that the file permission is 755 or higher.

.header_color .primary-background, .header_color .primary-background a, div .header_color .button, .header_color #submit, .header_color input[type="submit"], .header_color .small-preview:hover, .header_color .avia-menu-fx, .header_color .avia-menu-fx .avia-arrow, .header_color.iconbox_top .iconbox_icon, .header_color .iconbox_top a.iconbox_icon:hover, .header_color .avia-data-table th.avia-highlight-col, .header_color .avia-color-theme-color, .header_color .avia-color-theme-color:hover, .header_color .image-overlay .image-overlay-inside:before, .header_color .comment-count, .header_color .av_dropcap2 {
    background-color: #649ECB !important;
    border-color: #649ECB !important;
}

Best regards,
Ismael

Hi!

Thank you for the update.

Please remove the inline styling then add a custom css selector for the iconboxes that you want to have a centered content. Edit functions.php, find this code:

if(isset($avia_config['use_child_theme_functions_only'])) return;

Below, add this code:

add_theme_support('avia_template_builder_custom_css');

Edit any avia elements like the icon box element then scroll below. Add a unique css selector on “Custom Css Class” field. For example, add “.centered-iconbox “.

You can add something like this on your custom.css or Quick CSS:

.centered-iconbox div.iconbox_content_container {
text-align: center;
}

Refer to this link for more info: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

Cheers!
Ismael

Hey!

Thank you for the update.

The Road Show icon box is visible, checking on Chrome and Firefox Windows 8.

The modification that you did is a bit extensive and you said that it can be done easily if only you can add a custom class or ID on the iconbox. Actually you can do it by adding the theme support for custom css class, just follow the instruction on the link Dude suggested. Edit functions.php, find this code:

if(isset($avia_config['use_child_theme_functions_only'])) return;

Below, add this code:

add_theme_support('avia_template_builder_custom_css');

Edit any avia elements like the Icon Box element then scroll below. Add a unique css selector on “Custom Css Class” field. If I am not mistaken, the issue why the iconbox is not showing intermittently is because of the stack or layering order of the color sections so please try to add this on Quick CSS or custom.css:

#after_section_6.container_wrap {
z-index: 9999;
}

Cheers!
Ismael

Hi!

Did you added any custom CSS code to make any fonts italic? I am not sure which ones you would like to keep in italic and which ones in normal so i provide custom CSS code as you point out elements

.iconbox_top .iconbox_content { font-style: normal !important; }

Cheers!
Yigit

Hi!

Thank you for the update.

Please use this at the very bottom of Quick CSS or custom.css:

.iconbox_content_title, body .av-special-heading .av-special-heading-tag {
font-family: “Trebuchet MS”, “Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”, Tahoma, sans-serif !important;
}

Make sure that you didn’t add it inside any media query.

Best regards,
Ismael

Hey richardruddle!

Thank you for using the theme!

You can add this on Quick CSS or custom.css to adjust the top margin of the icon box:

#top .iconbox_top {
margin-top: 50px;
}

It is possible to add a unique css selector for any avia elements. You need to enable the custom_css support. Edit functions.php, find this code on line 16:

if(isset($avia_config['use_child_theme_functions_only'])) return;

Below, add this code:

add_theme_support('avia_template_builder_custom_css');

Edit any avia elements like the IMAGE element then scroll below. Add a unique css selector on “Custom Css Class” field. For example, add “awesome-image”.

You can add something like this on your custom.css or Quick CSS:

.avia_image.awesome-image {
width: 210px;
}

Regards,
Ismael

Hi stuartleighbray!

Thank you for visiting the support forum!

If you want to make the iconbox icons container square, use this on Quick CSS or custom.css:

.iconbox_top .iconbox_icon {
padding: 15px;
border-radius: 0;
}

I hope that helps.

Best regards,
Ismael

Hey!

Glad it is working now.

Please wait for the 2.7 update which will fix the custom icon fonts. (see https://kriesi.at/support/topic/custom-icons-in-iconboxes/)

Cheers!
Ismael