Viewing 30 results - 61 through 90 (of 615 total)
1 2 3 4 … 19 20 21
  • Author
    Search Results
  • June 30, 2023 at 3:46 pm #1412178

    In reply to: Color section with round corners

    Mike

    Hi,
    Try adding the custom class grid-column to your column, for this example I used a 2/3 column with a text block and a button and a image element:
    Enfold_Support_2485.jpeg
    Then add this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    .grid-column {
	display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
}
.grid-column .av_textblock_section,
.grid-column .avia-button-wrap {
	grid-column: 1;
	grid-row: 1;
}
.grid-column .avia-image-container {
	grid-column: 2;
	grid-row: 1;
}
@media only screen and (min-width: 1024px) { 
.grid-column .avia_textblock {
	 display: grid;
	 align-content: start;
	 justify-items: center;
     padding-top: 20%;
}
.grid-column .avia-button-wrap {
	display: grid;
    align-content: end;
    justify-items: center;
    padding-bottom: 20%;
}
}
@media only screen and (max-width: 1023px) { 
.grid-column .avia_textblock {
	 display: grid;
	 align-content: start;
	 justify-items: center;
}
.grid-column .avia-button-wrap {
	display: grid;
    align-content: end;
    justify-items: center;
}
}

    the expected results:
    Enfold_Support_2487.jpeg
    For your second question the column z-index will need to be adjusted, but we will need to examine your page to offer a solution.

    Best regards,
    Mike

    June 22, 2023 at 4:55 am #1411336

    In reply to: Image opening in Lightbox singly without arrows to scroll through all images

    garysch37

    Thanks very much for your suggestion, Mike. It helped me look quite deeply into this issue using Chrome’s debugger. I want to first apologise to you for keeping things so complicated using my in-development home page, which is quite complicated, instead of creating a test page for this topic question–which is exactly what I did to debug this issue after your reply.

    It turns out that the stackoverflow suggestion doesn’t work. Their suggestion is to add itemOpts.index = index; before the mfp._openClick({mfpEl:items}, jqEl, itemOpts); line as follows:

    $.fn.magnificPopup = function(options) {
	_checkInstance();

	var jqEl = $(this);

	// We call some API method of first param is a string
	if (typeof options === "string" ) {

		if(options === 'open') {
			var items,
				itemOpts = _isJQ ? jqEl.data('magnificPopup') : jqEl[0].magnificPopup,
				index = parseInt(arguments[1], 10) || 0;

			if(itemOpts.items) {
				items = itemOpts.items[index];
			} else {
				items = jqEl;
				if(itemOpts.delegate) {
					items = items.find(itemOpts.delegate);
				}
				items = items.eq( index );
			}
			itemOpts.index = index;  // Added line per https://stackoverflow.com/questions/49131727/open-all-images-on-page-with-magnific-popup
			mfp._openClick({mfpEl:items}, jqEl, itemOpts);
		} else {
			if(mfp.isOpen)
				mfp[options].apply(mfp, Array.prototype.slice.call(arguments, 1));
		}

	} else {
		// clone options obj
		options = $.extend(true, {}, options);

		/*
		 * As Zepto doesn't support .data() method for objects
		 * and it works only in normal browsers
		 * we assign "options" object directly to the DOM element. FTW!
		 */
		if(_isJQ) {
			jqEl.data('magnificPopup', options);
		} else {
			jqEl[0].magnificPopup = options;
		}

		mfp.addGroup(jqEl, options);

	}
	return jqEl;
};

    The problem is that that bug fix never even gets to run because it’s encapsulated within the IF condition of typeof options === “string”, as you can see above. So if you look at BOTH:

    (1) us Enfold users:

    links.not(options.exclude).addClass('lightbox-added')
