Hi,
Yes, we can reproduce the issue with the buttons. We will forward this thread to the dev team. For now, please enable the debug mode so that you can edit the shortcodes directly.
// https://kriesi.at/documentation/enfold/intro-to-layout-builder/#debug-mode
Thanks for the update.
Best regards,
Ismael
Yes that is the form. I’m wondering how I could style that submit button to match the rest of the buttons, such as the 3 below it, that are made through Enfold?
Hi,
Please try the following in Quick CSS under Enfold->General Styling:
.page-id-3680 #av_section_1 .button {
background-color: #e42939;
color: #fff;
}
Best regards,
Rikard
Hi Vickie,
Thanks for using Enfold :-)
We don’t really recommend to use any third party layout builders with Enfold since it comes with its own. There’s no point to doing that like you say. Different layout builders have strengths and weaknesses and I guess it all boils down to what you like to use and what you are comfortable with. I have tried all the builders which you are referring to and I kind of like all of them in their own way.
I’m not sure I understand what you mean by developer license? You can save templates already in the Enfold layout builder using the Templates button in the top right hand corner of the layout window. If you want to transfer those layouts between installations then you can use debug mode: https://kriesi.at/documentation/enfold/intro-to-advanced-layout-builder/#debug-mode.
I’m not sure if this answers your questions? Please let us know if you have any further questions for us :-)
Best regards,
Rikard
Hi mierabt,
Please have a look at our docs and try the solution posted there
If you need further assistance please let us know.
Best regards,
Victoria
Hi,
Thanks for that, so you get to that screen from selecting the Add Media button in the WordPress editor, or from one of the Enfold elements? If you should need any further help then please include admin login details to your site so that we can have a closer look.
Best regards,
Rikard
What does “the specificity of the selector” mean?
Maybe the question can’t be answered: please rank them. Or, maybe developers can help?
There are also statements otherwise – that css placement does matter – in responses from other moderators on other questions. I’ve read that the styles.css has precedence over the Quick CSS. And then some settings matter.
Then it appears toggling on/off the setting | CSS file merging and compression | does have an impact as well per this support response. …here by Mike (Moderator).
And another: “I disabled this setting in Performance -> CSS file merging and compression and now I see the custom.css file as the source file.”
And here: “If you are using a child theme, typically when css is added to the child theme style.css and the css merging is on in the Enfold Theme Options > Performance > JS & CSS file merging and compression the merged file needs to be re-built by saving the theme options again. Sometimes the big blue button “save all changes” is not available to click, so try adding a blank space to the Quick CSS to active the button.”
And here “Often if someone adds css into their child theme style.css via WordPress > Appearance > Editor > Child Theme > Stylesheet and then checks their site it seems that the css is not working, this is because adding the css this way doesn’t rebuild the merged files to add the new css. by Victoria (Moderator).
I can’t be the only one confused by all of this, struggling with css, and wanting to use “best-practice” for Enfold. Would appreciate some clarity on it all. Steps or settings for best-practices, i.e, only add css here, turn this setting on, keep this off, hit the blue button when…?
Tks
-
This reply was modified 6 years, 8 months ago by
Jen.
Hey guys,
Hoping you guys can help me.
I installed the Automatic Download plugin (https://codecanyon.net/item/automatic-download/2287904) and everything works except on the back-end the “Templates” button, just disappeared.
Can you help me
Cheers
Dear Enfold-Team,
I’m trying to get a hoveranimation working. The goal is to at least let the avaia-buttons animate. With or without Icon, that is not too important.
So, this is my Code:
.my-custom-button .avia-button .avia_iconbox_title {
margin: 10%;
text-align: center;
}
.my-custom-button .avia-button .avia_iconbox_title {
color: #fff;
text-align:center;
border: none;
background-size: 300% 100% !important;
border-radius: 50px;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.my-custom-button:hover .avia-button:hover .avia_iconbox_title {
background-position: 100% 0 !important;
moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.my-custom-button .avia-button:focus .avia_iconbox_title {
outline: none;
}
.my-custom-button .avia-button {
background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);
box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
}
Basically its workin. I have a Gradient-BG in the buttons, but I cant get them to be grey to even more grey on idle to blue-voilet on hover. Is there a solution or is it just impossible?
And if it possible, can I add this Animation to nearly every Link? Like the main-menu, social-media-buttons and the send buttons in contactforms?
Thanks for your time and i wish you a nice day!
Best regards,
Videmi
TroyGuest
I have been using a Bitcoin payment provider called money button (moneybutton.com), and I have to say it’s amazing. I’m wanting to see if it’s possible for you guys to include it as a field in the form builder. This way people could create payment forms ridiculously easy, as they would just need to add the fields and their money button ID. It would be perfect if you could just choose to add a SUBMIT button or MONEYBUTTON as the submit button.
————————————————–
NAME
EMAIL
PHONE
POSTAL ADDRESS
QUESTION / COMMENT
— SWIPE – Money Button for submitting the form and making payment at the same time.
————————————————–
It would make your theme a one of a kind and I think it would boost your sales a lot being that it’s new tech and offers a bunch of solutions for users of your awesome themes!
Hey gatehealing,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
#top .main_color .avia-color-theme-color.avia-button {
color: #fff;
border-color: #1ce72d;
background-color:green;
}
If you need further assistance please let us know.
Best regards,
Victoria
Hi Victoria,
I don’t want to change any style, I just need to display the button “Choose” as it is displayed on the the Enfold Spa demo:
Where do I select this option?
Thanks and regards,
Hi Victoria,
What I want is exactly the same thing you have on the enfold demo spa, on the booking page (see links). By default I don’t want the calendar to be visible, I want it to appear when I click on the “choose” button, next to the “Date” label (see image). But when I select this option on the purchase button element it won’t display the “choose” button on the page (as it appears on the image attached.). It is there, I can see that when I inspect the page, but somehow there’s an issue that makes it invisible (the image you have sent me doesn’t show the “choose” button but it should be there).
Screenshots:
1) This is how I want my booking section looks like, with the calendar hidden and the “choose” button.

