Button – Remove background

Hey blankonblank!

Thank you for using Enfold.

Do you mind if we take a look at the actual page with the button? We can remove the background of the button via CSS.

Regards,
Ismael

Hi!

Thank you for the info.

Please use this on Quick CSS or custom.css:

.avia-button-wrap.avia-button-center.avia-builder-el-7.el_after_av_heading.avia-builder-el-last a.avia-button.avia-icon_select-no.avia-color-custom.avia-size-large.avia-position-center {
background: transparent !important;
border: 1px solid white !important;
box-shadow: inset 0 0 10px white;
}

Another way to do that is to apply a unique css selector for the button or any advance layout builder 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 the button element then scroll below. Add a unique css selector on “Custom Css Class” field. For example, add “transparent-button”.

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

.transparent-button a.avia-button {
background: transparent !important;
border: 1px solid white !important;
box-shadow: inset 0 0 10px white;
}

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

Regards,
Ismael

Hey!

In that case, you should refer to second solution. It would be more stable too

Best regards,
Yigit

Hey!

Simply add following code to Functions.php file in Appearance > Editor

add_theme_support('avia_template_builder_custom_css');

and follow the instructions Ismael posted here

Cheers!
Yigit

Hi!

You should see Custom CSS field now – http://kriesi.at/documentation/enfold/wp-content/uploads/sites/2/2013/12/blur.jpg
Please edit your buttons and add “transparent-button” into custom CSS field, update your page then add following custom CSS code in Quick CSS field ( inside Enfold theme options > General Styling tab ) or Custom.css file ( inside Enfold/CSS folder )

.transparent-button a.avia-button {
background: transparent !important;
border: 1px solid white !important;
box-shadow: inset 0 0 10px white;
}

Code will be applied only on buttons with custom CSS class “transparent-button”.

Cheers!
Yigit