.magnificPopup($.avia_utilities.av_popup);

    where $.avia_utilities.av_popup === {type: ‘image’, mainClass: ‘avia-popup mfp-zoom-in’, tLoading: ”, tClose: ”, removalDelay: 300, …}

    (2) and the Original Poster to that stackoverflow thread:

    $('#content').magnificPopup({
  items: $imgs,
  type: 'image',
  gallery: {
    enabled: true
  },
});

    you can see that typeof options === “object”! So it wouldn’t work for either of us (the OP coincidentally was wanting to do the exact same thing as me, to “enable magnific popup on all images on my page”). Unfortunately, the OP never responded to the reply person’s bug fix suggestion, so the thread never went further in order to highlight the failure of the suggestion for the OP.

    After ruling out magnific’s code as the culprit of my problem, I focused on avia-snippet-lightbox.js and its code at the end of its function, $.fn.avia_activate_lightbox = function(variables):

    return this.each(function()
{
    var container	= $(this),
        videos		= $(options.videoElements, this).not(options.exclude).addClass('mfp-iframe'), /*necessary class for the correct lightbox markup*/
        ajaxed		= ! container.is('body') && ! container.is('.ajax_slide');
        for( var i = 0; i < options.groups.length; i++ )
        {
            container.find(options.groups[i]).each(function()
            {
                var links = $(options.autolinkElements, this);

                if( ajaxed )
                {
                    links.removeClass('lightbox-added');
                }

                links.not(options.exclude).addClass('lightbox-added').magnificPopup($.avia_utilities.av_popup);
            });
        }

});

    Sure enough, this is the culprit. What’s happening in this code above is that:

    (1) the outer loop, controlled by the FOR loop, searches the <body> DOM for each class in the options object (.avia-slideshow, .avia-gallery, .av-horizontal-gallery, .av-instagram-pics, .portfolio-preview-page, .portfolio-preview-content, .isotope, .post-entry, .sidebar, #main, .main-menu, & .woocommerce-product-gallery); and if it finds the current options[i] in the <body> DOM, then:

    (2) the inner loop, controlled by “.each(function()”, looks for every instance of that options[i] in body and adds the images within that sub-DOM instance to the links object “array”. In other words, it creates multiple lightboxes per page–and, in fact, NOT JUST a separate one for each options[i] image set (from the outer loop), BUT ALSO a separate lightbox for each instance of options[i] as well.

    But I want a single lightbox for all linked images on a page, i.e. a single image set that is sent to magnific. Specifically, for me, options[7]===’.post-entry’ is not only found in outer 1/1, 1/2, etc. layout sections, in which I may put images, but also in Color Sections, in which I will definitely put images, perhaps in inner 1/1, 1/2, etc. layout sections within the Color Sections. It’s the Color Section that ends up separating out ‘.post-entry’ images from each other, creating multiple image sets sent to magnific for separate lightboxes (notice the <div class=’post-entry post-entry-type-page post-entry-31′> line):

    <div class='avia-section av-lib3uyi7-57ce06e0452ac92eb7d4393a8384e180 main_color avia-section-default avia-no-border-styling  avia-builder-el-62  el_after_av_section  el_before_av_section  mainPageBodyThreeCols avia-bg-style-scroll container_wrap fullsize'  >
    <div class='container av-section-cont-open' >
        <div class='template-page content  av-content-full alpha units'>
            <div class='post-entry post-entry-type-page post-entry-31'>
                <div class='entry-content-wrapper clearfix'>
                    <div  class='flex_column av-i3z0f-243165cc077a80e50bbee8f020d21535 av_one_third  avia-builder-el-63  el_before_av_one_third  avia-builder-el-first  first flex_column_div  '     >
                        <div  class='avia-image-container av-lib47uf4-9660e94fab46a96b36ab619c8b679a09 av-styling- avia-align-center  avia-builder-el-64  el_before_av_textblock  avia-builder-el-first  av-group-lightbox'   itemprop="image" itemscope="itemscope" itemtype="https://schema.org/ImageObject" >
                            <div class="avia-image-container-inner">
                                <div class="avia-image-overlay-wrap">
                                    <a href="...dentures.jpg" class='avia_image' >
                                        <img decoding="async" class='wp-image-699 avia-img-lazy-loading-not-699 avia_image ' src="...dentures-300x264.jpg" alt='...'  height="264" width="300"  itemprop="thumbnailUrl" srcset="..." sizes="(max-width: 300px) 100vw, 300px" />
                                    </a>
                                </div>
                            </div>
                        </div>...

    In other words, each .avia-section (Color Section) has its own class=’post-entry post-entry-type-page post-entry-31′, so the images under that DOM are collected as a separate image set for a lightbox.

    So I ended up just bypassing all of it, and replaced the code in avia-snippet-lightbox.js with my own child_avia-snippet-lightbox.js:

    return this.each(function()
{
    //Find all linked images
    var myLinks = $(options.autolinkElements, this);
    
    //Note: ".not(options.exclude)" is left out of this "myLinks.not(options.exclude).addClass(..." on purpose to impose the policy: if you want to exclude an image from the all-images set in the lightbox, just don't make it a link. Linked images excluded from the lightbox means if the user clicks on that linked image, it will follow that link, which is to open it's full size image, but without the lightbox's closing mechanism. Then the only way for the user to go back to the page is to click the Back button--which is bad UX.

	myLinks.addClass('lightbox-added').magnificPopup($.avia_utilities.av_popup);
});

    And adding this to my child functions.php file:

    add_action('wp_enqueue_scripts', 'magnific_script_fix', 100);
function magnific_script_fix()
{
    wp_dequeue_script('avia-lightbox-activation');
    wp_enqueue_script('child_avia-lightbox-activation', get_stylesheet_directory_uri().'/child_avia-snippet-lightbox.js', array('jquery'));
}

    Also, as you can see, I’ve left out “.not(options.exclude)” from myLinks.not(options.exclude).addClass(‘lightbox-added’).magnificPopup($.avia_utilities.av_popup) for the following reason: If I put it in, then, yes, the images with those exclusion classes will be excluded from the lightbox. But they are still linked images: so if a user clicks on one of them, it will follow that link, which is to open it’s full size image, but without the lightbox’s closing mechanism. So the only way for the user to go back to the page is to click the Back button–which is bad UX.

    FYI: I attempted to figure out a way to add each of those excluded images in its own individual one-image lightbox, but I just couldn’t even figure out how Enfold does the not(options.exclude), as a starting point (going step by step in the debugger to see how it’s doing it was a bewildering experience), so I just gave up. So I just gave myself the policy: if you want to exclude an image from the all-images set in the lightbox, just don’t make it a link. Lol. Yes, I could have left the .not(options.exclude) in there and just not used it per my policy, but I wanted to make sure the UX stays correct by preventing me (or anyone else maintaining the site) from having any effect to forgetting the policy and adding e.g. “noLightbox” to an image’s Custom CSS Class field, expecting it to be excluded from the lightbox, but still keeping the image’s link active. No: if I (or they) go into the code, they’ll see there is no .not(options.exclude) at all, and read the comment in the code, to see why their image is not getting excluded from the lightbox.

    So, anyway, that’s my solution to my particular problem. I appreciate your help, Mike. Unless you have some solution code for me to include those excluded images in their own individual one-image lightboxes (which would be helpful to just round up this solution, in case others want to use it), you may close this thread.

    Thanks very much,
    Gary

    • This reply was modified 2 years, 9 months ago by garysch37.
    June 9, 2023 at 10:41 pm #1410096

    In reply to: Multiple images in light box

    nTECHgrate

    Mike,

    I am still a bit foggy about what I am supposed to do here. Can you please confirm:

    1. add the following code to the custom PHP file within my child theme:
    function handle_lightbox_groups_in_gallery(){
    ?>
    <script>
    (function($){
    $(window).on(‘load’,function() {
    $(‘.group-1 .lightbox-added’).attr(‘data-group’, ‘1’);
    $(‘.group-2 .lightbox-added’).attr(‘data-group’, ‘2’);
    $(‘.group-3 .lightbox-added’).attr(‘data-group’, ‘3’);
    $(‘.group-4 .lightbox-added’).attr(‘data-group’, ‘4’);
    $(‘.group-5 .lightbox-added’).attr(‘data-group’, ‘5’);
    $(‘.group-6 .lightbox-added’).attr(‘data-group’, ‘6’);
    $(‘.group-7 .lightbox-added’).attr(‘data-group’, ‘7’);
    $(‘.group-8 .lightbox-added’).attr(‘data-group’, ‘8’);
    // …

    var groups = {};
    $(‘.lightbox-added’).each(function() {
    var id = parseInt($(this).attr(‘data-group’), 10);
    if(!groups[id]) {
    groups[id] = [];
    }
    groups[id].push( this );
    });

    $.each(groups, function() {
    $(this).magnificPopup({
    type: ‘image’,
    mainClass: ‘avia-popup mfp-zoom-in mfp-image-loaded’,
    closeOnContentClick: false,
    closeBtnInside: false,
    gallery: { enabled:true }
    })
    });
    });
    })(jQuery);
    </script>
    <?php
    }
    add_action(‘wp_footer’, ‘handle_lightbox_groups_in_gallery’);

    2. add ____ to the custom CSS field on each image on a given page
    ????

    Thanks

    June 9, 2023 at 9:46 pm #1410094

    In reply to: Background overlay on color block not working for me

    CharlieTh

    I turned off all my personal css, so I don’t interfere with the processing of the background of the color block.
    The oddity is…I get the background you see in the savify link on my LAPTOP monitor, but get NO background on IPAD. Have no idea how I achieved this!
    This seems to be MORE of a problem than just muddy background compared to the original?

    Here is the link of the computer screenshot:
    https://img.savvyify.com/image/p7o7

    Here is the ALB code:

    [av_section min_height='75' min_height_pc='25' min_height_px='500px' shadow='no-border-styling' bottom_border='no-border-styling' bottom_border_diagonal_color='#333333' bottom_border_diagonal_direction='' bottom_border_style='' padding='default' custom_margin='0px' custom_margin_sync='true' av-desktop-custom_margin='' av-desktop-custom_margin_sync='true' av-medium-custom_margin='' av-medium-custom_margin_sync='true' av-small-custom_margin='' av-small-custom_margin_sync='true' av-mini-custom_margin='' av-mini-custom_margin_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='' fold_type='' fold_height='' fold_more='Read more' fold_less='Read less' fold_text_style='' fold_btn_align='' color='main_color' background='bg_color' custom_bg='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='https://asiantradeassociation.com/wp-content/uploads/2023/05/bg-mashup.png' attachment='104' attachment_size='full' attach='scroll' position='top left' repeat='contain' video='' video_ratio='16:9' overlay_enable='aviaTBoverlay_enable' overlay_opacity='0.6' overlay_color='#12809b' overlay_pattern='' overlay_custom_pattern='' custom_arrow_bg='' fold_overlay_color='' fold_text_color='' fold_btn_color='theme-color' fold_btn_bg_color='' fold_btn_font_color='' size-btn-text='' av-desktop-font-size-btn-text='' av-medium-font-size-btn-text='' av-small-font-size-btn-text='' av-mini-font-size-btn-text='' fold_timer='' z_index_fold='' css_position_z_index='' av-desktop-css_position_z_index='' av-medium-css_position_z_index='' av-small-css_position_z_index='' av-mini-css_position_z_index='' id='' custom_class='' template_class='' aria_label='' av_element_hidden_in_editor='0' av_uid='av-liaxxulr' sc_version='1.0']
    [av_blog blog_type='posts' link='category' blog_style='blog-grid' content_length='content' contents='excerpt_read_more' date_filter='date_filter' date_filter_start='' date_filter_end='' date_filter_format='yy/mm/dd' period_filter_unit_1='1' period_filter_unit_2='year' page_element_filter='' offset='0' conditional='' bloglist_width='' columns='2' preview_mode='custom' image_size='no scaling' items='3' paginate='yes' img_scrset='' lazy_loading='disabled' alb_description='' id='' custom_class='' template_class='' av_uid='av-liawjkpt' sc_version='1.0']

    [av_blog blog_type='posts' link='category' blog_style='blog-grid' content_length='content' contents='excerpt_read_more' date_filter='date_filter' date_filter_start='' date_filter_end='' date_filter_format='yy/mm/dd' period_filter_unit_1='1' period_filter_unit_2='year' page_element_filter='' offset='0' conditional='' bloglist_width='' columns='3' preview_mode='custom' image_size='no scaling' items='3' paginate='yes' img_scrset='' lazy_loading='disabled' alb_description='' id='' custom_class='' template_class='' av_uid='av-42zk' sc_version='1.0']
    [/av_section]

    [av_codeblock wrapper_element='' wrapper_element_attributes='' codeblock_type='' alb_description='' id='' custom_class='' template_class='' av_uid='av-liaxtaxv' sc_version='1.0']
    <style>

    </style>
    [/av_codeblock]

    June 2, 2023 at 12:24 am #1409327

    In reply to: Image opening in Lightbox singly without arrows to scroll through all images

    garysch37

    Thank you for replying Ismael. I appreciate you helping me. Unfortunately, “av-group-lightbox” didn’t work for me.

    First, I didn’t realize I needed to add a class to every image I want to open up in the lightbox gallery on a particular page. As I mentioned in my original post, point #2, all images on the page in my original test, except the office photo inside its Color Section, opened in the lightbox gallery, WITHOUT MY HAVING TO ADD ANY CLASS TO CONNECT THEM TOGETHER. I just didn’t understand why a Color Section was messing things up. I assumed that to omit an image from the lightbox gallery, you just don’t create a link on it, and if the image is linked, then it’s part of the lightbox gallery.

    It’s actually weird that all those images did open in the lightbox gallery connected together without a class, because I have found some people on the Internet talk about how Magnific Popup requires you to add a class to all images on a page that you want to include in the gallery, just like you said.

    Or the class is to be added to the links of the images perhaps, like the leadership at https://help.groupthought.com/article/64-pages-how-to-show-an-image-in-a-pop-up-window are telling their people to do:

    $(document).ready(function() {
  $('.template-article img').each(function() {
      var currentImage = $(this);
      currentImage.wrap("<a class='image-link' href='" + currentImage.attr("src") + "'</a>");
  });
  $('.image-link').magnificPopup({type:'image'});  
});

    But I don’t know how to easily give a class to my image links, so I just went ahead with your suggestion. When I did a hard refresh of my page, I saw that the “av-group-lightbox” class was added to the avia-image-container <div>:

    <div class='avia-image-container av-liaq7z66-359c3e896ff6ab62eb93041dca6e9e63 av-styling- avia-align-center avia-builder-el-5 avia-builder-el-no-sibling av-group-lightbox' itemprop="image" itemscope="itemscope" itemtype="https://schema.org/ImageObject" >
    <div class="avia-image-container-inner">
        <div class="avia-image-overlay-wrap">
            <a href="...dog_chewing_denture.jpg" class='avia_image' >
                <img decoding="async" class='wp-image-191 avia-img-lazy-loading-not-191 avia_image ' src="...dog_chewing_denture-284x300.jpg" alt='' title='dog_chewing_denture'  height="300" width="284"  itemprop="thumbnailUrl" srcset="..." sizes="(max-width: 284px) 100vw, 284px" />
            </a>
        </div>
    </div>
</div>

    Anyway, let me run down my analysis:

    ******
    TEST 1
    ******

    First, this is my home page at the moment (which has developed since I first wrote), where all Image Media Element images have Advanced > Link Settings set to Open in Lightbox, EXCEPT AS INDICATED OTHERWISE:

    • Dog (test image) in a 1/1 column layout element
    • Office Photo in Color Section
    • Color Section with text
    • Middle-aged couple (test image) in a 1/1 column layout element
    • Empty Color Section
    • Woman holding dentures (test image)
    • Couple on beach (test image) inside a Textblock in a 1/1 column layout element: this embedded image has Display Settings > Link To = Media File (with URL set to the image’s Media Library original full size URL)
    • Couple with pretzel & coffee (test image) inside a Textblock in a 1/1 column layout element
    • Color Section containing a heading, “Our Services”, in a 1/1 column layout element.
    • Color Section for Our Services with 3 rows 3 columns:

      •     – A bunch of dentures photo (small thumbnail-like image) inside the first 1/3 column layout element
          – An oral surgery photo (small thumbnail-like image) inside the second 1/3 column layout element (first row)
          – A denture on implants (small thumbnail-like image) inside the third 1/3 column layout element (first row): Advanced > Link Settings set to Set Manually and linked to the original full size image using its Media Library URL
          – …the rest of the images in the grid-like Color Section have their images set to nothing (all 1/3 columns in this “Our Services” Color Section are designed to link to the pages discussing those specific services, except I removed that column link in the first row of images for test purposes)

    • The oral surgery test image again (full size this time), inside a 1/1 column layout element (test image)

    RESULTS WITHOUT “av-group-lightbox”, with Open in Lightbox (and the one manual setting):

    • The following images opened up as singular: Dog, Office, Middle-aged couple
    • The following images opened connected together in the lightbox gallery: Woman holding dentures, Beach couple, Pretzel couple
    • All 3 images from my grid-like Color Section that I defined to Open in Lightbox did so (they were connected together).

    So to me it seems like Color Section breaks up image groupings as follows:

    • Since there is a Color Section after the dog, it isolates the dog, making it open singly in the lightbox.
    • There is only 1 image, the office, inside the Color section following the dog, so it opens singly in the lightbox.
    • Since there is an empty Color Section after the Middle-aged couple, it’s isolated and opens singly in the lightbox.
    • The next Color Section, containing the “Our Services” heading, comes after the Pretzel couple, so we have 3 images between two Color Sections, allowing them to be connected together to open as a gallery in lightbox.
    • The Color Section after that contains our grid-like images (and their headings & blurbs), making all images inside that Color Section set to Open in Lightbox open together in the lightbox as a gallery.
    • And the final image at the bottom, our full size oral surgery, is isolated after the previous Color Section, making it open singly in the lightbox.

    ******
    TEST 2
    ******

    Then I thought, for the heck of it, I’ll replace all “Advanced > Link Settings = Open in Lightbox” with “Advanced > Link Settings = Set Manually” & URL pointing to the original full size image’s URL in the Media Library.

    RESULTS WITHOUT “av-group-lightbox” and manual URL instead of Open in Lightbox: No change–I got the same results. It’s as if it’s the anchor link on the image (which I assume Open in Lightbox also sets) that determines what goes together–within the Color Section mess-up criterion I found.

    ******
    TEST 3
    ******

    So I’m left with my problem of being able to open all images on the page I wish to together in a single lightbox gallery, irrespective of what Color Sections may exist on the page–which brings us to your kindly proposed solution.

    So, for testing, I added “av-group-lightbox” to the Advanced > Developer Settings > Custom CSS Class field of the following images on my home page as specified below:

    • *Dog: av-group-lightbox
    • *Office Photo: av-group-lightbox
    • Color Section with text
    • *Middle-aged couple: av-group-lightbox
    • Empty Color Section
    • Woman holding dentures
    • *Beach couple: av-group-lightbox
    • *Pretzel couple: av-group-lightbox
    • Color Section with 3 rows 3 columns, with “av-group-lightbox” just in the first 2 images:

      •     – *A bunch of dentures: av-group-lightbox
          – *Oral surgery: av-group-lightbox
          – Implants denture
          – …the rest of the images in the grid-like Color Section

    • *Full size Oral surgery: av-group-lightbox

    RESULTS WITH “av-group-lightbox” (with either Open in Lightbox or Set Manually–it didn’t matter): There was no change compared to the WITHOUT case:

    • The following images opened up as singular: Dog, Office, Middle-aged couple
    • The following images opened connected together in the lightbox gallery: Woman holding dentures, Beach couple, Pretzel couple
    • All 3 images from my grid-like Color Section that I defined to Open in Lightbox did so connected together, including the Implant denture that I didn’t have “av-group-lightbox” on.

    ******
    TEST 4
    ******

    I also tested with “avia-image” instead of “av-group-lightbox”, since I read somewhere in Enfold documentation/support that for an image embedded in a text block (like my Beach couple), you set Link CSS Class = “avia-image” (without quotes).

    By the way, I searched through all Enfold parent files (using the Double Commander tool on my computer after downloading the entire Enfold folder to my computer on Jul 30, 2022), and found no “av-group-lightbox” string inside any files anywhere. Did things change perhaps since my download date? I also looked through the downloaded HTML (Developer’s Page Source), and there is basically no difference between the DOMs and classes for all images (except for the obvious stuff).

    Any ideas?

    Thanks,
    Gary

    • This reply was modified 2 years, 9 months ago by garysch37.
    • This reply was modified 2 years, 9 months ago by garysch37.
    • This reply was modified 2 years, 9 months ago by garysch37.
    • This reply was modified 2 years, 9 months ago by garysch37. Reason: All these edits were to get my reply to render properly (sorry)
    • This reply was modified 2 years, 9 months ago by garysch37.
    • This reply was modified 2 years, 9 months ago by garysch37.
    • This reply was modified 2 years, 9 months ago by garysch37.
    • This reply was modified 2 years, 9 months ago by garysch37.
    June 1, 2023 at 6:09 pm #1409297

    In reply to: icon-list: change/control color for every icon

    Mike

    Hey Nomad,
    Thank you for your patience and the link to your site, I assume that you want them to look like this without the white dot in the center and the dashed horizontal line:
    Enfold_Support_2207.jpeg
    I see that your icon list has a custom class #Ablaufschritte so to change each one try this css:

    #top #Ablaufschritte.avia-icon-list-container li:first-child .iconlist_icon {
    background-color: #ffffff;
    color: #930f1a;
}
#top #Ablaufschritte.avia-icon-list-container li:nth-child(2) .iconlist_icon {
    background-color: #7f807e;
}
#top #Ablaufschritte.avia-icon-list-container li:nth-child(3) .iconlist_icon {
    background-color: #4f5150;
}
#top #Ablaufschritte.avia-icon-list-container li:nth-child(4) .iconlist_icon {
    background-color: #ac262c;
}
#top #Ablaufschritte.avia-icon-list-container li:nth-child(5) .iconlist_icon {
    background-color: #930f1a;
}

    You will note that I also changed the first icon list number because it didn’t show when the icon has a white background color.
    After applying the css, please clear your browser cache and check.
    Here is the expected results:
    Enfold_Support_2209.jpeg

    Best regards,
    Mike

    May 28, 2023 at 7:44 pm #1408890

    In reply to: Ajax Search Shortcode for sidebar is not working

    Mike

    Hi,
    To fix the SEARCH – SHORTCODE IN DIV CLASS icon and input field alignment try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #top .sidebar .custom-html-widget .avia_search_element #searchsubmit {
	width: 10%;
    padding: 0;
}
#top .sidebar .custom-html-widget .avia_search_element #s {
	width: 85%;
    display: inline;
    float: left;
}

    this seems to correct:
    Enfold_Support_2176.jpeg
    in my test the search results show correctly:
    Enfold_Support_2179.jpeg

    Best regards,
    Mike

    May 27, 2023 at 8:29 pm #1408817

    In reply to: Post Link Format not directly linking

    Mike

    Hi,
    Thank you for the link to your post, I assume that you are asking how to get your News Widget in the sidebar to link to the post type “link”. Unfortunately for the News Widget you would need to edit the core files and make these changes with each update because it can not be added to your child theme, see this thread.
    I recommend using the Magazine element instead without the first image large as it looks the same in the sidebar:
    Enfold_Support_2157.jpeg
    To do this open an empty post with the Classic Editor and use the shortcode wand for the magazine element:
    Enfold_Support_2159.jpeg
    and then copy the shortcode to a Custom HTML widget in your sidebar, here is the shortcode I used in this example:

    [av_magazine link='category' thumbnails='aviaTBthumbnails' heading='' date_filter='' date_filter_start='' date_filter_end='' date_filter_format='yy/mm/dd' period_filter_unit_1='1' period_filter_unit_2='year' page_element_filter='' first_big_pos='top' image_big='magazine' items='10' paginate='' offset='0' heading_color='theme-color' heading_custom_color='#ffffff' heading_tag='' heading_class='' heading_link='' link_target='' img_scrset='' lazy_loading='disabled' alb_description='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='' sc_version='1.0' admin_preview_bg='']

    I assume that you would like to hide the excerpts and the border between each item, so try this css:

    .sidebar .custom-html-widget .av-magazine-content {
	display: none;
}
.sidebar .custom-html-widget .av-magazine-content-wrap {
	border: none;
}

    For this expected result:
    Enfold_Support_2161.jpeg

    Best regards,
    Mike

    May 19, 2023 at 1:49 pm #1407950

    In reply to: ALB element “single image” with image caption BELOW the image, NOT AS OVERLAY

    BeeCee

    I solved it with the help of another user:

    I had to add the container to my custom overlay style.

    zzz

    The solution for an image caption below the image from case to case – not globally:

    1. add this to your custom.css and give “your-custom-class” a name that you want to use here:

    .avia-image-container.your-custom-class .av-image-caption-overlay {
position: absolute;
height: auto;
width: 100%;
bottom: 15px;
padding: 15px 0;
left: 0;
top: 100%;
}

/* addition so that a text element following the image below does not be covered by the caption */
.avia-image-container.avia-align-center.your-custom-class {
  margin: 0 auto 50px auto;
}

/* addition so that the caption below the image has no padding and is set to left */
.avia-image-container.your-custom-class .av-image-caption-overlay-center {
  padding: 0;
}
.avia-image-container.your-custom-class .av-image-caption-overlay-center p {
  text-align: left;
}

    2. then insert the image element from ALB in your page:
    go to its settings -> developer settings tab and add there in the field “custom css class” the name of your class as mentioned above: your-custom-class

    Afterwards you can style the output of the caption below the image.

    It is solved now, you can close this thread.

    And PLEASE consider to add this as an option for the ALB IMAGE element for a future theme update:
    – Overlay YES/NO
    – Image Caption below image YES/NO

    May 16, 2023 at 5:31 am #1407504

    In reply to: Subline for “av_button” Buttons

    Nikko

    Hi Nomad,

    Edit the Text Block Button, go to Styling (tab) > Spacing, and you should be able to see padding options there.
    Line height is not set individually but it can be set in Enfold Theme Options > Advanced Styling.
    As for the button style, edit the button and go to Advanced (tab) > Developer Settings > Custom CSS Class and add special-button then in Enfold Theme Options > General Styling > Quick CSS, add this CSS code:

    #top #wrap_all .special-button .avia-button {
    background: #164066;
    background-image: linear-gradient(270deg,#0d263c 0,#1f5a90 51%,#164066);
    background-size: 200% auto;
    border: none;
    background-position: 100%;
    transition: background-position .3s cubic-bezier(.4,0,.2,1);
    color: #fff;
    text-shadow: 0 0 20px #081927;
}

#top #wrap_all .special-button .avia-button:hover {
    background-position: 0;
}

    Just adjust the colors as you see fit.

    Best regards,
    Nikko

    • This reply was modified 2 years, 10 months ago by Nikko.
    May 15, 2023 at 4:18 am #1407409

    In reply to: background images per page

    Ismael

    Hey schweg33,

    Thank you for the inquiry.

    You can select the patterns as overlay in the color section’s Styling editor. However, if you want to apply it as a background, you will need to use CSS. You can add a custom CSS code in the Quick CSS field to set the pattern as a background.

    Example:

    .avia-section {
    background-image: url(https://site.com/wp-content/themes/enfold/images/background-images/dots-for-dark-background-compressed.png);
    background-repeat: repeat;
}

    You may need to apply a custom css class name or ID to the color section.

    // https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

    Best regards,
    Ismael

    March 29, 2023 at 1:21 pm #1402907

    In reply to: Add drop shadow to image captions

    Yigit

    Hey,

    Please edit your Image element and go to Advanced > Developer Settings > Custom CSS class (https://i.imgur.com/K6gXFV1.png) and add a CSS class (“custom-shadow” in the example below)

    
.custom-shadow .avia-copyright {
  filter: drop-shadow(2px 1px 1px red);
}

    If this isn’t what you meant, please post a screenshot and show the changes you’d like to make.

    Best regards,
    Yigit

    March 25, 2023 at 6:23 pm #1402492

    In reply to: Sticky Button on the right

    Mike

    Hey Anna_Tewes,
    Perhaps a button like this:
    Enfold_Support_729.jpeg
    Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

    function custom_script() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
  (function($){
  var button = $('<div id="customButton" class="avia-button-wrap av-lfo8bepl-f0ac6d7c934e9f180b74755360f479e5-wrap avia-button-center  avia-builder-el-0  avia-builder-el-no-sibling "><a href="" class="avia-button  avia-icon_select-no avia-size-medium avia-position-center avia-color-dark"><span class="avia_iconbox_title">Overview</span></a></div>');
  $(button).prependTo('body');
  })(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'custom_script');

    and add this css at Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #customButton {
    position: fixed;
    top: 7%;
    right: 12%;
    z-index: 503;
}

    If you need any help adjusting for your site please include an admin login in the Private Content area so we can be of more assistance.

    Best regards,
    Mike

    March 16, 2023 at 7:21 pm #1401414

    In reply to: Updated to latest version of enfold and it has Broken my full screen slider

    Mike

    Hi,
    Thanks for your patience, I was not able to edit your dev site homepage as it gave a server 500 error, I believe this is due to HTML code errors on the page after you saved it, I Enabled the Avia Layout Builder Debugger but this didn’t help in recovering the page. So I duplicated your page and it allowed me to edit it and I found css in the custom class field which is one possible reason for the failure:

    .caption_framed .slideshow_caption .avia-caption-title { background: rgba(242, 242, 242, 0.5) !important; }

    Enfold_Support_656.jpeg
    I removed and saved the page and it seems to be working correctly now, please check the link below.
    I also found many more elements with HTML code, these can lead to future errors.
    Enfold_Support_658.jpeg
    I recommend using our Special Character Translation plugin, please see our documentation: Using special characters

    Best regards,
    Mike

    March 9, 2023 at 7:41 pm #1400589

    Topic: Circle CSS on images no longer working due to overflow: visible

    in forum Pre Sale Questions
    Rob Marlbrough
    Guest

    An update to Enfold recently broke the Circle CSS style on images, seen here:

    Home

    Featured Speaker Headshot should be a circle, and has a circle shadow around it. It now displays as a rectangle.

    This CSS is above the circle CSS but is more specific it seems:
    .avia-image-container.av-img-box-shadow .avia-image-overlay-wrap .avia_image, .avia-image-container.av-img-box-shadow.av-styling-circle .avia-image-container-inner, .avia-image-container.av-img-box-shadow.av-styling-circle .avia_image {
    overflow: visible;
    }

    than the circle CSS:
    .av-styling-circle .avia-image-container-inner, .av-styling-circle .avia_image, .av-styling-circle .av-image-caption-overlay, .av-styling-circle div.av-caption-image-overlay-bg {
    overflow: hidden;
    -webkit-border-radius: 10000px;
    -moz-border-radius: 10000px;
    border-radius: 10000px;
    }

    Please fix. I will add some custom CSS to address the issue on other sites:

    .av-styling-circle .avia-image-container-inner, .av-styling-circle .avia_image, .av-styling-circle .av-image-caption-overlay, .av-styling-circle div.av-caption-image-overlay-bg {
    overflow: hidden !important;
    }

    Please let me know once you’re able to reproduce the issue and log the issue?

    March 4, 2023 at 8:09 pm #1400119

    In reply to: Initialise slider

    Mike

    Hey MotiveAgency,
    Thanks for your question, I’m not familiar with slick.js I imagine that you could add your “slides” via a code block element in the color section and add css to make the “slides” look like columns for desktop devices, but I don’t see an easy way to apply the javascript to the columns to become slides.
    The Content Slider uses the avia-shortcodes/slideshow/slideshow.js , but rewriting this for columns would be a big job.
    I recommend your first idea of using 2 elements and showing/hiding the relevant element per device.
    Perhaps another option would be to try adding a custom classes to your three columns ie: .one, .two, .three and add a icon element with the custom class .next which only shows on mobile to toggle between your column “slides”:
    Enfold_Support_520.jpeg
    Then in the code block element add this:

    <style>
@media only screen and (max-width: 767px) { 
#top #main .avia-section .entry-content-wrapper {
  overflow: hidden;
  position: relative;
  height: 100vh;
}
#top #main .avia-section .entry-content-wrapper .no_margin.av_one_third {
  float: left;
  width: 100%;
  position: relative;
}
}
</style>
<script>
(function($) {
  var state = 1;
  $('.next').click(function() {

    if(state==1){
       $('.one').hide();
       $('.two').show();
       state=2;
    } 
    else if(state==2){
       $('.two').hide();
       $('.three').show();
       state=3;
    }
    else if(state==3){
       $('.three').hide();
       $('.one').show();
       state=1;
    }
  
});
}(jQuery));
</script>

    On desktop you will have 3 columns:
    Enfold_Support_522.jpeg
    on mobile only one column will show at a time and clicking the arrow will toggle the next column in a circle:
    Enfold_Support_524.jpeg

    Best regards,
    Mike

    March 4, 2023 at 3:43 pm #1400103

    In reply to: Change Layout and design of Category pages

    Mike

    Hey Jochen,
    Thanks for the link to your pages, you cannot use the Advanced Layout Builder to create your category pages unless you create specific pages and redirect to them.
    But you can change the layout of the category pages, for example, if you want to use the grid layout add this filter to your child theme functions.php:

    add_filter('avf_blog_style','avia_change_category_blog_layout', 10, 2); 
