Hey bulewold!
1. It should be able to import even on an existing site. Your settings will be overwritten though so please keep that in mind.
2. Yes, I imagine those layout builders would not work well with each other.
3. Consider creating a feature request here, https://kriesi.at/support/enfold-feature-requests/, and we’ll see if we can get something added in a future update.
4. Please see here, http://kriesi.at/documentation/enfold/.
5. On mobile I see the icons but on desktop there is some weird behaviour going on with the color section bottom borders. Have you done customizations? Send us a WordPress login and we’ll take a closer look.
Best regards,
Elliott
Ok, this is a GREAT Theme! Have few things to point out.
1. Demo import for existing site does NOT work. I’m assuming existing settings/plugins makes things complicated but just wanted to point out.
2. Theme clashes with visual composer. While I don’t ultimately see reason to have both but VC also has some cool features. wish it played nicer together. (I can get it to work by just updating few coding after two codes has clashed with each other lol)
3. SUGGESTION: You offer side bar selection (backend) for page, post and etc. I wish same was offered to product pages (overview & single) because I’d like just their sidebar to be on left side.
4. Where can I find full documentation? I have few other things I’d like to figure out that I’m still testing.
5. I imported business theme: http://carm.completemedicalservices.com/ and it seems like responsive for phone is not working. Meaning same demo site by enfold, three icon right under banner gets lined up top to bottom but on my site, it just stay next to each other all squeezed so you can’t even read text… Is there an issue or setting I’m overlooking?
Hello,
I am using a full width easy slider for a page introduction with text in the image.
However once the screen width hits ~740px the slider becomes unreadable and unproportional to the screen.
I want the slider there on desktop versions, however I want it to disappear and have a different slider take its place with a different picture that is mobile friendly once it hits the ~740px width.
Hey Stefan!
As you’re using custom code it wouldn’t be possible for us to help you, instead i’d suggest you to use Enfold’s grid code with CF7, here’s all the CSS code you’d need for that:
.wpcf7-form, .wpcf7-response-output{
clear:both;
}
.wpcf7-form-control-wrap {
display: block !important
}
.wpcf7-form p br{display:none;}
.wpcf7-form label {display:block; visibility: visible; position: relative; }
.wpcf7-form label, .modified_width:before{display:block; visibility: visible; position: relative; margin-bottom: 7px; font-weight: 600;}
.wpcf7-form p{ position: relative; clear:both; float:left; width:100%;}
.wpcf7-form p.hidden{position: absolute; width:0px; left:0; top:0; }
.wpcf7-form .form_element_half{width:49.5%; float:left; margin-left:1%; clear:none;}
.wpcf7-form .form_element_third{width:32.6%; float:left; margin-left:1%; clear:none;}
.wpcf7-form .form_element_two_third{width:66.4%; float:left; margin-left:1%; clear:none;}
.wpcf7-form .form_element_fourth{width:24.2%; float:left; margin-left:1%; clear:none;}
.wpcf7-form .form_element_three_fourth{width:74.8%; float:left; margin-left:1%; clear:none;}
.wpcf7-form .first_form{clear:both;margin-left:0;}
#top .wpcf7-form .wpcf7-text, #top .wpcf7-form .wpcf7-select, #top .wpcf7-form .wpcf7-textarea{
width:100%;
margin-bottom:0;
display:inline;
min-width:50px;
padding:13px;
border-radius: 2px;
}
#top .wpcf7-form .wpcf7-select{
-webkit-appearance: none;
border-radius:0px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAANCAYAAAC+ct6XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjBBRUQ1QTQ1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjBBRUQ1QTU1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGMEFFRDVBMjVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGMEFFRDVBMzVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk5mU4QAAACUSURBVHjaYmRgYJD6////MwY6AyaGAQIspCieM2cOjKkIxCFA3A0TSElJoZ3FUCANxAeAWA6IOYG4iR5BjWwpCDQCcSnNgxoIVJCDFwnwA/FHWlp8EIpHSKoGgiggLkITewrEcbQO6mVAbAbE+VD+a3IsJTc7FQAxDxD7AbEzEF+jR1DDywtoCr9DbhwzDlRZDRBgACYqHJO9bkklAAAAAElFTkSuQmCC);
background-position: center right;
background-repeat: no-repeat;
border-radius: 2px;
}
.wpcf7-form .button {
margin: 0;
padding: 16px 20px;
border-radius: 2px;
border-bottom-width: 1px;
border-bottom-style: solid;
font-weight: normal;
font-size: 12px;
min-width: 142px;
outline: none;
}
.wpcf7-form p input, .wpcf7-form p textarea, .wpcf7-form p select{
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#top .wpcf7-form-control-wrap {
display: block !important
}
#top .wpcf7-response-output{
float: left;
padding: 17px;
border-width: 1px;
border-style: dashed;
margin-left: 0;
}
#top .wpcf7-response-output.wpcf7-validation-errors, #top .wpcf7-response-output.wpcf7-spam-blocked, #top .wpcf7-response-output.wpcf7-mail-sent-ng{
background-color: #FFF8F4;
border-color: #CDA18F;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
color: #AF2C20;
}
#top .wpcf7-response-output.wpcf7-mail-sent-ok{
background-color: #E0F1B5;
border-color: #8BAF5B;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
color: #4F5F39;
}
#top .wpcf7-not-valid-tip {
color: #EF5D4F;
display: block;
}
#top .wpcf7-display-none{
display: none;
}
Once you added that re-adjust the HTML you’re already have, another thing you can do is create an Enfold contact form on a separate page, look at the generated HTML source and simply replicate it on CF7.
Cheers!
Josue
Is it possible to add an image to a table element along with bulleted text on the cell below it? If I have one long column box on the right, I cant put two boxes to aling next to it, if there’s already another box at the top. It pushes the new two boxes way down the page. Any help ,much appreciated.
Hi
I’m implementing a site for a restaurant client of mine. We need to add a reservation widget from OpenTable, one of the major suppliers of this booking systems. I’m having problems getting it to display right with Enfold.

