Dear Support,
I have noticed today that when using the Advance Layout Editor the syntax highlight stops working. I am using plugin ‘Crayon Syntax Highlighter’ which works fine when using with default WordPress editor. This plugin is very popular and it has 50000+ users.
https://wordpress.org/plugins/crayon-syntax-highlighter/
I tried to “generate” the code in WordPress default editor and then paste it to the “text block” as well as “code block” in Enfold. Unfortunately it did not work. The “raw” code from “view page source” is the following
Using “text block”
<pre class="lang:c++ decode:true " title="lalalala">lalalala</pre>
Using “code block”
<section class="avia_codeblock_section avia_code_block_0" itemscope="itemscope" itemtype="https://schema.org/BlogPosting" itemprop="blogPost" ><div class='avia_codeblock ' itemprop="text" > <pre class="lang:c++ decode:true " >lalalala</pre> </div></section>
Below you can find what should be generated in the HTML
<!-- Crayon Syntax Highlighter v_2.7.2_beta -->
<div id="crayon-599b118ada197751915175" class="crayon-syntax crayon-theme-familiar crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
<div class="crayon-toolbar" data-settings=" show" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><span class="crayon-title"></span>
<div class="crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">C++</span></div></div>
<div class="crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;"></div>
<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
lalalala</textarea></div>
<div class="crayon-main" style="">
<table class="crayon-table">
<tr class="crayon-row">
<td class="crayon-nums " data-settings="show">
<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-599b118ada197751915175-1">1</div></div>
</td>
<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-599b118ada197751915175-1"><span class="crayon-v">lalalala</span></div></div></td>
</tr>
</table>
</div>
</div>
<!-- [Format Time: 0.0002 seconds] -->
Is there a way to “tell” the Advance Layout Editor not to interact with the “raw” code?
Best regards,
MD
-
This topic was modified 8 years, 7 months ago by
midudek1.
Hi team,
actually we develope a new homepage for a customer. We use Enfold (latest version), Woocommerce 3.1.1 and from Modern Tribe Events Calendar Pro with Event Tickets Plus. My question is how i can fix the style problem of the order buttons. They look complete different with wrong size and color. Also the border around the ticket modul inside shows online a top and left side border. Hope you can help. Many thanks!!! Alexander
This reply has been marked as private.
Hi Enfold,
So I use the fullwidth Easyslider on several of my site pages (see private content). It works well on a laptop screen and iPad etc, however, when displayed on an iPhone in portrait some of the captions disappear. The main heading is there, but the sub heading and button disappear.
Is there a fix for this? Thank you.
Hi,
The burger menu is totally not working on 4.1.2 and a new install (tried several demos)
main menu stays visible, burger button appears, but no burger menu appears after click.
Your online demo sites using 4.1.1 seem to work.
Where can I download version 4.1.1.?
dont want to try any more hacks from support after wasting hours. thanks
demo/develop-site:
Hi!
Since a few days we have trouble with the Google API key.
Seems that this is a common problem.
We’re getting the error “Could not connect to Google Maps with this API Key.” So we tried a new one (we did this again and again, even from different PC’s). But after pasting the keys (restricted and unrestricted ones, doesn’t matter) into the Enfold Google Services settings field we still get the above message. (Pressing the “Check API Key” Button gives always an “OK”)
– We followed the instructions to generate a Google API Key
– We enabled Google Maps Javascript API
Credentials follow.
Hope that you can fix this.
Best regards
Volker
Hey Nathan,
Please try the following in Quick CSS under Enfold->General Styling:
.single_add_to_cart_button {
min-width:200px !important;
}
Best regards,
Rikard
yeah, seems to be. I just add rel-nofollow to the custom css class that is now available for all elements, images, buttons etc, and then checked the code and the rel=”nofollow” attribute is there. So I think it’s ok.
I know that Thrive Content Builder plugin has tha functionality to add nofollow to images, buttons etc, as does Visual Composer, be nice to see that in Enfold
Cheers
Hi Newton,
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
.main_color .pricing-table li.avia-heading-row,
.main_color .pricing-table li.avia-heading-row .pricing-extra {
background-color: #ccc !important;
color: #ffffff;
border-color: #666 !important;
}
.main_color .pricing-table li.avia-pricing-row {
background-color: #F44336 !important;
color: #ffffff;
border-color: #FF5722 !important;
}
.main_color .pricing-table>li.avia-button-row {
background-color: green !important;
border-color: #FF5722 !important;
}
If you need further assistance please let us know.
Best regards,
Victoria
Hi,
Danke, dass Ihr unser Theme verwendet.
Soweit ich weiss, ist das leider nicht so leicht möglich, da die Demos für clean installations gedacht sind und auch Seiten und Menüs etc hinzugefügt werden.
Ich nehme an, es geht in erster Linie um die Theme Einstellungen der Demo.
Da würde ich vorschlagen, dass Du eine ckean WP Installation machst (geht auch auf localhost), dort die Demo importierst und die Theme Options dann exportierst (Dashboard -> Enfold -> Import/Export -> Button Export Theme Setting Files).
Diese könnt Ihr dann in der jetzigen Site importieren (Button Import Theme Settings). Vorher aber noch den Inhalt des Feldes QuickCSS im Tab General Styling sichern, das wird überschrieben.
Nacher noch im Tab Theme Options die nötigen Anpassungen machen und die anderen kurz durchschauen, ob Anpassungen nötig sind. Auch die Menüs nicht vergessen (Dashboard -> Appearance -> Menus).
Auf jeden Fall ein komplettes Backup machen, um jederzeit ein Fallback zu haben !!
Hoffe, das hilft einmal weiter.
Best regards,
Günter
you say that before import of parent settings something was ok. Maybe you go and press that Reset all Options Button on Enfold Child.
Before you do that copy paste your quick css to your desktop text editor.
If it is better than – you can reconstruct your wanted color scheme and color settings.
If you paste in your quick css and it changes to the faulty outlook there must be one or more entries that causes this behavior.
it is a bit of work ( Widgets and all Headersettings etc must be set again) – but otherwise we wan’t find the wrong and strange behavior.
btw : this could be a better (seamless) background pattern: Link
Hello. I have added a fullscreen easy slider to a page (which I’ve done a thousand times before). When the page loads (on both Chrome and Firefox), there is a blank white space where the slider is supposed to be. The navigation buttons are visible, though, and when you click one, the slider begins to work and images show up.
For troubleshooting purposes, the slideshow has 4 images and only 3 navigation buttons show up when the page loads. Once you click a button and the slider begins to work, then all 4 buttons are visible.
I checked the console in Chrome and I’m getting jquery errors:
jquery.js?ver=1.12.4&nocache=1:2 Uncaught Error: Syntax error, unrecognized expression: #selectSessions1568004filtersession=19817404
I downloaded the latest version of Enfold (4.1) and replaced all the theme files using FTP. I deactivated all plugins. I cleared my browser cache, also. This did not fix the issue. I’m out of ideas.
Any advice or help would be greatly appreciated. Thank you.
Hey Demaup,
You can use the Fullwidth Easy Slider, which comes with two buttons built-in, but you can copy another button from the wand tool on any post or page in the default editor, and paste in the Caption to create a third button.
Here is an example button code I copied from the HTML of my demo:
<a href="#" class="avia-slideshow-button avia-button avia-color-light avia-multi-slideshow-button" data-duration="800" data-easing="easeInOutQuad">Learn more</a>
Here is the backend of where I pasted it:

