-
Search Results
-
In reply to: Thumbnail size LATEST NEWS widget
@Yigit and @Guenni007, Thank you very much for the input!
I placed the code provided by Guenni007 in my functions.php of the child theme.
After that, I changed the previous css code to:
.news-thumb { padding: 0px; float: none; margin-top: 0px; margin-bottom: 8px; border-width: 0px; height: 116px; display: block; } #top .news-thumb img { float: none; padding: 0px; height: 116px; display: inline; width: 100%; }The thumbnail image is now in a good resolution, but my first 2 points are not yet resolved:
1. The complete image has to be visible
2. The proportions have to be right. I would like the height to be around 116 px and the width to scale automaticallyUnfortunately, I don’t have any PHP skill except for placing/deleting some code.
In reply to: How To Make The SubMenu Sticky On Mobile
hm – i can not believe this – because what i see on class-template-builder.php on line : 675 – this ava_builder_shortcode_files_loaded
is not a filter – the filter is still: avia_load_shortcodesHi, i want to have the burger mobile menu symbol in the header always visible on the smartphone-screen. Can you help me? When i want to go to the settings in the Dashbord (Design->Menu) there is an error code:
Fatal error: Uncaught Error: Call to undefined function beonepage_get_version() in /homepages/1/d695091931/htdocs/clickandbuilds/Verlagsagentur/wp-content/plugins/beonepage-lite/inc/custom-menu/menu-item-custom-field.php:121 Stack trace: #0 /homepages/1/d695091931/htdocs/clickandbuilds/Verlagsagentur/wp-includes/class-wp-hook.php(307): Menu_Item_Custom_Fields_Metadata::_admin(‘nav-menus.php’) #1 /homepages/1/d695091931/htdocs/clickandbuilds/Verlagsagentur/wp-includes/class-wp-hook.php(331): WP_Hook->apply_filters(NULL, Array) #2 /homepages/1/d695091931/htdocs/clickandbuilds/Verlagsagentur/wp-includes/plugin.php(474): WP_Hook->do_action(Array) #3 /homepages/1/d695091931/htdocs/clickandbuilds/Verlagsagentur/wp-admin/admin-header.php(118): do_action(‘admin_enqueue_s…’, ‘nav-menus.php’) #4 /homepages/1/d695091931/htdocs/clickandbuilds/Verlagsagentur/wp-admin/nav-menus.php(675): require_once(‘/homepages/1/d6…’) #5 {main} thrown in /homepages/1/d695091931/htdocs/clickandbuilds/Verlagsagentur/wp-content/plugins/beonepage-lite/inc/custom-menu/menu-item-custom-field.php on line 121
Es gab einen kritischen Fehler auf deiner Website. Bitte überprüfe den Posteingang deiner Website-Administrator-E-Mail-Adresse für weitere Anweisungen.Purchase codes: 1c315244-d645-4c68-b3f9-a8249f08abbc
Thanks for helping!
best regards
Johanna ConradIn reply to: Image Flip Box
Hi Guenni007,
Thanks for the reply.
So, I’ve added two images into the the icon grid backside content area as mentioned above. I’ve also added the script to the function.php and added the quick css as recommended. The front image is there, however when flipped around both images are shown on the backside. Have I missed something?
The flip boxes on the link (https://consulting.webers-testseite.de/leistungen2/) look really nice with the image on the front and description with button on the back. I think this could work else where on our site to showcase our capabilities with a button/link to the page. If you send me info on how to set this up that would be great.
Thanks,
MattIn reply to: Image Flip Box
i would have done that by using the icon grid alb element too – but i place in the background content two images – the first placed image i take for the background-image of the front by jQuery script.
not to have that on all icon grids – i give the element a custom class – f.e.: icongrid-frontimagefunction insert_frontside_image(){ ?> <script> (function($){ $(document).ready(function(){ $('.icongrid-frontimage .article-icon-entry .avia-icongrid-front').each(function(){ var backside_img = $(this).next().find('img:first-child').attr('src'); $(this).find('.avia-icongrid-icon').css('display', 'none'); $(this).prepend('<div class="frontside_background"></div>'); $(this).find('.frontside_background').css({ 'background-image': 'url('+backside_img+')', }) }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'insert_frontside_image');the rest is quick css – see resultpage: https://webers-testseite.de/icongrid-with-frontimage/
PS: If you use the element only once, I can’t recommend this solution. But if you want to use the background image on the front often, it has the advantage of being able to select the images via Media Library.
If you are interested i will post the css code here too.
( see f.e. too: https://consulting.webers-testseite.de/leistungen2/ )Hi,
I want to use different menus for different pages and I created the code for functions.php according to this guide:The code works as intended, but the wpml language selection, submenu ‘wpml’, is no longer displayed – what am I doing wrong?
Here is my code for functions.php:add_filter( ‘wp_nav_menu_args’, ‘my_custom_wp_nav_menu_args’ );
function my_custom_wp_nav_menu_args( $args = ” ) {
if($args[‘theme_location’] === ‘avia’) {
if( is_page( 734 ) ) {
$args[‘menu’] = ‘menu home’;
}
elseif( is_page( 8590 ) ) {
$args[‘menu’] = ‘menu home-it’;
}
elseif (is_page( 8612, 8683, 8616, 8656, 8644, 8665, 8703, 8713, 8870, 8732, 6679, 8753, 8778, 8785, 8791, 8696, 8770, 8720, 8766, 8747 )) {
$args[‘menu’] = ‘headermenu komplett it’;
}
elseif(is_page( 3981, 8310, 4747, 4737, 8193, 6466, 4143, 4625, 8499, 5111, 4993, 3508, 7840, 7846, 7848, 6002, 8084, 6184, 8070, 8072 ) ) {
$args[‘menu’] = ‘headermenu komplett’;
}return $args;
}
}Kindly regards,
SoltnerHello.
I purchased Enfold yesterday so that I could get an update as my web designer/developer had disappeared. I have waited the 12 hours suggested after registering our token but no update has shown up. When I do a manual check, I also have no updates.
We have WP version 5.9.1
We have this message on the enfold update page:Theme Updates:
No Updates Available. You are running the latest version! (4.7.6.4)
Your PHP version: 7.4.28
Last successful check was on 2022/02/27 16:01.I am unsure what will happen if I try to upload the theme again. If I will overwrite my current work.
Also – if I look to upload a demo theme – your messages say I won’t overwrite my work, but WordPress says I will. I don’t understand which is correct?In reply to: Woocomerce Categories Inside Elfold Single Page
Hey Akhurst,
Thanks for your link and screenshot, unfortunately, you can not do that directly, you could “fake” a category page by adding a product slider to a page and only show one category in it, but it would not be linked to from product page category links.
I assume that the reason you want to do this is because you would like to show the special-headings and textblock above the product grid like on your /edgebanders/ page.
This can be done with a custom shortcode in your functions.php for each category page.
For example I copied your special-headings and textblocks html, but you could also use the element shortcodes, and added to my child theme functions.php like this:function category_description_sc( ){ return do_shortcode('<div class="av-special-heading av-l01jfpk8-6ff7d45e06a3edb0c8feca9bc3993089 av-special-heading-h2 meta-heading avia-builder-el-1 el_before_av_hr avia-builder-el-first "><h2 class="av-special-heading-tag" itemprop="headline">Edgebanders</h2><div class="special-heading-border"><div class="special-heading-inner-border"></div></div></div> <div class="hr av-l01jfxa9-f6ed7abf8e08223ca4bfa21708dacb34 hr-invisible avia-builder-el-2 el_after_av_heading el_before_av_textblock "><span class="hr-inner "><span class="hr-inner-style"></span></span></div> <section class="av_textblock_section av-l01jg5gy-ffdf42db35c6941bb6b37af284404119" itemscope="itemscope" itemtype="https://schema.org/CreativeWork"><div class="avia_textblock" itemprop="text"><h3>Beautiful cabinetry requires precision edgebander solutions for optimal aesthetics.</h3> </div></section> <section class="av_textblock_section av-l01jn9y5-d165d9be36c859091452d8ca70ce4545" itemscope="itemscope" itemtype="https://schema.org/CreativeWork"><div class="avia_textblock" itemprop="text"><p>With such a wide array of panel types and finishes available on the market today, you need the right edgebander to ensure the optimum esthetic of your case goods and cabinet doors.</p> <p>At Cantek, we have the right edge banding solution to fit your application, production requirements, and budgeting needs. Today the demands on edgebanders have never been higher, so, in response, our manufacturing partners have worked to revolutionize the edgebander. Edgebanding machines are designed to minimize setup while allowing for wide flexibility of edge banding applications and they can be configured for EVA, Polyurethane, or Polypropylene glues to minimize the visible glue joint. Working units like pre-milling, corner rounding, and glue scraping are available to produce the optimum finished edge.</p> </div></section> <div class="av-special-heading av-l01l61rc-1bcbcc6dd8d5111025c60153096ebed3 av-special-heading-h2 meta-heading avia-builder-el-5 el_after_av_textblock el_before_av_productgrid "><h2 class="av-special-heading-tag" itemprop="headline">Choose your solution</h2><div class="special-heading-border"><div class="special-heading-inner-border"></div></div></div>'); } add_shortcode( 'category_description', 'category_description_sc' );the shortcode for this is
[category_description]
I add this to one of my product category Description:
and the result is:
So while you would need to add one for each category, it should not be any more work than adding the elements to the page.Best regards,
MikeIn reply to: Sitewidgets not working properly
Hey Vineeth,
Thank you for the inquiry.
Yes, the latest version of the theme should work on PHP 7.2 but we would recommend upgrading the package to a later versions (8.0 and above). Please make sure to create a site backup before doing the upgrade.
Best regards,
IsmaelIsmael,
Thank you for your fast response.
I checked the “Theme Update” on my Enfold Child and it reads:
Theme Updates
No Updates available. You are running the latest version! (3.0.8)The highest PHP I can update to is version 7.4 on my host which is StartLogic.
I only tried to load my home page and got the error message, so I presume my entire site doesn’t work with 7.4.
What now? Dave
Currently we are using enfold theme 4.7.6.4 in our site.We have upgraded wordpress
into 5.9 version.After this widgets are not saving properly.Our php version is 7.2.If we upgrade our theme to latest 4.9 is it compatable with our php version?Tried unsuccessfully to update my Themeforest site from PHP 5.6 to 7.4. Please help.
1). I went to my host and updated from PHP 5.6 to 7.4, then checked my website and got this message:
Fatal error: Uncaught Error: Function name must be a string in /hermes/bosnacweb04/bosnacweb04ck/b449/sl.wrenmark/public_html/wp-content/themes/enfold/framework/php/class-style-generator.php:123 Stack trace: #0 /hermes/bosnacweb04/bosnacweb04ck/b449/sl.wrenmark/public_html/wp-includes/class-wp-hook.php(307): avia_style_generator->create_styles(”) #1 /hermes/bosnacweb04/bosnacweb04ck/b449/sl.wrenmark/public_html/wp-includes/class-wp-hook.php(331): WP_Hook->apply_filters(NULL, Array) #2 /hermes/bosnacweb04/bosnacweb04ck/b449/sl.wrenmark/public_html/wp-includes/plugin.php(474): WP_Hook->do_action(Array) #3 /hermes/bosnacweb04/bosnacweb04ck/b449/sl.wrenmark/public_html/wp-includes/general-template.php(3042): do_action(‘wp_head’) #4 /hermes/bosnacweb04/bosnacweb04ck/b449/sl.wrenmark/public_html/wp-content/themes/enfold-child/header.php(54): wp_head() #5 /hermes/bosnacweb04/bosnacweb04ck/b449/sl.wrenmark/public_html/wp-includes/template.php(770): require_once(‘/hermes/bosnacw…’) #6 /hermes/bosnacweb04/bosnacweb04ck/b449/sl.w in /hermes/bosnacweb04/bosnacweb04ck/b449/sl.wrenmark/public_html/wp-content/themes/enfold/framework/php/class-style-generator.php on line 123
I went back to 5.6 and it worked again.
2). I updated the theme and all the plugins ( I think I only had two that were running). Switched back to 7.4 and got the Fatal error message again.
3). I deactivated all the plug-ins and got the same error message.
4). Switched theme to a basic WP Theme. It messed up the site, but at least it appeared. I guess I expected that as my content is customized for my ThemeForest child theme.
5). 5) I have gone through the cache clearing exercise too.
Not sure what to do to sort this out.
Many thanks Ismael.
I actually had to delete each feature image individually and then re-upload the same files and that seemed to do the trick in making the square ratio images appear square on the website.
Thanks for the code to change the post titles. I’ve applied this which has worked. However, the following code now intermittently appears on the homepage of the website:
Strict Standards: Static function aviaBuilder\base\aviaSubItemQueryBase::default_args() should not be abstract in /home/blanchepictures/public_html/wp-content/themes/enfold/config-templatebuilder/avia-template-builder/php/base-classes/class-sub-item-query-base.php on line 117
best wishes,
EstherHi,
Thanks for sharing your script, there seems to be an error in my filter but I couldn’t find it so I removed it and adjusted the message script to use your MasTag and this seems to work fine, see the two links below.
You can remove the$('#av-masonry-1.projectgallery').addClass(MasTag);from your script as this is not needed, only thevar MasTagis used for the message script to match the child element tags.
This is what is now in your functions.php, please check.function empty_masonry_message_script() { ?> <script> (function($) { if( $('body.single-product').length || $('body.anotherclass').length ){ var BreadTrail = $(location).attr("href"); var BreadTrailx = BreadTrail.replace('https://staging.idgadvertising.com/tiletech/product/concrete-pavers/', ''); BreadTrailx = BreadTrailx.replace(/\/$/, ""); BreadTrailx = BreadTrailx.replace(/\//g,"-"); console.log(BreadTrailx); if (BreadTrailx.indexOf("porcelain-pavers") >= 0) { var PageTitle = $('.rightside .av-special-heading h1.av-special-heading-tag').text(); PageTitle = PageTitle.toLowerCase().replace(/ /g, '-'); var MasTag = 'tag-'+PageTitle; console.log(MasTag); $('#av-masonry-1.projectgallery').addClass(MasTag); } else { var MasTag = 'tag-'+BreadTrailx; console.log(MasTag); $('#av-masonry-1.projectgallery').addClass(MasTag); } } var nocat = $('<div class="nocat">No Current Projects</div>').css({'text-align':'center','font-size': '20px'}); $('#av-masonry-1 .av-masonry-container.isotope a').each( function() { if (!$(this).hasClass(MasTag)) { $(this).css({'display':'none'}); } }); if($('#av-masonry-1 .av-masonry-container.isotope a').is(':hidden')){ $(nocat).appendTo('#av-masonry-1'); } })(jQuery); </script> <?php } add_action('wp_footer', 'empty_masonry_message_script');Best regards,
MikeTopic: Adding Shortcode to Excerpts
I want to also add shortcodes to my excerpt but don’t see the code. I see this (below) in avia-shortcodes > portfolio > portfolio.php but not from your reply in #1272058 I am using enfold 4.8.2
Many thanks
if( ! empty( $excerpt ) )
{
$markup = avia_markup_helper( array( ‘context’ => ‘entry_content’, ‘echo’ => false, ‘id’ => $the_id, ‘custom_markup’ => $custom_markup ) );$output .= ‘<div class=”entry-content-wrapper”>’;
$output .= “<div class=’grid-entry-excerpt entry-content’ {$markup}>{$excerpt}</div>”;
$output .= ‘</div>’;Hi Rikard and Thomas,
The problem resolved itself in 24 hours. I’ve reverted the php from 7.0 to the latest php guess 8.1 or something along those lines.
What could also have happened is that it took a while for my Enfold token to activate. So you couldn’t download theme files.In reply to: shortcode in excerpt new version Enfold?
Nicco
I want to also add shortcodes to my excerpt but don’t see the code. I see this (below) in avia-shortcodes > portfolio > portfolio.php but not from your reply in #1272058 I am using enfold 4.8.2
Many thanks
if( ! empty( $excerpt ) )
{
$markup = avia_markup_helper( array( ‘context’ => ‘entry_content’, ‘echo’ => false, ‘id’ => $the_id, ‘custom_markup’ => $custom_markup ) );$output .= ‘<div class=”entry-content-wrapper”>’;
$output .= “<div class=’grid-entry-excerpt entry-content’ {$markup}>{$excerpt}</div>”;
$output .= ‘</div>’;Hi,
Thank you for the info.
The translations for the toggle description might still be missing from the language files. You may need to manually add the translations in the enfold/lang/de_CH.po language file or use the Loco Translate plugin to translate the strings.
// https://wordpress.org/plugins/loco-translate/
If you want to manually translate the strings instead of using the plugin, look for this lines in the de_CH.po file.
#: includes/helper-privacy.php:941 #, php-format msgid "Click to enable/disable %s." msgstr "" #: includes/helper-privacy.php:766 msgid "Click to enable/disable essential site cookies." msgstr "" #: includes/helper-privacy.php:785 msgid "Click to enable/disable Google Analytics tracking." msgstr "" #: includes/helper-privacy.php:828 msgid "Click to enable/disable Google Maps." msgstr "" #: includes/helper-privacy.php:867 msgid "Click to enable/disable Google reCaptcha." msgstr "" #: includes/helper-privacy.php:809 msgid "Click to enable/disable Google Webfonts." msgstr "" #: includes/helper-privacy.php:848 msgid "Click to enable/disable video embeds." msgstr "Klicken Sie, um Videoeinbettungen zu aktivieren/deaktivieren."You may need to install the POEdit application to convert the .po file to .mo.
Best regards,
IsmaelIn reply to: Events Calendar Pro Featured Images
Hi,
Sorry about that. You can modify the themes/enfold/config-events-calendar/views/single-event.php or override it in your child theme, then edit this code around line 72.
<?php echo tribe_event_featured_image( $event_id, 'entry_with_sidebar', false ); ?>You can replace the thumbnail “entry_with_sidebar” thumbnail with “full” or any size that you want. For more info about template customization, please check this link.
// https://theeventscalendar.com/knowledgebase/k/customizing-template-files-2/
Best regards,
IsmaelHi!,
I’m in Enfold 4.8.9, under PHP 7.4.28 and windows10: when I try to edit a page, I get only a blank page. In this loaded page, I view the code (Ctrl U) and the code is showed.
Any suggestion about it, please?
Thanks i advance.
JoanTopic: Codepen code to enfold
Hi Guys,
I have a problem with a codepen that I modified. I would like to ask how I can import my codepen code into a page in Enfold. Below you can find my html/css and javascript code.
I already tried to put its javascript in the function.php. I put the html in a code block. And i put the css in the quick css of enfold.
Unfortunately that didn’t work
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>lenobi Parallax Cards</title> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet"> </head> <body> <div class="wrapper"> <!-- Nike 19 --> <div class="card card--19"> <div class="card__header card__header--19"> <div class="card__watermark" data-watermark="Training"></div> <img src="https://test.dutchdesignfabriek.com/wp-content/uploads/2022/02/Logo-Lenobi-wit-met-tekst-wit-02.png" alt="Nike" class="card__logo card__will-animate"> <span class="card__price card__will-animate">onze diensten</span> <h1 class="card__title card__will-animate">Training</h1> <span class="card__subtitle card__will-animate">Neem deel aan een van onze trainingen. We verzorgen individuele en teamgerichte trainingen op mbo+ en hbo-niveau aan professionals in de zorg, detailhandel en beveiliging. </span> </div> <div class="card__body"> <img src="https://test.dutchdesignfabriek.com/wp-content/uploads/2022/02/training_patroon_2.png" alt="Nike 19" class="card__image card__will-animate"> <div class="card__wish-list card__wish-list--19 card__will-animate">Lees meer</div> <span class="card__category card__will-animate">afgestemd op jouw doel</span> </div> </div> <!-- Nike Solstice --> <div class="card card--solstice"> <div class="card__header card__header--solstice"> <div class="card__watermark" data-watermark="preventie"></div> <img src="https://test.dutchdesignfabriek.com/wp-content/uploads/2022/02/Logo-Lenobi-wit-met-tekst-wit-02.png" alt="Nike" class="card__logo card__will-animate"> <span class="card__price card__will-animate">Onze diensten</span> <h1 class="card__title card__will-animate">Preventie</h1> <span class="card__subtitle card__will-animate">Maak gebruik van Preventie Professionals® die ondersteuning bieden en ervoor zorgen dat er voldoende individuele aandacht overblijft voor de cliënt.</span> </div> <div class="card__body"> <img src="https://test.dutchdesignfabriek.com/wp-content/uploads/2022/02/training_patroon_B_1.png" alt="Nike Solstice" class="card__image card__will-animate"> <div class="card__wish-list card__wish-list--solstice card__will-animate">Lees meer</div> <span class="card__category card__will-animate">het gewenste resultaat</span> </div> </div> <!-- Nike Huarache --> <div class="card card--huarache"> <div class="card__header card__header--huarache"> <div class="card__watermark" data-watermark="Care"></div> <img src="https://test.dutchdesignfabriek.com/wp-content/uploads/2022/02/Logo-Lenobi-wit-met-tekst-wit-02.png" alt="Nike" class="card__logo card__will-animate"> <span class="card__price card__will-animate">Onze diensten</span> <h1 class="card__title card__will-animate">Care</h1> <span class="card__subtitle card__will-animate">In de complexe zorg wordt het steeds moeilijker om cliënten de noodzakelijke primaire zorg te geven. Teams staan vaak onder grote druk en medewerkers wisselen elkaar doorgaans snel af.</span> </div> <div class="card__body"> <img src="https://test.dutchdesignfabriek.com/wp-content/uploads/2022/02/training_patroon_C_3.png" alt="Nike Huarache" class="card__image card__will-animate"> <div class="card__wish-list card__wish-list--solstice card__will-animate">Lees meer</div> <span class="card__category card__will-animate">professionele ondersteuning</span> </div> </div> </div> <!-- /wrapper --> <div class="cards-placeholder"> <div class="cards-placeholder__item"></div> <div class="cards-placeholder__item"></div> <div class="cards-placeholder__item"></div> </div> </body> </html>html, body { height: 100%; width: 100%; margin: 0; padding: 0; font-family: "Roboto", "Helvetica", sans-serif; transition: background-color 0.2s; will-change: background-color; } .inspired-by { display: block; position: relative; margin-bottom: 15px; text-align: center; color: #fff; font-size: 14px; } .wrapper { position: relative; overflow-x: hidden; width: 100%; height: 100%; } .card { display: block; position: absolute; top: 25px; margin: 0 auto; width: 350px; background-color: #fff; border-radius: 15px; box-shadow: 0 30 50 rgba(0, 0, 0, 0.2); transform: translateX(-50%); transition: left 0.5s ease-out; will-change: left; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .card--19 { left: 50%; } .card--solstice, .card--huarache { left: 150%; } .card__header { position: relative; height: 170px; padding: 30px 30px 300px; border-top-right-radius: 15px; border-top-left-radius: 15px; color: #fff; } .card__header--19 { background-color: #F72648; background-image: linear-gradient(#F72648, #FCCB3C); background: #F72648; background: linear-gradient(#038ac4, #4ec1c1); } .card__header--solstice { background-color: #3CA3FC; background-image: linear-gradient(#3CA3FC, #FFD300); background: #3CA3FC; background: linear-gradient(#3CA3FC, #FFD300); } .card__header--huarache { background-color: #26C9F7; background-image: linear-gradient(#26C9F7, #DFFC3C); background: #26C9F7; background: linear-gradient(#26C9F7, #DFFC3C); } .card__watermark { overflow: hidden; position: absolute; bottom: 10px; left: 0; width: 100%; } .card__watermark::after { content: attr(data-watermark); position: relative; left: -20px; color: rgba(0, 0, 0, .3); font-size: 240px; font-weight: 700; text-transform: uppercase; } .card__logo { width: 110px; height: auto; } .card__price { float: right; font-size: 16px; font-weight: 300; } .card__title { margin: 35px 0 20px; font-size: 15px; line-height: 1.1em; text-transform: uppercase; letter-spacing: 1.5px; } .card__subtitle { display: block; font-size: 13px; font-weight: 300; } .card__body { position: relative; padding: 40px 30px 20px; } .card__image { z-index: 1; position: absolute; top: -230px; left: 30px; width: 125%; user-select: none; -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none; } .card__wish-list { display: block; width: 50%; margin: 0 auto 15px; padding: 15px; border: 2px solid #fff; border-radius: 20px; text-align: center; text-transform: uppercase; font-size: 14px; } .card__wish-list--19 { color: #038ac4; border-color: #038ac4; } .card__wish-list--solstice { color: #FFBA00; border-color: #FFBA00; } .card__wish-list--huarache { color: #26C9F7; border-color: #26C9F7; } .card__category { display: block; font-size: 12px; color: #AEAEAE; text-transform: uppercase; text-align: center; } .card__will-animate { will-change: transform; } .cards-placeholder { display: block; position: relative; margin-bottom: 15px; text-align: center; } .cards-placeholder__item { opacity: 0.3; display: inline-block; margin-right: 10px; background-color: #fff; width: 30px; height: 5px; border-radius: 5px; transition: opacity 0.2s; will-change: opacity; } .cards-placeholder__item--active { opacity: 1; }Javascript
(function () { 'use strict'; var BODY_BACKGROUNDS = [ '#91FDFF', '#FFBA00', '#4054FF' ]; function Slider () { this.cards = document.querySelectorAll('.card'); this.currentIndex = 0; this.isDragging = false; this.startX = 0; this.currentX = 0; this.initEvents(); this.setActivePlaceholder(); } // initialize drag events Slider.prototype.initEvents = function () { document.addEventListener('touchstart', this.onStart.bind(this)); document.addEventListener('touchmove', this.onMove.bind(this)); document.addEventListener('touchend', this.onEnd.bind(this)); document.addEventListener('mousedown', this.onStart.bind(this)); document.addEventListener('mousemove', this.onMove.bind(this)); document.addEventListener('mouseup', this.onEnd.bind(this)); }; // set active placeholder Slider.prototype.setActivePlaceholder = function () { var placeholders = document.querySelectorAll('.cards-placeholder__item'); var activePlaceholder = document.querySelector('.cards-placeholder__item--active') if (activePlaceholder) { activePlaceholder.classList.remove('cards-placeholder__item--active'); } placeholders[this.currentIndex].classList.add('cards-placeholder__item--active'); var bodyEl = document.querySelector('body'); bodyEl.style.backgroundColor = BODY_BACKGROUNDS[this.currentIndex]; }; // mousedown event Slider.prototype.onStart = function (evt) { this.isDragging = true; this.currentX = evt.pageX || evt.touches[0].pageX; this.startX = this.currentX; var card = this.cards[this.currentIndex]; // calculate ration to use in parallax effect this.windowWidth = window.innerWidth; this.cardWidth = card.offsetWidth; this.ratio = this.windowWidth / (this.cardWidth / 4); }; // mouseup event Slider.prototype.onEnd = function (evt) { this.isDragging = false; var diff = this.startX - this.currentX; var direction = (diff > 0) ? 'left' : 'right'; this.startX = 0; if (Math.abs(diff) > this.windowWidth / 4) { if (direction === 'left') { this.slideLeft(); } else if (direction === 'right') { this.slideRight(); } else { this.cancelMoveCard(); } } else { this.cancelMoveCard(); } }; // mousemove event Slider.prototype.onMove = function (evt) { if (!this.isDragging) return; this.currentX = evt.pageX || evt.touches[0].pageX; var diff = this.startX - this.currentX; diff *= -1; // don't let drag way from the center more than quarter of window if (Math.abs(diff) > this.windowWidth / 4) { if (diff > 0) { diff = this.windowWidth / 4; } else { diff = - this.windowWidth / 4; } } this.moveCard(diff); }; // slide to left direction Slider.prototype.slideLeft = function () { // if last don't do nothing if (this.currentIndex === this.cards.length - 1) { this.cancelMoveCard(); return; } var self = this; var card = this.cards[this.currentIndex]; var cardWidth = this.windowWidth / 2; card.style.left = '-50%'; this.resetCardElsPosition(); this.currentIndex += 1; this.setActivePlaceholder(); card = this.cards[this.currentIndex]; card.style.left = '50%'; this.moveCardEls(cardWidth * 3); // add delay to resetting position setTimeout(function () { self.resetCardElsPosition(); }, 50); }; // slide to right direction Slider.prototype.slideRight = function () { // if last don't do nothing if (this.currentIndex === 0) { this.cancelMoveCard(); return; } var self = this; var card = this.cards[this.currentIndex]; var cardWidth = this.windowWidth / 2; card.style.left = '150%'; this.resetCardElsPosition(); this.currentIndex -= 1; this.setActivePlaceholder(); card = this.cards[this.currentIndex]; card.style.left = '50%'; this.moveCardEls(-cardWidth * 3); // add delay to resetting position setTimeout(function () { self.resetCardElsPosition(); }, 50); }; // put active card in original position (center) Slider.prototype.cancelMoveCard = function () { var self = this; var card = this.cards[this.currentIndex]; card.style.transition = 'transform 0.5s ease-out'; card.style.transform = ''; this.resetCardElsPosition(); }; // reset to original position elements of card Slider.prototype.resetCardElsPosition = function () { var self = this; var card = this.cards[this.currentIndex]; var cardLogo = card.querySelector('.card__logo'); var cardPrice = card.querySelector('.card__price'); var cardTitle = card.querySelector('.card__title'); var cardSubtitle = card.querySelector('.card__subtitle'); var cardImage = card.querySelector('.card__image'); var cardWishList = card.querySelector('.card__wish-list'); var cardCategory = card.querySelector('.card__category'); var cardWillAnimate = card.querySelectorAll('.card__will-animate'); // move card elements to original position cardWillAnimate.forEach(function (el) { el.style.transition = 'transform 0.5s ease-out'; }); cardLogo.style.transform = ''; cardPrice.style.transform = ''; cardTitle.style.transform = ''; cardSubtitle.style.transform = ''; cardImage.style.transform = ''; cardWishList.style.transform = ''; cardCategory.style.transform = ''; // clear transitions setTimeout(function () { card.style.transform = ''; card.style.transition = ''; cardWillAnimate.forEach(function (el) { el.style.transition = ''; }); }, 500); }; // slide card while dragging Slider.prototype.moveCard = function (diff) { var card = this.cards[this.currentIndex]; card.style.transform = 'translateX(calc(' + diff + 'px - 50%))'; diff *= -1; this.moveCardEls(diff); }; // create parallax effect on card elements sliding them Slider.prototype.moveCardEls = function (diff) { var card = this.cards[this.currentIndex]; var cardLogo = card.querySelector('.card__logo'); var cardPrice = card.querySelector('.card__price'); var cardTitle = card.querySelector('.card__title'); var cardSubtitle = card.querySelector('.card__subtitle'); var cardImage = card.querySelector('.card__image'); var cardWishList = card.querySelector('.card__wish-list'); var cardCategory = card.querySelector('.card__category'); var cardWillAnimate = card.querySelectorAll('.card__will-animate'); cardLogo.style.transform = 'translateX(' + (diff / this.ratio) + 'px)'; cardPrice.style.transform = 'translateX(' + (diff / this.ratio) + 'px)'; cardTitle.style.transform = 'translateX(' + (diff / (this.ratio * 0.90)) + 'px)'; cardSubtitle.style.transform = 'translateX(' + (diff / (this.ratio * 0.85)) + 'px)'; cardImage.style.transform = 'translateX(' + (diff / (this.ratio * 0.35)) + 'px)'; cardWishList.style.transform = 'translateX(' + (diff / (this.ratio * 0.85)) + 'px)'; cardCategory.style.transform = 'translateX(' + (diff / (this.ratio * 0.65)) + 'px)'; }; // create slider var slider = new Slider(); })();In reply to: WooCommerce Brands overview page
In reply to: Make menu reappear on mobile when scrolling up?
Hey transmodiar,
You can show the “scroll to top” arrow button on mobile with this css in your Quick CSS:@media only screen and (max-width: 767px){ .responsive #top #scroll-top-link { display: block; } }After applying the css, please clear your browser cache and check.
To show the mobile header on scroll up, Try adding this code to the end of your functions.php file in Appearance ▸ Editor:
function hide_header_on_scroll_down_show_on_scroll_up() { ?> <script> (function($) { 'use strict'; var $window = $( window ); var lastScrollTop = 0; var $header = $( '#header_main' ); var headerBottom = $header.position().top + $header.outerHeight( true ); $window.scroll(function() { var windowTop = $window.scrollTop(); if ( windowTop >= headerBottom ) { $header.addClass( 'myprefix-maybe-sticky' ); } else { $header.removeClass( 'myprefix-maybe-sticky' ); $header.removeClass( 'myprefix-show' ); } if ( $header.hasClass( 'myprefix-maybe-sticky' ) ) { if ( windowTop <= headerBottom || windowTop < lastScrollTop ) { $header.addClass( 'myprefix-show' ); } else { $header.removeClass( 'myprefix-show' ); } } lastScrollTop = windowTop; }); }(jQuery)); </script> <?php } add_action('wp_footer', 'hide_header_on_scroll_down_show_on_scroll_up');Then add this code in the General Styling ▸ Quick CSS field:
@media only screen and (max-width: 767px) { .myprefix-maybe-sticky { position: fixed !important; top: -100px; width: 100%; z-index: 999; opacity: 0; background: #fff; transition: 0.3s all; box-shadow: 0 2px 3px rgba(0,0,0,0.15); } .myprefix-show { top: 0; opacity: 1; } }Best regards,
MikeIn reply to: CSS issue
Hi Mike,
I would like to thank you first for your explanation. It was very clear.
I added the following script to target some specific pages :
if (is_page( array(1545, 1873, 2023, 2034, 2036, 2047, 3263) )) {
?>
<script>
(function($) {
$(‘.main_color.container_wrap_first.container_wrap.fullsize’).css(‘display’,’none’)
})(jQuery);
</script>
<?php
}
It works fine now. BuddyPress pages are displayed as expected.
Thanks again for your help.
Please close the ticket.
Best regards
JorgeIn reply to: How to set a standard excerpt?
Danke – übrigens das hier: https://kriesi.at/support/topic/set-transparent-header-as-default-header-style/#post-1341443 ist schade, dass es schon zu ist.
Wie man ein Child-Theme ALB Element etabliert weisst du? – Doku
Man kann aber auch – indem man ein original script auslädt und dafür eher dann ein Child-Theme script an dessen stelle lädt dieses ersetzen.
Das Script um das es in diesem Fall geht ist: avia-snippet-sticky-header.js und befindet sich im Unterordner js.
Diesen Hierarchiebaum, würde ich im Child auch beibehalten. Heißt auch einen Unterordner “js” im Child-Theme folder erstellen und dort die Kopie des Scriptes ablegen. – Soweit so gut.
Das Ausladen des Elternscriptes und laden des Child-Theme scriptes:
( in die child-theme functions.php dieses Snippet )add_action( 'wp_enqueue_scripts', 'wp_change_sticky_header_script', 100 ); function wp_change_sticky_header_script() { wp_deregister_script( 'avia-sticky-header' ); wp_enqueue_script( 'avia-sticky-header-child', get_stylesheet_directory_uri().'/js/avia-snippet-sticky-header.js', array('avia-default'), $vn, true); }In dieses Script gehst du nun und änderst ( im neuesten Enfold ist es auf Zeile: 76)
if( shrinking && ! isMobile )in:
if( shrinking )Das ware es dann auch.
Do I have to buy a new license to upgrade to 4.8?
Enfold 4.5 doesn’t seem to be compatible with PHP 7.4 or higher.
Thaks for your reply.
ErwinHi,
Thank you for the update.
So this implies that the expected fallback should be somehow implemented right ?
Yes, you are correct. But it looks like the option is not yet available and upon reviewing the code, the video doesn’t actually look for fallbacks or I just missed something. We will forward this issue to our channel.
For the meantime, please try to edit the enfold/framework/php/function-set-avia-frontend.php file and look for this code around line 898.
$html5_files = $video;We will add a filter by replacing the code with:
$html5_files = apply_filters( "avia_html5_video_files", $video );You can then use this code in the functions.php file to manually define fallbacks for a specific video.
add_filter("avia_html5_video_files", function($videos) { if ( ! strpos($videos["web"], "world-video.web") === false) { $videos["mp4"] = "https://site.com/wp-content/uploads/world-video.mp4"; $videos["ogv"] = "https://site.com/wp-content/uploads/world-video.ogv"; } return $videos; }, 10, 1);This checks if the name of the video is “world-video.webm”, then assign fallbacks for mp4 or ogv.
Best regards,
IsmaelIn reply to: Contact Form Not Working (Not Sending Emails)
Hi Ismael,
Ok, thank you for letting me know!
In that case (that setting it up with AWS SES requires a paid Pro version), I want to go with the free setup WITHOUT AWS SES. So we can just ignore AWS SES and focus on resolving the “usual setup”.
In that case my current status is the following:
– When emailing directly to the email address (please see in private content below) I set up with AWS SES, the emails get delivered immediately.
– I have now set up Contact Form 7 as you advised, followed the implementation steps and also went through the best practices. Everything seems to be set up correctly, however I always receive this error message: https://savvyify.com/img/image/g0EX
– As mentioned in my previous message, I also
a) added the filter in the functions.php file (please see screenshot attached with its integration)
b) manually specified the from address in the contact form’s Content > Backend > Your from address fieldNevertheless it is not working and I cannot find the reason in the troubleshooting guides.
I would really appreciate if you could help out to set it up the normal way.
Thank you,
i see you are still under php 7.4 – maybe you update to the php8
Nimm mal besser die zweite liste ( constants ) raus – die absoluten pfade könnten jemand auf dumme gedanken bringen.
Hast du besondere Einträge in der htaccess vorgenommen ?
EDIT: es ist ja nicht nur das mit den Smileys – der hinzugefügte Text ist nach dem erneutem Speichern auch nicht mehr da !
In reply to: Post slider dots indicator
Brilliant mike! thanks.
But here too – it is important to know the amount of slides and choose it in “entry number field” if you have a multi-column layout for the slider.
if you set to show all slides it will only show one dotyou can see edited postslider.php here ( and download it too ) : https://pastebin.com/7sYWtWDT
if you like to have both arrows and dots – remove the outcomment signs on line 1021
