icons and content

Hey Sadegh!

You can use Tabs element and insert icon shortcodes into tab titles

You can enable debugging mode to see shortcodes you have created in pages using Advanced Layout Builder – http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/

Or, You can switch to Default Editor and click on Magic Wand to see full list of shortcodes http://i.imgur.com/n4KXkdm.jpg
then you can create any of them and copy/paste shortcode into any other content element or into text widget.

Best regards,
Yigit

Hi!

Can you please post the link to your page? :)

Cheers!
Yigit

Hi!

Please add following code to Quick CSS

div .main_color .tabcontainer .active_tab_content, div .main_color .tabcontainer .active_tab {
    background-color: white;
    border: none;
}
.js_active .tab {
    border: 1px solid #e2e2e2!important;
    border-radius: 100px!important;
    margin-left: 10px;
    background: white;
}
.js_active .active_tab_content {
    border-top: 1px solid #e2e2e2!important;
    top: -25px;
    padding-top: 30px;
}

Regards,
Yigit

Hi!

Please add following code to Quick CSS as well

.active_tab .tab_icon {
    color: #719430;
}
.tab_icon {
    color: #888888;
}
.tab {
    color: transparent!important;
}

Best regards,
Yigit

Hi!

You are welcome, let us know if you have any other questions :)

Regards,
Yigit

Hey!

Please change the code to following one

main.content .active_tab .tab_icon {
    color: #719430;
}
main.content .tab_icon {
    color: #888888;
}
main.content .tab {
    color: transparent!important;
}
main.content .main_color .tabcontainer .active_tab_content, main.content .main_color .tabcontainer .active_tab {
    background-color: white;
    border: none;
}
main.content .js_active .tab {
    border: 1px solid #e2e2e2!important;
    border-radius: 100px!important;
    margin-left: 10px;
    background: white;
}
main.content .js_active .active_tab_content {
    border-top: 1px solid #e2e2e2!important;
    top: -25px;
    padding-top: 30px;
}

Best regards,
Yigit

Hi!

In that case, please turn on custom CSS field for ALB elements – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and then edit your tab element and give it a custom CSS class and then change the code to following one

.your-custom-class .active_tab .tab_icon {
    color: #719430;
}
.your-custom-class .tab_icon {
    color: #888888;
}
.your-custom-class .tab {
    color: transparent!important;
}
.your-custom-class .active_tab_content, .your-custom-class .active_tab {
    background-color: white;
    border: none;
}
.your-custom-class .js_active .tab {
    border: 1px solid #e2e2e2!important;
    border-radius: 100px!important;
    margin-left: 10px;
    background: white;
}
.your-custom-class .js_active .active_tab_content {
    border-top: 1px solid #e2e2e2!important;
    top: -25px;
    padding-top: 30px;
}

Cheers!
Yigit