Here is the front end:

Note that this just happens to be the Enfold demo I have today, but I think you’ll get the idea.
Best regards,
Mike
Hey magic.dave,
Please check at the documentation here
it will help you with your process.
Best regards,
Basilis
Hi,
I am getting the error “Could not connect to Google Maps with this API Key.” after configuring my Google API Key into the Enfold Google Services settings page and pressing the “Check API Key” Button.
– I followed the instructions to generate a Google API Key
– I enabled Google Maps Javascript API
– I tried to deactivate all plug-ins
Any ideas?
Thanks.
Steve
hello,
I am building my website with enfold, but the button to insert the tag “more” (to break an article in two parts) doesn’t work.
I tried to use it both in an article and in a slide. Furthermore, I tried to insert this code: [show_more more=”TEXT” less=”TEXT”] Content [/show_more], but the result has been the same: it doesn’t work.
May you help me ?
Thank you very much !
Hey Malene,
Please try the following in Quick CSS under Enfold->General Styling:
.avia-button.avia-color-black {
background-color: #000 !important;
}
Best regards,
Rikard
Hey obimedia2,
Can you try adding this css code in Quick CSS (located in Enfold > General Styling):
#top a.av-instagram-follow.avia-button {
background: white !important;
}
Hope this helps :)
Best regards,
Nikko
Hi Victoria
thank you for creating time to share this code, it is supportive
The button is still far to the right now
Thank you for sharing that is what you read into my message, I can see I haven’t yet been more clear in my communication
When I read “This really has little to do with Enfold, it’s WooCommerce and the booking plugin that you’re using” I’m confident I’m aware of this and I need your consideration please
That when I read “You need to have some knowledge of css an d html to be able to adjust those things.” I’m confident that I have been getting support on this site with code to enter into the Quick CSS section
All the prior code that I first shared in this thread is from moderators on this site.
Hi BodyTalkCare,
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
.bkap_start_date {
position: relative;
width: 40%;
float: left;
clear: right;
}
.show_time_slot {
margin-bottom: 10px;
width: 77%;
margin-top: 30px;
float: left;
clear: left;
}
#bkap_price {
display: block;
float: left;
}
#top form.cart .button {
display: block;
margin-top: 10px;
}
@media only screen and (max-width: 475px) {
.bkap_start_date {
position: relative;
width: 88% !important;
float: left;
clear: right;
}
.show_time_slot {
margin-bottom: 10px;
width: 100%;
margin-top: 30px;
float: left;
clear: left;
}
#bkap_price {
display: block;
float: left;
margin: 16px;
}
#top form.cart .button {
display: block;
margin-left: 30px;
}
}
This really has little to do with Enfold, it’s WooCommerce and the booking plugin that you’re using. You need to have some knowledge of css an d html to be able to adjust those things.
If you need further assistance please let us know.
Best regards,
Victoria
Hey mcraig77,
Please try the following in Quick CSS under Enfold->General Styling:
.avia-button.avia-color-dark:hover {
background-color:#C83640 !important;
color:white !important;
}
Best regards,
Rikard
Please see attached photo, how can I bring all of this banner content higher (title, description buttons) in mobile view?
Thank you!
View post on imgur.com
in addition…
Now the nav turns into hamburger menu, but:
– too early, e.g. on iPad ist enough space for the menu, but it is not shown even in landscape
– via the hamburger button I can only access 2nd level subpages (e.g.Mein Behandlungsansatz”, but not the 1st level main pages (as e.g. “Christiane Möller”
– the menus in the footer (columns 1,2,3) disappear as well what they should not…
Ideally, it shall be as on our page http://www.fitgutschein.de (enfold 4.07) – > how do I get this 1:1 here?
It would be really great to get this solved as the page is now not really usable on mobile :-(
thx lot & cheers!
-
This reply was modified 8 years, 7 months ago by
oestersund.
Hi Claes,
The classes generated for the button and the container have the single quotes that are not suppoesd to be there and that break things.
View post on imgur.com
Could you please enable the Advanced Layout Builder debug mode . Here is how to do it: http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/
Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?
Best regards,
Victoria
i’m creating a website with Enfold theme but the scroll to top button is not there on iPhone (is working on android).
How to resolve
Hi there,
I’ve got a guestion about Enfold.
Is it possible to ad buttons (like the examples in this att: https://www.dropbox.com/s/wim1x0nm7tcp5ea/Schermafbeelding%202017-08-14%20om%2012.40.02.jpg?dl=0 ) at the side of a fullscreen slider?
Here is the link to the website I saw this buttons (not Enfold): http://www.tielemankeukens.nl/
I hope you can help me with it.
Regards, Jeroen
Hi mcraig77,
There is no room for those buttons on mobile, you need to come up with a different solution.
Put them blew the logo or somewhere else. This code hides them for now.
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 (max-width: 475px) {
#text-6 {
display: none;
}
.responsive .logo img {
width: 80%;
}
}
@media only screen and (max-width: 767px) {
#header .main_menu {
right: 0;
margin-right: 0;
}
}
If you need further assistance please let us know.
Best regards,
Victoria
HI,
on my page http://www.praxis-christiane-moeller.de/ I´ve tried several css snippets to ensure the menu changes early enough (i.e. w/o overalapping into a 2nd row) into the hamburger button. But all of those did not work.. e.g. the current one:
/* media queries */
@media only screen and (max-width: 1040px) {
.av-main-nav > li > a { padding: 0 11px; }}
Also, I do not find on enfold 4.12 the “mobile” tab in the header configuration any longer – why? Where can I define this instead?
thx a lot in advance & best regards, Tilman
Hi,
I have checked it and there’s should be no update button on the checkout page but this shows on cart page (link in private content), on the checkout however place order button is missing, you can add this code to Quick CSS (located in Enfold > General Styling):
#payment .woocommerce-terms-and-conditions {
display: block !important;
}
#payment .woocommerce-terms-and-conditions #layer_slider_1 {
display: none;
}
Hope this helps :)
Best regards,
Nikko
Hi,
I was able to fix it by adding this code to the end of your functions.php file in Appearance > Editor:
add_filter('avia_post_nav_settings','avia_remove_fullwidth_slider_check', 10, 1);
function avia_remove_fullwidth_slider_check($settings)
{
$settings['is_fullwidth'] = false;
return $settings;
}
Enfold deactivates the post navigation on pages with fullwidth sliders or some elements to avoid that the slider buttons overlap the post navigation and vice versa.
When editing functions.php you should use the child theme, Read about it & Get it here Your next update will lose this mod.
Best regards,
Mike