-
Search Results
-
Hi,
i found code in an a older version of an child themes functions.php.
Although i researched and cleared a lot by my own these snippets are unclear.Are they still necessary / in charge or can they be removed because they are not valid/deprecated?
add_filter('avf_form_use_wpmail', 'avia_change_php_mail', 10, 3); function avia_change_php_mail($active, $new_post, $form_params){ return true; }add_theme_support('avia_template_builder_custom_css');//entfernt den Kommentarblock und die Datumsangaben aus dem Combo Widget // class avia_combo_widget extends WP_Widget { function avia_combo_widget() { //Constructor $widget_ops = array('classname' => 'avia_combo_widget', 'description' => 'A widget that displays your popular posts, recent posts, recent comments and a tagcloud' ); $this->WP_Widget( 'avia_combo_widget', THEMENAME.' Combo Widget', $widget_ops ); } function widget($args, $instance) { // prints the widget extract($args, EXTR_SKIP); $posts = empty($instance['count']) ? 4 : $instance['count']; echo $before_widget; echo "<div class='tabcontainer border_tabs top_tab tab_initial_open tab_initial_open__1'>"; echo '<div class="tab first_tab active_tab widget_tab_popular"><span>'.__('Popular', 'avia_framework').'</span></div>'; echo "<div class='tab_content active_tab_content'>"; avia_get_post_list('cat=&orderby=comment_count&posts_per_page='.$posts); echo "</div>"; echo '<div class="tab widget_tab_recent"><span>'.__('Recent', 'avia_framework').'</span></div>'; echo "<div class='tab_content'>"; avia_get_post_list('showposts='. $posts .'&orderby=post_date&order=desc'); echo "</div>"; echo '<div class="tab last_tab widget_tab_tags"><span>'.__('Tags', 'avia_framework').'</span></div>'; echo "<div class='tab_content tagcloud'>"; wp_tag_cloud('smallest=12&largest=12&unit=px'); echo "</div>"; echo "</div>"; echo $after_widget; } function update($new_instance, $old_instance) { $instance = $old_instance; foreach($new_instance as $key=>$value) { $instance[$key] = strip_tags($new_instance[$key]); } return $instance; } function form($instance) { //widgetform in backend $instance = wp_parse_args( (array) $instance, array('count' => 4) ); if(!is_numeric($instance['count'])) $instance['count'] = 4; ?> <p> <label for="<?php echo $this->get_field_id('count'); ?>">Number of posts you want to display: <input class="widefat" id="<?php echo $this->get_field_id('count'); ?>" name="<?php echo $this->get_field_name('count'); ?>" type="text" value="<?php echo esc_attr($instance['count']); ?>" /></label></p> <?php } } function avia_get_post_list( $avia_new_query , $excerpt = false) { global $avia_config; $image_size = isset($avia_config['widget_image_size']) ? $avia_config['widget_image_size'] : 'widget'; $additional_loop = new WP_Query($avia_new_query); if($additional_loop->have_posts()) : echo '<ul class="news-wrap">'; while ($additional_loop->have_posts()) : $additional_loop->the_post(); $format = ""; if(get_post_type() != 'post') $format = get_post_type(); if(empty($format)) $format = get_post_format(); if(empty($format)) $format = 'standard'; echo '<li class="news-content post-format-'.$format.'">'; //check for preview images: $image = ""; if(!current_theme_supports('force-post-thumbnails-in-widget')) { $slides = avia_post_meta(get_the_ID(), 'slideshow'); if( $slides != "" && !empty( $slides[0]['slideshow_image'] ) ) { $image = avia_image_by_id($slides[0]['slideshow_image'], 'widget', 'image'); } } if(!$image && current_theme_supports( 'post-thumbnails' )) { $image = get_the_post_thumbnail( get_the_ID(), $image_size ); } $time_format = apply_filters( 'avia_widget_time', get_option('date_format')." - ".get_option('time_format'), 'avia_get_post_list' ); $nothumb = (!$image) ? 'no-news-thumb' : ''; echo "<a class='news-link' title='".get_the_title()."' href='".get_permalink()."'>"; echo "<span class='news-thumb $nothumb'>"; echo $image; echo "</span>"; echo "<strong class='news-headline'>".avia_backend_truncate(get_the_title(), 55," "); //echo "<span class='news-time'>".get_the_time($time_format)."</span>"; echo "</strong>"; echo "</a>"; if('display title and excerpt' == $excerpt) { echo "<div class='news-excerpt'>"; the_excerpt(); echo "</div>"; } echo '</li>'; endwhile; echo "</ul>"; wp_reset_postdata(); endif; }add_filter('avf_debugging_info', 'remove_debugging_info', $info); function remove_debugging_info($info) { $info = ''; return $info; }kind regards
evaThere are massive issues with your theme – probably update related.
Here what`s going on – explained on one single example – but there are more:
In page XY there should be a CSS class: <em>headerinoverlay</em>
The class is <strong>still in the database</strong>, in the table <strong>postmeta</strong>[av_image src='https://......./wp-content/uploads/portrait.jpg' attachment='30256' attachment_size='full' copyright='' caption='yes' styling='' align='center' font_size='14' overlay_opacity='0.2' overlay_color='#000000' overlay_text_color='#ffffff' animation='fade-in' hover='av-hover-grow' appearance='' link='lightbox' target='' title_attr='' alt_attr='' lazy_loading='enabled' id='' custom_class='' template_class='' av_element_hidden_in_editor='0' av_uid='av-6j99wqx' sc_version='1.0' admin_preview_bg=''] <span class="headerinoverlay">TEXT [/av_image]The class <strong>is NOT in the actual HTML</strong> sourcecode.
<div class='avia-image-container av-6j99wqx-4360db518504a459e880005aec5fa2b1 av-styling- av-hover-grow avia_animated_image av-animated-when-visible-95 fade-in avia-align-center avia-builder-el-3 avia-builder-el-no-sibling noHover av-overlay-on-hover' itemprop="image" itemscope="itemscope" itemtype="https://schema.org/ImageObject" ><div class="avia-image-container-inner"><div class="avia-image-overlay-wrap"><a href="https://www………./wp-content/uploads/portrait.jpg" data-srcset="https://www………./wp-content/uploads/portrait.jpg 800w, https://www……./wp-content/uploads/portrait-80x73.jpg 80w, https://www......../wp-content/uploads/portrait-768x697.jpg 768w, https://www......../wp-content/uploads/portrait-705x640.jpg 705w" data-sizes="(max-width: 800px) 100vw, 800px" class='avia_image' ><div class="av-image-caption-overlay"><div class="av-caption-image-overlay-bg"></div><div class="av-image-caption-overlay-position"><div class="av-image-caption-overlay-center"><p>TEXT</p> </div></div></div><img loading="lazy" class='wp-image-30256 avia-img-lazy-loading-30256 avia_image ' src="https://www......../wp-content/uploads/portrait.jpg" alt='Portrait' title='Portraitfoto' height="726" width="800" itemprop="thumbnailUrl" srcset="https://www......../wp-content/uploads/portrait.jpg 800w, https://www......../wp-content/uploads/portrait-80x73.jpg 80w, https://www......../wp-content/uploads/portrait-768x697.jpg 768w, https://www......../wp-content/uploads/portrait-705x640.jpg 705w" sizes="(max-width: 800px) 100vw, 800px" /></a></div></div></div></div><div class='flex_column av-6149og9-1350048edcab4a29bac43fd434ba5c8f av_two_third avia-builder-el-4 el_after_av_one_third avia-builder-el-last flex_column_div av-zero-column-padding ' ><section class='av_textblock_section av-kr20wrz8-63e74a5f33bc7afd1e2b9d372feba404' itemscope="itemscope" itemtype="https://schema.org/BlogPosting" itemprop="blogPost" >The class<strong> is NOT in the ALB</strong>
[av_image src='https://......./wp-content/uploads/portrait.jpg' attachment='30256' attachment_size='full' copyright='' caption='yes' styling='' align='center' font_size='' overlay_opacity='0.2' overlay_color='#000000' overlay_text_color='#ffffff' animation='fade-in' hover='av-hover-grow' appearance='on-hover' link='lightbox' target='' title_attr='' alt_attr='' lazy_loading='enabled' id='' custom_class='' template_class='' av_element_hidden_in_editor='0' av_uid='av-6j99wqx' sc_version='1.0' admin_preview_bg=''] TEXT[/av_image]So there is no way to edit it or remove it cause i cant find.
When you compare the code from the database with the code from the ALB you will realize that there are also other things wich are different.This (gone CSS) happened to a lot of CSS and this is a very serious problem.
Please fix it or tell me how i get my CSS back from the DB into the ALB!Eva
In reply to: Bug in Form
Hi,
In your form you have the labels hidden with the Hide Form Labels option in the style tab, thus the fields use a placeholder to label the fields:
the placeholder option for the multi select section is to add “disabled” so the option is not selectable as in my solution above:
this keeps the form consist with no labels above the fields.
In your shortcode you have added a text field to act as a label above the multi select section:
I didn’t realize that you wanted a label above this only section, so I recommend removing your text section and adding the text to the Form Element Label:
and adding this css:.avia_ajax_form.av-form-labels-hidden label[for="avia_3_1"] { position: unset; } .avia_ajax_form.av-form-labels-hidden #avia_3_1 option:first-child { display:none; }which will show the label for this one field:
I added a link to a new test page below, this is the updated shortcode from your last post:[av_contact title='' button='Senden' on_send='' sent='Ihre Nachricht wurde versendet!' link='manually,http://' captcha='active' captcha_theme='light' captcha_size='normal' captcha_score='0.5' email='info@.......de' from_email='' subject='' autoresponder_email='info@......de' autoresponder_reply_to='' autoresponder_subject='' autorespond='' autorespond_after='' hide_labels='aviaTBhide_labels' form_align='' color='' heading_tag='' heading_class='' alb_description='' id='' custom_class='kursformular' template_class='' aria_label='' av_uid='av-l59y6d3l-6' sc_version='1.0' admin_preview_bg=''] [av_contact_field label='Name' type='text' check='is_empty' options='' multi_select='' av_contact_preselect='' element_display='' width='' headline_tag='h3' av_uid='av-19lvsfd-5' sc_version='1.0'][/av_contact_field] [av_contact_field label='E-Mail' type='text' check='is_email' options='' multi_select='' av_contact_preselect='' element_display='' width='' headline_tag='h3' av_uid='av-35sn6x-4' sc_version='1.0'][/av_contact_field] [av_contact_field type='select' label='Für welchen Kurs möchten Sie anfragen?' options='Ohne Geige geht es nicht,Streichen lernen / 22.10.2022' multi_select='aviaTBaviaTBmulti_select' check='' element_display='' width='' headline_tag='h3' av_uid='av-l5e3okhn-3' sc_version='1.0'][/av_contact_field] [av_contact_field type='text' label='Anzahl der Personen?' options='' check='is_number' element_display='' width='' headline_tag='h3' av_uid='av-l59y48df-2' sc_version='1.0' multi_select='' av_contact_preselect=''][/av_contact_field] [av_contact_field type='textarea' label='Anmerkung' options='' check='' element_display='' width='' headline_tag='h3' av_uid='av-l59y4xcu-1' sc_version='1.0' multi_select='' av_contact_preselect=''][/av_contact_field] [/av_contact]As for your question about the text: “Bitte löse die Gleichung. Diese Maßnahme dient der Abwehr von Spam” (my English translation is: Please solve the equation. This measure serves to protect against spam)
I only see the text: Please prove that you are human by solving the equation *
I’m not sure if it is the same text and your is German, or if your text is added somewhere else, but when the Hide Form Labels option in the style tab is used no text is shown:
if labels are shown it is like this:
if you are seeing something different the check your customizations or Enfold Theme Options ▸ Privacy and Cookies ▸ Append a privacy policy message to template builder contact forms?
Best regards,
MikeIn reply to: Masonry Gallery Backgruond
Hi,
Thanks for the feedback, and the example to /portfolios/gallery/ the space you are seeing from the masonry gallery below the header is because the color section is vertically centering the element, please note in this screenshot the green space is padding, but the masonry element is centered:
So while on a low content page this would be desired, centering the content, if you would rather have the extra white space below the content please try this css:#av_section_1.avia-section.av-minimum-height.av-minimum-height-100 .container .content { vertical-align: top; }After applying the css, please clear your browser cache and check.
Please note that typically we would recommend adding a custom class to your color section so this would only affect the certain color sections that you wish, but in this case I believe that I have successfully targeted these low content page color sections in the css rule with the ID #av_section_1 which would only occur on the first section, and with the added class .av-minimum-height-100, which means it must be a color section with a minimum height of 100%
But please test and check your other pages for any conflicts and link to any you find so we can adjust.Best regards,
MikeIn reply to: Theme Problem
Hello Ricard,
I have now deactivated the slider plug-in and switched the hosting back to 8x.x.
An error of the Theme Plug-In is now caused again.Here is the error message.
Greetings Alexander
>>>>>>>>>>>>>>>>>>>>>>>
Wenn du Hilfe bei diesem Problem suchst, wirst du möglicherweise nach einigen der folgenden Informationen gefragt:
WordPress-Version 6.0.1
Aktives Theme: Enfold (Version 5.1.1.1-image) Aktuelles Plugin: (Version ) PHP-Version 8.0.20Fehler-Details
==============
Ein Fehler vom Typ E_ERROR wurde in der Zeile 38 der Datei /var/www/vhosts/26164.s1.creoline.cloud/httpdocs/wp-content/themes/enfold/css/dynamic-css.php verursacht. Fehlermeldung: Uncaught Error: Call to undefined function extract() in /var/www/vhosts/26164.s1.creoline.cloud/httpdocs/wp-content/themes/enfold/css/dynamic-css.php:38
Stack trace:
#0 /var/www/vhosts/26164.s1.creoline.cloud/httpdocs/wp-content/themes/enfold/includes/admin/register-dynamic-styles.php(234): require()
#1 /var/www/vhosts/26164.s1.creoline.cloud/httpdocs/wp-content/themes/enfold/functions.php(781): avia_prepare_dynamic_styles()
#2 /var/www/vhosts/26164.s1.creoline.cloud/httpdocs/wp-includes/class-wp-hook.php(307): avia_custom_styles()
#3 /var/www/vhosts/26164.s1.creoline.cloud/httpdocs/wp-includes/class-wp-hook.php(331): WP_Hook->apply_filters()
#4 /var/www/vhosts/26164.s1.creoline.cloud/httpdocs/wp-includes/plugin.php(476): WP_Hook->do_action()
#5 /var/www/vhosts/26164.s1.creoline.cloud/httpdocs/wp-settings.php(598): do_action()
#6 /var/www/vhosts/26164.s1.creoline.cloud/httpdocs/wp-config.php(79): require_once(‘…’)
#7 /var/www/vhosts/26164.s1.creoline.cloud/httpdocs/wp-load.php(50): require_once(‘…’)
#8 /var/www/vhosts/26164.s1.creoline.cloud/httpdocs/wp-login.php(12): require(‘…’)
#9 {main}
thrownIn reply to: Image position in mobile view
Hi,
Thank you for the info.
The css code below should adjust the position of the dots on smaller screens.
@media only screen and (max-width: 768px) { .avia-image-container.av-67cea-136ddc8b145abc744c886b5819885f00, .avia-image-container.av-4hwii-ef140ae0612800d65a56956f82b14b3f, .avia-image-container.av-2ofye-558b2f838626b4d4afd94927f17a28e6{ position: relative; top: -75px; left: -40px; } }We are using the unique class name of the image elements in the css rule above, but the class names can be replaced with custom ones if necessary. Please check this documentation.
// https://kriesi.at/documentation/enfold/add-custom-css/
Best regards,
Ismael`In reply to: Error Version 5.1.1 – WooCommerce 6.7.0
Topic: Posts in wrong category
Hello
when i call “Category Opera” i see posts from “Category Opera” BUT i see also “Impress”, “GDPR-Declaration” and about ten other posts which dont belong to the “Category Opera”.
In fact: “Impress” and “GDPR” are not even posts – they are pages.I created a page called “Opera”
I added the masonry element
I picked “Show posts from Category”–> “Opera”[av_masonry_entries link='category,1' wc_prod_visible='' wc_prod_hidden='hide' wc_prod_featured='' prod_order_by='' prod_order='' date_filter='' date_filter_start='' date_filter_end='' date_filter_format='yy/mm/dd' period_filter_unit_1='1' period_filter_unit_2='year' sort='yes' query_orderby='date' query_order='DESC' caption_elements='title excerpt' caption_styling='' caption_display='always' size='fixed masonry' orientation='' image_size='masonry' gap='large' columns='2' av-medium-columns='' av-small-columns='' av-mini-columns='' items='12' paginate='load_more' color='' custom_bg='' overlay_fx='grayscale' animation='active' img_scrset='' lazy_loading='enabled' id='' custom_class='' template_class='' av_uid='av-l6gb8e5x' sc_version='1.0']This is the content of my functions:
<?php //$avia_config['imgSize']['square-custom'] = array('width'=>300, 'height'=>300); // small image for blogs //$avia_config['imgSize']['square2'] = array('width'=>400, 'height'=>400); // small image for blogs /* * Add your own functions here. You can also copy some of the theme functions into this file. * WordPress will use those functions instead of the original functions then. */ function enqueue_parent_theme_style() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); } add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style'); /* Proper way to enqueue styles and scripts */ function theme_name_scripts() { wp_enqueue_style( 'style-name', get_stylesheet_uri() ); } add_action( 'wp_enqueue_scripts', 'theme_name_scripts' ); /* Activate Avia debug mode */ add_action('avia_builder_mode', "builder_set_debug"); function builder_set_debug() { return "debug"; } add_filter( 'widget_text', 'do_shortcode' ); add_filter('avf_title_args', 'fix_single_post_title', 10, 2); function fix_single_post_title($args,$id) { if ( $args['title'] == 'Blog - Aktuelle Neuigkeiten' ) { $args['title'] = get_the_title($id); $args['link'] = get_permalink($id); $args['heading'] = 'h1'; } return $args; }I can solve it by deleting the “wrong pages”, than flushing the permalinks, then adding the pages again (best with a new slug).
But is only possible with a small number of pagesI cant not show you live since i am an Xampp.
Eva Simone
In reply to: fixed back round image on mobile version
background-attachment: fixed is not supported by most of the mobile devices.
So Enfold turns that to background-attachment to : scroll – and a parallax container is generated.A position fixed is supported by mobile devices – the trick is to tranform that.
Important: so set the background-attachment on that color-section to scroll please!
give a custom class to that color-section : bg-fixed and put this to your quick css:.avia-section.bg-fixed { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); background-size: 0 !important; overflow: hidden; position: relative !important; } .avia-section.bg-fixed:before { background-image: inherit !important; background-repeat: inherit !important; background-size: cover; background-position: inherit; content: ""; position: fixed !important; width: 100%; height: 100%; top: 0; left: 0; z-index: -1 !important; will-change: transform; pointer-events: none; }see f.e: https://webers-testseite.de/goodwave2/
PS: kanst du mal auf deiner Seite : was_mich_2_jahre_haarefaerbens_gelehrt_haben schauen, die Bilder sind eingeladen über:
i0.wp.com – war das deine Dev Seite, die du migriert hast? Jetzt hast du eine Rückbezüge auf diese Seite, das ist mixed Content bewertet – ausserdem ist die http – weshalb die Seite dann auch als nicht sicher eingestuft wird.In reply to: Multiply image
Hey whdsolutions,
Thank you for your patience, I was albe to achieve this similar to your layerslider which is using an image that has the overlay in the image:
I placed the background image in a color section with the custom class “mix-blend-mode” and added a 1/2 column with a special heading and image element with your logo image:
then I added this css:#top #main .mix-blend-mode > .container, #top #main .mix-blend-mode > .container .avia_image { mix-blend-mode: multiply; }with successfully results:
I linked to my test page below, please give this a try.Best regards,
MikeIn reply to: Gallery single Image styling
put it in General Styling – Quick CSS
maybe an important is necessary :#top .image-overlay .image-overlay-inside::before { content: "\e80f" !important; font-size: 50px; color: #fff !important; } #top div .avia-gallery .avia-gallery-big { padding: 0px !important; border-style: none !important; } #top div .avia-gallery img { border-style: none !important; padding: 0px !important; }the :
content: "\e80f"is a little camera – if you like to show a real image – code has to be adjusted.
if you like to have it specific only for one gallery – give a custom-class to that gallery – and this has to be part of the css code.PS: i do not see your private content area – i’m participant as you- so i only could investigate own or the enfold demo pages to give advice.
In reply to: Mobile "stutter" when scrolling page
my suggestion is ( i do as participant not see the private content) that the background-image is set to attachment fixed ! ;)
this is a known bug on safari and with iOs devices. Link
A trick to solve this problem is to bypass the attachment fixed property by passing the image to a pseudo-container ( you can take before aswell ) as a background image, but then fixing the pseudo-container. This works much better with an iPhone.https://kriesi.at/support/topic/theme-is-shaking-a-lot-in-safari/#post-1207474
so what to do :
- give to the color-section a custom-class: bg-fixed
- set the behavior to scroll
- put this to your quick css:
.avia-section.bg-fixed { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); background-size: 0 !important; overflow: hidden; position: relative; top: 0; } .avia-section.bg-fixed::after { content: ""; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-image: inherit !important; background-repeat: no-repeat !important; background-size: cover; background-position: inherit; pointer-events: none; will-change: transform; z-index: -1; visibility: visible !important; }In reply to: Product pages not showing and can't access wp-admin
Hi Rikard,
I have tried restoring but I get critical errors. The host 123-reg say the problem is with the child theme I created for Enfold. Please can you look at my child theme functions,php code and see if it has errors. Apparently it is line 23. My child theme is called Orion I.T. Theme:
<?php/*
* Add your own functions here. You can also copy some of the theme functions into this file.
* WordPress will use those functions instead of the original functions then.
*/
//set builder mode to debug
add_action(‘avia_builder_mode’, “builder_set_debug”);
function builder_set_debug()
{
return “debug”;
}/* Add Custom class to all ALB elements */
add_theme_support(‘avia_template_builder_custom_css’);/*
Woocommerce 3.0.0 Compatibility Fix
Remove Enfold’s custom functions that conflict with the new image display in WooCommerce 3.0.0
*/
global $woocommerce;
if( version_compare( $woocommerce->version, ‘3.0.0’, “>=” ) ) {
function avia_woocommerce_gallery_thumbnail_description($img, $attachment_id, $post_id, $image_class ) {
return $img;
}
function avia_woocommerce_post_thumbnail_description($img, $post_id){
return $img;
}
}add_action( ‘woocommerce_single_product_summary’, function() {
echo ” – FREE SHIPPING IN THE UK!”;
}, 10);We’re happy to announce that Enfold 5.0 is finally available. Since this is a major update, we would recommend that users update on a staging or development sites first.
Please see the change log below:
New demo: https://kriesi.at/themes/enfold-parallax/
feature: added position options (responsive) to: - Image - Button - Columns feature: added "Curtain Reveal Animations" (found in Animations Dropdown) to: - Image - Columns - Masonry - Masonry Gallery feature: added Animations Dropdown to: - Button feature: added parallax option (responsive) to: - Image - Columns feature: added transform options (perspective, rotate3d, scale3d, skew, translate3d) (responsive) to: - Image feature: added options to scale (zoom) and opacity for images when slide becomes active: - Easy Slider - Fullwitdh Easy Slider feature: minimum column height in % of surrounding layout container feature: theme option to disallow background image parallax and delayed animations on mobile (Performance Tab) - changed to be allowed by default feature: added swipe to all devices supporting touch screens (not only to mobile devices) feature: Extended Animations Dropdown with "Advanced Fade Animations", "Special Advanced Animations" feature: ALB Horizontal Gallery added rotation and styling options feature: ALB PostSlider added Navigation Dots feature: ALB Testimonial Slider added navigation styling and animation options feature: Adjusted options (and new options) for most sliders - under progress: - Slider Control Styling - Show Navigation Arrows and Dots (or none) - Custom colors for Navigation Arrows and Dots - Transitions and speed - Autorotate, end with last slide - Disable/Enable manual rotate (hide corresponding Navigation Arrows) feature: WPML global layout theme options - keep in sync options for all languages feature: added support for RankMath SEO plugin (active beta) tweak: CSS Burger Menu - remove space above mobile menu in landscape orientation and mobile devices tweak: support image links for slideshows with first slides caption as permanent caption tweak: option to add "alb templates" to top of page (not only to bottom) tweak: add option "Use custom link (fallback is image link)" to ALB Masonry Gallery tweak: ALB Tab Section new option "Deeplink String" (Advanced Tab -> Developer Settings) to set a custom link hash fixed: Block editor and ALB Tab Section have strange behaviour in backend fixed: Accordion Slider division by zero if no entries or images fixed: Anchor column link not working when set to open in the same window fixed: Block editor typography letter spacing not working fixed: Google Search only allows 1 tag FAQPage tweak: jQuery 3.0 remove deprecated $.proxy in all theme files: - enfold\config-gutenberg\js\avia_gutenberg.js - enfold\config-templatebuilder\avia-shortcodes\slideshow\slideshow.js - enfold\config-templatebuilder/avia-shortcodes/slideshow_accordion/slideshow_accordion.js - enfold\config-templatebuilder\avia-shortcodes\slideshow_fullscreen\slideshow_fullscreen.js - enfold\config-templatebuilder\avia-shortcodes\menu\menu.js - enfold\config-templatebuilder\avia-template-builder\assets\js\avia-tab-section.js - enfold\config-templatebuilder\avia-template-builder\assets\js\avia-tooltip.js - enfold\js\avia.js - enfold\js\shortcodes.js - enfold\framework\js\avia_sidebar.js - enfold\framework\js\conditional_load\avia_google_maps_api.js - enfold\framework\js\conditional_load\avia_google_maps_front.js - enfold\framework\js\conditional_load\avia_google_recaptcha_api.js tweak: jQuery 3.0 remove deprecated $.fn.focus() in js\aviapopup\jquery.magnific-popup.js updated: sync all language files version 5.0 (close to final release) updated: Dutch language files nl_NL (version 5.0 provided by EZWebdesign - Roger Hoen ) DEVELOPER: tweak: support json string for slideshow options in HTML (data-slideshow-json="...") added conditional body classes: - 'pointer-device-undefined', 'pointer-device-fine', 'pointer-device-coarse', 'pointer-device-coarse-only', 'pointer-device-none', - 'touch-device', 'no-touch-device' added: class aviaPopupTemplatesPlugins added: filter 'avf_css_rules_position' - allows to alter position rules top bottom left right added: filter 'avf_css_rules_animation_duration' - allows to alter animation-duration rules added: filter 'avf_css_rules_animation_delay' - allows to alter animation-delay rules added: filter 'avf_css_rules_transition_duration' - allows to alter transition-duration rules added: filter 'avf_el_styling_responsive_styles_skip' - skip creating rules on element basis added: filter 'avf_get_global_option_keys' - modify global options key attributes before adding to internal logic added: filter 'avf_is_global_option' - remove a global option attribute deprecated: AviaHelper::css_4value_helper() no longer needed removed: $.AviaParallaxElement - replaced by AviaObjectParallaxElement in enfold\js\avia-snippet-parallax.js renamed: function sonar_keyframes -> keyframes renamed: filter 'avf_css_rules_sonar_keyframes' -> 'avf_css_rules_keyframes'In reply to: Add Search Icon On Mobile
Hey navindesigns,
Thank you for your patience and login, in your function above I replaced the item class noMobile with menu-item-search-mobile
Then I added this code to the end of your child theme functions.php file in Appearance ▸ Editor:function custom_burger_search_mobile() { ?> <script> (function($){ $('#avia-menu').one('click', function(){ jQuery('#menu-item-search.menu-item-search-mobile').clone().wrapInner('<div class="burger_search_mobile"/>').children(0).unwrap().prependTo('#av-burger-menu-ul'); }); })(jQuery); </script> <?php } add_action('wp_footer', 'custom_burger_search_mobile');and this css to your child theme stylesheet:
#av-burger-menu-ul > .burger_search_mobile { padding-left: 20px; } .avia_mobile #top #av-burger-menu-ul > .burger_search_mobile #searchsubmit { height: 100%; }Now your search shows at the top of your mobile menu:
Please clear your browser cache and check.Best regards,
MikeHi,
The Dev Team has checked your error logs and found that it seems to be a problem with the post status beeing duplicated in query in an endless loop, but our query parameters do not have a post_status set (see postslider.php:1196) and testing withprint_r( $query );gives:query :Array ( [orderby] => date [order] => DESC [paged] => 1 [post_type] => Array ( [post] => post [page] => page [attachment] => attachment [revision] => revision [nav_menu_item] => nav_menu_item [custom_css] => custom_css [customize_changeset] => customize_changeset [oembed_cache] => oembed_cache [user_request] => user_request [wp_block] => wp_block [wp_template] => wp_template [wp_template_part] => wp_template_part [wp_global_styles] => wp_global_styles [wp_navigation] => wp_navigation [give_forms] => give_forms [give_payment] => give_payment [product] => product [product_variation] => product_variation [shop_order] => shop_order [shop_order_refund] => shop_order_refund [shop_coupon] => shop_coupon [tribe_venue] => tribe_venue [tribe_organizer] => tribe_organizer [tribe_events] => tribe_events [tribe-ea-record] => tribe-ea-record [deleted_event] => deleted_event [portfolio] => portfolio [avia_framework_post] => avia_framework_post ) [offset] => [posts_per_page] => 9 [post__not_in] => Array ( ) [meta_query] => Array ( ) [tax_query] => Array ( [0] => Array ( [taxonomy] => category [field] => id [terms] => Array ( [0] => 43 ) [operator] => IN ) ) [date_query] => Array ( ) ) $params:Array ( [type] => slider [style] => [columns] => 3 [items] => 9 [taxonomy] => category [wc_prod_visible] => [wc_prod_hidden] => hide [wc_prod_featured] => [prod_order_by] => [prod_order] => [show_meta_data] => [post_type] => Array ( [post] => post [page] => page [attachment] => attachment [revision] => revision [nav_menu_item] => nav_menu_item [custom_css] => custom_css [customize_changeset] => customize_changeset [oembed_cache] => oembed_cache [user_request] => user_request [wp_block] => wp_block [wp_template] => wp_template [wp_template_part] => wp_template_part [wp_global_styles] => wp_global_styles [wp_navigation] => wp_navigation [give_forms] => give_forms [give_payment] => give_payment [product] => product [product_variation] => product_variation [shop_order] => shop_order [shop_order_refund] => shop_order_refund [shop_coupon] => shop_coupon [tribe_venue] => tribe_venue [tribe_organizer] => tribe_organizer [tribe_events] => tribe_events [tribe-ea-record] => tribe-ea-record [deleted_event] => deleted_event [portfolio] => portfolio [avia_framework_post] => avia_framework_post ) [contents] => excerpt [preview_mode] => auto [image_size] => portfolio [autoplay] => no [animation] => fade [paginate] => no [use_main_query_pagination] => no [interval] => 5 [class] => avia-builder-el-15 el_after_av_textblock el_before_av_hr [el_id] => [categories] => 43 [custom_query] => Array ( ) [offset] => [custom_markup] => [av_display_classes] => [date_filter] => [date_filter_start] => [date_filter_end] => [date_filter_format] => yy/mm/dd [period_filter_unit_1] => 1 [period_filter_unit_2] => year [lazy_loading] => disabled [img_scrset] => ) query :Array ( [orderby] => date [order] => DESC [paged] => 1 [post_type] => Array ( [post] => post [page] => page [attachment] => attachment [revision] => revision [nav_menu_item] => nav_menu_item [custom_css] => custom_css [customize_changeset] => customize_changeset [oembed_cache] => oembed_cache [user_request] => user_request [wp_block] => wp_block [wp_template] => wp_template [wp_template_part] => wp_template_part [wp_global_styles] => wp_global_styles [wp_navigation] => wp_navigation [give_forms] => give_forms [give_payment] => give_payment [product] => product [product_variation] => product_variation [shop_order] => shop_order [shop_order_refund] => shop_order_refund [shop_coupon] => shop_coupon [tribe_venue] => tribe_venue [tribe_organizer] => tribe_organizer [tribe_events] => tribe_events [tribe-ea-record] => tribe-ea-record [deleted_event] => deleted_event [portfolio] => portfolio [avia_framework_post] => avia_framework_post ) [offset] => [posts_per_page] => 9 [post__not_in] => Array ( ) [meta_query] => Array ( ) [tax_query] => Array ( [0] => Array ( [taxonomy] .......As you see above there is no post status in the query parameters.
Seems, that because this is a secondary query one of the plugins has a problem handling this (most likely the GiveWP). But we cannot fix this.Best regards,
MikeIn reply to: Clickable image on button
choose for that button alb element the option to have an icon. place it where you like – even to see only on hovering.
then replace that icon by an image via quick css.
To better select the specific button – give a custom class to the button alb itself – f.e.: imagebutton.avia-button-wrap.imagebutton { overflow: hidden; } .imagebutton .avia_button_icon { height: 0px; overflow:visible; display: inline-block; vertical-align: top !important; } .imagebutton .avia_button_icon::before { content: ""; background-image: url(/wp-content/uploads/IMAGE.svg); /*** path to your image file ***/ background-repeat: no-repeat; background-size: contain; width: 50px; height: 50px; position: relative; display: inline-block; top: -11px; left: -5px; }See here – buttons on the right – green or blue one: https://webers-testseite.de/buttons/
In reply to: is it possible to get this layout?
Hey Jonas,
Thank you for your question, I was able to get pretty close to your mockup using columns with background images and custom css.
This is the desktop view:
notice that most are 1/3 square with the top left one being 2/3 square taking up 4 spaces, and in the middle right is one 1/3 tall being 2 blocks tall.
on tablet, 768px, they retain their ratios but are narrow:
and on mobile they all become full width and equal height:
So each of the columns has a custom class to create this and the one-third-tall & one-third-under have been set with top & clear to place them were they are. You will probably need to take care with how much content you add to these to not change their height.
You can remove the special-heading elements and the display: flex; align-items: center; from the css, as it was to center the special-heading.
If you Enable the Avia Layout Builder Debugger on your site you can add this page shortcode to test on your site:[av_two_third first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' mobile_column_order='' min_col_height='' padding='' padding_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' border='' border_style='solid' border_color='' radius='' radius_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='https://savvyify.com/enfold/wp-content/uploads/2015/07/portfolio-1.jpg' attachment='866' attachment_size='full' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='two-thirds' template_class='' aria_label='' av_uid='av-l1jjt2et' sc_version='1.0'] [av_heading heading='Two Thirds' tag='h3' style='' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' padding='10' icon_padding='10' headline_padding='' headline_padding_sync='true' link='' link_target='' id='' custom_class='' template_class='' av_uid='av-l1jm7hat' sc_version='1.0' admin_preview_bg=''][/av_heading] [/av_two_third][av_one_third min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' mobile_column_order='' min_col_height='' padding='' padding_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' border='' border_style='solid' border_color='' radius='' radius_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='https://savvyify.com/enfold/wp-content/uploads/2015/07/portfolio-2.jpg' attachment='862' attachment_size='full' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='one-third' template_class='' aria_label='' av_uid='av-l1jjtztc' sc_version='1.0'] [av_heading heading='One Third' tag='h3' style='' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' padding='10' icon_padding='10' headline_padding='' headline_padding_sync='true' link='' link_target='' id='' custom_class='' template_class='' av_uid='av-l1jm81hx' sc_version='1.0' admin_preview_bg=''][/av_heading] [/av_one_third][av_one_third first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' mobile_column_order='' min_col_height='' padding='' padding_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' border='' border_style='solid' border_color='' radius='' radius_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='https://savvyify.com/enfold/wp-content/uploads/2015/07/portfolio-4.jpg' attachment='863' attachment_size='full' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='one-third' template_class='' aria_label='' av_uid='av-2xo2xi' sc_version='1.0'] [av_heading heading='One Third' tag='h3' style='' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' padding='10' icon_padding='10' headline_padding='' headline_padding_sync='true' link='' link_target='' id='' custom_class='' template_class='' av_uid='av-74tlzq' sc_version='1.0' admin_preview_bg=''][/av_heading] [/av_one_third][av_one_third min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' mobile_column_order='' min_col_height='' padding='' padding_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' border='' border_style='solid' border_color='' radius='' radius_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='https://savvyify.com/enfold/wp-content/uploads/2015/07/portfolio-5.jpg' attachment='868' attachment_size='full' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='one-third' template_class='' aria_label='' av_uid='av-l1jjusx8' sc_version='1.0'] [av_heading heading='One Third' tag='h3' style='' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' padding='10' icon_padding='10' headline_padding='' headline_padding_sync='true' link='' link_target='' id='' custom_class='' template_class='' av_uid='av-5yz9li' sc_version='1.0' admin_preview_bg=''][/av_heading] [/av_one_third][av_one_third min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' mobile_column_order='' min_col_height='' padding='' padding_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' border='' border_style='solid' border_color='' radius='' radius_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='https://savvyify.com/enfold/wp-content/uploads/2015/07/isometric-1.jpg' attachment='447' attachment_size='full' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='one-third-tall' template_class='' aria_label='' av_uid='av-l1jjwv99' sc_version='1.0'] [av_heading heading='One Third Tall' tag='h3' style='' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' padding='10' icon_padding='10' headline_padding='' headline_padding_sync='true' link='' link_target='' id='' custom_class='' template_class='' av_uid='av-l1jm8ztq' sc_version='1.0' admin_preview_bg=''][/av_heading] [/av_one_third][av_one_third first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' mobile_column_order='' min_col_height='' padding='' padding_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' border='' border_style='solid' border_color='' radius='' radius_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='https://savvyify.com/enfold/wp-content/uploads/2015/07/portfolio-9.jpg' attachment='865' attachment_size='full' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='one-third' template_class='' aria_label='' av_uid='av-l1jjz118' sc_version='1.0'] [av_heading heading='One Third' tag='h3' style='' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' padding='10' icon_padding='10' headline_padding='' headline_padding_sync='true' link='' link_target='' id='' custom_class='' template_class='' av_uid='av-4p5yli' sc_version='1.0' admin_preview_bg=''][/av_heading] [/av_one_third][av_one_third min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' mobile_column_order='' min_col_height='' padding='' padding_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' border='' border_style='solid' border_color='' radius='' radius_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='https://savvyify.com/enfold/wp-content/uploads/2015/07/portfolio-1.jpg' attachment='866' attachment_size='full' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='one-third' template_class='' aria_label='' av_uid='av-l1jjv7wz' sc_version='1.0'] [av_heading heading='One Third' tag='h3' style='' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' padding='10' icon_padding='10' headline_padding='' headline_padding_sync='true' link='' link_target='' id='' custom_class='' template_class='' av_uid='av-365q0m' sc_version='1.0' admin_preview_bg=''][/av_heading] [/av_one_third][av_one_third min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_color='' row_boxshadow_width='10' margin='0px' margin_sync='true' mobile_breaking='' mobile_column_order='' min_col_height='' padding='' padding_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' border='' border_style='solid' border_color='' radius='' radius_sync='true' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='https://savvyify.com/enfold/wp-content/uploads/2015/07/portfolio-5.jpg' attachment='868' attachment_size='full' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='one-third-under' template_class='' aria_label='' av_uid='av-l1jjzvnn' sc_version='1.0'] [av_heading heading='One Third Under' tag='h3' style='' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' padding='10' icon_padding='10' headline_padding='' headline_padding_sync='true' link='' link_target='' id='' custom_class='' template_class='' av_uid='av-l1jm9z90' sc_version='1.0' admin_preview_bg=''][/av_heading] [/av_one_third]This is where my example is.
This is the css for the page:@media only screen and (min-width: 768px) { .one-third-tall { height: 819px; clear: initial; top: -436px; float: right!important; background-position: 50% 50% !important; display: flex; align-items: center; } .one-third { height: 385px; background-position: 50% 50% !important; display: flex; align-items: center; } .two-thirds { height: 819px; background-size: cover !important; display: flex; align-items: center; } .one-third-under { height: 385px; top: -436px; background-position: 50% 50% !important; display: flex; align-items: center; } } @media only screen and (max-width: 767px) { .one-third, .one-third-under, .one-third-tall, .two-thirds { height: 361px; display: flex; align-items: center; } } .av-special-heading { background-color: rgb(255 255 255 / 75%); }Best regards,
MikePS. I see that you have asked this through our PreSaleRequest Contact form, for further questions please login to the support forum and create a new thread so we can help you and other users can benefit from the solutions. Thank you for using Enfold.
In reply to: Fullwidth Easy Slider change caption to Modern H3
i guess the most important difference is the font-weight: 300
to address the captions specifically it is maybe a good idea to place a custom-class either to the whole slider or to the slide
f.e.: modern
If you have the custom-class on the alb itself – all caption titles will be then in font-weight: 300
if you have the custom-class only on the slide – only this will be selected ( see above image : Custom CSS Class For Heading Tag ).modern .avia-caption-title , .avia-caption-title.modern { font-weight: 300 !important; }In reply to: Changement couleur et police ne fonctionne pas
Hi,
Thank you for the link to your site, I added a custom class to your shortcodeafter-price
and this css:#main .after-price.avia-icon-pos-left { float: none; } #main .after-price.av_font_icon { display: inline-block; }and now the icon shows after the price, please clear your browser cache and check.
Best regards,
MikeIn reply to: image size
Hi,
Thank you for your patience and the link to your page, your first image in the text block behaves differently because it is not a background image like your second one.
An image in a text block is wrapped in a paragraph tag that adds some margin and it’s display is set to inline-block.
We can adjust this with css and set it to cover the element, similar to how a background image does.
Please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:.flex_column.av_two_fifth .avia_textblock > p { margin: 0; } .flex_column.av_two_fifth .avia_textblock > p > img { display: block; object-fit: cover; height: 327px; width: 455px; }it will work on your first image but you will not want this to work on all images because it could cause conflicts and the height and width must be set, so I recommend adding a custom class to your column and adjusting the css above to match.
If your not sure how to adjust the css, then add a custom class to your column and tell us so we can advise.
After applying the css, please clear your browser cache and check.Best regards,
MikeIn reply to: Horizontal gallery image caption
So i would change Mikes Code a little.
And to have that not on all horizontal galleries – i would give a custom-class to the ALB Element f.e.: subline-galleryfunction horizontal_gallery_subline(){ ?> <script> (function($){ $('.av-horizontal-gallery.subline-gallery').css("padding-bottom" , "30px" ); $('.av-horizontal-gallery.subline-gallery .av-horizontal-gallery-link').css("bottom" , "50px"); $('.av-horizontal-gallery.subline-gallery .avia-slideshow-arrows a').css("top" , "40%"); $('.av-horizontal-gallery.subline-gallery .av-horizontal-gallery-img').each(function(){ var imgTitle = $(this).attr('title'); var imgAlt = $(this).attr('alt'); $(this).after('<span class="title-under-image">' + imgTitle + '</span><span class="alt-under-image">' + imgAlt + '</span>').css({"margin": "-20px 0"}); $(this).css({ "padding-bottom" : "20px", "background-color" : "transparent" }); $('.title-under-image').css({ "display" : "block", "text-align" : "center", "color" : "#000", "font-weight" : "bold" }); $('.alt-under-image').css({ "display":"block", "text-align": "center", "color": "#444" }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'horizontal_gallery_subline');In 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/ )In reply to: Animation on element
Hi,
Thank you Guenni007 this is a good point.
So to expand on the above example to trigger the animation when the element is in view and not just on page load, we will add the class avia_animate_when_visible to the custom class with a space after the text-box-left or text-box-right classes
and changed the css to this:@keyframes slide-in-left { from { transform: translateX(-100%); } to { transform: translateX(0%); } } @keyframes slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0%); } } .text-box-right.avia_start_animation { animation: slide-in-right 1000ms; } .text-box-left.avia_start_animation { animation: slide-in-left 1000ms; }note the avia_start_animation class in the css, the waypoint script that Guenni007 pointed out changes the avia_animate_when_visible class to avia_start_animation so the css will work.
Best regards,
MikeIn reply to: Styling of burger fly-out-menue
Hey Jak73,
Please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:.html_av-overlay-side-classic #top #wrap_all .av-burger-overlay #av-burger-menu-ul li a { border-color: #fff; } #top #wrap_all .av-burger-overlay #av-burger-menu-ul li a .avia-menu-text { font-size: 18px; font-family: 'verdana'; } #av-burger-menu-ul { background-repeat: no-repeat; background-image: url(https://joakims.art/wp-content/uploads/2022/02/bg-intro-2000px.jpg); background-position: 50% 100%; background-attachment: scroll; background-size: cover; }adjust the background image to suit but ensure it is in a profile image that meets the desktop size at minimum, the mobile should be the same aspect and scales down fine.
Best regards,
MikeIn reply to: Make three Images on top of each other … ???
Hey beyond-flora,
Thank you for the inquiry.
You can pull or push an element by applying a custom margin to it. For example, to pull the second image to the left in the page above, you can use this css code.
.avia-image-container.av-kzeaghl3-a6e92917bbdb004515dac8f8c0d8dea3 { margin-left: -100px; }You can use the autogenerated class name (av-kzeaghl3-a6e92917bbdb004515dac8f8c0d8dea3) above, but you can also apply a custom css class name or ID to the elements in order to style them directly. The custom css class name and ID field is in the elements’ Advanced > Developer Settings toggle.
Best regards,
IsmaelIn reply to: Adapt Image Size for Mobile
Hey markus-fischer,
Thank you for the link to your site, but since your screenshot requires a login we can not see it.
Please try not to require a login for your screenshots so we can see them.
So I guess that you are talking about the light bulb image on your site for mobile, since it is for a “specific” image the WordPress image class for this image is wp-image-3399 so this css will reduce it’s size below 430px:@media only screen and (max-width: 430px) { .wp-image-3399.avia_image { max-width: 50%; max-height: 50%; margin: auto; } }After applying the css, please clear your browser cache and check.
If you have a group of these images you can add a custom class in the advanced options of the image element and use it instead of the WordPress image class in the css.Best regards,
MikeTopic: Custom ID images
Hi guys,
I’m adding some CSS to make my website work better on mobile.
The website is aligned left on desktop but I’d like to have it aligned center on mobile.
I have a series of small graphic dividers used across the whole website which I’d like to align center on mobile. I was thinking to add the same custom class to all those little dividers (they are jpeg, so inserted as images in a column) and then moving them all together on mobile. I can not figure out how to do that.
I started with:
@media only screen and (max-width:989px)
.avia-image-container-inner #greca {
float: right!important;
}Where #greca is the custom class, but it doesn’t work.
Any chance you can help me?
Many thanksDesktop
Mobile
In reply to: Overlapping column
Hi,
Thanks for the feedback, I see that you are using the element builder class numbers in your css, which is ok, but please keep in mind that if you add or change elements on this page in the future the builder class numbers will probably change and your css won’t work, naturally if you notice this you can easily adjust the css. The alternative to builder class numbers is using the custom class names in the elements:
Anyways, I see your css is working:#top.page-id-3983 #main .avia-builder-el-4 { position: relative; left: -50px; top: 30px; } #top.page-id-3983 #main .avia-builder-el-22 { position: relative; left: -50px; top: 30px; } #top.page-id-3983 #main .avia-builder-el-11 { position: relative; right: -50px; top: 30px; }so thank you to @guenni007 for the help and good job applying it to your situation, the only issue you had left was the middle row had the image over the text element instead of the other way around, so to correct we just needed to adjust the z-index like this:
#top.page-id-3983 #main .avia-builder-el-18 { position: relative; z-index: 0; }I added this for you so please clear your browser cache and check.
Best regards,
MikeIn reply to: image height at percentage of browser height
Hi,
Thank you for the info.
We could define the minimum and maximum height of the image but it might get distorted on certain screen sizes. If that is not a problem, try try this css code.
img.wp-image-3530.avia-img-lazy-loading-not-3530.avia_image { height: 50vh !important; max-height: 50vh !important; min-height: 50vh !important; }You may need to apply a custom css class name or ID to the image element and replace the css selector above.
Best regards,
Ismael
