Viewing 30 results - 301 through 330 (of 612 total)
  • Author
    Search Results
  • Solution One is :

    Colorsection with code-block element in it ( all checkmarks not enabled )
    Content of the codeblock is

    <div class="responsive-container">
    	<iframe class="responsive-iframe" src="https://www.youtube.com/embed/5kTP_6qW6IU?enablejsapi=1&loop=1&autoplay=1&rel=0&ecver=2&showinfo=0&color=white&iv_load_policy=3" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
    </div>

    ( the ecver=2 is new to youtube videos – it restrains the related videos on pause – it is similar to rel=0 which hampers the related videos on the end)

    this to quick css (very similar to enfold lightbox settings

    .responsive-container {
        position: relative;
        overflow: hidden;
        padding-top: 56.25vw;
    }
    
    .responsive-iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 56.25vw;
        border: 0;
    }
    
    .responsive .page-id-31239 #av_section_1 .container {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0;
    }

    ________________

    Solution Two:
    Videoscreenshot Image with custom link:

    https://www.youtube.com/watch?v=5kTP_6qW6IU?enablejsapi=1&autoplay=1&loop=1&rel=0&ecver=2&showinfo=0&color=white&iv_load_policy=3&iframe=true

    To have nearly maximum lightbox size – this to quick css:
    (i only set it for that page – you have to alter that)

    .page-id-31341 .mfp-container {
    	text-align: inherit;
    	position: absolute;
    	width: 98vw;
    	height: 55.125vw;
    	left: 50%;
    	transform: translateX(-50%);
    	padding-top: 50px;
    }
    
    .page-id-31341 .mfp-iframe-holder .mfp-content {
        max-width: 100%;
        width: 100%
    }
    
    .page-id-31341 div.avia-popup .mfp-close {
        right: 5px;
        top: 5px !important;
        background: #900;
        border: 2px solid #ffee00;
    }
    #934964

    documentation is here: https://kriesi.at/documentation/enfold/custom-social-icons/

    if you do not have a font icon of your “social-icon” you can use png files for that.

    1 look for a png file you like to have
    f.e.:

    2 : upload it to your media library and copy the link – you will need it:

    3 : now go to your functions.php of your child-theme and enter:
    that little goodreads will be the addendum to the class set by enfold

    function avia_add_custom_social_icon($icons) {
        $icons['Goodreads'] = 'goodreads';
        return $icons;
    }
    add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);

    with that you can now choose the new social icon on Enfold Options – Social Profiles ( it is at the end of the list)

    4 : This comes to quick css ( you see here is the automatically created class av-social-link-goodreads )

    #top #wrap_all .av-social-link-goodreads a:before{
        content: "";
        width: 20px;
        height: 20px;
        display: inline-block;
        vertical-align: middle;
        background: url(https://link-to-your-image/goodreads.png) no-repeat center center;
        background-size: contain;
    }

    5 : styling the hover effect – this to quick css ( color makes no sense here because we have no font )

    #top #wrap_all .av-social-link-goodreads:hover a{
        color:#fff; 
        background-color:#9fae37; 
    }

    6 : for another “social-icon” you only have to replace goodreads

    #932654

    In reply to: Text box height

    Hey GFMutiny,
    Instead for using 5 columns each containing a image, text, and button. Try creating 5 columns in a row for your images, then columns in a row for your text, and 5 more columns in a row for your buttons. Then in the settings for the first column in each row choose “Equal Height”
    Here is a screenshot of the editor:
    2018-03-25_112513
    Each row of columns will be equal height and responsive, here is a screenshot of the front end:
    2018-03-25_113609
    I found that there is no added top and bottom margin or padding for each column so the elements look natural.

    For mobile devices I created 5 more columns below, each with images, text, and buttons and I added a Custom Class “eh-mobile” to hide these columns in desktop view, where the other columns have a custom class “eh-desk” to hide from mobile view.
    2018-03-25_115915
    Here is the css to hide the elements at the brake points:

    @media only screen and (max-width: 766px) {
    .eh-desk {
    display:none !important; 
    }
    }
    @media only screen and (min-width: 767px) {
    .eh-mobile {
    display:none !important; 
    }
    }
    

    If you would like to test the page I created for this example, you can download it here: equal height column test debug code.txt
    and add the code to your site by Enabling the Avia Layout Builder Debug

    Best regards,
    Mike

    #932613

    In reply to: Testimonial Font

    Hi,

    It appears you have selected h2 tag manually while adding the testimonial content?

    Please check the testimonial content and change the tags as required.

    If you like to style the testimonial element using custom CSS below is the CSS class name reference.

    /*----------------------------------------
    // CSS - /* Testimonial CSS reference 
    //--------------------------------------*/
    
    /* Testimonial container */
    #top .avia-testimonial {
    
    	/* YOUR STYLE HERE */
    }
    
    /* Testimonial Image */
    #top .testimonial-image-shape .avia-testimonial-image,
    #top .testimonial-image-shape .avia-testimonial-image img{
    	
    	/* YOUR STYLE HERE */
    }
    
    /* Testimonial content */
    #top .avia-testimonial-content {
    
    	/* YOUR STYLE HERE */
    }
    
    /* Large slider testimonial content */
    #top .av-large-testimonial-slider .avia-testimonial-content {
    
    	/* YOUR STYLE HERE */
    }
    
    /* Testimonial meta */
    #top .avia-testimonial-meta-mini {
    
    	/* YOUR STYLE HERE */
    }
    
    /* Name */
    #top .avia-testimonial-name {
    
    	/* YOUR STYLE HERE */
    }
    
    /* Sub title */
    #top .avia-testimonial-subtitle {
    
    	/* YOUR STYLE HERE */
    }
    
    /* Link */
    #top .avia-testimonial-meta a.avia-testimonial-link {
    
    	/* YOUR STYLE HERE */
    }
    
    /* Slider arrows */
    #top .av-large-testimonial-slider .avia-slideshow-arrows a:before {
    
    		/* YOUR STYLE HERE */
    }

    Best regards,
    Vinay

    #932548

    In reply to: Break points

    I can’t see how to send attachments so I will describe.
    On the homepage at http://www.solid-steelband.com/wordpress there is a layer slider below which is an image placed in a color section with custom class which is supposed to hide it above 1024px but it doesn’t.
    Also, the burger menu does not show up on iPad landscape – it does on portrait. So I have no menu at all on iPad landscape.
    The full CSS is descrived below.
    (how do I send attachments?)
    —————————————————–
    CSS in General Styling:
    ——————————————————
    #top #header_meta .phone-info {font-size:16px; color:black;}
    @media only screen and (max-width: 990px) {
    .av-main-nav > li > a { padding: 0 5px; }
    }
    .main_menu ul:first-child > li > a { font-size: 15px; }
    #top #wrap_all .av_header_transparency .main_menu ul:first-child > li > a:hover .avia-menu-text{
    color: #c3512f !important;
    }
    .avia-menu-fx {
    bottom: 10px;
    }

    @media only screen and (max-width: 1024px) {
    #mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; }
    nav.main_menu { display: none; }}

    —————————————
    CSS in child theme styles.css:
    ——————————————–
    @media only screen and (min-width: 768px) and (max-width: 1024px){
    .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special,
    .html_header_top .av_bottom_nav_header .av-logo-container .main_menu {
    display: block;
    }
    }
    /*—————————————-
    // CSS
    // Toggle view
    //————————————–*/

    /* Desktop */

    .mobile-only{
    display: none;
    }
    .desktop-only{
    display: block;
    }
    /* Mobile */
    @media only screen and (max-width: 767px) {
    .mobile-only{
    display: block!important;
    }
    .desktop-only{
    display: none!important;
    }}

    Hi,

    Thank you for using Enfold.

    Please insert a color section and use an mp4 video as the section background. After that, just add this script in the functions.php file.

    add_action('wp_footer', 'ava_custom_script');
    function ava_custom_script(){
    	?>
    		<script type="text/javascript">
    	(function($) {	
    		$('.avia_video').on('av-mediajs-loaded', function() {
    			$('.av-section-color-overlay-wrap').prepend('<div class="custom-mute"></div>');
    			var video = $(this).mediaelementplayer();
    			video[0].setMuted(true);
    			$('.av-section-color-overlay-wrap').on('click', '.custom-mute', function() {
    				if(video[0].muted === true) {
    					video[0].setMuted(false);
    					video[0].setVolume(0.8);
    				} else {
    					video[0].setMuted(true);
    				}		
    			});
    		});
    		
    		$('.av-section-color-overlay-wrap').on('click', '.custom-mute', function() {
    			$(this).toggleClass("icon-sound-on");
    		});
    	})(jQuery);
    	</script>
    	<?php
    }

    And the following css codes in the Quick CSS field.

    .custom-mute {
    	display: block;
    	background-image: url('my site/unmute.png');
    	background-size: 40px;
    	width: 40px;
    	height: 40px;
    	position: absolute;
    	bottom: 40px;
    	right: 40px;
    	z-index: 1000;
    }
    .custom-mute:hover {
    	opacity: 0.5;
    }
    .icon-sound-on {
    	background-image: url('my site/mute.png');
    }
    @media only screen and (max-width: 1290px) {
    .custom-mute {
    	right: 190px;
    }
    }

    Adjust the background image url with your own mute and unmute images.

    Best regards,
    Ismael

    #928307
    dourmioan
    Participant

    Hi,
    I need your guidance on a problem I have encountered.

    In relevance to comments posted by various users on your forum, I decided to perform the update of my website to EnfoldVersion: 4.2.6 in Local Host. I have updated my PHP version 7.1.15
    Everything seemed to run smoothly except for the pictures of the WooCommerce products which are not displayed at all. After research I went into I came up with the conclusion that the problem is created due to the “noLightbox single-product-main-image alpha” indication (as per depicted on the 2nd screenshot attached herewith, compared to the 1st one attached where it seems that the pictures are operational).

    https://prnt.sc/is7t49
    https://prnt.sc/is7u9d

    Please note the following:
    – the “Lightbox Modal Window” field is checked on the Enfold theme Options
    – I have cleaned my website Cache
    – my child theme functions.php file contains

    <?php

    /*
    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’, “>=” ) ) {

    add_theme_support( ‘wc-product-gallery-zoom’ );
    add_theme_support( ‘wc-product-gallery-lightbox’ );

    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;
    }

    }

    – and finally my child theme style .css contains

    .woocommerce-product-gallery__trigger{
    position: absolute !important;
    top: 1em;
    left: 1em;
    z-index: 99;
    }

    Kindly advise on prompt action to be taken from my part.

    #920468
    OrangeMoose
    Participant

    Hello guys,

    Can find a way to make different overlays on my images in the textblock.
    Adding the class or id to each image’s or attributes somehow does not work.

    Here is my website: https://www.zavadskis.com/home/
    Here is my Custom CSS:

    .avia_transform a:hover .image-overlay {
    opacity: 0.8 !important;
    }

    .avia_transform a .image-overlay {
    -webkit-transition: opacity 0.4s ease-in-out;
    -moz-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
    background-image: url(https://www.zavadskis.com/wp-content/uploads/Iliustracija-2.png);
    }

    Can you look into it to tell what I’m missing?

    Many thanks!

    #916272

    In reply to: Enfold Changelog

    2018 February 21th – Version 4.2.4

    – style.css – new version number
    – fixed: base colors when activating the theme and not saving any options
    – fixed: outdated spelling
    – fixed: issue with WordPress SEO php notice
    – fixed: issue with custom css classes not added to masonry
    – fixed: issue with 3rd party custom post types saving and ALB
    – fixed: issue with magic wand shortcodes and modal subwindow not loading
    – fixed: issue with tab sections titles and non latin characters breaking anchor links
    – fixed: issue with missing array declaration in theme updates error object (PHP7.0 related)
    – fixed: issue in class avia_masonry with load more button (PHP7.0 related)
    – fixed: a translation issue in the german translation file
    – fixed: broken links in the Enfold 2017 Demo
    – fixed: an issue with page transitions and the gallery shortcode
    – fixed: an issue with backend feature images selecion when in posts/portfolio overview
    – fixed: an issue with events calendar pro recurring events and the masonry
    – fixed: an issue WooCommerce 3.3 and ALB productgrid/productslider element (function wc_reset_loop)
    – improved: asset inclusion like css and js files, in preparation for file compression
    – improved: allow to hide ALB shortcode parser meta box (backend) with screen options checkbox
    – updated: Magnificent Popup Lightbox
    – style.css – new version number
    – added: option to define fallback links for video slides on mobile and tablet devices
    – fixed: an ALB shortcode problem with closing tags
    – fixed: an array check to avoid a possible php notice
    – fixed: Audio player display in WordPress 4.9
    – fixed: several spelling errors
    – fixed: a problem with Video content not playing in Safari
    – fixed: a problem with tab section resizing
    – fixed: an issue with the Shopping Cart icon and caching plugins
    – improved: RTL handling in Advanced Layout Builder
    – improved: support for german special chars in contact form
    – improved: slightly improved the drag and drop handling of the ALB
    – improved: add security ABSPATH check to several files
    – improved: small modifications to gravity form config file
    – improved: codeblock element allows to display code snippets now

    – updated: Language files de_DE, tr_TR, it_IT
    – updated: Layerslider Plugin to latest version

    #911524

    Hi,

    Thank you for the info.

    We added the modified nav function again in the functions.php file.

    add_filter('avf_template_builder_content', 'avf_template_builder_content_mod_nav');
    function avf_template_builder_content_mod_nav( $content ) {
    	if( is_singular('portfolio') ) {
    		$nav = avia_post_nav_mod(false, 'portfolio_entries');
    		$content = $content . $nav;
    	}
    	return $content;
    }
    
    if(!function_exists('avia_post_nav_mod'))
    {
    	function avia_post_nav_mod($same_category = false, $taxonomy = 'category')
    	{
    		global $wp_version;
    	        $settings = array();
    	        $settings['same_category'] = $same_category;
    	        $settings['excluded_terms'] = '';
    			$settings['wpversion'] = $wp_version;
    
    		//dont display if a fullscreen slider is available since they overlap 
    		if((class_exists('avia_sc_layerslider') && !empty(avia_sc_layerslider::$slide_count)) || 
    			class_exists('avia_sc_slider_full') && !empty(avia_sc_slider_full::$slide_count) ) $settings['is_fullwidth'] = true;
    
    		$settings['type'] = get_post_type();
    		$settings['taxonomy'] = ($settings['type'] == 'portfolio') ? 'portfolio_entries' : $taxonomy;
    
    		if(!is_singular() || is_post_type_hierarchical($settings['type'])) $settings['is_hierarchical'] = true;
    		if($settings['type'] === 'topic' || $settings['type'] === 'reply') $settings['is_bbpress'] = true;
    
    	        $settings = apply_filters('avia_post_nav_settings', $settings);
    	        if(!empty($settings['is_bbpress']) || !empty($settings['is_hierarchical']) || !empty($settings['is_fullwidth'])) return;
    
    	        if(version_compare($settings['wpversion'], '3.8', '>=' ))
    	        {
    	            $entries['prev'] = get_previous_post($settings['same_category'], $settings['excluded_terms'], $settings['taxonomy']);
    	            $entries['next'] = get_next_post($settings['same_category'], $settings['excluded_terms'], $settings['taxonomy']);
    	        }
    	        else
    	        {
    	            $entries['prev'] = get_previous_post($settings['same_category']);
    	            $entries['next'] = get_next_post($settings['same_category']);
    	        }
    
    		$entries = apply_filters('avia_post_nav_entries', $entries, $settings);
            $output = "";
    
    		foreach ($entries as $key => $entry)
    		{
                if(empty($entry)) continue;
    			$the_title 	= isset($entry->av_custom_title) ? $entry->av_custom_title : avia_backend_truncate(get_the_title($entry->ID),75," ");
    			$link 		= isset($entry->av_custom_link)  ? $entry->av_custom_link  : get_permalink($entry->ID);
    			$image 		= isset($entry->av_custom_image) ? $entry->av_custom_image : get_the_post_thumbnail($entry->ID, 'thumbnail');
    
                $tc1   = $tc2 = "";
                $class = $image ? "with-image" : "without-image";
    
                $output .= "<a class='avia-post-nav-mod avia-post-{$key} {$class}' href='{$link}' >";
    		    $output .= "    <span class='label iconfont' ".av_icon_string($key)."></span>";
    		    $output .= "    <span class='entry-info-wrap'>";
    		    $output .= "        <span class='entry-info'>";
    		    $tc1     = "            <span class='entry-title'>{$the_title}</span>";
    if($image)  $tc2     = "            <span class='entry-image'>{$image}</span>";
                $output .= $key == 'prev' ?  $tc1.$tc2 : $tc2.$tc1;
                $output .= "        </span>";
                $output .= "    </span>";
    		    $output .= "</a>";
    		}
    		return $output;
    	}
    }

    And added a few css modifications in the style.css file.

    .single-portfolio .avia-post-nav-mod {
        display: block;
        position: relative;
        height: 110px;
        background: #aaa;
        background: rgba(0,0,0,0.1);
        color: #fff;
        padding: 15px;
        text-decoration: none;
        z-index: 501;
        -webkit-transform: translate3d(0,0,0);
    }
    
    .single-portfolio .avia-post-prev {
        left: 0;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        width: 50%;
        float: left;
    }
    
    .single-portfolio .avia-post-nav {
        display: none;
    }

    Best regards,
    Ismael

    #903403

    In reply to: Enfold Changelog

    2018 January 24th – Version 4.2.2

    – style.css – new version number
    – added: user defined menu classes for customisation are now also used in the burger menu
    – added: filter “avf_register_custom_backend_styles” to include custom php files in backend to allow for style modifications
    – fixed: any issue with videos in WordPress 4.9
    – fixed: a bug with tab section height change
    – fixed: a spelling error in the Layerslider Options
    – fixed: woocommerce shopping cart position when header custom height is chosen
    – fixed: a compatibility issue with the google maps widget
    – fixed: instagram overlay css fix
    – improved: information displayed on WooCommerce product elements
    – improved: make widget titles translatable by WPML
    – improved: add deprecate notice for function avia_set_title_tag() which is no longer in use
    – improved: internal handling of Gridrow and Cell Element
    – improved: schema.org image element markup
    – updated: several language files

    #902332

    In reply to: background text block

    Hey allen,

    Try adding a Custom Css Class on Text Block, and add: text-with-bg and in Quick CSS (located in ENfold > General Styling):

    #top .avia_textblock.text-with-bg {
        background: url('image_link') center center no-repeat;
    }

    replace image_link with the right image url. Hope this helps :)
    Best regards,
    Nikko

    AliAbabwa
    Participant

    Dear Ismael.
    The topic Adding button to mute/unmute audio on fullscreen background video is closed to new replies.
    So I’m writing here.

    I add this in the functions.php file:

    add_action('wp_footer', 'ava_custom_script');
    function ava_custom_script(){
    	?>
    		<script type="text/javascript">
    	(function($) {	
    		$('.avia_video').on('av-mediajs-loaded', function() {
    			$('.av-section-color-overlay-wrap').prepend('<div class="custom-mute"></div>');
    			var video = $(this).mediaelementplayer();
    			video[0].setMuted(true);
    			$('.av-section-color-overlay-wrap').on('click', '.custom-mute', function() {
    				if(video[0].muted === true) {
    					video[0].setMuted(false);
    					video[0].setVolume(0.8);
    				} else {
    					video[0].setMuted(true);
    				}		
    			});
    		});
    		
    		$('.av-section-color-overlay-wrap').on('click', '.custom-mute', function() {
    			$(this).toggleClass("icon-sound-on");
    		});
    	})(jQuery);
    	</script>
    	<?php
    }

    And this to custom.css:

    .custom-mute {
    	display: block;
    	background-image: url('my site/unmute.png');
    	background-size: 40px;
    	width: 40px;
    	height: 40px;
    	position: absolute;
    	bottom: 40px;
    	right: 40px;
    	z-index: 1000;
    }
    .custom-mute:hover {
    	opacity: 0.5;
    }
    .icon-sound-on {
    	background-image: url('my site/mute.png');
    }
    @media only screen and (max-width: 1290px) {
    .custom-mute {
    	right: 190px;
    }
    }

    But this code doesn’t work((
    I can press the button and it changes, but there is no sound in background video((

    And I use direct mp4 video from my site!

    Look Private Content, please.

    • This topic was modified 8 years ago by AliAbabwa.
    #898301

    Hi,

    Please add the following code in the functions.php file.

    if(!function_exists('avia_post_nav_mod'))
    {
    	function avia_post_nav_mod($same_category = false, $taxonomy = 'category')
    	{
    		global $wp_version;
    	        $settings = array();
    	        $settings['same_category'] = $same_category;
    	        $settings['excluded_terms'] = '';
    			$settings['wpversion'] = $wp_version;
    
    		//dont display if a fullscreen slider is available since they overlap 
    		if((class_exists('avia_sc_layerslider') && !empty(avia_sc_layerslider::$slide_count)) || 
    			class_exists('avia_sc_slider_full') && !empty(avia_sc_slider_full::$slide_count) ) $settings['is_fullwidth'] = true;
    
    		$settings['type'] = get_post_type();
    		$settings['taxonomy'] = ($settings['type'] == 'portfolio') ? 'portfolio_entries' : $taxonomy;
    
    		if(!is_singular() || is_post_type_hierarchical($settings['type'])) $settings['is_hierarchical'] = true;
    		if($settings['type'] === 'topic' || $settings['type'] === 'reply') $settings['is_bbpress'] = true;
    
    	        $settings = apply_filters('avia_post_nav_settings', $settings);
    	        if(!empty($settings['is_bbpress']) || !empty($settings['is_hierarchical']) || !empty($settings['is_fullwidth'])) return;
    
    	        if(version_compare($settings['wpversion'], '3.8', '>=' ))
    	        {
    	            $entries['prev'] = get_previous_post($settings['same_category'], $settings['excluded_terms'], $settings['taxonomy']);
    	            $entries['next'] = get_next_post($settings['same_category'], $settings['excluded_terms'], $settings['taxonomy']);
    	        }
    	        else
    	        {
    	            $entries['prev'] = get_previous_post($settings['same_category']);
    	            $entries['next'] = get_next_post($settings['same_category']);
    	        }
    
    		$entries = apply_filters('avia_post_nav_entries', $entries, $settings);
            $output = "";
    
    		foreach ($entries as $key => $entry)
    		{
                if(empty($entry)) continue;
    			$the_title 	= isset($entry->av_custom_title) ? $entry->av_custom_title : avia_backend_truncate(get_the_title($entry->ID),75," ");
    			$link 		= isset($entry->av_custom_link)  ? $entry->av_custom_link  : get_permalink($entry->ID);
    			$image 		= isset($entry->av_custom_image) ? $entry->av_custom_image : get_the_post_thumbnail($entry->ID, 'thumbnail');
    
                $tc1   = $tc2 = "";
                $class = $image ? "with-image" : "without-image";
    
                $output .= "<a class='avia-post-nav-mod avia-post-{$key} {$class}' href='{$link}' >";
    		    $output .= "    <span class='label iconfont' ".av_icon_string($key)."></span>";
    		    $output .= "    <span class='entry-info-wrap'>";
    		    $output .= "        <span class='entry-info'>";
    		    $tc1     = "            <span class='entry-title'>{$the_title}</span>";
    if($image)  $tc2     = "            <span class='entry-image'>{$image}</span>";
                $output .= $key == 'prev' ?  $tc1.$tc2 : $tc2.$tc1;
                $output .= "        </span>";
                $output .= "    </span>";
    		    $output .= "</a>";
    		}
    		return $output;
    	}
    }

    Edit the includes > loop-portfolio-single.php file, look for this code around line 47.

    echo '</footer>';
    

    Below, add this code:

    echo avia_post_nav_mod(false, 'portfolio_entries');
    

    And then adjust the default style in the Quick CSS field.

    #top .avia-post-nav-mod {
        display: block;
        position: relative;
        height: 110px;
        background: #aaa;
        background: rgba(0,0,0,0.1);
        color: #fff;
        padding: 15px;
        text-decoration: none;
        z-index: 501;
        -webkit-transform: translate3d(0,0,0);
    }
    
    .avia-post-prev {
        left: 0;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        width: 50%;
        float: left;
    }
    

    This modification should work but it will require a few css adjustments. I’m sure you’ll be able to handle that.

    Best regards,
    Ismael

    #898274

    Hey goingthewholehogg,
    Is this what you had in mind:
    2018-01-16_204846
    If so, I put a code block in my page and added this code:

    
    <ul class="noLightbox social_bookmarks icon_count_5"><li class="social_bookmarks_twitter av-social-link-twitter social_icon_1"><a target="_blank" href="http://twitter.com" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Twitter"><span class="avia_hidden_link_text">Twitter</span></a></li><li class="social_bookmarks_facebook av-social-link-facebook social_icon_2"><a target="_blank" href="http://facebook.com" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Facebook"><span class="avia_hidden_link_text">Facebook</span></a></li><li class="social_bookmarks_pinterest av-social-link-pinterest social_icon_3"><a href="#" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Pinterest"><span class="avia_hidden_link_text">Pinterest</span></a></li><li class="social_bookmarks_instagram av-social-link-instagram social_icon_4"><a href="#" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Instagram"><span class="avia_hidden_link_text">Instagram</span></a></li><li class="social_bookmarks_youtube av-social-link-youtube social_icon_5"><a href="#" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Youtube"><span class="avia_hidden_link_text">Youtube</span></a></li></ul>

    (Adjust the url’s to your social site’s)
    having already Turned on Custom CSS Class field for all ALB Elements I added the class “custom-social”
    Then I added this code in the General Styling > Quick CSS field:

    .custom-social .social_icon_1,.custom-social .social_icon_2,.custom-social .social_icon_3,.custom-social .social_icon_4,.custom-social .social_icon_5 { 
    font-size: 40px;
    border-color: transparent;
    }
    .main_color .custom-social .social_bookmarks a {
    color: #455a64!important; 
    }
    .avia_codeblock.custom-social {
        width: 400px;
        margin: auto;
    }

    Best regards,
    Mike

    #894254

    Hi,
    I added the custom classes option to your child theme for the layout builder, by adding this code to your child theme functions.php file in Appearance > Editor:

    add_theme_support('avia_template_builder_custom_css');

    Then I went to the bottom of your text block element and added “costumes” as the css class.
    2018-01-06_161449
    Then I added this code in the General Styling > Quick CSS field:

    .costumes a {
        color: #155563 !important;
        text-decoration: underline !important;
    }
    .costumes a:hover {
        color: #155563 !important;
        text-decoration: none !important;
    }

    I wasn’t sure if you wanted to use the same colors, so you can change that if you like.

    Best regards,
    Mike

    #893951

    Hey Sal,
    Use a Full Width Button element and add this to Quick CSS to hide the button background so the grid cell background is visible though the button:

    .flex_cell_inner .avia-button.avia-button-fullwidth {
        background: transparent !important;
    }
    .avia-button-wrap.avia-button-center a{
    height: 400px;
    }

    Adjust the height to match your element.

    To be sure not to have a conflict with other buttons, you may wish to enable the builder custom classes.
    To do this try adding this code to the end of your functions.php file in Appearance > Editor:

    add_theme_support('avia_template_builder_custom_css');

    this will allow you to add a custom class to your buttons.
    2018-01-04_211420
    then add this class to your css, for example the screenshot shows “bigbutton” as the class:

    .flex_cell_inner .bigbutton .avia-button.avia-button-fullwidth {
        background: transparent !important;
    }
    .avia-button-wrap.avia-button-center.bigbutton a{
    height: 400px;
    }

    Best regards,
    Mike

    #893550

    Hi,
    Please Try adding this code to the end of your functions.php file in Appearance > Editor:

    add_theme_support('avia_template_builder_custom_css');

    this will allow you to add a custom class to your buttons.
    2018-01-04_211420
    then add this class to your css, for example the screenshot shows “bigbutton” as the class:

    .flex_cell_inner .bigbutton .avia-button.avia-button-fullwidth {
        background: transparent !important;
    }
    .avia-button-wrap.avia-button-center.bigbutton a{
    height: 400px;
    }

    When editing functions.php you should use the child theme, Read about it & Get it here

    Best regards,
    Mike

    #887976

    Ahh im removed encodeURIComponent
    This code outputs a working URL now
    return '<a href = "'+item.el.find("img").attr("src")+'">Download</a>';

    Next problem. The Download link opens the image in the browser instead of downloading it directly.
    And it uses the “large” image instead of the original sized one.
    I’ll try to modify the lightbox function to have a download link witch directly downloads the original version of the image.
    If someone can give me a hint how to do that ..

    	// -------------------------------------------------------------------------------------------
    	// Ligthbox activation
    	// -------------------------------------------------------------------------------------------
    
    	(function($)
    	{
    		$.fn.avia_activate_lightbox = function(variables)
    		{
    			
    			var defaults = {
    				groups			:	['.avia-slideshow', '.avia-gallery', '.av-instagram-pics', '.portfolio-preview-image', '.portfolio-preview-content', '.isotope', '.post-entry', '.sidebar', '#main', '.main_menu'], 
    				autolinkElements:   'a.lightbox, a[rel^="prettyPhoto"], a[rel^="lightbox"], a[href$=jpg], a[href$=png], a[href$=gif], a[href$=jpeg], a[href*=".jpg?"], a[href*=".png?"], a[href*=".gif?"], a[href*=".jpeg?"], a[href$=".mov"] , a[href$=".swf"] , a:regex(href, .vimeo\.com/[0-9]) , a[href*="youtube.com/watch"] , a[href*="screenr.com"], a[href*="iframe=true"]',
    				videoElements	: 	'a[href$=".mov"] , a[href$=".swf"] , a:regex(href, .vimeo\.com/[0-9]) , a[href*="youtube.com/watch"] , a[href*="screenr.com"], a[href*="iframe=true"]',
    				exclude			:	'.noLightbox, .noLightbox a, .fakeLightbox, .lightbox-added, a[href*="dropbox.com"]',
    			},
    			
    			options = $.extend({}, defaults, variables),
    			
    			av_popup = {
    				type: 				'image',
    				mainClass: 			'avia-popup mfp-zoom-in',
    				tLoading: 			'',
    				tClose: 			'',
    				removalDelay: 		300, //delay removal by X to allow out-animation
    				closeBtnInside: 	true,
    				closeOnContentClick:false,
    				midClick: 			true,
    				fixedContentPos: 	false, // allows scrolling when lightbox is open but also removes any jumping because of scrollbar removal
    				
    				image: {
    				    titleSrc: function(item){
    					    var title = item.el.attr('title');
    					    if(!title) title = item.el.find('img').attr('title');
    					    if(!title) title = item.el.parent().next('.wp-caption-text').html();
    					    if(typeof title == "undefined") return "";
    					    
                                               
                                                //return title;
                                                return '<a href = "'+item.el.find("img").attr("src")+'">Download</a>';
                                                
    
                                            }
    				},
    				
    				gallery: {
    					// delegate: 	options.autolinkElements,
    					tPrev:		'',
    					tNext:		'',
    					tCounter:	'%curr% / %total%',
    					enabled:	true,
    					preload:	[1,1] // Will preload 1 - before current, and 1 after the current image
    				},
    
    				callbacks: 
    				{
    					beforeOpen: function()
    					{
    						//add custom css class for different styling
    						if( this.st.el && this.st.el.data('fixed-content') )
    						{
    							this.fixedContentPos = true;
    						}
    					},
    					
    					
    					open: function()
    					{
    						//overwrite default prev + next function. Add timeout for  crossfade animation
    						$.magnificPopup.instance.next = function() {
    							var self = this;
    							self.wrap.removeClass('mfp-image-loaded');
    							setTimeout(function() { $.magnificPopup.proto.next.call(self); }, 120);
    						}
    						$.magnificPopup.instance.prev = function() {
    							var self = this;
    							self.wrap.removeClass('mfp-image-loaded');
    							setTimeout(function() { $.magnificPopup.proto.prev.call(self); }, 120);
    						}
    						
    						//add custom css class for different styling
    						if( this.st.el && this.st.el.data('av-extra-class') )
    						{
    							this.wrap.addClass( this.currItem.el.data('av-extra-class') );
    						}
    						
    						
    					},
    					imageLoadComplete: function() 
    					{	
    						var self = this;
    						setTimeout(function() { self.wrap.addClass('mfp-image-loaded'); }, 16);
    					},
    					change: function() {
    					    
    					    if( this.currItem.el )
    					    {	
    						    var current = this.currItem.el;
    						    
    						    this.content.find( '.av-extra-modal-content, .av-extra-modal-markup' ).remove();
    						    
    						    if( current.data('av-extra-content') )
    						    {
    							    var extra = current.data('av-extra-content');
    							    this.content.append( "<div class='av-extra-modal-content'>" + extra + "</div>" );
    						    }
    						    
    						    if( current.data('av-extra-markup') )
    						    {
    							    var markup = current.data('av-extra-markup');
    							    this.wrap.append( "<div class='av-extra-modal-markup'>" + markup + "</div>"  );
    						    }
    					    }
    					},
    				}
    			},
    			
    			active = !$('html').is('.av-custom-lightbox');
    			
    			if(!active) return this;
    			
    			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(av_popup);
    						});
    					}
    				
    			});
    		}
    	})(jQuery);
    #884344

    Topic: Fatal error

    in forum Enfold
    ctancrede
    Participant

    Following the attempt to update the theme (which is not working), I have the following error :

    Fatal error: Call to undefined method aviaShortcodeTemplate::__destruct() in /var/www/vhosts/kyramedias.com/httpdocs/wp-content/themes/enfold/config-templatebuilder/avia-shortcodes/audio-player.php on line 53

    Here is the css of audio-player :

    <?php
    /**
    * Audio File Playlist Element
    *
    * Shortcode that allows to add a playlist
    *
    * @since 4.1.3
    */
    if ( ! defined( ‘ABSPATH’ ) ) { exit; } // Exit if accessed directly

    if ( ! class_exists( ‘avia_sc_audio_player’ ) )
    {

    class avia_sc_audio_player extends aviaShortcodeTemplate
    {
    /**
    *
    * @since 4.1.3
    * @var int
    */
    static protected $instance = 0;
    var $extra_style = “”;
    var $non_ajax_style = “”;

    /**
    *
    * @since 4.1.3
    * @var array
    */
    protected $atts;

    /**
    *
    * @since 4.1.3
    * @param AviaBuilder $builder
    */
    public function __construct( $builder )
    {
    parent::__construct( $builder );

    $this->atts = array();
    }

    /**
    *
    * @since 4.1.3
    */
    public function __destruct()
    {
    parent::__destruct();

    unset( $this->atts );
    }

    /**
    * Create the config array for the shortcode button
    *
    * @since 4.1.3
    */
    public function shortcode_insert_button()
    {
    $this->config[‘name’] = __( ‘Audio Player’, ‘avia_framework’ );
    $this->config[‘tab’] = __( ‘Media Elements’, ‘avia_framework’ );
    $this->config[‘icon’] = AviaBuilder::$path[‘imagesURL’] . “sc-audio-player.png”;
    $this->config[‘order’] = 60;
    $this->config[‘target’] = ‘avia-target-insert’;
    $this->config[‘shortcode’] = ‘av_player’;
    $this->config[‘shortcode_nested’] = array( ‘av_playlist_element’ );
    $this->config[‘tooltip’] = __( ‘Add an audio player element’, ‘avia_framework’ );
    $this->config[‘tinyMCE’] = array( ‘disable’ => “true” );
    $this->config[‘drag-level’] = 3;
    $this->config[‘preview’] = false;
    }

    /**
    * Popup Elements
    *
    * If this function is defined in a child class the element automatically gets an edit button, that, when pressed
    * opens a modal window that allows to edit the element properties
    *
    * @since 4.1.3
    * @return void
    */
    function popup_elements()
    {
    $this->elements = array(

    array(
    “type” => “tab_container”,
    ‘nodescription’ => true
    ),

    array(
    “type” => “tab”,
    “name” => __( “Playlist” , ‘avia_framework’ ),
    ‘nodescription’ => true
    ),

    array(
    “name” => __( “Autoplay”, ‘avia_framework’ ),
    “desc” => __( “Choose if the player starts on pageload or has to be started manually”, ‘avia_framework’ ),
    “id” => “autoplay”,
    “type” => “select”,
    “std” => ”,
    “subtype” => array(
    __( ‘Start manually’,’avia_framework’ ) => ‘manual’,
    __( ‘Start on pageload’,’avia_framework’ ) => ‘autoplay’
    )
    ),

    array(
    “name” => __( “Playlist Order”, ‘avia_framework’ ),
    “desc” => __( “Here you can select how to sort the playlist when rendering to the player on each pageload.”, ‘avia_framework’ ),
    “id” => “playorder”,
    “type” => “select”,
    “std” => ”,
    “subtype” => array(
    __( ‘Use order of playlist as selected’,’avia_framework’ ) => ‘normal’,
    __( ‘Shuffle the playlist randomly’,’avia_framework’ ) => ‘shuffle’,
    /*__( ‘Reverse the playlist’,’avia_framework’ ) => ‘reverse’*/
    )
    ),

    array(
    “type” => “modal_group”,
    “id” => “content”,
    ‘container_class’ =>”avia-element-fullwidth avia-multi-img”,
    “modal_title” => __(“Edit Form Element”, ‘avia_framework’ ),
    ‘modal_open’ => ‘no’,
    ‘trigger_button’ => ‘avia-builder-audio-edit’,
    “add_label” => __(“Add single audio”, ‘avia_framework’ ),
    ‘disable_manual’ => ‘yes’,
    “std” => array(),

    ‘creator’ => array(
    “name” => __( “Create and Edit Audio Playlist”, ‘avia_framework’ ),
    “desc” => __( “Here you can add new audio files to the playlist, remove files or reorder them.”, ‘avia_framework’ ),
    “id” => “id”,
    “type” => “audio_player”,
    ‘state’ => ‘avia_insert_multi_audio’,
    “title” => __( “Add/Edit Audio Files”, ‘avia_framework’ ),
    “button” => __( “Insert Audio Files”, ‘avia_framework’ ),
    “std” => “”
    ),

    ‘subelements’ => array(

    array(
    “type” => “tab_container”, ‘nodescription’ => true
    ),

    array(
    “type” => “tab”,
    “name” => __( “Content Audio” , ‘avia_framework’ ),
    ‘nodescription’ => true
    ),

    // Dummy element only to avoid notices
    array(
    “name” => __(“Which type of media is this?”,’avia_framework’ ),
    “id” => “audio_type”,
    “type” => “select”,
    “std” => “audio”,
    “subtype” => array(
    __( ‘Audio File’, ‘avia_framework’ ) => ‘audio’,
    __( ‘Video File’, ‘avia_framework’ ) => ‘video’,
    )
    ),

    array(
    “type” => “close_div”,
    ‘nodescription’ => true
    ),

    array(
    “type” => “close_div”,
    ‘nodescription’ => true
    ),

    ), // subelements

    ), // modal_group

    array(
    “name” => __(“For Developers: Section ID”, ‘avia_framework’ ),
    “desc” => __(“Apply a custom ID Attribute to the section, so you can apply a unique style via CSS. This option is also helpful if you want to use anchor links to scroll to a sections when a link is clicked”, ‘avia_framework’ ).”<br/><br/>”.
    __(“Use with caution and make sure to only use allowed characters. No special characters can be used.”, ‘avia_framework’ ),
    “id” => “id”,
    “type” => “input”,
    “std” => “”
    ),

    array(
    “type” => “close_div”,
    ‘nodescription’ => true
    ),

    array(
    “type” => “tab”,
    “name” => __( “Layout” , ‘avia_framework’ ),
    ‘nodescription’ => true
    ),

    array(
    “name” => __( “Player styling”, ‘avia_framework’ ),
    “desc” => __( “Here you can select the general appearance of the player”, ‘avia_framework’ ),
    “id” => “player_style”,
    “type” => “select”,
    “std” => ”,
    “subtype” => array(
    __( ‘Classic (boxed)’, ‘avia_framework’ ) => ‘classic’,
    __( ‘Minimal (borderless, no background)’, ‘avia_framework’ ) => ‘minimal’,
    )
    ),

    array(
    “name” => __( “Choose a Cover Image”, ‘avia_framework’ ),
    “desc” => __(“Either upload a new or choose an existing image from your media library”, ‘avia_framework’ ),
    “id” => “cover_id”,
    “fetch” => “id”,
    “type” => “image”,
    “title” => __(“Choose a Cover Image”, ‘avia_framework’ ),
    “button” => __(“Choose a Cover Image”, ‘avia_framework’ ),
    “std” => ”
    ),

    /*
    array(
    “name” => __( “Cover Image Location”, ‘avia_framework’ ),
    “desc” => __( “Here you can select where to show the cover for larger screens. On mobile devices the image will be centered above the player by default.”, ‘avia_framework’ ),
    “id” => “cover_location”,
    “type” => “select”,
    “std” => ‘top left’,
    “subtype” => array(
    __( ‘Hide the cover image’, ‘avia_framework’ ) => ‘hide’,
    __( ‘Show above player left aligned’, ‘avia_framework’ ) => ‘top left’,
    __( ‘Show above player centered’, ‘avia_framework’ ) => ‘top center’,
    __( ‘Show above player right aligned’, ‘avia_framework’ ) => ‘top right’,
    __( ‘Show left of player’, ‘avia_framework’ ) => ‘aside left’,
    __( ‘Show right of player’, ‘avia_framework’ ) => ‘aside right’
    )
    ),

    array(
    “name” => __( “Cover Image Size”, ‘avia_framework’ ),
    “desc” => __( “Choose image size for your cover.”, ‘avia_framework’ ),
    “id” => “cover_size”,
    “type” => “select”,
    “std” => “thumbnail”,
    “required” => array( ‘cover_location’, ‘not’, ‘hide’ ),
    “subtype” => AviaHelper::get_registered_image_sizes( array(), false, true )
    ),

    array(
    “name” => __( “Playlist styling”, ‘avia_framework’ ),
    “desc” => __( “Here you can select the styling of the playlist”, ‘avia_framework’ ),
    “id” => “playlist_style”,
    “type” => “select”,
    “std” => ‘light’,
    “subtype” => array(
    __( ‘Light’, ‘avia_framework’ ) => ‘light’,
    __( ‘Dark’, ‘avia_framework’ ) => ‘dark’
    )
    ),

    */

    array(
    “name” => __( “Tracklist”, ‘avia_framework’ ),
    “desc” => __( “Here you can select to show or hide the tracklist”, ‘avia_framework’ ),
    “id” => “tracklist”,
    “type” => “select”,
    “std” => ‘show’,
    “subtype” => array(
    __( ‘Show tracklist’, ‘avia_framework’ ) => ‘show’,
    __( ‘Hide tracklist’, ‘avia_framework’ ) => ‘hide’
    )
    ),

    array(
    “name” => __( “Tracknumbers”, ‘avia_framework’ ),
    “desc” => __( “Here you can select to show or hide the tracknumbers next to entries in the playlist”, ‘avia_framework’ ),
    “id” => “tracknumbers”,
    “type” => “select”,
    “std” => ‘show’,
    “required” => array( ‘tracklist’, ‘equals’, ‘show’ ),
    “subtype” => array(
    __( ‘Show tracknumbers’, ‘avia_framework’ ) => ‘show’,
    __( ‘Hide tracknumbers’, ‘avia_framework’ ) => ‘hide’
    )
    ),

    array(
    “name” => __( “Artists Name”, ‘avia_framework’ ),
    “desc” => __( “Here you can select to show or hide the artists name in the playlist”, ‘avia_framework’ ),
    “id” => “artists”,
    “type” => “select”,
    “std” => ‘show’,
    “required” => array( ‘tracklist’, ‘equals’, ‘show’ ),
    “subtype” => array(
    __( ‘Show artists name’, ‘avia_framework’ ) => ‘show’,
    __( ‘Hide artists name’, ‘avia_framework’ ) => ‘hide’
    )
    ),

    array(
    “name” => __( “Media Icon/Album Cover”, ‘avia_framework’ ),
    “desc” => __( “Here you can select to show or hide the media icon in the playlist. This icon can be set in the media gallery for each element as the featured image. WP will use a default icon on upload, if none is set.”, ‘avia_framework’ ),
    “id” => “media_icon”,
    “type” => “select”,
    “std” => ‘show’,
    “subtype” => array(
    __( ‘Show media icon/album cover’, ‘avia_framework’ ) => ‘show’,
    __( ‘Hide’, ‘avia_framework’ ) => ‘hide’
    )
    ),

    array(
    “type” => “close_div”,
    ‘nodescription’ => true
    ),

    array(
    “type” => “tab”,
    “name” => __( “Colors” , ‘avia_framework’ ),
    ‘nodescription’ => true
    ),

    array(
    “name” => __( “Font Color”, ‘avia_framework’ ),
    “desc” => __( “Select a font color”, ‘avia_framework’ ),
    “id” => “font_color”,
    “type” => “select”,
    “std” => “”,
    “subtype” => array(
    __( “Default Color”, ‘avia_framework’ ) => ”,
    __( “Custom Color”, ‘avia_framework’ ) => ‘custom-font-color’
    )
    ),

    array(
    “name” => __( “Custom Font Color”, ‘avia_framework’ ),
    “desc” => __( “Select a custom font color for your Player here”, ‘avia_framework’ ),
    “id” => “custom_font_color”,
    “type” => “colorpicker”,
    “std” => “”,
    “rgba” => true,
    “required” => array( ‘font_color’, ‘equals’, ‘custom-font-color’ )
    ),

    array(
    “name” => __( “Background Color”, ‘avia_framework’ ),
    “desc” => __( “Select a background color”, ‘avia_framework’ ),
    “id” => “background_color”,
    “type” => “select”,
    “std” => “”,
    “subtype” => array(
    __( “Default Color”, ‘avia_framework’ ) => ”,
    __( “Custom Color”, ‘avia_framework’ ) => ‘custom-background-color’
    )
    ),

    array(
    “name” => __( “Custom Background Color”, ‘avia_framework’ ),
    “desc” => __( “Select a custom background color for your Player here”, ‘avia_framework’ ),
    “id” => “custom_background_color”,
    “type” => “colorpicker”,
    “std” => “”,
    “rgba” => true,
    “required” => array( ‘background_color’, ‘equals’, ‘custom-background-color’ )
    ),

    array(
    “name” => __( “Border Color”, ‘avia_framework’ ),
    “desc” => __( “Select a border color”, ‘avia_framework’ ),
    “id” => “border_color”,
    “type” => “select”,
    “std” => “”,
    “subtype” => array(
    __( “Default Color”, ‘avia_framework’ ) => ”,
    __( “Custom Color”, ‘avia_framework’ ) => ‘custom-border-color’
    )
    ),

    array(
    “name” => __( “Custom Border Color”, ‘avia_framework’ ),
    “desc” => __( “Select a custom background color for your Player here”, ‘avia_framework’ ),
    “id” => “custom_border_color”,
    “type” => “colorpicker”,
    “rgba” => true,
    “std” => “”,
    “required” => array( ‘border_color’, ‘equals’, ‘custom-border-color’ )
    ),

    array(
    “type” => “close_div”,
    ‘nodescription’ => true
    ),

    array(
    “type” => “tab”,
    “name” => __(“Screen Options”,’avia_framework’ ),
    ‘nodescription’ => true
    ),

    array(
    “name” => __( “Element Visibility”,’avia_framework’ ),
    “desc” => __( “Set the visibility for this element, based on the device screensize.”, ‘avia_framework’ ),
    “type” => “heading”,
    “description_class” => “av-builder-note av-neutral”,
    ),

    array(
    “desc” => __( “Hide on large screens (wider than 990px – eg: Desktop)”, ‘avia_framework’ ),
    “id” => “av-desktop-hide”,
    “std” => “”,
    “container_class” => ‘av-multi-checkbox’,
    “type” => “checkbox”
    ),

    array(

    “desc” => __( “Hide on medium sized screens (between 768px and 989px – eg: Tablet Landscape)”, ‘avia_framework’ ),
    “id” => “av-medium-hide”,
    “std” => “”,
    “container_class” => ‘av-multi-checkbox’,
    “type” => “checkbox”
    ),

    array(
    “desc” => __( “Hide on small screens (between 480px and 767px – eg: Tablet Portrait)”, ‘avia_framework’ ),
    “id” => “av-small-hide”,
    “std” => “”,
    “container_class” => ‘av-multi-checkbox’,
    “type” => “checkbox”
    ),

    array(
    “desc” => __( “Hide on very small screens (smaller than 479px – eg: Smartphone Portrait)”, ‘avia_framework’ ),
    “id” => “av-mini-hide”,
    “std” => “”,
    “container_class” => ‘av-multi-checkbox’,
    “type” => “checkbox”
    ),

    array(
    “type” => “close_div”,
    ‘nodescription’ => true
    ),

    array(
    “type” => “close_div”,
    ‘nodescription’ => true
    ),

    );
    }

    /**
    * Editor Element – this function defines the visual appearance of an element on the AviaBuilder Canvas
    * Most common usage is to define some markup in the $params[‘innerHtml’] which is then inserted into the drag and drop container
    * Less often used: $params[‘data’] to add data attributes, $params[‘class’] to modify the className
    *
    *
    * @since 4.1.3
    * @param array $params this array holds the default values for $content and $args.
    * @return $params the return array usually holds an innerHtml key that holds item specific markup.
    */
    function editor_element($params)
    {

    $element = $this->get_popup_element_by_id( ‘autoplay’ );
    $playmodes = $element[‘subtype’];

    $update_template = ‘<span class=”av-player-{{autoplay}}”>’;

    foreach( $playmodes as $info => $playmode )
    {
    $update_template .= ‘<span class=”av-play-‘ . $playmode . ‘”>’ . $info . ‘</span>’;
    }

    $update_template .= ‘</span>’;

    $update = $this->update_template( ‘autoplay’, $update_template );

    $selected = empty( $params[‘args’][‘autoplay’] ) ? ‘manual’ : $params[‘args’][‘autoplay’];
    $template = str_replace(‘{{autoplay}}’, $selected, $update_template );

    $params[‘innerHtml’] = “config[‘icon’] . “‘ title='”.$this->config[‘name’] . “‘ />”;
    $params[‘innerHtml’].= “<div class=’av-player’>” . $this->config[‘name’] . ‘ – <span ‘ . $update . ‘”>’ . $template . “</span></div>”;
    return $params;
    }

    /**
    * Editor Sub Element – this function defines the visual appearance of an element that is displayed within a modal window and on click opens its own modal window
    * Works in the same way as Editor Element
    *
    * @since 4.1.3
    * @param array $params this array holds the default values for $content and $args.
    * @return array the return array usually holds an innerHtml key that holds item specific markup.
    */
    function editor_sub_element( $params )
    {

    $img_template = $this->update_template( “img_fakeArg”, “{{img_fakeArg}}” );
    $title = $this->update_template( “title_info”, “{{title_info}}” );
    $artist = $this->update_template( “artist”, “{{artist}}” );
    $album = $this->update_template( “album”, “{{album}}” );
    $description = $this->update_template( “description”, “{{description}}” );
    $filename = $this->update_template( “filename”, “{{filename}}” );
    $id = $this->update_template( “id”, “{{id}}” );
    $filelength = $this->update_template( “filelength”, “{{filelength}}” );

    $title_info = isset( $params[‘args’][‘title’] ) ? $params[‘args’][‘title’] : ”;
    $thumbnail = isset( $params[‘args’][‘icon’] ) ? ‘‘ : “”;
    $album_info = isset( $params[‘args’][‘album’] ) && ‘undefined’ != $params[‘args’][‘album’] ? $params[‘args’][‘album’] : ”;
    $desc_info = isset( $params[‘args’][‘description’] ) && ‘undefined’ != $params[‘args’][‘description’] ? $params[‘args’][‘description’] : ”;
    $file_info = isset( $params[‘args’][‘filename’] ) && ‘undefined’ != $params[‘args’][‘filename’] ? $params[‘args’][‘filename’] : ”;
    $id_info = isset( $params[‘args’][‘id’] ) && ‘undefined’ != $params[‘args’][‘id’] ? $params[‘args’][‘id’] : ‘0’;

    $main = ‘<span class=”avia-audiolist-title” ‘. $title . ‘>’;

    if( isset( $params[‘args’][‘title’] ) && ‘undefined’ != $params[‘args’][‘title’] )
    {
    $main .= ‘<span class=”avia-known-title”>’ . $params[‘args’][‘title’];
    }
    else
    {
    $main .= ‘<span class=”avia-unknown-title”>’ . __( ‘ Unknown ‘ , ‘avia_framework’ );
    }
    $main .= ‘</span></span>’;

    /**
    * Currently WP does not return artist when editing an existing playlist in popup playlist editor.
    *
    * This might change in future -> then uncomment the following lines to show the artist
    */
    // $main .= ‘<span class=”avia_audiolist-by”>’ . __( ‘ by ‘ , ‘avia_framework’ ) . ‘</span>’;
    //
    // if( isset( $params[‘args’][‘artist’] ) && ‘undefined’ != $params[‘args’][‘artist’] )
    // {
    // $main .= ‘<span class=”avia-audiolist-artist” ‘ . $artist . ‘>’ . $params[‘args’][‘artist’];
    // }
    // else
    // {
    // $main .= ‘<span class=”avia-audiolist-artist avia-unknown” ‘ . $artist . ‘>’ . __( ‘ unknown ‘ , ‘avia_framework’ );
    // }
    // $main .= ‘</span>’;

    if( isset( $params[‘args’][‘filelength’] ) )
    {
    $main .= ‘ (<span class=”avia-audiolist-length” ‘ . $filelength . ‘>’ . $params[‘args’][‘filelength’];
    }
    else
    {
    $main .= ‘ (<span class=”avia-audiolist-length avia-unknown” ‘ . $filelength . ‘>’ . __( ‘ ??? ‘ , ‘avia_framework’ );
    }
    $main .= ‘</span>)’;

    $params[‘innerHtml’] = ”;
    $params[‘innerHtml’] .= “<div class=’avia_title_container’>”;
    $params[‘innerHtml’] .= ” <div ” . $this->class_by_arguments( ‘audio_type’ ,$params[‘args’] ) . “>”;
    $params[‘innerHtml’] .= ” <span class=’avia_audiolist_image’ {$img_template} >{$thumbnail}</span>”;
    $params[‘innerHtml’] .= ” <div class=’avia_audiolist_content’>”;
    $params[‘innerHtml’] .= ” <h4 class=’avia_title_container_inner’>” . $main . “</h4>”;
    $params[‘innerHtml’] .= ” <p class=’avia_content_album’ {$album}>” . stripslashes( $album_info ) . “</p>”;
    $params[‘innerHtml’] .= ” <p class=’avia_content_description’ {$description}>” . stripslashes( $desc_info ) . “</p>”;
    $params[‘innerHtml’] .= ” <small class=’avia_audio_url’ {$filename}>” . stripslashes( $file_info ) . “</small>”;
    $params[‘innerHtml’] .= ” </div>”;
    $params[‘innerHtml’] .= ” <div class=’hidden-attachment-id’ style=’display: none;’ {$id}>” . $id_info . ‘</div>’;
    $params[‘innerHtml’] .= ” </div>”;
    $params[‘innerHtml’] .= “</div>”;

    return $params;
    }

    /**
    * Frontend Shortcode Handler
    *
    * @since 4.1.3
    * @param array $atts array of attributes
    * @param string $content text within enclosing form of shortcode element
    * @param string $shortcodename the shortcode found, when == callback name
    * @return string $output returns the modified html string
    */
    function shortcode_handler( $atts, $content = “”, $shortcodename = “”, $meta = “” )
    {
    extract( AviaHelper::av_mobile_sizes( $atts ) ); //return $av_font_classes, $av_title_font_classes and $av_display_classes

    $this->extra_style = “”;
    $this->atts = shortcode_atts( array(
    ‘handle’ => $shortcodename,
    ‘id’ => ”,
    ‘autoplay’ => ‘manual’,
    ‘playorder’ => ‘normal’,
    ‘player_style’ => ‘classic’,
    ‘cover_id’ => ”,
    ‘cover_size’ => ‘thumbnail’,
    ‘cover_location’ => ‘hide’,
    ‘playlist_style’ => ‘light’,
    ‘tracklist’ => ‘show’,
    ‘tracknumbers’ => ‘show’,
    ‘artists’ => ‘show’,
    ‘media_icon’ => ‘show’,
    ‘font_color’ => ”,
    ‘custom_font_color’ => ”,
    ‘background_color’ => ”,
    ‘custom_background_color’ =>”,
    ‘border_color’ => ”,
    ‘custom_border_color’ => ”,

    ‘content’ => ShortcodeHelper::shortcode2array( $content, 1 )

    ), $atts, $this->config[‘shortcode’] );

    //replace some values that are removed for simplicity with defaults. can be later changed if user request those features
    $this->atts[‘cover_location’] = “hide”;
    $this->atts[‘playlist_style’] = “light”;

    if( $this->atts[‘media_icon’] == “cover”)
    {
    $this->atts[‘media_icon’] = “show”;
    }

    /**
    * Replace empty default values so we can later use them to add classes
    */
    if( empty( $this->atts[‘id’] ) )
    {
    $this->atts[‘id’] = $this->config[‘shortcode’] . ‘-‘ . avia_sc_audio_player::$instance;
    }

    avia_sc_audio_player::$instance++;

    if( empty( $this->atts[‘player_style’] ) )
    {
    $this->atts[‘player_style’] = ‘classic’;
    }

    extract( $this->atts );

    /**
    * Return if no playlist defined
    */
    if( empty( $content ) )
    {
    return ”;
    }

    $ids = array();
    foreach( $content as $key => $audio )
    {
    $ids[] = $audio[‘attr’][‘id’];
    }

    if( ‘shuffle’ == $playorder )
    {
    shuffle( $ids );
    }
    else if( ‘reverse’ == $playorder )
    {
    $ids = array_reverse( $ids );
    }

    $args = array(
    ‘type’ => ‘audio’,
    ‘ids’ => $ids,
    ‘style’ => empty( $playlist_style ) ? ‘classic’ : $playlist_style,
    ‘tracklist’ => empty( $tracklist ) || ( ‘hide’ != $tracklist ) ? true : false,
    ‘tracknumbers’ => empty( $tracknumbers ) || ( ‘hide’ != $tracknumbers ) ? true : false,
    ‘images’ => empty( $media_icon) || ( ‘hide’ != $media_icon ) ? true : false,
    ‘artists’ => empty( $artists ) || ( ‘hide’ != $artists ) ? true : false
    );

    if( ( $media_icon == ‘show’ ) && ( is_numeric( $cover_id ) ) )
    {
    add_filter( ‘wp_get_attachment_image_src’, array( $this, ‘handler_wp_get_attachment_image_src’ ), 10, 4 );
    add_filter( ‘wp_mime_type_icon’, array( $this, ‘handler_wp_mime_type_icon’ ), 10, 3 );
    }

    $player = wp_playlist_shortcode( $args );

    if( ( $media_icon == ‘show’ ) && ( is_numeric( $cover_id ) ) )
    {
    remove_filter( ‘wp_get_attachment_image_src’, array( $this, ‘handler_wp_get_attachment_image_src’ ), 10 );
    remove_filter( ‘wp_mime_type_icon’, array( $this, ‘handler_wp_mime_type_icon’ ), 10 );
    }

    $output = ”;

    $outer_cls = array(
    ‘av-player’,
    ‘av-player-container’,
    $av_display_classes
    );

    if( 1 == avia_sc_audio_player::$instance )
    {
    $outer_cls[] = ‘first’;
    }

    $outer_styles = array();

    $outer_cls[] = ‘avia-playerstyle-‘ . $player_style;

    if( $autoplay == ‘autoplay’ )
    {
    $outer_cls[] = ‘avia-playlist-autoplay’;
    }

    if( ( $font_color == ‘custom-font-color’) && ( ! empty( $custom_font_color ) ) )
    {
    $outer_cls[] = ‘avia-playlist-‘ . $font_color;
    $outer_styles[] = ‘color:’ . $custom_font_color . ‘;’;
    }

    if( ( $background_color == ‘custom-background-color’) && ( ! empty( $custom_background_color ) ) )
    {
    $outer_cls[] = ‘avia-playlist-‘ . $background_color;
    $outer_styles[] = ‘background-color:’ . $custom_background_color . ‘;’;
    }

    if( ( $border_color == ‘custom-border-color’) && ( ! empty( $custom_border_color ) ) )
    {
    $outer_cls[] = ‘avia-playlist-‘ . $border_color;
    $outer_styles[] = ‘border-color:’ . $custom_border_color . ‘;’;

    //generate thumb width based on columns
    $this->extra_style .= “<style type=’text/css’>”;
    $this->extra_style .= “#top #wrap_all #{$id} .wp-playlist-item {border-color:{$custom_border_color};}”;
    $this->extra_style .= “</style>”;

    if(!empty($this->extra_style))
    {
    if(!empty($atts[‘ajax_request’]) || !empty($_POST[‘avia_request’]))
    {
    $output .= $this->extra_style;
    $this->extra_style = “”;
    }
    else
    {
    $this->non_ajax_style .= $this->extra_style;
    add_action(‘wp_footer’, array($this, ‘print_extra_style’));
    }
    }

    }

    $cover = ”;
    if( ( $cover_location != ‘hide’ ) && ( ! empty( $cover_id ) ) )
    {
    $outer_cls[] = ‘avia-playlist-show-cover’;
    $outer_cls[] = $cover_location;
    $cover = wp_get_attachment_link( $cover_id, $cover_size );
    }
    else
    {
    $outer_cls[] = ‘avia-playlist-hide-cover’;
    }

    if( ! empty( $outer_styles ) )
    {
    $outer_styles = ‘ style=”‘ . implode( ”, $outer_styles ) . ‘” ‘;
    }
    else
    {
    $outer_styles = ”;
    }

    $output .= ‘<div id=”‘ . $id . ‘” class=”‘ . implode( ‘ ‘, $outer_cls ) . ‘” ‘ . $outer_styles . ‘>’;

    if( ! empty( $cover ) )
    {
    $output .= ‘<div class=”av-player-cover-container”>’;
    $output .= ‘<div class=”av-player-cover”>’ . $cover . ‘</div>’;
    $output .= ‘</div>’;
    }

    $output .= ‘<div class=”av-player-player-container”>’;
    $output .= $player;
    $output .= ‘</div>’;

    $output .= ‘</div>’;

    return $output;
    }

    /**
    * If user uploads an image for tbe player this image will overwrite any preset featured image.
    * To speed up the code the filter should only be activated when images should be exchanged
    *
    * @since 4.1.3
    * @param array|false $image Either array with src, width & height, icon src, or false.
    * @param int $attachment_id Image attachment ID.
    * @param string|array $size Size of image. Image size or array of width and height values
    * (in that order). Default ‘thumbnail’.
    * @param bool $icon Whether the image should be treated as an icon. Default false.
    * @return array|false
    */
    public function handler_wp_get_attachment_image_src( $image, $attachment_id, $size, $icon )
    {
    static $recursive = 0;

    /**
    * To avoid duplicating code we call the original function. Avoid endless recursions.
    */
    if( $recursive > 0 )
    {
    return $image;
    }

    $new_id = $this->atts[‘cover_id’];

    if( empty( $new_id ) || ( ! is_numeric( $new_id ) ) || ( (int) $new_id == $attachment_id ) )
    {
    return $image;
    }

    $recursive++;

    $image = wp_get_attachment_image_src( $new_id, $size, $icon );

    $recursive–;

    return $image;
    }

    /**
    * If user uploads an image for tbe player this image will overwrite the default mime icon from WP if no featured image was assigned
    * to the media file.
    * To speed up the code the filter should only be activated when images should be exchanged
    *
    * @since 4.1.3
    * @param string $icon
    * @param string $mime
    * @param int $post_id
    * @return string
    */
    public function handler_wp_mime_type_icon( $icon, $mime, $post_id )
    {
    $new_id = $this->atts[‘cover_id’];

    if( empty( $new_id ) || ! is_numeric( $new_id ) )
    {
    return $icon;
    }

    $image = wp_get_attachment_image_src( $new_id, ‘thumbnail’, false );
    return $image[0];
    }

    function print_extra_style()
    {
    echo $this->non_ajax_style;
    }

    } // end class definition

    What do I have to do ?

    Many thanks

    • This topic was modified 8 years, 1 month ago by ctancrede.
    #880309

    Yes,

    I did that in order to apply the tweak for adding an image next to the logo.

    Now I copied the new helper-main-menu.php file under enfold-child/includes/ and added:
    echo “<div class=’header-custom-image’></div>”;
    right after
    $output .= avia_logo(AVIA_BASE_URL.’images/layout/logo.png’, $addition, ‘span’, true);

    and applied the following css:

    .header-custom-image {
    position: absolute;
    right: 0;
    width: 166px;
    height: 123px;
    background: url(http://aglantzia.org.cy/wp-content/uploads/tree.png);
    background-repeat: no-repeat;
    }

    /* Mobile */
    @media screen and (max-width: 487px) {
    .header-custom-image {
    display: block;
    width: 100px;
    height: 50px;
    background: none;
    }
    }

    /* Tablets */
    @media screen and (max-width: 767px) {
    .header-custom-image {
    display: block;
    width: 100px;
    height: 50px;
    background: none;
    }
    }

    But the image is shown at the right edge of the browser. It is also not shown at all in responsive mode.

    #875933

    Hi,

    We modified the code in the functions.php file.

    
    add_action( 'ava_after_main_container', 'ava_after_main_container_mod' );
    function ava_after_main_container_mod() {
    	if( is_post_type_archive( 'tribe_events' ) ) {
        echo '<div id="av_section_1" class="avia-section avia-section-events main_color avia-section-large avia-no-border-styling avia-full-stretch av-section-color-overlay-active avia-bg-style-scroll avia-builder-el-0 el_before_av_upcoming_events avia-builder-el-first av-minimum-height av-minimum-height-50 container_wrap fullsize" style="background-repeat: no-repeat; background-image: url(https://intelsys.build/wp-content/uploads/2017/07/download-intelsys-build-whitepaper.jpeg); background-attachment: scroll; background-position: center center; " data-section-bg-repeat="stretch"><div class="av-section-color-overlay-wrap"><div class="av-section-color-overlay" style="opacity: 0.5; background-color: #000000; “></div><div class="container"><main role="main" itemprop="mainContentOfPage" class="template-page content av-content-full alpha units"><div class="post-entry post-entry-type-page post-entry-431"><div class="entry-content-wrapper clearfix">
    <div style="padding-bottom:10px;color:#fcca0a;font-size:79px;" class="av-special-heading av-special-heading-h1 custom-color-heading blockquote modern-quote modern-centered avia-builder-el-1 avia-builder-el-no-sibling av-inherit-size “><h1 class="av-special-heading-tag " itemprop="headline"><span style="font-weight:900">UPCOMING EVENTS</span></h1><div class="av-subheading av-subheading_below av_custom_color " style="font-size:17px;"><p><span style="color:#ffffff">We are looking forward to meeting you at our events and industry conferences.</span></p>
    </div><div class="special-heading-border"><div class="special-heading-inner-border" style="border-color:#fcca0a"></div></div></div>
    </div></div></main><!– close content main element –></div></div></div>';
      }
    }
    
    add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 9999, 1);
    function avf_header_setting_filter_mod($header) {
    	if( is_post_type_archive( 'tribe_events' ) ) {
        $header['header_transparency'] = 'header_transparency';
        $header['header_class'] .= ' av_header_transparency';
      }
    	return $header;
    }

    And then added the css code in the Quick CSS field.

    .avia-section-events {
        min-height: 50vh;
    }
    

    Please remove browser cache or hard refresh before checking the page.

    Best regards,
    Ismael

    This reply has been marked as private.
    kentkasica
    Participant

    https://kriesi.at/support/topic/enfold-image-sizes/
    I followed instructions in link above but I don’t see the image sizes displayed after I click: Functions PHP this is what is displayed. What am I doing incorrectly?
    Enfold Child: Theme Functions (functions.php)
    <?php
    function my_theme_enqueue_styles() {

    $parent_style = ‘parent-style’; // This is ‘twentyfifteen-style’ for the Twenty Fifteen theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );
    wp_enqueue_style( ‘child-style’,
    get_stylesheet_directory_uri() . ‘/style.css’,
    array( $parent_style ),
    wp_get_theme()->get(‘Version’)
    );
    }
    add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );

    //set builder mode to debug
    // add_action(‘avia_builder_mode’, “builder_set_debug”);
    function builder_set_debug()
    {
    return “debug”;
    }

    // workaround for LayerSlider background not loading
    add_filter( ‘category_description’, ‘do_shortcode’ );

    add_action( ‘wp_head’, ‘load_LayerSlider_fix’ );
    function load_LayerSlider_fix() {
    ?>
    <script type=”text/javascript”>
    jQuery( window ).load(function(){
    jQuery(window).trigger(‘resize’);
    });
    </script>
    <?php
    }

    //Enable Custom CSS
    add_theme_support(‘avia_template_builder_custom_css’);

    add_action( ‘woocommerce_after_shop_loop_item_title’, ‘my_add_short_description’ );
    function my_add_short_description() {
    global $product;
    $temp = $product->get_attribute( ‘Temperature’ );
    if ($temp != ”)
    {
    echo “<div style=’font-size:0.7em;’>”.” “.$temp.”</div>”;
    }
    }

    function get_woo_reviews(){
    $count = 0;
    $html_r = “”;
    $title=””;
    $args = array(
    ‘post_type’ => ‘product’
    );
    $comments_query = new WP_Comment_Query;
    $comments = $comments_query->query( $args );
    foreach($comments as $comment) :
    $title = ‘comment_post_ID ).'”>’.get_the_title( $comment->comment_post_ID ).’‘;
    $html_r = $html_r. “<div style=’color:#00c0ce;’>” .$title.”</div>”;
    $html_r = $html_r. “<div>” .$comment->comment_content.”</div>”;
    $html_r = $html_r.”Posted By”.$comment->comment_author.” On “.$comment->comment_date. “<br />”;
    $html_r = $html_r.”<br />”;
    endforeach;

    return $html_r;
    }
    add_shortcode(‘woo_reviews’, ‘get_woo_reviews’);

    /* Display USD for Product PRices on Shop/Product/Cart */
    function sv_change_product_price_display( $price ) {
    $price .= ‘ USD’;
    return $price;
    }
    add_filter( ‘woocommerce_get_price_html’, ‘sv_change_product_price_display’ );
    add_filter( ‘woocommerce_cart_item_price’, ‘sv_change_product_price_display’ );

    /*
    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;
    }
    }

    #870022

    Hi,
    I logged in to make the changes for you but your Appearance > Editor is not showing, are you using a security plugin to block some features?
    Anyways, first you will need to enable the custom css option:
    Go to your Appearance > Editor > functions.php and look for this at the end of the file:

    // add_theme_support('avia_template_builder_custom_css')

    remove the // and save.
    Then go to your page and edit the column, you will see a new option box at the bottom “Custom Css Class”
    add this to it:

    fixed_element

    2017-10-28_152811
    Then add the script above in the functions.php file and save
    Then go to Enfold Theme Options > General Styling > Quick css , which is at the bottom of the page
    and add the other code.
    2017-10-28_154033

    Best regards,
    Mike

    #869471

    In reply to: Parallax Scrolling

    Hey jng,

    Thank you for using Enfold.

    Yes, it’s possible to define a different image on mobile view. Please apply a unique css class attribute to the slider, use “custom-slider” for example and then use the following css code.

    .custom-slider .avia-slideshow > ul > li:nth-child(1) {
         background-image: url(IMAGE FOR MOBILE VIEW) !important;
    }

    The css code above is going to change the image of the first slide.

    // http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Best regards,
    Ismael

    #867170

    what do you think about that:

    Using the Enfold Button Element with light-transparent but with other styling – just css
    give the new class to the button (here it is glass green)
    put in the field of custom css : glass green
    for blue one : glass blue do not put in the classes with the dot (point) ! those are added by default
    etc if you like

    https://webers-testseite.de/buttons/

    /* to get rid of enfold styling - use light-transparent  */
    #top .avia-button.avia-color-light {
        color: inherit !important;
        border: none !important;
        -moz-border-radius: 0;
        -webkit-border-radius: 0; 
        border-radius: 0; 
        box-shadow: none !important
    }
    
    #top .avia-button.avia-color-light:hover {
    opacity: 0.9 !important; 
    text-shadow: 1px 1px 2px  #333
    }
    
    /* font-size of the button and the icon */
    #top .avia-button.avia-color-light {
     font-size: 1.2rem 
    }
    .avia-button.avia-color-light .avia_button_icon {
        font-size: 1.5rem;
        vertical-align: bottom
    }
    
    /* new button style - a bit glassy  */
    .glass {
    	position: relative;
    	display: inline-block;
    	border-radius: 4px;
    	box-shadow: 1px 1px 4px  #666;
    	/* goes to style the text  */
    	text-decoration: none;
    	text-shadow: 1px 1px 2px  #333;
    }
    .glass:before{
    	content: '';
    	position: absolute;
    	top: 2px;
    	left: 2px;
    	width: calc(100% - 4px);
    	height: 50%;
    }
    
    .glass:before{
    	background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2))
    }
    
    /* the green one  */
    .green {
    	background-color: green; /*for compatibility with older browsers*/
    	background-image: linear-gradient(green,lightgreen);
    	color: #fff
    }
    .green:hover { background: linear-gradient(#073,#0fa) }
    
    /* the blue one  */
    .blue {
    	background-color: blue; /*for compatibility with older browsers*/
    	background-image: linear-gradient(blue,lightblue);
    	color: #fff
    }
    .blue:hover { background: linear-gradient(#047,#0ef) }
    
    /* the red one  */
    .red {
    	background-color: red; /*for compatibility with older browsers*/
    	background-image: linear-gradient(#ea0404 ,#6d0019);
    	color: #fff
    }
    .red:hover { background: linear-gradient(#a00,#e00) }
    

    and now the rest is your turn – make some other classes with other gradients!

    Here you can make your gradients: Link

    #865167

    Hi Chris,

    I think you can use Custom Css Class for this, for example use remove-margin (on the images you want bottom margins removed) then remove this code I gave:

    .avia-image-container.avia-align-center {
        margin-bottom: 0 !important;
    }

    and replace it with:

    .remove-margin {
        margin: 0 !important;
    }

    Let us know if this helps. :)

    Best regards,
    Nikko

    #862279

    In reply to: Tags Links

    Hi,

    2.) Please use the following plugin to translate certain strings or text in the theme.

    // https://wordpress.org/plugins/say-what/

    3.) Add the following css code to apply a minimum height to the slider images. Please note that this may distort the smaller images a bit.

    .avia-slideshow li img {
        height: 494px;
    }

    You can turn on the custom css class field so that you can apply the modification to a specific element.

    // http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Best regards,
    Ismael

    #859521

    https://webers-testseite.de/weber/

    click the images to enlarge
    first of all if you do not need the shrinking option it is not so complicated as it seems
    Insert as usual a logo to the enfold options.

    you have to go to dashboard – appearance – menus

    insert a home link. On top right of the dashboard window – there is a slide out option called “Screen Options” Press it.
    Here you have some settings. Please mark the css classes.

    If you click on those littel arrows besides the menupoints you can insert different things now:

    On Navigation label you can insert the image link now something like:
    <img src="https://url.com/logo-top.png" alt="Logo" />
    On css classes : logoimg
    You only are in the midpoint if you have odd number of menupoints.
    We now have to get rid of the logo container
    Quick css:

    .logo, .logo a { display: none }
    .logoimg img { width: auto ; max-height: 172px }
    .container.av-logo-container { position: absolute }
    .logoimg .avia-menu-fx { display: none }
    #av-burger-menu-ul li:nth-child(4) { display: none }

    the last rule is to have not the menu-point on burger menu
    you have to count what menu-point is your logo (here it is on 4th position of the menu)

    and to have the normal logo on responsive case:

    @media only screen and (max-width: 768px){
    .container.av-logo-container { position: relative }
    .logo, .logo a { display: block }
    }

    ___________________
    with shrink option :

    we have to use the function avia_header_size() of avia.js
    the code to see is on pastebin: look
    download it as js file: download

    you see on line 61 (original it is 1551 on avia.js) of my code that i get rid of the not mobile option.
    i set on line 47 : navlogo = $('.logoimg img'), and
    on line 92 i added this code: navlogo.css({'maxHeight': 1.72*newH + 'px'});

    these values you can play with. I have on my testinstallation a 100px custom height of the header
    my logo is 172px hight – so my factor here is 1.72

    upload that menu_logo.js file to your child-theme js-folder (create a subfolder in childtheme called : js
    loading the script above in enfold open your functions.php via dashboard – appearance – editor and insert:

    function include_menulogo() {
       wp_enqueue_script( 'avia-main-child', get_stylesheet_directory_uri().'/js/menu_logo.js', array('jquery', 'avia-default'), 2, true );
    }
    add_action( 'wp_enqueue_scripts', 'include_menulogo', 100 );

    now the “logo” of your menu shrinks on scrolling.

    • This reply was modified 8 years, 3 months ago by Guenni007.
Viewing 30 results - 301 through 330 (of 612 total)