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

Hey youyou78!

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

span.avia_button_icon {
font-size: 20px;
}

Regards,
Yigit

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 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 Rustybucket!

Please turn on custom CSS field for ALB elements – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and give your buttons custom CSS classes and adjust their position using custom CSS code in Quick CSS field.

Cheers!
Yigit

Hi!

Please add following code to Quick CSS in Enfold theme options under General Styling tab

 #av_section_2 input.button { background-color: #9ef2e0!important; border: none!important; margin-top: 25px; margin-left: 10px; }
#av_section_2 .avia_ajax_form p { width: 22%; clear: right; }
.avia_ajax_form .form_element_half { width: 37.5%; }

Cheers!
Yigit

Hey Igor! :)

I am not sure if that would be easily possible but you can try using Code Block element and add your button inside it using HTML – http://i.imgur.com/kjjya7I.png
and then you can add custom CSS code to Quick CSS in Enfold theme options > General Styling tab to style it

.custom-text {
position: fixed;
top: 60%;
z-index: 9999!important;
left: 0%;
background-color: yellow;
padding: 10px;
}

Cheers!
Yigit

Hey!

Sorry for the late reply!
Elements are displayed in HTML order and the button that is on the bottom of left column will always be displayed before the right column. The simplest way would be turning on custom CSS field for ALB element ( please see – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ ) and giving your buttons that are at the bottom of left 1/2 column element a custom class ( for example: custom-desktop-button ) and add an extra button with the same link to bottom of right 1/2 column with a unique class ( for example: custom-mobile-button ). And using following code in Quick CSS in Enfold theme options under General Styling tab, you can display the left button on desktop while keep extra button hidden, and hide left button on mobile and display extra button instead

@media only screen and (max-width: 768px) {
.custom-desktop-button { display: none!important; }
.custom-mobile-button { display: block !important; }}
@media only screen and (min-width: 769px) {
.custom-mobile-button { display: none !important; }}

Regards,
Yigit