function avia_change_category_blog_layout($layout, $context){
if($context == 'archive') $layout = 'blog-grid';
return $layout;
}

    Enfold_Support_516.jpeg
    To create a custom header to the top of your category pages you could add the element shortcode via a function like this:

    add_action('ava_after_main_title', 'ava_after_main_title_mod');
function ava_after_main_title_mod() {
	if(is_category('news')) {
		echo do_shortcode("[av_one_full first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_width='10' row_boxshadow_color='' margin='0px' margin_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-small-margin='' av-small-margin_sync='true' av-mini-margin='' av-mini-margin_sync='true' mobile_breaking='' mobile_column_order='' border='' border_style='solid' border_color='' radius='' radius_sync='true' min_col_height='300px' padding='' padding_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-padding='' av-mini-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='' column_boxshadow_width='10' column_boxshadow_color='' background='bg_color' background_color='#7bb0e7' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' parallax_parallax='' parallax_parallax_speed='' av-desktop-parallax_parallax='' av-desktop-parallax_parallax_speed='' av-medium-parallax_parallax='' av-medium-parallax_parallax_speed='' av-small-parallax_parallax='' av-small-parallax_parallax_speed='' av-mini-parallax_parallax='' av-mini-parallax_parallax_speed='' css_position='' css_position_location=',,,' css_position_z_index='' av-desktop-css_position='' av-desktop-css_position_location=',,,' av-desktop-css_position_z_index='' av-medium-css_position='' av-medium-css_position_location=',,,' av-medium-css_position_z_index='' av-small-css_position='' av-small-css_position_location=',,,' av-small-css_position_z_index='' av-mini-css_position='' av-mini-css_position_location=',,,' av-mini-css_position_z_index='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='' template_class='' aria_label='' av_uid='av-leu1xz8x' sc_version='1.0'][av_heading heading='Custom Header' tag='h3' style='blockquote modern-quote modern-centered' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='' av-desktop-font-size-title='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-desktop-font-size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-desktop-font-size-1='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='custom-color-heading' custom_font='#ffffff' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-small-margin='' av-small-margin_sync='true' av-mini-margin='' av-mini-margin_sync='true' headline_padding='' headline_padding_sync='true' av-desktop-headline_padding='' av-desktop-headline_padding_sync='true' av-medium-headline_padding='' av-medium-headline_padding_sync='true' av-small-headline_padding='' av-small-headline_padding_sync='true' av-mini-headline_padding='' av-mini-headline_padding_sync='true' padding='10' av-desktop-padding='' av-medium-padding='' av-small-padding='' av-mini-padding='' icon_padding='10' av-desktop-icon_padding='' av-medium-icon_padding='' av-small-icon_padding='' av-mini-icon_padding='' link='' link_target='' id='' custom_class='' template_class='' av_uid='' sc_version='1.0' admin_preview_bg=''][/av_heading][/av_one_full]");
	}
}

    Enfold_Support_518.jpeg
    In the code above you will note that I added the header only to the category News in if(is_category(‘news’)) this demonstrate that you can have different headers for different categories, you will also note that this element is not a color section, color sections will cause issues on pages with sidebars, you are better off using single full width columns.
    You can use the shortcode wand to get the element shortcode or Enable the Avia Layout Builder Debugger.
    Give this a try and if you have trouble include an admin login so we can assist.

    Best regards,
    Mike

    February 2, 2023 at 8:41 am #1396340

    In reply to: color Section class with gradient Background and a picture

    Guenni007

    if it is always the same gradient you like to insert – then you can add it via jQuery script
    f.e.: a color-section with custom class: add-gradient

    function add_gradient_to_section_bg_image() { 
?>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () { 
(function($){
	$('.avia-section.add-gradient').each(function() {
		var bgImg = $(this).css('background-image');
		var bgPos = $(this).css('background-position');
		if($(this).hasClass('av-parallax-section')){
			$(this).css('background-image', 'linear-gradient( to top, #8D005B 0%, #8D005B 90%, black 50%, black 100% )');
			$(this).find('.av-parallax-inner').css('background-color', 'transparent');
		}
		if($(this).hasClass('avia-bg-style-fixed')){
			var headerHeight = $("#header").height();
			$(this).css({
			'background-image' : ''+bgImg+' ,linear-gradient( to top, #8D005B 0%, #8D005B 90%, black 50%, black 100% )',
			'background-position' : '  '+bgPos+' , 0px '+headerHeight+'px',
			'background-color' : 'black',
			});
		} 
		else {	
			$(this).css('background-image', ''+bgImg+' ,linear-gradient( to top, #8D005B 0%, #8D005B 90%, black 50%, black 100% )');
		}
	}); 
})(jQuery);
});
</script>
<?php 
}
add_action('wp_footer', 'add_gradient_to_section_bg_image');

    But: but the background-repeat/background-size will be the same as the alb settings for the image. So if you like to have different settings for the gradient – we had to add additional script.
    for example: for fixed positioning we had to shift the gradient from top to header-height distance if the section is the first element

    see: https://enfold.webers-webdesign.de/two-bg-images/

    February 1, 2023 at 10:56 am #1396183

    Topic: Delay in visualizing image positioned absolute over Fullscreen Slider

    in forum Enfold
    elenapoliti
    Participant

    Hi I am working on a home page and I need to set a Fullscreen slider with one single picture. Over that I want to show a graphic image (I have it in png and svg), over which a special header appears. Both these elements have been placed using the position absolute and adjusting top/right values.

    However when I load the page in front-end I can see the graphic image and text appearing for a millisecond. Then they disappear and appear again when I start scrolling the page. I checked if there was some further advanced rule applied to the elements but there not. How can I keep them visible since the beginning of the loading page?

    Here’s my debug code

    [av_fullscreen size='2048x2048' control_layout='av-control-default' slider_navigation='av-navigate-arrows av-navigate-dots' nav_visibility_desktop='' nav_arrow_color='' nav_arrow_bg_color='' nav_dots_color='' nav_dot_active_color='' image_attachment='' animation='slide_up' transition_speed='' autoplay='false' interval='5' conditional_play='' img_scrset='' lazy_loading='disabled' id='' custom_class='home-open-img' template_class='' av_uid='av-ldk05icf' sc_version='1.0']
