Yes… I have modified the css and now works fine.
#top .av-share-box ul {
background: #37589b none repeat scroll 0 0;
border-radius: 100px;
border-style: solid;
border-width: 1px;
color: #fff;
display: table;
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 0;
text-align: center;
width: 58px;
height: 50px;
}
and now it works fine
Thanks
Is there an id of each layout element, so i can configurate with custom css.
For example by editing the column padding-top 100px but on mobile device ther should be no padding-top.
Best regards
Lili
Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
#top #wrap_all .av-social-link-facebook {
color: #fff;
background-color: #37589b!important;
border-radius:50px;
margin-right:10px;
}
#top #wrap_all .av-social-link-twitter {
color: #fff;
background-color: #46d4fe!important;
border-radius:50px;
margin-right:10px;
}
#top #wrap_all .av-social-link-instagram {
color: #fff;
background-color: #a67658!important;
border-radius:50px;
}
Best regards,
Vinay
Hello,
When i insert an image into the Advance Slider or Full Width Slider, the image is not displayed in the front end.
Can you please look into the issue. I also followed this thread: https://kriesi.at/support/topic/having-problems-after-updating-to-wordpress-4-5-please-read-this-first/
Here is my website URL; http://nafl.ae/beta
Hello.
First of all let me say that Enfold is great and thank you for such a great work.
And now to my problem. I had full site setup up on one domain, and everything worked great, but when we linked our domain to it and changed it to default domain in wordpress the google map widget suddenly stopped working – http://hewea.com , bottom of the page
How can I resolve the issue?
-
This topic was modified 9 years, 7 months ago by
hewea.
Hey hdpcr,
You can add a map image on the same page and hide the image in desktop and show only hotspot. An extra page won’t be necessary.
Turnon custom css class name support for layout elements http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
and class only_mobile to the map image and only_desktop to the hotspot and use the below css
/*Show only in mobile or desktop*/
@media only screen and (min-width: 769px) {
.only_mobile { display: none !important; }}
@media only screen and (max-width: 768px) {
.only_desktop { display: none !important; }}
Best regards,
Vinay
Hi,
Glad to hear you found it :)
Feel free to start a new topic if you need help with anything else.
Best regards,
Jordan
Hello! I’m hoping you can help
i’m trying to change the background color and font color of the tab module. I can successfully do this by changing this:
.main_color .template-archives .tabcontainer a, #top .main_color .tabcontainer .tab:hover, #top .main_color .tabcontainer .tab.active_tab{color:#666666;}
to this:
.main_color .template-archives .tabcontainer a, #top .main_color .tabcontainer .tab:hover, #top .main_color .tabcontainer .tab.active_tab{background-color:#a81010; color:#ffffff;}
if i put this in the Quick CSS, it works great. If i put it in my Enfold Child style.css, it doesn’t work
Is there a place i can put this so i don’t have to put it in the Quick CSS?
Thanks!
I have successfully adjusted the code that hotspot tooltips open on click.
https://kriesi.at/support/topic/image-hotspots-clickable-rather-than-on-hover/
Would it be possible to have one image hotspot open by default on page load?
Additionally would it be hard to implement external links to trigger a hotspot tooltip?
For example clicking a link Hotspot 1 would open tooltip for first hotspot.
Hi,
Add your own image as the navigation background:
#top .avia-slideshow-arrows .prev-slide {
/* prev button */
background: url(IMAGE URL HERE) no-repeat center;
}
#top .avia-slideshow-arrows .next-slide {
/* next button */
background: url(IMAGE URL HERE) no-repeat center;
}
#top .avia-slideshow-arrows a:before {
content: '';
}
Best regards,
Ismael
Hi,
Thanks for the information.
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
#top #header.av_header_transparency .avia_mega_div {
width: auto !important;
}
Best regards,
Jordan
Hi,
There’s a syntax error in shortcodes.j, line 458. The src key has been duplicated but it is fixed now. However, the google API issue is still there. Please follow the instructions provided here: https://kriesi.at/support/topic/content-element-google-maps/#post-656399
UPDATE: We added this code in the functions.php file and it fixed the api issue:
function ava_googlemaps_apikey() {
$prefix = is_ssl() ? "https" : "http";
wp_deregister_script('avia-google-maps-api');
wp_register_script( 'avia-google-maps-api', $prefix.'://maps.google.com/maps/api/js?key=AIzaSyCika0TIXFpp42smsBzlrZTkxRfeCEEGzQ', array('jquery'), '3', true);
wp_enqueue_script('avia-google-maps-api');
}
add_action('init', 'ava_googlemaps_apikey');
Please remove browser cache or hard refresh the page.
Best regards,
Ismael
Hi,
The video needs to be larger or I need to add an image where the video is located currently and add a screen shot of the video and link it to the video, but I want that video to pop-up in a lightbox. Is that possible?
Add an Image element then set the Link Settings > Image Link? to “Manually”. Add the url of the video, preferably youtube or vimeo videos.
I have sent the credentials in the other requests. I think I have 3 open requests, but I’ve solved the one about the top menu bar.
Please post the login credentials on this particular thread so that we can check the settings.
Best regards,
Ismael
HI Rikard,
This is the topic i am referring to. Thanks
Hey alexbanaga,
Thanks for getting in touch with us!
Kriesi has been notified of this issue and it is being looked into. A fix will be included in the next patch.
Until then please try this suggested quick fix and let me know how it goes – https://kriesi.at/support/topic/woocommerce-2-6-problem-urgent/#post-650161
Best regards,
Jordan
Hi,
Have you tried the Images element? Stack them on top of one another. You can’t use the masonry element because there’s a script that automatically calculates the position of the items.
Best regards,
Ismael
Hi,
Add this in the Quick CSS field:
#top .aviaccordion.av-animation-active .aviaccordion-slide, #top .aviaccordion-title-on-hover .aviaccordion-preview {
-webkit-transition: all 0.2s cubic-bezier(0.230, 1.000, 0.320, 1.000);
transition: all 0.2s cubic-bezier(0.230, 1.000, 0.320, 1.000);
}
The default duration is 0.7s.
Best regards,
Ismael
So see this page:
You can see we have three icon boxes. The two below the circle icon is centered. But the bigger box is not centered. Here is the code for that. I will include the login if you need it Privately of course.
/* Icon Box ReSize */
.iconbox_top .iconbox_icon { font-size: 80px!important; height: 90px; width: 90px; line-height: 84px; top: -64px; }
.iconbox .iconbox_content .iconbox_content_title { margin: 30px 0 16px 0;}
.iconbox_top .iconbox_content { margin-top: 80px; }
.iconbox_icon {left:43% !important;}
I need the larger box icon centered too but I can not seem to fix that.
Thank for your amazingly brilliant help as always.
The Google AdSense plugin is used. The ads look good on desktop viewing, but on mobile they overlap website blog content text. Plus little blue dots appear.
The issue might be that the div (the parameters of the ad unit) containing the ad is wider than 336 pixels and so the responsive ad is trying to fill to the max width of the div. If so, is there a ‘quick css’ way to increase the height of the div to greater than 280 pixels? Or what else can be done to make sure that the ads don’t overlap content on mobile viewing?
Hi,
I’d like to use the option to attach the shopping cart icon to the main menu but ONLY when the cart is not empty, i dont see the option currently
Also, how do i disable the shopping cart pop-up menu that display the items in the cart when hovering the mouse over the shopping cart icon
lastly, when selecting to show the shopping cart beside the menu, the desktop version does it well but on mobile the icon is missing on the menu, so there is no way to go back to your cart for mobile user, how to enable the menu for mobile as well ?
-
This topic was modified 9 years, 7 months ago by
yingyang.
Hi,
Change code to:
div#header_main {
display: none;
}
.html_top_nav_header.html_header_top.html_header_sticky #top #wrap_all #main {
padding-top: 0;
}
Best regards,
Josue
I understand. I think Revolution is better as it has a library of importable templates which are very good and modern. Layer has too many cheesy animations and less quality UI of the themes of sliders. Ask him to look at it over the years it has moved ahead Alot.
Thank you- not sure how to do that. Re send screen of what I cant achieve as yet.
The issue is the height of the slider at the top. Extra white space makes the header very wide. I have tried setting the height in the theme setting to slim and it makes no difference and setting the header to the minimum height does not reduce it either. Any thoughts?
so I want to make the header appear slim so the slider is not so low down. Its a fixed header and I would like the height to be the same when the page loads i.e. slim.
Thanks
S
Thanks
Hey Picante,
Thanks for getting in touch with us!
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
.html_main_nav_header.html_logo_left #top .main_menu .menu>li:last-child>a, .html_bottom_nav_header #top #menu-item-search>a {
padding-right: 13px !important;
}
Best regards,
Jordan
Hi
I have a large map with hotspots (many hotspots) it looks great in desktop but not that good in mobiles very confusing, So my question is: It is possible to have some custom CSS that detects if visitor is browsing from mobile or tablet and redirect him to other page that will only have a map image with no hotspots (a whole different page)
Thank you very much
At best it’s a half-assed solution – it does not account for the margin on the left that Enfold inserts (on all screen sizes!) and it stops the grid from being a grid, instead it’s always single-coloumn full width on ALL screen sizes (there is no media query in that solution). I expect more from you at support…
Hi Ismael,
in the layers we are using paragraphs and H2. In the custom.css file we styled like this:
h2 {
font-family: FF-DIN-Round-Pro-Medium, sans-serif;
font-size: 1.6rem;
font-weight: 300;
}
h2 strong {
font-family: FF-DIN-Round-Pro-Bold, sans-serif;
font-size: 1.6rem;
font-weight: 500;
}
p {
font-family: FF-DIN-Round-Pro-Regular, sans-serif;
line-height: 140%;
margin-top: 0px !important;
font-weight: 300;
}
p strong {
font-family: FF-DIN-Round-Pro-Bold, sans-serif;
}
Best regards
Holger
Hi,
Just a quick question regarding column stacking.
I’m using the page builder and have two 1/2 columns side by side.
Under this, I have another two 1/2 columns side by side.
Now currently they are displayed in rows.
Basically, in my top column, the right 1/2 column is longer than the left and this causes the 2 columns beneath it to be pushed down.
However, I want the columns underneath it to stack (like a masonry grid I guess it would be).
So to clarify the 2 left-hand side columns would be on the left-hand side with normal spacing between them, whilst on the right-hand side the top right column would finish say halfway down (or where ever it does) into the 2nd left-hand column. The bottom right column would then show under this.
See the image below for an example. On the left we have the current way columns are stacked (note I’m using three 1/2 columns here). On the right is how it ‘should’ stack.

Is there a way to stop masonry portfolio builder to enlarge the portfolio picts? I tried to create a masonry portfolio page with exact picture sizes, but when i look at the page the Picts are kind of zoomed in, is there a work around?