Viewing 30 results - 301 through 330 (of 615 total)
  • Author
    Search Results
  • #946291

    further to posting I have been able get rid of the php errors

    now it’s just a layout issue with this page
    http://gccre.com.au/commercial/large-office-training-facility/
    as explained above I want to add the footer image and the widget area to the right on this page
    I’ve dropped the footer in using

    <div id="full_slider_2" class="avia-fullwidth-slider main_color avia-shadow avia-builder-el-5 el_after_av_one_third avia-builder-el-last slider-not-first container_wrap fullsize"><div data-size="no scaling" data-lightbox_size="large" data-animation="slide" data-ids="16703" data-video_counter="0" data-autoplay="false" data-bg_slider="false" data-slide_height="" data-handle="av_slideshow_full" data-interval="5" data-class=" " data-css_id="" data-scroll_down="" data-control_layout="av-control-default" data-custom_markup="" data-perma_caption="" data-autoplay_stopper="" data-image_attachment="" data-min_height="0px" data-src="" data-position="top left" data-repeat="no-repeat" data-attach="scroll" data-stretch="" class="avia-slideshow avia-slideshow-2 av-control-default avia-slideshow-no scaling av_slideshow_full avia-slide-slider" itemprop="ImageObject" itemscope="itemscope" itemtype="https://schema.org/ImageObject"><ul class="avia-slideshow-inner" style="padding: 0px;"><li class="av-single-slide slide-1 active-slide" style="visibility: visible; opacity: 1; transition: none; transform: translateZ(0px);"><div data-rel="slideshow-2" class="avia-slide-wrap"><div class="caption_fullwidth av-slideshow-caption caption_bottom"><div class="container caption_container"><div class="slideshow_caption"><div class="slideshow_inner_caption"><div class="slideshow_align_caption"><a href="http://gccre.com.au/contact/" class="avia-slideshow-button avia-button avia-color-black " data-duration="800" data-easing="easeInOutQuad">contact us</a></div></div></div></div></div><img src="http://gccre.com.au/wp-content/uploads/2018/04/bottom-final.jpg" width="2000" height="377" title="bottom-final" alt="" itemprop="thumbnailUrl" style="left: 0px;"></div></li></ul></div></div>

    which I got off “inspect ” code in Chrome and it has the result I want but I’m pretty sure its not the correct way to do it – BUT at least i know how & where to drop the correct code

    so I was hoping you could tell me what is or where I could find the correct code to drop into the template file

    #944057

    Hi,
    Thank you :)
    FOOTER:
    – Rope separator with drop shadow, same as header and https://www.campbellhillsguestranch.com.
    For the shadow I added:

    #footer {
    box-shadow: 0px -1px 14px 4px rgba(0,0,0,.4);
    }

    – Can the social icons be in the footer, like https://www.campbellhillsguestranch.com?
    the social icons are built into the socket, below the footer, I enabled so you can see at:
    Enfold Theme Options > Footer > Default Footer Widgets & Socket Settings
    – Can I add a button into the footer?
    I added a button into your third footer widget area, HTML block. Notice the class is different than the top button so it will stay in the footer.

    <a class="footer-res-button" href="https://www.campbellhillsguestranch.com/site/guest-ranch-vacations/rates-and-availability.html">Reservations</a>

    the css:

    a.footer-res-button,a.footer-res-button:visited {
        display: inline-block;
        font: 400 16px/32px 'EB Garamond',"Times New Roman",Georgia,serif;
        text-decoration: none;
        text-align: center;
        color: #fff;
        padding: 0 15px;
        margin: 0 auto;
        min-width: 24px;
        letter-spacing: .05em;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border: 1px dashed #33270E;
        background-image: url(//static.campbellhillsguestranch.com/themes/CampBell17/images/layout/leatherBG-light.jpg);
        background-repeat: repeat-x;
        background-position: left center;
        transition: transform .3s,box-shadow .3s;
    }

    BUTTONS:
    – Can I customize the buttons to have a particular background image (not just colour)? They can all be the same, but Id like to use an image, like https://www.campbellhillsguestranch.com/.
    I found buttons on the activity page and on the contact page, so I used them as the models for your buttons in which this css will add the background image:

    a.avia-button {
        font: 400 16px/32px 'EB Garamond',"Times New Roman",Georgia,serif!important; 
        color: #fff!important; 
        border-style: none!important; 
        background-color: #e4d7bf !important;
        background-image: url(//static.campbellhillsguestranch.com/themes/CampBell17/images/layout/leatherBG-light.jpg)!important; 
        background-repeat: repeat-x;
        background-position: left center;
    }

    FORM:
    – Can I customize the size of the words and spacing between form elements?
    I only see a contact form on your site, so to change the font size please try:

    #top label {
        font-size: 0.92em!important; 
    }

    I didn’t apply, this is the size it is now, try changing to “1.2em” or more to suit.
    as for the form spacing I assume you mean to the right of “first name” & “email” so they are not touching:

    p#element_avia_1_1,p#element_avia_3_1 {
    padding-right: 10px;
    }

    I didn’t apply, please adjust to suit.

    OK, so lets see how these look, we still need to fix the “overlapping”.
    Hopefully, these will be ok and then we can tackle the “Body” :)

    Best regards,
    Mike

    #942269

    Hi,
    Let’s try something a little different, I copied the code of your contact form and changed the order so the button was first, then I added a class “inline” so any css we add wouldn’t effect any other form.
    Please add this code, your form, to a code block on your page:

    <form action="https://getprint.co.il/%d7%a6%d7%95%d7%a8-%d7%a7%d7%a9%d7%a8/" method="post" class="avia_ajax_form av-form-labels-hidden   avia-builder-el-13  el_after_av_one_full  el_before_av_image  av-custom-form-color av-dark-form " data-avia-form-id="1" data-avia-redirect=""><fieldset>
    	<p class="first_form form_element form_element_fourth modified_width inline"><input type="hidden" value="1" name="avia_generated_form1"><input type="submit" value="שלח" class="button" data-sending-label="Sending"></p>
    	<p class="form_element form_element_fourth inline" id="element_avia_1_1"> <input name="avia_1_1" class="text_input is_empty" type="text" id="avia_1_1" value="" placeholder="שם מלא*"></p>
    	<p class=" form_element form_element_fourth inline" id="element_avia_2_1"> <input name="avia_2_1" class="text_input is_phone" type="text" id="avia_2_1" value="" placeholder="טלפון לחזרה*"></p>
    	<p class=" form_element form_element_fourth av-last-visible-form-element inline" id="element_avia_3_1"> <input name="avia_3_1" class="text_input is_number" type="text" id="avia_3_1" value="" placeholder="דואר אלקטרוני*"></p>
    	<p class="hidden"><input type="text" name="avia_4_1" class="hidden " id="avia_4_1" value=""></p>
    </fieldset></form>
    

    then use this css:

    #top .avia_ajax_form .form_element_fourth.inline {
        width: 23.4%!important; 
        margin-right: 0 !important; 
    }

    Expected results:
    2018-04-15_135150

    Best regards,
    Mike

    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, 2 months 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, 3 months 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

Viewing 30 results - 301 through 330 (of 615 total)