[av_fullscreen_slide slide_type='image' id='116' position='center center' video='https://' mobile_image='' fallback_link='https://' title='' video_cover='' caption_pos='caption_right' custom_title_size='' av-desktop-font-size-title='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' custom_content_size='' av-desktop-font-size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' custom_title='' custom_content='' heading_tag='' heading_class='' link_apply='' link='lightbox' link_target='' button_label='Click me' button_color='light' link1='manually,http://' link_target1='' button_label2='Click me' button_color2='light' link2='manually,http://' link_target2='' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' av_uid='av-uv4f' sc_version='1.0' video_autoplay='' video_controls='' video_mute='' video_loop='' overlay_enable=''][/av_fullscreen_slide]
[/av_fullscreen]

[av_image src='http://localhost:8888/rialto1082.com/wp-content/uploads/2023/01/bridge-graphic.png' attachment='97' attachment_size='full' copyright='' caption='' image_size='no scaling' styling='' box_shadow='none' box_shadow_width='10' box_shadow_color='' align='center' font_size='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' animation='no-animation' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' parallax_parallax='' parallax_parallax_speed='' av-desktop-parallax_parallax='none' av-desktop-parallax_parallax_speed='' av-medium-parallax_parallax='none' av-medium-parallax_parallax_speed='' av-small-parallax_parallax='none' av-small-parallax_parallax_speed='' av-mini-parallax_parallax='none' av-mini-parallax_parallax_speed='' hover='' blur_image='' grayscale_image='' fade_image='' appearance='' css_position='' css_position_location=',-50%,150%,' css_position_z_index='10' av-desktop-css_position='absolute' av-desktop-css_position_location=',-50%,260%,' av-desktop-css_position_z_index='10' av-medium-css_position='absolute' av-medium-css_position_location=',-30%,260%,' av-medium-css_position_z_index='10' av-small-css_position='absolute' av-small-css_position_location=',-30%,260%,' av-small-css_position_z_index='10' av-mini-css_position='absolute' av-mini-css_position_location=',-30%,260%,' av-mini-css_position_z_index='10' transform_perspective='' transform_rotation=',,,' transform_scale='1.5,1.5,1.5' transform_skew=',' transform_translate=',,' av-desktop-transform_perspective='' av-desktop-transform_rotation=',,,' av-desktop-transform_scale=',,' av-desktop-transform_skew=',' av-desktop-transform_translate=',,' av-medium-transform_perspective='' av-medium-transform_rotation=',,,' av-medium-transform_scale=',,' av-medium-transform_skew=',' av-medium-transform_translate=',,' av-small-transform_perspective='' av-small-transform_rotation=',,,' av-small-transform_scale=',,' av-small-transform_skew=',' av-small-transform_translate=',,' av-mini-transform_perspective='' av-mini-transform_rotation=',,,' av-mini-transform_scale=',,' av-mini-transform_skew=',' av-mini-transform_translate=',,' mask_overlay='' mask_overlay_shape='blob' mask_overlay_size='contain' mask_overlay_scale='100%' mask_overlay_position='center center' mask_overlay_repeat='no-repeat' mask_overlay_rotate='' mask_overlay_rad_shape='circle' mask_overlay_rad_position='center center' mask_overlay_opacity1='0' mask_overlay_opacity2='1' mask_overlay_opacity3='' link='' target='' title_attr='graphic-motif' alt_attr='graphic motif' img_scrset='' lazy_loading='disabled' av-desktop-hide='aviaTBav-desktop-hide' av-medium-hide='aviaTBav-medium-hide' av-small-hide='aviaTBav-small-hide' av-mini-hide='aviaTBav-mini-hide' id='' custom_class='' template_class='' av_element_hidden_in_editor='0' av_uid='av-ldk1oq0a' sc_version='1.0' admin_preview_bg=''][/av_image]

[av_one_full first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_width='10' row_boxshadow_color='' margin='0px' margin_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-small-margin='' av-small-margin_sync='true' av-mini-margin='' av-mini-margin_sync='true' mobile_breaking='' mobile_column_order='' border='' border_style='solid' border_color='' radius='' radius_sync='true' min_col_height='' padding='' padding_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-padding='' av-mini-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='' column_boxshadow_width='10' column_boxshadow_color='' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' parallax_parallax='' parallax_parallax_speed='' av-desktop-parallax_parallax='' av-desktop-parallax_parallax_speed='' av-medium-parallax_parallax='' av-medium-parallax_parallax_speed='' av-small-parallax_parallax='' av-small-parallax_parallax_speed='' av-mini-parallax_parallax='' av-mini-parallax_parallax_speed='' css_position='' css_position_location=',-30%,150%,' css_position_z_index='' av-desktop-css_position='absolute' av-desktop-css_position_location=',-40%,320%,' av-desktop-css_position_z_index='15' av-medium-css_position='absolute' av-medium-css_position_location=',-30%,320%,' av-medium-css_position_z_index='15' av-small-css_position='absolute' av-small-css_position_location=',-30%,320%,' av-small-css_position_z_index='15' av-mini-css_position='absolute' av-mini-css_position_location=',-20%,320%,' av-mini-css_position_z_index='15' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='' template_class='' aria_label='' av_uid='av-12txf' sc_version='1.0']
[av_heading heading='Rialto 1082<br/>Venice Bed & Breakfast' tag='h1' style='blockquote modern-quote modern-centered' subheading_active='subheading_below' show_icon='' icon='ue800' font='entypo-fontello' size='' av-desktop-font-size-title='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='26' subheading_size='' av-desktop-font-size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='16' icon_size='' av-desktop-font-size-1='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='custom-color-heading' custom_font='#ffffff' subheading_color='#ffffff' seperator_color='' icon_color='' margin='' margin_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-small-margin='' av-small-margin_sync='true' av-mini-margin='' av-mini-margin_sync='true' headline_padding='' headline_padding_sync='true' av-desktop-headline_padding='' av-desktop-headline_padding_sync='true' av-medium-headline_padding='' av-medium-headline_padding_sync='true' av-small-headline_padding='' av-small-headline_padding_sync='true' av-mini-headline_padding='' av-mini-headline_padding_sync='true' padding='10' av-desktop-padding='' av-medium-padding='' av-small-padding='' av-mini-padding='' icon_padding='10' av-desktop-icon_padding='' av-medium-icon_padding='' av-small-icon_padding='' av-mini-icon_padding='' link='' link_target='' id='' custom_class='' template_class='' av_uid='av-ldk1eds5' sc_version='1.0' admin_preview_bg=''][/av_heading]
[/av_one_full]
    January 26, 2023 at 12:51 am #1395267

    In reply to: Need Help Creating A Custom Site Template (NOT Page Template)

    SyberKnight

    i’m still experimenting, hoping for definitive, careful, thoughtful help.

    i found the file holding the navigational menu code in the header.php file…
    get_template_part( 'includes/helper', 'main-menu' );

    so i commented that out & copy/pasted the contents of the “helper-main-menu.php” file.
    below is a copy/paste of the new combined template-custom.php
    which includes template-builder, header, helper-main-menu, & footer.
    and you can see specifically where i copy/pasted everything by noting my distinctive commented out “BEGIN” & “END” lines.

    i tried editing…
    line 398
    $addition = "<img {$resp} class='{$class}' alt='{$headerS['header_replacement_logo_alt']}' title='{$headerS['header_replacement_logo_title']}' />";
    …i tried removing the {$resp} and adding a “src=’url-to-image.png’ – but that didn’t work.

    so i tried…
    line 406
    $output .= avia_logo( AVIA_BASE_URL . 'images/layout/logo.png', $addition, 'span', true );
    …replacing the path to logo.png with the path to my new logo image – but that didn’t work either.

    so then using the “avia_logo” output, i found my way to the “function-set-avia-frontend.php” file at line 700.
    but you know what? i simply do not know what i’m doing.
    i seem to be able to combine the various php files into making a new custom template, but how far down the rabbit hole do i go?

    where do i…
    1) add a new logo, using the same layout, size, & placement as the main one, & letting Enfold do its thing for responsiveness etc?
    2) tell the new template to use a different menu from the WP Menu? and let Enfold do its thing for responsiveness there too? i only need to change the colors for the menu.
    3) where do i hardcode in a different background image for the pages?
    4) and how can i have the footer use different/custom Widgets?

    i bet if i can get those 4 things figured out, the rest i can do via CSS by adding a class to the Body tag

    EDIT: regarding the background image. i see that it’s already adding a BODY Class of “.page-template-template-custom”, and i see in my browsers Inspector that Enfold is using an HTML CSS to add the default background image.
    is there a way i can use that Body class to change the Html background image?

    // https://pastebin.com/sfyCh2Fg

    am realizing that these code inserts don’t have line numbers, soooo, hmmm. suggestions?

    January 13, 2023 at 9:51 pm #1378643

    In reply to: take out image from post slider without affecting other sliders

    Rikard

    Hi,

    Thanks for that. Please try this in Quick CSS:

    .avia-content-slider-inner .slide-image {
  display: none; 
}

    For the rounded images, then it’s likely better that you add a class to the images in question. You can do so under Advanced->Developer Settings in the element options. Then add this to Quick CSS:

    .your-custom-class img {
  border-radius: 30px;
}

    Best regards,
    Rikard

    January 5, 2023 at 9:13 pm #1377759

    In reply to: Placing images and buttons next to each other

    Rikard

    Hey AlfredoS,

    You could try placing those elements in span tags for example. Or you could give the containing column a custom class name, then try CSS like this:

    .your-class .avia-image-container {
    max-width: 0;
    display: inline !important;
}

    Best regards,
    Rikard

    November 3, 2022 at 10:13 pm #1371279

    In reply to: Add the same banner as on the blog page, on the category page

    Mike

    Hey laboiteapixels12,
    Thank you for the login to your site, but it is not an admin login so I was limited.
    I see that on your category pages you are displaying the category description and I assume that you would like this as the title in the banner image like the blog page is displayed.
    Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

    function custom_category_banner() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