2) And this is how I want my booking section to look like when I click on the “choose” button, that is, with the calendar visible:

What can I do to fix this?
Thanks and regards,
Hello
I noticed a bug in the backend on the post overview page, when I want to click on the “quick edit” button or on the tab “help” or “Ansicht anpassen” – nothing happens. Strange thing, on “pages” that bug does not show up.
URL http://www.domain.ch/wp-admin/edit.php
This bug has something to do with the Essential Grid Plugin and Enfold theme. I tested the Essential Grid theme with a default wp theme (such as nineteen) and it was working fine. As soon as I turned to Enfold or Enfold child theme – it was not working anymore resp. nothing happens when clicked on the tabs or link.
But when you click into a post detail view, and click on the “Ansicht anpassen” tab – then that tab works.
The “quick-edit” function on edit.php page is very useful and should work also with the plugin essential grid. Can you have look into this?
Also when you turn to “pages” (wp-admin/edit.php?post_type=page) – there the quick edit link functions well. no problem at all. Hmm..
many thanks in advance,
regards
can you try this :
.page-id-102 #av_section_1 .avia-button-wrap.avia-button-center.el_after_av_hr.avia-builder-el-last {
position: absolute;
top: auto;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.page-id-102 #av_section_1 .hr-invisible.el_after_av_textblock.el_before_av_button {
padding-bottom:40px
}
i see you use autooptimize etc. – refresh all cached versions – maybe refresh merged files on enfold too
PS: the one thing with the button on hover on all screen-width i’m on that behavior now to solve
As another note, after the update to Enfold 4.5.7 several of the Enfold tabs has the ‘Save Changes’ button activated as though there were changes made even though there were not. I’ve saved changes but this action did not resolve the issue.
All the Best,
Nathan
Hi – On a homepage only (not the other pages of the website), I wanted to create a section above the menu bar. Once the user scrolls down and reaches the menu bar, the menu bar stays at the top while the user continues to scroll down below. I believe I have to create a widget, but can anyone please either direct me on instructions how to do this or recommend a plugin that works with Enfold, that can be used to create this? We also want to put a button at the top of this section (above the menu bar) but we want the button to go to our Contact Us page. I will put the link to our website and the website we are trying to emulate below. I have been searching for the answer to this but don’t see it, so I wanted to ask Support. THANK YOU as always for being the rock stars you are!!! Much appreciated.
-
This topic was modified 6 years, 9 months ago by
MCGWebmaster. Reason: Title change
Hey navindesigns,
Please try the following in Quick CSS under Enfold->General Styling:
#avia-button-center {
text-align:center;
}
Best regards,
Rikard
Hi,
there is a bug with the youtube background for mobile – it display the youtube play button behind the overlay, you simply can see that problem on one of the Enfold demos:
As I know the latest versions of mobile browsers allows autoplay for youtube embed. I will make a solution and will put it there, hope it will be fixed in the next versions.
Thanks.
Hey davidkfry,
Yes, it is possible. You need to upload the icon and assign it.
Best regards,
Victoria
Hi mazeika,
Please have a look at these threads:
Best regards,
Victoria
Hi,
Please go to Enfold child theme options > General Styling, scroll to bottom and insert space in Quick CSS field to enable save button and then save. That should help :)
Best regards,
Yigit
Hi Erwin,
Please try the following in Quick CSS under Enfold->General Styling:
.home #after_section_5 .avia_button_icon_left {
color:#000 !important;
}
Best regards,
Rikard
Hi,
How I can add an ID to buttons and Galleries ?
Thank you for the update.
// https://kriesi.at/documentation/enfold/intro-to-layout-builder/#turn-on-custom-css-class-field-for-all-alb-elements
Did you enable the custom css class field? A custom css class attribute will suffice.
$( ".custom-button-class a" ).click(function() {
$( "#myGallery" ).toggle( "slow", function() {
// Animation complete.
});
});
Replace the “custom-button-class” selector with the button’s custom css class attribute.
Best regards,
Ismael
Hey kitchkitch,
Please try the following in Quick CSS under Enfold->General Styling:
.woocommerce-page .button {
padding: 15px 5px;
}
Best regards,
Rikard
Indicating which are “from the theme” and which are “not from the theme” doesn’t help indicate hierarchy. I’ve read several places to keep “Enfold Theme Options > Performance > JS & CSS file merging and compression” turned off while developing the site.
Then, another Moderator, Mike, wrote this
“If you are using a child theme, typically when css is added to the child theme style.css and the css merging is on in the Enfold Theme Options > Performance > JS & CSS file merging and compression the merged file needs to be re-built by saving the theme options again. Sometimes the big blue button “save all changes” is not available to click, so try adding a blank space to the Quick CSS to active the button.”
Here https://kriesi.at/support/topic/column-colors-dont-change/
Now, totally confused and would imagine others are too who use the theme. Would appreciate a ranking of these as to employ best-practices on Enfold, or any other approaches.
— General Styling > Quick CSS
— Theme Editor > style.css
— Customize > Additional CSS
— CSS Hero, if installed
Hi Sascha,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (min-width:768px) and (max-width: 1024px){
.avia-button.avia-size-x-large {
padding: 20px 25px 20px;
min-width: auto;
}
}
If you need further assistance please let us know.
Best regards,
Victoria
Hi guys,
i tried to update enfold to new version with personal token but nothing happens.
I Also installed the plugin for zip file installation but there is only showing after pushing installation button “diese seite kann nicht angezeigt werden”
i can give you temporary login if it helps