What it should look like

What it actually looks like
It’s inheriting custom fonts for the site via CSS I’ve defined for elsewhere in the site, which is good, but there’s obviously a CSS conflict. So there are no visible icons or rules/borders, and the drop-downs are not working. My client will not accept this as it makes for a less good user experience
I found this previous topic in which another user has hit pretty much the same issue with the same 3rd party widget. The code suggestions in that thread did not help me, and the user’s client’s site still seems to have issues with displaying the OpenTable widget.
Is there a way to implement this OpenTable widget ‘as is’, so it can call the external CSS required for it to look like it’s supposed to do? I ahve inspected the code and I can see various variables. Following the advice frm the other topic, I have been able to change some parameters eg width (see below) but not get icons, borders or drop-down menus to work as they need to.
.OT_submit, .OT_submit > * {
width: 160px !important;
}
I have placed the OpenTable code inside a WP widget so I can use it in a footer socket, as well as embedded into an advanced layout. Thanks in advance for your advice on how to get this 3rd party code to display the functionality I require.
-
This topic was modified 10 years, 3 months ago by
antilimited. Reason: Neater formatting
Hey Hafeez Ullah!
Please include the exact file path when you don’t wordpress will only recognize some files like header.php, footer.php etc
Example:
Parent Theme > file
Child Theme > file
Parent Theme > folder / file
Child Theme > folder / file
Please refer to https://wordpress.org/support/topic/overriding-parent-theme-sub-files-with-a-child-theme-how for more details.
Regards,
Vinay
Hi! I’m using an image background with text on top- in a grid cell. Is it possible to add an overlay? Thinking very dense black 80% opacity over the image. Thanks much! Jen
Hello,
Page – http://www.conaculbratescu.ro/team-building-bran/
1. I want to display a color section on a fix position, top, right.
I use the Quick CSS code below but is not working on the website (page above):
#freetobook {
position: fixed;
top: 150px;
right: 0;
width: 25%;
z-index:100;
opacity: 1;
}
2. Is there any way to display the color section background transparent but the content 100% visible?
Thank you!
Toud
Hey!
Kriesi is aware of this issue and currently working on it. Actually it’s more about a WordPress issue itself, so we need to wait for a new WordPress upgrade.
Until then you can try to follow these instructions: https://kriesi.at/support/topic/pagination-not-working-after-wordpress-4-4-1-and-enfold-3-4-7/#post-565212
Cheers!
Andy
Hi Andy, thank you and I will keep to theme topics.
There was another fellow who has been assisting with this issue but the answer is no, the Media library is functioning perfectly outside of the Enfold theme. I have been on the phone with my host and they are telling me (after an hour’s worth of on the phone assistance) that this is a theme issue, not a hosting issue. Kindly look at my site to see what has been happening to anything I upload. Extremely small files appear to occasionally make it to the library, but photographs sized to 2048 x 1365 x 72 for example which is the size of the images on my home page (and your suggested size) are not making it to the library. Kindly try it your self to see. I sent a link with images sized to these proportions and I continue to get html errors. Thanks and best, Susan
Hi Sadegh!
try this code in Quick CSS field:
main.template-page.content.av-content-small.units {
background-color: red;
}
#top #main .sidebar {
background-color: blue;
}
To move it to the right side:
.avia-content-slider .slide-entry-wrap {
left: 200px;
}
Best regards,
Andy
Hey!
you could try to follow this thread, but I guess meta.php won’t work inside child theme unfortunately.
Cheers!
Andy
I’d like to space the top menu items out evenly across the top of the entire page instead of aligned right.
I need that space to adjust based on screen width.
I tried this:
#menu-main-menu > li {
width: 15% !important;
}
@media screen and (max-width: 900px) {
#menu-main-menu > li {
width: auto !important;
}
}
Which doesn’t work.
Hey!
As I understand when user scroll the page you like the content to move over the background images in mobile just like the parallax effect how it happens in the desktop version correct? Unfortunately at this time this effect had to be disabled due to a bug in the mobile browser rendering engine. Please check this thread for more info https://kriesi.at/support/topic/parallax-effect-doesnt-work-on-ipad/#post-230599
If you are able to see the effect on our demos http://kriesi.at/themes/enfold-overview/ we can surely help you achieve the same on your site.
Regards,
Vinay
well ismael we discussed it here allready for a transparent header: https://kriesi.at/support/topic/styling-single-events-page/
i want to style the searchresults page similar to the other sites on a specific installation with enfold.
On that case link above i styled the other pages with transparency header and so i want a transparency header with a banner or something else.
Now the other pages got glassy headers
it seems to be solved by :
add_filter('avf_header_setting_filter', function($header) {
if ( is_search() ) {
$header['header_transparency'] = 'header_transparency';
$header['header_class'] .= " av_header_transparency av_header_glassy";
}
return $header;
}, 10, 1);
but i guess that the line
$header['header_transparency'] = 'header_transparency';
has to be a little different becaus html gets a class too.
Hi,
how to change the height of the submit button of the contact form?
I used this code to decrease the size of the contact form fields
#top .avia_ajax_form .text_input, #top .avia_ajax_form .select, #top .avia_ajax_form .text_area {
padding: 10px;
height: 40px;
}
But the submit button is not affected. I need to reduce the height. How can i do that?
And is it possible that with the code above the field for the message is not getting smaller?
Thanks Simon
Hey!
as already asked before: Can you provide us admin access please? login from here does not work.
Best regards,
Andy
Hi, yes that pic is exactly as I wish! It also comes to me as this pic when you click the link in drop down menu. But if you click “Ajankohtaista” on top it comes (at least in our computer!) as I sent the pic earlier. I don’t understand either if it comes different way at your end??
Best,
Saija
Hi,
I have made a child theme of Enfold and have used the ALB custom class PHP snippet to add a custom class to any ALB element.
I have used the Tabs element and given it a custom class (contact-tabs). I have used the Tabs element on other areas of the site and don’t want to affect those. I am using top tabs and have icons in the tab title area. Here is the CSS I have used:
/* To center the tabs on the Contact page when additional padding is added*/
.contact-tabs .tab_titles {
position: relative;
width: 1052px !important;
clear: both;
float: none;
margin: 0 auto;
}
/* To add some space between the icons in the tabs on the Contact page */
.contact-tabs .js_active .top_tab .tab {
padding: 12px 70px 0px 70px;
}
The second bit of CSS works (.js_active .top_tab .tab) if I target that class only without prefixing it with my custom class.
So please could you help me out with getting it to work using my custom class which I have added.
Thank you.
hello, on the enfold demo page you are having this short ruler with an empty circle in the middle.
1. when i give code:
[av_hr class='short' height='150' position='center']
i got this filled circle.
– how can i get this empty circle
– where are all the codes for the differtent rulers?
– can i also adjust the thickness and color? as your ruler seems to be thinner and of a different color
– and how can i adjust the bottom or top margin of the ruler?
screenshot: http://www.jeelsites.nl/testen/ct-menu-item-1/rulers
2. [av_hr class='short' height='150' position='center']
could you explain the term ‘height’ here? as its seems to make no difference if i put 10 or 150
-
This topic was modified 10 years, 3 months ago by
yampieters.
Hey!
I put this code into your Quick CSS field:
@media only screen and (max-width: 767px) {
img.ls-bg.ls-preloaded {
width: 101% !important;
left: -34%;
height: 301px !important;
top: -37%;
}}
and now it seems to display fine on mobile. Can you confirm please?
Regards,
Andy
Hi Vinay,
sorry, I didnt know that. Thanks!
No, thats not my problem. The transparency is fine. Is it possible, that the button appears at a designated point? Or is that impossible and it always starts at the top of the page??
At this link a guy ased for the same and on his website the button appears on a designated point. I want to do it like this …
https://kriesi.at/support/topic/floating-button/
Thanks so much!
gg
Hi,
I want to display the title and meta info above the feature image. My current solution works ok, but when the page loads the title + meta appears first below the feature image and then jumps up. I would like to stop the jumping and display it above the feature image all the time.
Here is a link so you can see what I mean:
http://www.lovelifesolved.com/blog
Here is the code that I use:
In my child theme’s function.php:
function change_aviajs() {
wp_dequeue_script( 'avia-default' );
wp_enqueue_script( 'avia-default-child', get_stylesheet_directory_uri().'/js/avia.js', array('jquery'), 2, true );
}
add_action( 'wp_enqueue_scripts', 'change_aviajs', 1 );
In my child theme’s avia.js:
jQuery('article.post').each(function(){
jQuery(this).find('.entry-content-header').after(jQuery(this).find('.big-preview').detach());
})
Thanks!
Hey!
Please add following code for desktop, tablet and smart phone respectively
.single h1.product_title.entry-title { font-size: 30px !important; }
@media only screen and (max-width: 1024px) and (min-width: 481px) {
.single h1.product_title.entry-title { font-size: 24px !important; }}
@media only screen and (max-width: 480px) {
.single h1.product_title.entry-title { font-size: 20px !important; }}
Unfortunately it is not easily possible to change elements position as they show up following the order they appear on markup
Best regards,
Yigit
Hi!
You are using equal columns and align them in middle. If you would like to have less space on top and bottom, please decrease the height of your color section element. If you would like to use custom CSS, that is totally fine as well :)
Cheers!
Yigit
Hello,
I am trying to change the current-item color of the full width sub-menu. But unfortunately i can’t figure out the right css.
Could you help mi to solve this?
http://test.tanzprojekte.ch/
This is my actual code:
/***************SUB MENUS***************************/
#sub_menu1 {
background-color:#333333;
border:none !important;
background:black !important;
}
#sub_menu1 ul{
margin-left:20px !important;
font-family:”oswald”, sans-serif !important;
font-weight:bold;
font-size:1.3em;
margin-top:0 !important;
padding:0 !important;
}
#sub_menu1 li{
font-family:”oswald”, sans-serif !important;
font-weight:bold;
font-size:1.3em;
}
.av-submenu-container li.current-menu-item > a > .avia-menu-text {
color: orange !important;
}