Hey Tilman,
Try this css:
.phone-info .av-icon-char {
top: -3px;
position: relative;
}
Best regards,
Mike
Dear team,
on my page below I use the top bar – phone icon plus phone number. but the icon appears horizontally nit in line with the niummber – icon is a little lower. How can I add a padding etc just for the icon only?
thx a lot & best regards Tilman
-
This topic was modified 3 hours, 31 minutes ago by
oestersund.
Hey Antonio,
Thanks for your patience, try this css:
.header_color .header_bg {
background-color: transparent;
}
.html_header_top.html_header_sticky #top #wrap_all #main {
padding-top: 0;
}
.av-logo-container .inner-container {
border: 1px solid #e6e6e6;
border-radius: 100px;
box-sizing: border-box;
background-color: #fff;
margin-top: 20px;
}
.logo.avia-standard-logo {
padding-left: 20px;
}
.template-page.content {
padding-top: 150px;
}
This is how it should look:

Best regards,
Mike
Hi,
I believe Ismael’s solution is for the masonry items (posts) were a custom field can be added, but you want to use masonry gallery images where the custom field is not an option.
Instead try this function in your child theme functions.php:
/**
* Add SOLD overlay to specific masonry gallery items based on the data-av-masonry-item attribute
*/
function add_sold_overlay_to_masonry_gallery() {
// Define which masonry items should show as SOLD
$sold_items = array(973, 866, 865);
// Convert to JavaScript array
$sold_items_js = json_encode($sold_items);
?>
<script>
jQuery(document).ready(function($) {
// Items to mark as sold
var soldItems = <?php echo $sold_items_js; ?>;
// Add sold-item class to each specified masonry item
soldItems.forEach(function(itemId) {
$('.av-masonry-gallery .av-masonry-entry[data-av-masonry-item="' + itemId + '"]').addClass('sold-item');
});
});
</script>
<style>
/* SOLD overlay styles */
.av-masonry-entry.sold-item {
position: relative;
}
.av-masonry-entry.sold-item::before {
content: "SOLD";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 0, 0, 0.85);
color: white;
font-size: 24px;
font-weight: bold;
padding: 10px 30px;
z-index: 10;
letter-spacing: 2px;
border: 3px solid white;
}
.av-masonry-entry.sold-item::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0);
z-index: 9;
}
</style>
<?php
}
add_action('wp_footer', 'add_sold_overlay_to_masonry_gallery');
At the top of the function define which masonry items should show as SOLD in this line:
$sold_items = array(973, 866, 865);
these are the media library attachment IDs

this is the result:

