Forum Replies Created
-
AuthorPosts
-
March 14, 2024 at 5:23 pm in reply to: Facing some bugs / issues after upgrading the ENFOLD version to 5.6.10 #1437236
Hi,
Thanks, I went to the “Meet the Team” page, and saw the in the team element I couldn’t add a space, so I loaded the frontend of the page and then disabled all of your plugins, and then reloaded the page again and then tried to edit the backend team element and I could add spaces.
Unfortunately you have a lot of plugins, 40+, so please follow these steps and disable all of your plugins and then enable one at a time, reloading the page and clearing the cache until you find the conflict, the search for a substitute for the plugin causing the conflict.Best regards,
MikeHi
I adjusted to this to account for the height of the header on desktop.function mobile_sub_menu_sticky() { ?> <script> window.addEventListener('DOMContentLoaded', function() { (function($){ var width = $(window).width(); var $stickyTop = $('#sub_menu1'); if (width <= 989) { $stickyTop.waypoint(function(direction) { if (direction === 'down') { $stickyTop.addClass('sticky-top'); } if (direction === 'up') { $stickyTop.removeClass('sticky-top'); } }, { offset: '0%' }); } else if (width >= 990) { $stickyTop.waypoint(function(direction) { if (direction === 'down') { $stickyTop.addClass('sticky-top'); } if (direction === 'up') { $stickyTop.removeClass('sticky-top'); } }, { offset: '187px' }); } })(jQuery); }); </script> <?php } add_action('wp_footer', 'mobile_sub_menu_sticky');
and the css:
@media only screen and (max-width: 989px) { .responsive #top #sub_menu1.av-switch-768.av-submenu-container.sticky-top { position:fixed!important; top:0!important; z-index:600!important; } } @media only screen and (min-width: 990px) { .responsive #top #sub_menu1.av-submenu-container.sticky-top { position:fixed!important; top:172px!important; z-index:600!important; } }
Best regards,
MikeHey jaimemerz,
Thank you for the link to your site I added this snippet to your WP Code plugin and ensured that in the top right corner it was a code type: PHP snippet
then I added this code and saved.function mobile_sub_menu_sticky() { ?> <script> window.addEventListener('DOMContentLoaded', function() { (function($){ var width = $(window).width(); var $stickyTop = $('#sub_menu1'); if (width <= 767) { $stickyTop.waypoint(function(direction) { if (direction === 'down') { $stickyTop.addClass('sticky-top'); } if (direction === 'up') { $stickyTop.removeClass('sticky-top'); } }, { offset: '0%' }); } })(jQuery); }); </script> <?php } add_action('wp_footer', 'mobile_sub_menu_sticky');
I then added a second snippet with this css:
.responsive #top #sub_menu1.av-switch-768.av-submenu-container.sticky-top { position:fixed!important; top:0!important; z-index:600!important; }
and now on your page the fullwidth submenu is sticky when it reachs the top, and un-sticks with you scroll back to the top:
Please clear your browser cache and check.
Best regards,
MikeHi,
Typically if you enable the Enfold Theme Options ▸ Performance ▸ Delete old CSS and JS files and clear your cache plugin cache and the reload the frontend of your site incognito mode this should empty your /wp-content/uploads/dynamic_avia/ directory
then try fix wp bug, disable unique timestamps or disable adding unique timestamps only and also reload the frontend of your site incognito mode, not as the admin user. Please note that you should also completely clear the WP Rocket cahe.Best regards,
MikeMarch 13, 2024 at 5:47 pm in reply to: Facing some bugs / issues after upgrading the ENFOLD version to 5.6.10 #1437157Hi,
Thanks for the login, but I’m not able to examine because your 2FA blocks me, please disable this so I can assist.Best regards,
MikeHi,
Glad to hear that you have this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
MikeHi,
As I understand you would like to be able to add icons next to your main menu items, here is a easy was to add icons like this:
We will add this function to the end of your child theme functions.php file in Appearance ▸ Editor or if you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:
then add this code and save:function enqueue_font_awesome() { wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css'); } add_action('wp_enqueue_scripts', 'enqueue_font_awesome'); function add_icon_to_menu_item($item_output, $item, $depth, $args) { $custom_classes = implode(' ', $item->classes); preg_match('/menu-item-icon-([^ ]+)/', $custom_classes, $matches); if (!empty($matches[1])) { $icon_class = esc_attr($matches[1]); $icon = '<i class="fa ' . $icon_class . '"></i>'; $position = strpos($item_output, '<span class="avia-menu-text">'); if ($position !== false) { $item_output = substr_replace($item_output, $icon, $position, 0); } } return $item_output; } add_filter('walker_nav_menu_start_el', 'add_icon_to_menu_item', 10, 4);
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
Then add this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:#top #header li.menu-item > i ~ a { display: inline-block; } #top #header li.menu-item > i:before { color: #fff; } .av-main-nav li[class*="menu-item-icon-"] > a > i ~ .avia-menu-text { border-left-style: none; border-left-width: 0; padding-left: 13px; margin-left: -6px; } #av-burger-menu-ul li > a > i ~ .avia-menu-text { padding-left: 13px; margin-left: -6px; }
Please note that you may want to change the color, in this example I’m using white because my menu is dark.
Then go to your menus and ensure that the Custom Class field is enabled for your menu items:
If you don’t see it go to the Screen Options and enable it.
Now we will use the Font Awesome icons because it will be easier to use a class name to determine the icon used in the custom class field, the built-in entypo-fontello icons don’t use class names the same way so it would be a little trickier for you. The function adds the icon next to the menu item based on the class used in the menu item custom class field.
Use this format: menu-item-icon-fa-home the first part menu-item-icon- tells the function that a icon will be used, and then the Font Awesome icon code is appened to the class fa-home, for example:
these are the classes I used in this example:
menu-item-icon-fa-home
menu-item-icon-fa-star
menu-item-icon-fa-life-ring
menu-item-icon-fa-users
menu-item-icon-fa-phone
menu-item-icon-fa-bullhorn
This also works for the sub-menu items:
and the mobile menu:
Best regards,
MikeHi,
Just make sure that the custom class is only added to the third odd items.
Shall we close this thread then?Best regards,
MikeHi,
Ok, on your page you have two odd third items, for both of these I added the custom class odd-item
Then I added this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:@media only screen and (max-width: 767px) { .odd-item { position: relative; left: -23%; } }
now on mobile they are centered:
Please clear your browser cache and check.Best regards,
MikeMarch 12, 2024 at 5:12 pm in reply to: Links to Items in the Enfold Table of Contents widget #1437069Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
MikeHi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
MikeHi,
Thanks for the screenshot, it looks like you are using the ALB for your single posts and currently the post body is a single column and you want to add a 1/5 column on both sides to reduce the post content width, but instead of editing each post you could use css.
So your two empty 1/5 columns would be about 40% of the page, so we will set the page width to 60% and we will have it only work on screens larger than 1024px.
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:@media only screen and (min-width: 1024px) { .responsive #top.single-post .container_wrap_first > .container { max-width: 60%; } }
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.
feel free to adjust to suit.Best regards,
MikeHi,
Thanks for the links, but both pages are blank, I think your site has crashed, can you roll back to the last backup, hopefully yesterday or the day before?
Once your site is back online please include an admin login in the Private Content area so we can examine the two pages better.Best regards,
MikeHi,
To remove the sidebar please see the options at Enfold Theme Options ▸ Sidebar Settings and for the footer, it looks like you using a footer page at Enfold Theme Options ▸ Footer if you are using a footer page then the regular footer won’t show.
If this doesn’t help please include an admin login in the Private Content area so we can examine closer.Best regards,
MikeHi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
MikeHi,
Yes the odd items will not center on mobile, this is not the intended behavior of two columns on mobile, we may be able to help you customize for this behavior but you will need to manually do this for each odd item on each page, this is why I asked if this is the final design for the page or if you will be adding more items, because if you add more items you will need to remove the customization to center the odd items, I can show you how so you can do it to your other pages, or do you want to leave them like they are?Best regards,
MikeHi,
If you don’t have the performance tools activated this would explain why the one site is a lower score, as for the other, you probably had the performance tools activated at one time and since deactivating the cache has not been cleared, so thecache files are still helping, I imagine that if you clear the cache the score will also go down. I recommend activating the performance tools and benefit from it.Best regards,
MikeHi,
Glad that we could help, you can easily add more pages to the Freelancer demo, you can add new blank pages and add the elements you want or you can duplicate your homepage and change the images and text to suit:
For payments you can use the free version of WooCommerce, and there is a free version of Bookings for WooCommerce – Schedule Appointments, I have not used this plugin but you could try it.Best regards,
MikeHi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
MikeHi,
Glad to hear that you find this helpful, thanks to Guenni007 for pointing out that the needed css may not always be loaded correctly, so I added the css into the shortcode and I changed the date attribute to include a time so you can better choose a start date & time. I also added a format attribute so you can choose what will show, like the “Smallest time unit” and “Largest time unit”
So the shortcode to use on the page is now like this: [custom_countup date=”2024-03-01 00:00:00″ format=”weeks,days,hours,minutes,seconds” color=”#000″ background=”#f8f8f8″] you can remove the time units that you don’t want to show.
But please note that if you only show hours & days, the day element will only show up to 7 days even if you have the week element hidden, so you will not see “13” days, the same is for the calculation on all of the elements. This is the new code:function wp_custom_countup_shortcode($atts) { $a = shortcode_atts(array( 'date' => '2020-01-01 00:00:00', 'color' => 'black', 'background' => 'white', 'format' => 'weeks,days,hours,minutes,seconds', ), $atts); $uid = uniqid('countup_'); wp_enqueue_script('jquery'); $formatParts = array_map('trim', explode(',', $a['format'])); $htmlParts = array(); foreach ($formatParts as $part) { if (in_array($part, ['weeks', 'days', 'hours', 'minutes', 'seconds'])) { $htmlParts[] = "<span class='av-countdown-cell av-align-center' style='color: {$a['color']};'><span class='av-countdown-cell-inner' style='background-color: {$a['background']};'><span class='av-countdown-time {$part}'></span><span class='av-countdown-time-label'>" . ucfirst($part) . "</span></span></span>"; } } $html = "<div id='{$uid}' class='av-countdown-timer-inner'>" . implode("\n", $htmlParts) . "</div>"; $serverTimeAtPageLoad = current_time('timestamp', true) * 1000; $jsParts = []; foreach ($formatParts as $part) { $jsParts[] = "'{$part}': Math.floor(" . ($part == 'weeks' ? "distance / (1000 * 60 * 60 * 24 * 7)" : ($part == 'days' ? "(distance % (1000 * 60 * 60 * 24 * 7)) / (1000 * 60 * 60 * 24)" : ($part == 'hours' ? "(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)" : ($part == 'minutes' ? "(distance % (1000 * 60 * 60)) / (1000 * 60)" : "(distance % (1000 * 60)) / 1000")))) . ")"; } $html .= "<script> jQuery(function($) { var countUpDate = new Date('{$a['date']}').getTime(); var serverTimeAtPageLoad = {$serverTimeAtPageLoad}; var x = setInterval(function() { var now = new Date().getTime(); var elapsedTime = now - serverTimeAtPageLoad; var serverNow = serverTimeAtPageLoad + elapsedTime; var distance = serverNow - countUpDate; var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); var weeks = Math.floor(days / 7); days -= weeks * 7; var timeParts = { 'weeks': weeks, 'days': days, 'hours': hours, 'minutes': minutes, 'seconds': seconds }; Object.keys(timeParts).forEach(function(key) { $('#{$uid} .' + key).text(timeParts[key]); }); }, 1000); }); </script>"; $html .= "<style> .av-countdown-timer-inner { display: table; width: 100%; table-layout: fixed; } .av-countdown-cell { display: table-cell; } body .av-align-center { text-align: center; } .av-countdown-cell-inner { display: block; vertical-align: baseline; border-style: solid; border-width: 1px; margin: 2px; padding: 20px; } .av-countdown-time { display: block; font-size: 40px; line-height: 1em; font-weight: 100; text-decoration: none; } .av-countdown-time-label { display: block; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; line-height: 1.65em; } @media only screen and (max-width: 767px) { .responsive .av-countdown-cell-inner { padding: 12px 7px; } .responsive .av-countdown-time { font-size: 30px; } .av-countdown-time-label { text-transform: none; } } @media only screen and (max-width: 989px) { .responsive .av-countdown-cell-inner { padding: 10px 10px; } } </style>"; return $html; } add_shortcode('custom_countup', 'wp_custom_countup_shortcode');
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
Best regards,
MikeHi,
Glad to hear this is sorted out now.If you have any further questions, please open a new thread.Thank you
Best regards,
MikeHi,
Glad that we could help.
If you have any further questions please open a new threadBest regards,
MikeHi,
The only way you’ll know is if you try it. Try it on one of your sites.Best regards,
MikeHi,
This was caused by a server setting, if it was caused by the theme we would be able to reproduce this. Unfortunately we don’t have any other ideas to assist you with your specific server issue.Best regards,
MikeHi,
On my category pages the name of the category is on top:
This is set at Enfold Theme Options ▸ Header ▸ Header Layout ▸ Header Title and Breadcrumbs
and the date is set at Enfold Theme Options ▸ Blog Layout ▸ Blog Meta Elements
Please note that we ask that each thread stays on a specific topic, this helps other users find solutions based on the opening subject line and helps us as mods assist better. This thread is getting quite long now, for further questions please open a new thread Thank you for your patience and understanding and for using Enfold.Best regards,
MikeHi,
Ok, earlier you wrote that you couldn’t create it on your staging site.Best regards,
MikeHi,
Thanks for the links, both go to the same page, so it seems that your Maintenance Mode option is disabled, if you include a admin login in the Private Content area we would be happy to examine closer.Best regards,
Mike -
AuthorPosts