Hi,
Thanks for the screenshot and the link to your site, please use the shortcode wand
to open the button element and style as you wish, when you save the button the shortcode will show and on the frontend the button will show.

Best regards,
Mike

Hi,

Please try the following in Quick CSS under Enfold->General Styling:

#top div .av-dark-form .input-text, #top div .av-dark-form input[type=email], #top div .av-dark-form input[type=input], #top div .av-dark-form input[type=number], #top div .av-dark-form input[type=password], #top div .av-dark-form input[type=search], #top div .av-dark-form input[type=tel], #top div .av-dark-form input[type=text], #top div .av-dark-form input[type=url], #top div .av-dark-form select, #top div .av-dark-form textarea, div div .av-dark-form .button {
    color: green;
    border-color: red;
}

Best regards,
Rikard

Hey AuroraArcus,
Thank you for your question, for reference for future readers this was the example thread on using the shortcode wand that you are referring to.
Unfortunately, there is not a way to re-edit the shortcode that is created with the shortcode wand, so if you need to adjust the code you will need to re-create the button again.
The alternative is to Enable the Avia Layout Builder Debugger and on a new page create the button with the Advanced Layout Builder button element and then text it on the frontend to see if it fits your needs and adjust to suit, then once you are satisfied copy the shortcode from the debugger widow below the builder window.
Please note that both ways use the same button element builder and both ways generates the same shortcode, so it is just a matter of which way is easier for you to work.
Also note that you could copy element shortcode from any existing page in the debugger window, but if there are multiple elements you will just want to be careful when copying the code.

Best regards,
Mike

Hey lucia llovera mateo,

You can open a new thread by using this link, or by clicking this button on the Enfold support forum: https://imgur.com/a/AnoSPNb

Best regards,
Rikard

Hi,

Thank you for the confirmation.

We may need to access the site in order to test the script further. Please provide the login details in the private field.

To disable the custom quantity buttons, please edit the enfold\config-woocommerce\woocommerce-mod.js file and remove this code around line 94.

avia_apply_quant_btn();

Make sure that file compression is disabled or toggled. You can then adjust the style of the input field using this css code.

#top div .quantity input.qty {
    height: 43px;
    width: 103px;
    display: inline;
    padding: 0px 5px 0px;
    line-height: 41px;
    vertical-align: middle;
    margin: 0;
    text-align: center;
}

Best regards,
Ismael

Hi,

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

a:where(:not(.wp-element-button)) {
  text-decoration: none;
}

Lines were added in WP 6.1 and will be removed in upcoming Enfold update :)

Best regards,
Yigit

Hi,
Typically you would follow our documentation and find your icon at fontello.com and then add it to your site. But Patreon is not available at fontello.com
So if you add a social icon that you don’t use and add your Patreon link to it we can use css to swap out the icon with one of these

let us know which one you like.

Best regards,
Mike

Hi,

Thanks for the clarification. I see that button when I change to the block editor, but I’m not sure what the actual problem is though. Is it that you can’t edit the page in question in the Enfold Layout Builder, or in the block editor? Please note that it’s advisable to only stick to one of the two editors, as they are not really compatible with each other.

Best regards,
Rikard

Hi Tilman,

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

/* No capitals */
.avia-toc-style-elegant a {
  text-transform: none;
}
/* Font size for level 1 */
.avia-toc-style-elegant .avia-toc-level-1 {
  font-size: 20px;
}
/* Font size for level 2 */
.avia-toc-style-elegant .avia-toc-level-2 {
  font-size: 18px;
}
/* Style toggle button */
.toc-toggle {
  background: transparent;
  border: none;
  font-size: 20px;
}

Then add following code to bottom of functions.php file of your child theme to add toggle button to TOC