Best regards,
Mike
It depends a little on how you want to use it. If you only want to change this to “next bio” and “previous bio” for certain custom classes, we would need to rewrite this code a little.
f.e. if you have a gallery – then you can give a custom class to that gallery element (f.e. team-member)
function add_magnific_popup_aria_labels() {
?>
<script type="text/javascript">
(function($) {
'use strict';
if (typeof $.avia_utilities !== 'undefined' && typeof $.avia_utilities.av_popup !== 'undefined') {
var originalOpenCallback = $.avia_utilities.av_popup.callbacks.open;
$.avia_utilities.av_popup.callbacks.open = function() {
if (typeof originalOpenCallback === 'function') {
originalOpenCallback.call(this);
}
var self = this;
setTimeout(function() {
// Determine labels based on the gallery container
var prevLabel = 'Previous image';
var nextLabel = 'Next image';
var closeLabel = 'Close lightbox';
// Check if the clicked element (currItem.el) is inside a container with a custom class
if (self.currItem && self.currItem.el) {
var $link = $(self.currItem.el);
// Find the parent lightbox container element
var $lightboxContainer = $link.closest('.avia-gallery, .av-masonry, .av-horizontal-gallery');
if ($lightboxContainer.hasClass('team-member')) {
prevLabel = 'Previous person';
nextLabel = 'Next person';
closeLabel = 'Close biography';
} else if ($lightboxContainer.hasClass('products-gallery')) {
prevLabel = 'Previous product';
nextLabel = 'Next product';
closeLabel = 'Close product gallery';
} else if ($lightboxContainer.hasClass('projects-gallery')) {
prevLabel = 'Previous project';
nextLabel = 'Next project';
closeLabel = 'Close project gallery';
}
// Add more conditions as needed
}
$('.mfp-arrow-left').attr('aria-label', prevLabel);
$('.mfp-arrow-right').attr('aria-label', nextLabel);
$('.mfp-close').attr('aria-label', closeLabel);
}, 50);
};
var originalChangeCallback = $.avia_utilities.av_popup.callbacks.change;
$.avia_utilities.av_popup.callbacks.change = function() {
if (typeof originalChangeCallback === 'function') {
originalChangeCallback.call(this);
}
var self = this;
// Update labels when changing images
var prevLabel = 'Previous image';
var nextLabel = 'Next image';
if (self.currItem && self.currItem.el) {
var $link = $(self.currItem.el);
var $lightboxContainer = $link.closest('.avia-gallery, .av-masonry, .isotope, .av-horizontal-gallery');
if ($lightboxContainer.hasClass('team-member')) {
prevLabel = 'Previous person';
nextLabel = 'Next person';
} else if ($lightboxContainer.hasClass('products-gallery')) {
prevLabel = 'Previous product';
nextLabel = 'Next product';
} else if ($lightboxContainer.hasClass('projects-gallery')) {
prevLabel = 'Previous project';
nextLabel = 'Next project';
}
}
$('.mfp-arrow-left').attr('aria-label', prevLabel);
$('.mfp-arrow-right').attr('aria-label', nextLabel);
};
}
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_magnific_popup_aria_labels', 999);
you see this line includes masonry etc. if you like:
// Find the parent lightbox container element
var $lightboxContainer = $link.closest('.avia-gallery, .av-masonry, .av-horizontal-gallery');
Hello Ismael,
the code is not working, I cannot see any visible difference in the front end.
If I put instead this code
.woocommerce form .password-input {
display: flex;
flex-direction: column;
justify-content: center;
position: relative
}
.woocommerce form .password-input input {
padding-right: 2.5rem !important;
margin-bottom: 0;
}
.woocommerce form .password-input input::-ms-reveal {
display: none
}
.woocommerce form .show-password-input {
background: transparent;
border: 0;
color: #222;
cursor: pointer;
font-size: inherit;
padding: 0;
position: absolute;
right: .7em;
top: 50%;
transform: translateY(-50%);
}
.woocommerce form .show-password-input.display-password {
color: #999
}
.woocommerce form .show-password-input::after {
font-family: WooCommerce;
speak: never;
-webkit-font-smoothing: antialiased;
content: "\e010" !important;
margin-top: -2px;
vertical-align: middle;
display: inline-block
}
Which I found on the other thread, I see a rectangle instead of the eye, because clearly the content: “\e010” !important; is not linking anything properly,
Any clue?
Dear Sirs
I have used the following css
/* Floating button */
.button-float {
position: fixed;
right: 0;
top:300px;
z-index: 999999 !important;
}
What I am trying to achieve is to ensute that bothe on landscape and portait the button is always fixed but at bottom of the screen. Can you help please.
Hi Ismael,
I see, sorry to hear that. Looking around in the forum I found this post: https://kriesi.at/support/topic/importing-lots-of-data-to-scf-custom-posts-all-having-same-template/#post-1473195
Is it possible this can work for my posts?
Looking forward to hear from you.
Regards,
Ariane
there is a globaly set rule on enfold :
.container_wrap {
clear:both;
position:relative;
border-top-style:solid;
border-top-width:1px
}
Personally, I consider them unnecessary. This is what I set on my installation:
#top .container_wrap {
border: none !important;
}
But that’s actually a well-known problem.
Hey bemodesign,
Thank you for the inquiry.
This css code should help — make sure to add it at the very bottom of the previous modifications.
@media only screen and (max-width: 767px) {
/* Add your Mobile Styles here */
.responsive #top #wrap_all .main_menu {
display: flex;
position: absolute;
flex-direction: row-reverse;
justify-items: center;
align-items: center;
}
}

Best regards,
Ismael
Hey ricedean,
Thank you for the inquiry.
You can try this filter in the functions.php file:
add_filter( 'avf_masonry_loop_entry_content', 'avf_masonry_loop_entry_content_mod', 10, 4 );
function avf_masonry_loop_entry_content_mod( $content, $entry, $entries, $key ) {
$is_sold = get_post_meta( $entry->ID, 'sold', true );
if ( $is_sold ) {
$content .= '<span class="av-masonry-sold-overlay">SOLD</span>';
}
return $content;
}
Then add this css code:
.av-masonry-entry {
position: relative;
}
.av-masonry-sold-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 48px;
font-weight: 900;
letter-spacing: 2px;
text-transform: uppercase;
color: #ff0000;
background: none;
z-index: 10;
pointer-events: none;
}
You’ll need to add a custom field named “sold” to each entry.
Best regards,
Ismael
Hello, could you please help me with the CSS code. I’m not sure if I have it right to center the burger icon and the social media icons, from top to bottom, and keep them in the middle of the header. Right now, the icons are too high. Thanks!
https://jackdalten.armourcloud.io/
/* Mobile-only: make logo larger */
@media only screen and (max-width: 767px) {
#top .logo img {
max-height: 110px; /* adjust: 75–95px */
}
}
@media only screen and (max-width: 767px) {
#top .av-burger-menu-main {
top: 50% !important;
transform: translateY(-50%) !important;
margin-top: 55px !important; /* small nudge only */
}
}
/* Show & align social icons on mobile */
@media only screen and (max-width: 767px) {
#top .social_bookmarks {
display: flex !important;
align-items: center;
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
margin-top: 55px; /* match burger offset */
z-index: 100;
}
#top .social_bookmarks li {
margin: 0 6px;
}
}
PACO ORTEGAGuest
Good morning, I have a few questions before purchasing the ENFOLD theme for WordPress:
1. When I access the ENVATO purchase page at the URL: https://themeforest.net/item/enfold-responsive-multipurpose-theme/4519990? and click on LIVE PREVIEW, I see many DEMOS. How do I know which one I am purchasing? Or are these all the options that ENDFOLD offers depending on the configuration?
2.- When I install the ENFOLD theme on my WORDPRESS, what will it look like by default before I configure it to my liking?
3.- Is there a document that explains each aspect of the ENFOLD configuration?
4.- Is the WEBSITE content in the ENFOLD theme edited with ELEMENTOR or WP BAKERY?
5.- Will I have support for 6 months? What is the average response time?
6.- Seven years ago, I purchased the PH THEME from your SITE, which has now stopped working in WORDPRESS 6.9 and PHP 8.6, and there is no way to contact anyone who can help me. I don’t want this to happen again with ENFOLD, which I see has been around for 13 years.
Thank you and best regards,
Paco Ortega
Translated with DeepL.com (free version)
Hi,
Please try this CSS as well:
.home #av-layout-grid-2 {
border-bottom-width: 0;
}
.container_wrap {
border-top-width: 0;
}
Best regards,
Rikard
Hi Mike, Hi Ismael,
I’m writing to give you some great news: the favicon is finally appearing correctly in the Google SERP!
It took a few days after Mike’s last adjustments (setting the Site Icon in WordPress General Settings and the .ico file in Enfold Options), and the Google Bot has finally updated the snippet.
Thank you so, so much for your top professional support, your patience, and for taking the time to log in and fix the settings manually. It made all the difference!!!.
You can now close this thread.
Best regards, Stefano (jodys1976)
Ich hab es hin bekommen. Kann das Topic hier nur leider nicht löschen. Sorry.
Hey Sonno,
Thank you for the inquiry.
You can use this css code to control the height of the slider.
#top .avia-fullwidth-slider, #top .avia-fullwidth-slider ul li {
height: 50vh;
}
We recommend adding a Custom CSS Class name to the slider element and adjust the css rule accordingly so it applies only to this specific slider.
— https://kriesi.at/documentation/enfold/add-custom-css/
Make sure the size of the selected thumbnail is appropriate to the size and aspect ratio of the modified slider.
Best regards,
Ismael
Hi Mike!
How are you?
Thanks a lot for your help …
Please let me know if you can access now. Our IT department added your IPs to our firewall whitelist.
https://snipboard.io/QN8VUg.jpg
For the single-product-page sidebar, Ismael sent me instructions on how to do it with PHP and CSS.
https://snipboard.io/jAxRLg.jpg
Thank you soooo much!
Leo
Hi, i’d like to increase gap between grid cells on a home page only.
I found this code in your documentation but need to know where I add the page id to the code?
/*—————————————-
// Grid cell gap
//————————————–*/
#top .flex_cell {
border-width: 24px!important;
border-right-width: 0px!important;
border-bottom-width: 0px!important;
border-style: solid!important;
border-color:#FFF!important;
}
#top .flex_cell:last-child {
border-right-width: 24px!important;
}
Can you please send an exmple of the same cod with a page ID added so I can copy that format?
Thanks so much,
Anne
Hello, how can i set the slider height to a certain height i.e. 50vh or 480px.
All css snippets i found aren´t working.
It is just a Fullwidth slider at the top of a portfolio item…
Thanks
Hi,
This code should fix the issue — you just need to supply your own password toggle images (eye-closed.svg, eye-open.svg).
— https://kriesi.at/support/topic/missing-eye-icon-on-login-page/#post-1494007
Best regards,
Ismael
Hi,
Thank you for the update.
You can add this css code to adjust the heading row.
#top .main_color .avia-data-table .avia-heading-row th {
background: #ebebeb;
}
Result:

Let us know if you need more info.
Best regards,
Ismael
Thanks so much, Ismael, but this doesn’t seem to be working for me as-is — I dropped it in at the top of the functions.php for the child theme (https://snipboard.io/G9XSTj.jpg), but I’m still seeing two “main” landmarks (one for the footer-page) on https://abodedev.wpengine.com/about/story/ for example. Any idea what I might be doing wrong?
Hi,
Thanks for the update, please note that this is not a theme problem. The image is located in the section with the ihre-buchhalter ID. It’s hidden on desktop.
Best regards,
Rikard
Hi,
I have looked at table press and it seems to work well.
One thing, I need to add CSS so that the top table row header has a background colour of #ebebeb
Would you know the CSS coding to add for this?
See sample page in Private Content
Thanks
This reply has been marked as private.
Ok, thanks for tracing the problem. I’ll take a look at WP-Optimize and try and reduce the settings. Or try another Caching plugin.
It seems the Enfold theme has a lot of issues with Caching and compression plugins.
I previously had SpeedyCache Pro running for a long time. But then the home page suddenly started throwing errors, with huge amounts of garbage code appearing at the top of my home page… it looked like compressed and minified CSS wasn’t getting parsed properly. So I had to ditch SpeedCache.
Do you have any recommended caching plugins that work well with this theme?
Nik
Hi,
Thank you for the update.
It’s probably a style conflict between the theme and one of the plugins. Did you apply the suggestions from the previous thread and try the ones we suggested here?
.woocommerce .woocommerce-form-login .show-password-input {
position: absolute;
top: 0.8rem;
right: 1.2rem;
cursor: pointer;
}
Best regards,
Ismael
Hi,
Did you apply the changes we recommended here https://kriesi.at/support/topic/cpt-sticky-posts-in-masonry/#post-1493891 before adjusting the date format? If you can create a test and provide the login details in the private field, we’ll try to take a closer look.
Best regards,
Ismael
Hi,
The site is still not accessible on our endas mentioned in our previous reply: https://kriesi.at/support/topic/woocommerce-features-not-working/#post-1493886
We recommend hiring a freelance developer if you’re having trouble implementing the changes we suggested above. Thank you for your patience.
Best regards,
Ismael