(function($){
  $('#top.archive.category').each(function() {
  	var catTitle = $('.category-term-description p').text();
  	var catBanner = $('<div class="avia-section avia-full-stretch fullsize cat-banner"><div class="av-section-color-overlay-wrap"><div class="av-section-color-overlay"></div></div><h1>'+ catTitle +'</h1></div>');
  	$(catBanner).insertBefore('.container_wrap_first');
});
})(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'custom_category_banner');

    Please copy the code from the forum and not from an email notification so the symbols are copied correctly.
    Then add this css to your child theme stylesheet or the theme option Quick CSS:

    .avia-section.cat-banner {
	height: 283px;
	color: #fff;
    background-color: #f7f4ef;
    background-image: url(https://jean-michel-cosson.fr/wp-content/uploads/2022/10/blog-articles-par-jean-michel-cosson-3.jpg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-attachment: scroll;
}
.avia-section.cat-banner h1 {
  margin: 0;
  position: absolute;
  top: 36%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.avia-section.cat-banner .av-section-color-overlay {
    opacity: 0.4;
    background-color: #2b2b2b;
    height: 283px;
}
#top.archive.category .category-term-description {
	display: none;
}

    This is the expected results:
    2022-11-03_001.png

    Best regards,
    Mike

    October 16, 2022 at 10:45 pm #1369034

    In reply to: Submenu collapse/expand on click, not hover

    Mike

    Hi,
    Thanks for the screenshot, the following script and css will remove the hover effect of the sidebar menu and open and close the submenu items on click below the menu item.
    Add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

    function custom_sidebar_menu_open_on_click_script() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
(function($){
  $(".menu-item-has-children").click(function() {
  	var clicks = $(this).data('clicks');
  if (clicks) {
  	$(this).removeClass('open');
  } else {
    $(this).addClass('open');
  }
  $(this).data("clicks", !clicks);
  });
})(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'custom_sidebar_menu_open_on_click_script');

    Add this CSS to Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #avia-menu.av-main-nav .menu-item-has-children:hover ul.sub-menu {
	opacity: 0 !important;
    visibility: hidden !important;
}
#avia-menu.av-main-nav ul.sub-menu {
    top: unset;
    left: unset;
    position: relative;
}
#avia-menu.av-main-nav .menu-item-has-children ul.sub-menu li {
	display: none;
}
#avia-menu.av-main-nav .menu-item-has-children.open ul.sub-menu li {
	display: block;
}
#avia-menu.av-main-nav .menu-item-has-children.open ul.sub-menu {
	opacity: 1 !important;
    visibility: visible !important;
}
#avia-menu.av-main-nav .menu-item-has-children.open ul.sub-menu li:last-child {
    padding-bottom: 25px;
}

    After applying the css, please clear your browser cache and check.
    The expected results:
    2022-10-16_019.png
    Please ensure to copy the code from the forum and not an email notification.

    Best regards,
    Mike

    October 16, 2022 at 4:43 pm #1369015

    In reply to: line break in top navi without background color

    Mike

    Hey Tilman,
    First ensure that you have enabled the custom class option for menu items in the Screen Options
    Then wrap the second word in your menu item with a span and the custom class line-break like this:

    Allgemeinmedizin /<span class="line-break">Naturheilkunde</span>

    and add the custom class line-break-item to the menu item:
    add_custom_class_to_menu_item_for_line_break.png
    Then add this CSS to your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    #avia-menu .line-break-item a {
	line-height: 40px;
	transform: translateY(18%);
}
.line-break-item .line-break {
    display: block;
	line-height: 0px;
}

    Now the menu item will be two lines and centered:
    2022-10-16_014.png
    I was testing with the default settings for the 2017 Demo, since your settings may be a little different you can adjust the CSS to place the menu text where you wish, if you have trouble link to your page with an admin login so we can assist.

    Best regards,
    Mike

    October 11, 2022 at 12:08 pm #1368417

    In reply to: Full width image that resizes on mobile in original aspect ratio

    Guenni007

    Take a color-section – give a custom-class to it – f.e.: responsive-background
    ( no minimum height option ! )

    Place your image as background-image to this color-section – and set it to cover the background.
    Now : look for the aspect ratio of that background image ( on my testpage it is 1500:686 = 100:45,73 )

    now place to your quick css :

    .avia-section.responsive-background {
  height: 45.73vw;
  min-height: 0;
}

    see: https://enfold.webers-webdesign.de/responsive-background-image/
    If you have a boxed layout – we need to set a max-height for that color-section

    October 7, 2022 at 8:43 pm #1368024

    In reply to: fullscreen slider by default for blog pages with transparent glassy header

    Guenni007

    well that content is loaded after the other content is already in the DOM; next : maybe lazy-loading comes into account too on that.
    So if you just want to have the image up there without slider functions, why don’t you use a color-section anyway for performance reasons.
    See here ( sorry with your image ) a page with that color section – your image has a aspect ratio of 1600:556 so if the width is 100vw the height is 34.75vw
    this could be done by a custom ID f.e. banner in your quick css:

    #banner {
  height: 34.75vw;
  background-repeat: no-repeat;
  background-image: url(https://jaro.jamesdk.sk/wp-content/uploads/2022/10/logo2-1.jpg);
  background-position: 0% 0%;
  background-attachment: scroll;
}

    and insertion code is:

    add_action('ava_after_main_title', function() {
?>
<div id="banner" class="avia-section main_color avia-section-default avia-no-border-styling avia-builder-el-1 av-small-hide av-mini-hide avia-full-stretch avia-bg-style-scroll container_wrap sidebar_right" data-section-bg-repeat="stretch">
	<div class="container av-section-cont-open">
		<div class="template-page content av-content-small alpha units">
			<div class="post-entry post-entry-type-page">
				<div class="entry-content-wrapper clearfix">
				</div>
			</div>
		</div>
	</div>
</div>
<?php
});

    see an example page with inserted banner image on top:
    https://enfold.webers-webdesign.de/test-jamesdk/

    September 28, 2022 at 1:54 pm #1366707

    In reply to: Holding page on my domain

    Mike

    Hi,
    It is a page created with the Advanced Layout Builder, so you can edit it.
    Our documentation explains that a Coming soon page or a Maintenance mode page both use the maintenance mode option and you just choose any page you wish to use.
    The demo that you linked to is just a single page with a color section that has a background image, some text, an Animated Countdown element and a contact form:
    2022-09-28_001.jpg
    If you already have a demo imported I would not recommend importing a second demo as it will change your settings, if this is your first and only import for your root domain then go ahead.
    Please note in this demo the background image for the color section will need to be set, and the Animated Countdown will not show until you set the future date and time, by default it is a past date. So when you first look at it, it will just be a white screen because the text is white, but once you set the background image you will see the text.
    Another option is to Enable the Avia Layout Builder Debugger that will add a box under the Advanced Layout Builder to enter or copy the page shortcode, you can add this shortcode:

    [av_section min_height='100' min_height_pc='25' min_height_px='500px' shadow='no-border-styling' bottom_border='no-border-styling' bottom_border_diagonal_color='#333333' bottom_border_diagonal_direction='' bottom_border_style='' padding='large' custom_margin='0px' custom_margin_sync='true' av-desktop-custom_margin='' av-desktop-custom_margin_sync='true' av-medium-custom_margin='' av-medium-custom_margin_sync='true' av-small-custom_margin='' av-small-custom_margin_sync='true' av-mini-custom_margin='' av-mini-custom_margin_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='' color='main_color' background='bg_color' custom_bg='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='https://savvyify.com/enfold/coming-soon/wp-content/uploads/sites/8/2014/09/people_town_dark.jpg' attachment='23' attachment_size='full' attach='fixed' position='center center' repeat='stretch' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' custom_arrow_bg='' css_position_z_index='' av-desktop-css_position_z_index='' av-medium-css_position_z_index='' av-small-css_position_z_index='' av-mini-css_position_z_index='' id='' custom_class='' template_class='' aria_label='' av_element_hidden_in_editor='0' av_uid='av-a1x9c' sc_version='1.0']

[av_one_fourth first av_uid='av-9gjw4']

[/av_one_fourth][av_one_half av_uid='av-8vhv8']

[av_image src='https://kriesi.at/themes/enfold-coming-soon/files/2014/09/logo_coming_soon-80x80.png' attachment='16' attachment_size='thumbnail' align='center' animation='pop-up' link='' target='' styling='no-styling' caption='' font_size='' appearance='' av_uid='av-83py0'][/av_image]

[av_heading tag='h1' padding='10' heading='<strong>Coming Soon</strong><br/>to a place near you!' color='custom-color-heading' style='blockquote modern-quote modern-centered' custom_font='#ffffff' size='44' subheading_active='subheading_below' subheading_size='15' custom_class='' av_uid='av-7hhy0']
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.sellus dolor. Maecenas vestibulum mollis
[/av_heading]

[/av_one_half][av_one_fourth av_uid='av-6xyuw']

[/av_one_fourth][av_hr class='invisible' height='100' shadow='no-shadow' position='center' custom_border='av-border-thin' custom_width='50px' custom_border_color='' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='yes' custom_icon_color='' icon='ue808' font='entypo-fontello' av_uid='av-6dkag']

[av_countdown date='10/02/2023' hour='12' minute='0' timezone='UTC' min='1' max='5' margin='' margin_sync='true' padding='' padding_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-margin='' av-small-margin_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-margin='' av-mini-margin_sync='true' av-mini-padding='' av-mini-padding_sync='true' align='av-align-center' size='' av-desktop-font-size-title='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' size-text='' av-desktop-font-size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' style='av-trans-light-style' color_numbers='' color_timeunit='' alb_description='' id='' custom_class='' template_class='' av_uid='av-5u01o' sc_version='1.0' admin_preview_bg='']

[av_hr class='invisible' height='100' shadow='no-shadow' position='center' custom_border='av-border-thin' custom_width='50px' custom_border_color='' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='yes' custom_icon_color='' icon='ue808' font='entypo-fontello' av_uid='av-5bvnk']

[av_one_fourth first av_uid='av-49xao']

[/av_one_fourth][av_one_half av_uid='av-3nz68']

[av_contact email='' title='' button='Notify me on Launch' on_send='' sent='Thank you!' link='manually,http://' subject='' autorespond='' captcha='' color='av-custom-form-color av-light-form' av_uid='av-331gw']
[av_contact_field label='Name' type='text' options='' check='is_empty' width='element_third' av_uid='av-2su9g'][/av_contact_field]
[av_contact_field label='E-Mail' type='text' options='' check='is_email' width='element_third' av_uid='av-25qmk'][/av_contact_field]
[/av_contact]

[av_textblock size='21' font_color='custom' color='#ffffff' av_uid='av-1r2uk']
<p style="text-align: center;">Want to get notified once we are ready to launch? Leave us your mail address and we will!</p>
[/av_textblock]

[/av_one_half][av_one_fourth av_uid='av-102pc']

[/av_one_fourth][/av_section]

    but you will still need to set the image.

    Best regards,
    Mike

    September 27, 2022 at 3:36 am #1366478

    In reply to: Change the colour of screen background on scroll

    Mike

    Hey engage24,
    I achieved this by adding 5 color sections each with a custom class of: white, blue, red, yellow, and purple and each with a height of 100% with a special heading for reference:
    2022-09-26_004.jpg
    then I added this css:

    .turn-white {    
background-color: #fafaf8;
} 
.turn-blue {    
background-color: #3860be;
}   
.turn-red {    
background-color: #c7102a;
transition: background-color .5s ease;
}    
.turn-yellow {    
background-color: #ffa100;
}    
.turn-purple {    
background-color: #2b1378;
}

    and added this script to the end of your child theme functions.php file in Appearance ▸ Editor:

    function waypoint_change_background_color_scroll() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
  (function($){
    var $sections = $('.avia-section');
    var $white = $(".white");
    var $blue = $(".blue");
    var $red = $(".red");
    var $yellow = $(".yellow");
    var $purple = $(".purple");
    

    $white.waypoint(function(direction) {
      if (direction === 'down') {
         $sections.addClass('turn-white');
         $sections.removeClass('turn-purple');
      }
      if (direction === 'up') {
      	$sections.removeClass('turn-white');
      	$sections.addClass('turn-purple');
      }
    }, {
      offset: '50%'
    });
    $blue.waypoint(function(direction) {
      if (direction === 'down') {
         $sections.addClass('turn-blue');
         $sections.removeClass('turn-white');
      }
      if (direction === 'up') {
      	$sections.removeClass('turn-blue');
      	$sections.addClass('turn-white');
      }
    }, {
      offset: '50%'
    });
    $red.waypoint(function(direction) {
      if (direction === 'down') {
         $sections.addClass('turn-red');
         $sections.removeClass('turn-blue');
      }
      if (direction === 'up') {
      	$sections.removeClass('turn-red');
      	$sections.addClass('turn-blue');
      }
    }, {
      offset: '50%'
    });
    
    $yellow.waypoint(function(direction) {
      if (direction === 'down') {
         $sections.addClass('turn-yellow');
         $sections.removeClass('turn-red');
      }
      if (direction === 'up') {
      	$sections.removeClass('turn-yellow');
      	$sections.addClass('turn-red');
      }
    }, {
      offset: '50%'
    });
    
    $purple.waypoint(function(direction) {
      if (direction === 'down') {
         $sections.addClass('turn-purple');
         $sections.removeClass('turn-yellow');
      }
      if (direction === 'up') {
      	$sections.removeClass('turn-purple');
      	$sections.addClass('turn-yellow');
      }
    }, {
      offset: '50%'
    });
 
  })(jQuery);
});
 </script>
  <?php
}
add_action('wp_footer', 'waypoint_change_background_color_scroll');

    See my demo page here.

    Best regards,
    Mike

    September 26, 2022 at 2:47 pm #1366372

    Topic: Old code in my functions.php – actual or not?

    in forum Enfold
    evas49
    Participant

    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
    eva

  • Author
    Search Results
Viewing 30 results - 61 through 90 (of 615 total)
1 2 3 4 … 19 20 21