add_action('wp_head', 'toggle_toc');
function toggle_toc(){
 ?>
 <script>
 jQuery(window).load(function(){
	var $input = jQuery('<input class="toc-toggle" type="button" value="≡" />');
    $input.prependTo(jQuery(".avia_auto_toc"));
	 
	jQuery( ".toc-toggle" ).click(function() {
	jQuery( ".avia-toc-container" ).toggle();
});
	 
});
 </script>
<?php 
}

Best regards,
Yigit

Hi Dave,

Thanks for contacting us!

Your website looks great :)

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

@media only screen and (max-width: 767px) {
.responsive #scroll-top-link {
    display: block !important;
}}

For future readers: Please refer to this post – https://kriesi.at/documentation/enfold/footer/#display-scroll-to-top-button-mobile

Regards,
Yigit

Hey Dave,
Thanks for the link to your site, to show the scroll top button on mobile please add this css to Enfold Theme Options ▸ General Styling ▸ Quick CSS field

@media only screen and (max-width: 767px){
.responsive #top #scroll-top-link {
    display: block;
}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey AuroraArcus,
Thanks for the login to your site, to create a booking button in your footer widget we will create the button using the shortcode wand, so we will open a new post and in the block editor select the classic block and in the toolbar select the shortcode wand ▸ Button:

then the standard Advanced Layout Builder button element will open for you to design the button, after you build your button and save the button shortcode will show for you to copy to your widget:

Then go to your widgets and use the Custom HTML widget and paste the shortcode:

once you have copied the shortcode to your widget you can discard the new post that you used to create the shortcode in as it is no longer needed. Now your widget button should look like this:

So if you are happy with the button that I created you can keep it or you can follow these steps and create your own.
While I created the button I added the custom class widget-book in the element options in case you wanted to fine tune the button with some css, in my final test I found the footer link color overrides the color of the text in the button so I add this css in your Quick CSS to adjust:

#footer .widget-book a {
	color:#fff;
}

so you can add any further customizations to your rule if you wish.

Best regards,
Mike

Hey,

Thanks for contacting us!

I added following code to Functions.php file near line 46th

// Register TikTok icon as a theme icon
function avia_add_custom_icon($icons) {
$icons['tiktokicon'] = array( 'font' =>'tiktok', 'icon' => 'ue800');
return $icons;
}
add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);

// Add TikTok icon as an option for social icons
function avia_add_custom_social_icon($icons) {
$icons['TikTok'] = 'tiktokicon';
return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);

And added following code to bottom of Quick CSS field in Enfold theme options > General Styling

#top #wrap_all .av-social-link-tiktokicon a, 
#top #wrap_all .av-social-link-tiktokicon a {
  color: #fff;
  background-color: #FE2C55;
}

Instructions on our docs – https://kriesi.at/documentation/enfold/social-share-buttons/#how-to-add-custom-social-icons-to-enfold-options

You are currently not using a child theme, so the modification in Functions.php file will be overwritten when you update the theme. To make the changes update proof, please switch to a child theme – https://kriesi.at/documentation/enfold/child-theme/.

Please review your website :)

Best regards,
Yigit

Hi,

Thanks for contacting us!

You can refer to this post – https://kriesi.at/documentation/enfold/social-share-buttons/#how-to-add-custom-social-icons-to-enfold-options and it to theme options as image.

Enfold uses icons from Fontello and currently there is no TikTok icon on Fontello, so we are unable to add it to theme options.

If you need assistance with that, please let us know :)

Regards,
Yigit

Hi,
Thanks for enabling the site again, when I add something to the form upload button the console shows a javascript error:
Uncaught ReferenceError: fieldId is not defined in a child theme file /wp-content/themes/enfold-child/script.js
try disabling or removing this custom script as the error may be causing a conflict for the plugin.
You are also getting CORS errors on the site, try also correcting those.

Best regards,
Mike

Hey Ryan,

Please try the following in Quick CSS under Enfold->General Styling:

#top #wrap_all .header_color .av-menu-button-colored > a .avia-menu-text {
    background-color: #edae44;
    color: #ffffff;
    border-color: #edae44;
}

Best regards,
Rikard