Viewing 30 results - 661 through 690 (of 11,204 total)
  • Author
    Search Results
  • #1413057
    andreas_anselm
    Participant

    Hi Enfold Team,

    I’ve used the „accordion“ Element as I used it several times before, but it did not work. The toggle(s) stay(ing) closed.
    Firefox: No reaction, Safari: No reaction, Chrome: Jump to „nirvana“ ;-P

    gventi.andreasanselm.de
    You’ll find the accordeon at the area „wir“ beyond both of the portraits named „Meine Vita“

    I’ve checked out if one of my plugins will cause that – they causes not.

    So please can you check the issue. That would be great.
    In the private conetnt you’ll find the Login Data, and also the passowrd for the password protection

    Another question:
    Is there a way to set the height of the fold/unfold option in a text elemt to zero.
    So that only the Button could be used to show the content?
    (this question has leaded to solve the requirement with the accordion)

    #1412697

    Yes that is a quick and dirty way:

    A way to have there a widget :

    
    /*** custom social bookmarks widget  ****/
    function social_bookmarks_register_widget() {
      register_widget( 'add_social_bookmarks' );
    }
    add_action( 'widgets_init', 'social_bookmarks_register_widget' );
    
    class add_social_bookmarks extends WP_Widget {
      public function __construct() {
        $widget_ops = array(
          'classname' => 'socialbookmarks-widget', 
          'description' => __('A widget that displays the social bookmarks', 'avia_framework') 
          );
        parent::__construct( 'add_social_bookmarks', THEMENAME.' Social Bookmarks', $widget_ops );
      }
    
      public function widget( $args, $instance ) {
        $title = apply_filters( 'widget_title', $instance['title'] );
        echo $args['before_widget'];
        //if title is present
        if ( ! empty( $title ) )
        echo $args['before_title'] . $title . $args['after_title'];
        //output
        echo $before_widget;
        $social_args = array('outside'=>'ul', 'inside'=>'li', 'append' => '');
        echo avia_social_media_icons($social_args, false);
        echo $after_widget;
      }
    
      public function form( $instance ) {
        if ( isset( $instance[ 'title' ] ) )
        $title = $instance[ 'title' ];
        else
        $title = __( 'Social Bookmarks', 'avia_framework' );
        ?>
        <p>
        <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
        <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
        </p>
        <?php
      }
    
      public function update( $new_instance, $old_instance ) {
        $instance = array();
        $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
        return $instance;
      }
    }

    and for quick css:

    #top .socialbookmarks-widget .social_bookmarks {
        float: left;
        margin: 15px 0 0 ;
        position: relative;
    }
    
    #top .socialbookmarks-widget .social_bookmarks li {
        float: left;
        clear: right !important;
    }

    but: these are only the social button you have set on enfold options dialaog.

    rixi
    Participant

    Hi,
    i really like the new parallax template and tried it out now. The only problem is, that always in the first column of the page buttons with links and the akkoredeon isn`t working.
    Any idea where that comes from?

    I am really happy with the enfold support, you are all great!!!!!

    Many greetings rixi

    #1412532
    MW-Design
    Participant

    Hi folks,

    at first: thanks for the awesome theme. I am using it for different projects and I like it so much.

    My problem: I try to paste a script from immowelt.de into my enfold website that shows a list of real estate property and loads this information directly from immowelt.
    In Gemany we need to implement an embed privacy function bacause of the privacy policy, so that the script is only running after the visitor allowed it like for YT videos or twitter posts etc.
    The script works fine but when I try to put in behind an embed privacy button it doesn’t load the whole script. I also tried to put it in a normal text field and inside the code block element of enfold.

    So I tried two ways but both didn’t work.
    Method 1) is the plugin “Embed privacy”. If it’s installed and activated it doesn’t do anything. The script already starts directly and there is no “hiding” or button for allowance even if I create an individual embed for this
    Method 2) is a custom script from https://www.altmann.de/blog/code-snippet-shortcode-zustimmung-fuer-externe-inhalte/. It works with the allowance field and button but when you hit the button it loads only the link of immowelt and not the whole script with list, pictures etc. when I put it into the [ma-content-consent] tags.

    The immowelt script is:

    <div id='iwModule'><script language='javascript' type='text/javascript'> var guid = 'e6b542a2cdd64f518b77f7ade56d8d76'; </script><script language='javascript' type='text/javascript' src='https://homepagemodul.immowelt.de/_scripts/iwag/homepagemodul/homepagemodul.pack.js' ></script><div id='iwWidget' class='iwWidget'></div><noscript>Bitte aktivieren Sie Javascript.</noscript><div id='iwdigetinfo'>powered by <a id='iwdigetinfolink1' rel='nofollow' href='https://www.immowelt.de'>immowelt GmbH</a></div></div>

    Could you please help me to solve this problem? Thank you.

    Greetings
    Michael

    • This topic was modified 2 years, 8 months ago by MW-Design.
    #1412444

    Hi,
    Thank you for the link to your site, it looks like you didn’t add the custom class grid-column to the 2/3 column, I added it for you:
    Enfold_Support_2520.jpeg
    Since you added a special heading element I adjusted your css to add it to the grid and I made some other tweaks, this is the css I added:

    @media only screen and (min-width: 1366px) { 
    #top .grid-column {
    	display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        grid-column-gap: 0px;
        align-items: flex-start;
        margin-left: 15%;
    }
    .grid-column .av-special-heading,
    .grid-column .av_textblock_section,
    .grid-column .avia-button-wrap {
    	grid-column: 1;
    	display: grid;
    }
    .grid-column .av-special-heading {
    	grid-row: 1;
    }
    .grid-column .av_textblock_section {
    	grid-row: 2;
    }
    .grid-column .avia-button-wrap {
    	grid-row: 3;
    }
    .grid-column .avia-image-container {
    	grid-column: 2;
    	grid-row: 2;
    }
    }
    @media only screen and (max-width: 1365px) { 
    	#top .grid-column {
    		width: 100%;
    		margin: 0;
    	}
    }

    I changed the min width for this to 1366px due to your column padding and width because that is when the image has enough room in the column when it’s split in half, below that the css will makes the column width 100% with the elements stacked.

    This is my demo example for future readers since your site is not public
    Enfold_Support_2522.jpeg

    Best regards,
    Mike

    #1412347

    Topic: Content reveal

    in forum Enfold
    thijsvanhalewijn
    Participant

    Is it possible using Enfold theme to create an easy content reveal on a page?

    What I am specifically looking for, is a button that appears to the visitor of my page, after he has watched my salesvideo for 10 minutes or so.

    Or would I need a seperate plugin to make that happen?

    Thanks for helping me out.
    Thijs

    Hey,

    Please add the following code to the Quick CSS field in Enfold theme options > General Styling tab

    
    #top .avia-button .av-siteloader {
      display: none;
    }
    

    Regards,
    Yigit

    #1412193

    Mike,

    So i dug further and it’s not a matter of even using it in the content anywhere. Just by virtue of having the plugin (GravityView) installed is causing this error.

    “I don’t see that we can correct this plugin in the theme.” – It’s not a matter of fixing the plugin, it’s about fixing how the theme handles shortcodes from other developers. Enfold’s “balance shortcode” feature is what is throwing the errors. Somehow, however Enfold grabs the available shortcodes it’s trying to balance, it grabs that as one of the available shortcodes. It tries to create a regex from it and fails.

    In class-shortcode-parser.php in balance_shortcode() this is the $shortcodes variable it’s trying to process and dying on. With that you should be able to patch the theme so it handles anomalies like this properly.

    Array
    (
        [0] => wp_caption
        [1] => caption
        [2] => gallery
        [3] => playlist
        [4] => audio
        [5] => video
        [6] => embed
        [7] => expand
        [8] => colomat
        [9] => expandsub1
        [10] => expandsub2
        [11] => expandsub3
        [12] => expandsub4
        [13] => expandsub5
        [14] => expandsub6
        [15] => expandsub7
        [16] => expandsub8
        [17] => expandsub9
        [18] => expandsub10
        [19] => expandsub11
        [20] => expandsub12
        [21] => expandsub13
        [22] => expandsub14
        [23] => expandsub15
        [24] => expandsub16
        [25] => expandsub17
        [26] => expandsub18
        [27] => expandsub19
        [28] => expandsub20
        [29] => expandsub21
        [30] => expandsub22
        [31] => expandsub23
        [32] => expandsub24
        [33] => expandsub25
        [34] => expandsub26
        [35] => expandsub27
        [36] => expandsub28
        [37] => expandsub29
        [38] => gv_note_add
        [39] => gv_entry_link
        [40] => gv_edit_entry_link
        [41] => gv_delete_entry_link
        [42] => year
        [43] => av_privacy_allow_cookies
        [44] => av_privacy_accept_essential_cookies
        [45] => av_privacy_google_tracking
        [46] => av_privacy_google_webfonts
        [47] => av_privacy_google_maps
        [48] => av_privacy_video_embeds
        [49] => av_privacy_google_recaptcha
        [50] => av_privacy_custom_cookie
        [51] => av_privacy_accept_button
        [52] => av_privacy_accept_all_button
        [53] => av_privacy_do_not_accept_button
        [54] => av_privacy_modal_popup_button
        [55] => av_privacy_link
        [56] => av_privacy_cookie_info
        [57] => av_sb_instagram_feed
        [58] => av_leaflet_map
        [59] => av_productgrid
        [60] => av_productlist
        [61] => av_product_button
        [62] => av_product_info
        [63] => av_product_review
        [64] => av_product_tabs
        [65] => av_product_upsells
        [66] => avia_sc_product_meta
        [67] => av_product_price
        [68] => av_productslider
        [69] => gravityform
        [70] => gravityforms
        [71] => wpseo_breadcrumb
        [72] => gravityview
        [73] => gventry
        [74] => gvfield
        [75] => gvlogic
        [76] => gvlogic2
        [77] => gvlogic3
        [78] => gvlogicelse
        [79] => tribe:event-details
        [80] => boxzilla_link
        [81] => av_player
        [82] => av_playlist_element
        [83] => av_blog
        [84] => av_buttonrow
        [85] => av_buttonrow_item
        [86] => av_button
        [87] => av_button_big
        [88] => av_catalogue
        [89] => av_catalogue_item
        [90] => av_chart
        [91] => av_chart_dataset
        [92] => av_codeblock
        [93] => av_one_full
        [94] => av_one_half
        [95] => av_one_third
        [96] => av_two_third
        [97] => av_one_fourth
        [98] => av_three_fourth
        [99] => av_one_fifth
        [100] => av_two_fifth
        [101] => av_three_fifth
        [102] => av_four_fifth
        [103] => av_comments_list
        [104] => av_contact
        [105] => av_contact_field
        [106] => av_content_slider
        [107] => av_content_slide
        [108] => av_countdown
        [109] => av_events_countdown
        [110] => av_upcoming_events
        [111] => av_gallery
        [112] => av_horizontal_gallery
        [113] => av_google_map
        [114] => av_gmap_location
        [115] => av_layout_row
        [116] => av_cell_one_full
        [117] => av_cell_one_half
        [118] => av_cell_one_third
        [119] => av_cell_two_third
        [120] => av_cell_one_fourth
        [121] => av_cell_three_fourth
        [122] => av_cell_one_fifth
        [123] => av_cell_two_fifth
        [124] => av_cell_three_fifth
        [125] => av_cell_four_fifth
        [126] => av_heading
        [127] => av_headline_rotator
        [128] => av_rotator_item
        [129] => av_hr
        [130] => av_font_icon
        [131] => av_icon_circles
        [132] => av_icon_circle_item
        [133] => av_icon_box
        [134] => av_icongrid
        [135] => av_icongrid_item
        [136] => av_iconlist
        [137] => av_iconlist_item
        [138] => av_image
        [139] => av_image_diff
        [140] => av_image_hotspot
        [141] => av_image_spot
        [142] => av_partner
        [143] => av_partner_logo
        [144] => av_lottie
        [145] => av_magazine
        [146] => av_mailchimp
        [147] => av_mailchimp_field
        [148] => av_masonry_entries
        [149] => av_masonry_gallery
        [150] => av_submenu
        [151] => av_submenu_item
        [152] => av_notification
        [153] => av_animated_numbers
        [154] => av_portfolio
        [155] => av_post_metadata
        [156] => av_metadata_item
        [157] => av_postcontent
        [158] => av_postslider
        [159] => av_progress
        [160] => av_progress_bar
        [161] => av_promobox
        [162] => avia_sc_search
        [163] => av_section
        [164] => av_slideshow
        [165] => av_slide
        [166] => av_slideshow_accordion
        [167] => av_slide_accordion
        [168] => av_feature_image_slider
        [169] => av_fullscreen
        [170] => av_fullscreen_slide
        [171] => av_slideshow_full
        [172] => av_slide_full
        [173] => av_social_share
        [174] => av_tab_section
        [175] => av_tab_sub_section
        [176] => av_table
        [177] => av_row
        [178] => av_cell
        [179] => av_tab_container
        [180] => av_tab
        [181] => av_team_member
        [182] => av_team_icon
        [183] => av_testimonials
        [184] => av_testimonial_single
        [185] => av_textblock
        [186] => av_timeline
        [187] => av_timeline_item
        [188] => av_toggle_container
        [189] => av_toggle
        [190] => av_video
        [191] => av_sidebar
        [192] => av_dropcap1
        [193] => av_dropcap2
        [194] => gravityview_widget_search
        [195] => gravityview_widget_custom_content
        [196] => gravityview_widget_gravity_forms
        [197] => gv\widgets\page_size
        [198] => gravityview_widget_pagination_info
        [199] => gravityview_widget_page_links
    )
    #1412178

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

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

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

    Best regards,
    Mike

    #1412158

    Hi NCATIT,

    I see, just so we use the same thing, please use the following codes:
    – enfold\config-templatebuilder\avia-template-builder\php\class-popup-templates.php -> https://pastebin.com/zKJPDgQA
    – enfold\config-templatebuilder\avia-shortcode-helpers\class-avia-slideshow.php -> https://pastebin.com/v3VT5BnJ

    And finally, add this CSS code in Quick CSS:

    .avia-multi-slideshow-button.avia-slideshow-button-2 {
        margin-right: 20px;
    }

    Hope it helps.

    Note for other Enfold users: the changes is not recommended since both files are core, do it at your own risk.

    Best regards,
    Nikko

    #1412076

    Hi NCATIT,

    That’s nice, the file you need to edit is enfold\config-templatebuilder\avia-template-builder\php\class-popup-templates.php and find this function slideshow_button_links (line 759 in Enfold 5.6.3), just copy those arrays from Button 2 Label to Button 2 Link Target (line 844 – 895), add a comma after the closing parenthesis in line 895 and paste the whole button 2 arrays, then replace the labels with Button 3 and then replace the id as well.
    I hope it helps.

    Best regards,
    Nikko

    #1411977

    Hey SimonePols,
    To send people to a specific location on your page to would first add a unique ID for the section that you want to send them to. For example lets say it is the color section with the text heading “BEFORE JOINING OUR PROGRAM” in the backend, edit the color section and go to the advanced tab and go to the developer settings, then add a unique word to the ID option like “beforesection”
    Enfold_Support_2473.jpeg
    Then in your button, or custom menu item, or in a text link on your page you can use the link #beforesection to link to that section:
    Enfold_Support_2475.jpeg

    Best regards,
    Mike

    #1411953

    Hi,

    You can do the following:

    Please add the following code to the bottom of the Functions.php file of your child theme or as a new snippet in the Code Snippets plugin to enable advanced Custom Element Template options:

    add_theme_support( 'show_advanced_custom_element_options' );

    Go to Enfold theme options > Custom Element Templates, enable CETs, enable the Show Advanced Options, in the Hierarchical Custom Elements field, select the “Allow use of hierarchical custom elements” option, and in the Custom Elements For Subitems field, select the “Individually select subitem custom element templates” option.

    Then, edit one of your pages, go to the Custom Elements tab of ALB, click the Add New Custom Element (https://i.imgur.com/DSxiFWB.png), select the Accordion Slider element, adjust it as needed, and save. Then you can replace your Accordion Sliders with this element. If you need to edit it, you can click the Edit Custom Elements button and edit your Accordion Slider CET.

    If you have more than one element, you can create a separate page with those elements and display it using the Page Content element (https://i.imgur.com/kJkr6Ev.png).

    Best regards,
    Yigit

    #1411925

    Hi NCATIT,

    Unfortunately, there’s no easy way to add a third button on the Easy Slider, since you will need to modify core files in Enfold to be able to change it which might break parts of the site in the process.

    Best regards,
    Nikko

    #1411712

    Hi Mike,

    Morning.
    But I cannot find the avia-post-nav on my quick CSS:
    here is the code I have right now:
    .entry-content blockquote {
    margin: 1.5em 0em!important;
    font-size: 137%!important;
    color: rgb(58, 140, 174)!important;
    font-style: italic!important;
    background: #efefef!important;
    padding: 1em!important;
    text-align: left!important;
    quotes: “\201C””\201D””\2018″”\2019”;
    }

    .entry-content blockquote:before {
    color: #ccc;
    content: open-quote;
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em;
    }
    .entry-content blockquote p {
    display: inline;
    }

    .footer_color {
    border: none;
    }

    /* Generated by Font Squirrel (//www.fontsquirrel.com) on April 15, 2015 */

    @font-face {
    font-family: ‘verbextralight’;
    src: url(‘/webfonts/extralight-webfont.eot’);
    src: url(‘/webfonts/extralight-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘/webfonts/extralight-webfont.woff2’) format(‘woff2’),
    url(‘/webfonts/extralight-webfont.woff’) format(‘woff’),
    url(‘/webfonts/extralight-webfont.ttf’) format(‘truetype’),
    url(‘/webfonts/extralight-webfont.svg#verbextralight’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    }

    /*
    @font-face {
    font-family: ‘verbregular’;
    src: url(‘/webfonts/regular-webfont.eot’);
    src: url(‘/webfonts/regular-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘/webfonts/regular-webfont.woff2’) format(‘woff2’),
    url(‘/webfonts/regular-webfont.woff’) format(‘woff’),
    url(‘/webfonts/regular-webfont.ttf’) format(‘truetype’),
    url(‘/webfonts/regular-webfont.svg#verbregular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    }

    @font-face {
    font-family: ‘verbsemibold’;
    src: url(‘/webfonts/semibold-webfont.eot’);
    src: url(‘/webfonts/semibold-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘/webfonts/semibold-webfont.woff2’) format(‘woff2’),
    url(‘/webfonts/semibold-webfont.woff’) format(‘woff’),
    url(‘/webfonts/semibold-webfont.ttf’) format(‘truetype’),
    url(‘/webfonts/semibold-webfont.svg#verbsemibold’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    }

    @font-face {
    font-family: ‘verbcondlight’;
    src: url(‘/webfonts/yellow-design-studio-verbcondlight-webfont.eot’);
    src: url(‘/webfonts/yellow-design-studio-verbcondlight-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘/webfonts/yellow-design-studio-verbcondlight-webfont.woff’) format(‘woff’),
    url(‘/webfonts/yellow-design-studio-verbcondlight-webfont.ttf’) format(‘truetype’),
    url(‘/webfonts/yellow-design-studio-verbcondlight-webfont.svg#verbcondlight’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    }*/

    @font-face {
    font-family: ‘verbcondregular’;
    src: url(‘/webfonts/yellow-design-studio-verbcondregular-webfont.eot’);
    src: url(‘/webfonts/yellow-design-studio-verbcondregular-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘/webfonts/yellow-design-studio-verbcondregular-webfont.woff’) format(‘woff’),
    url(‘/webfonts/yellow-design-studio-verbcondregular-webfont.ttf’) format(‘truetype’),
    url(‘/webfonts/yellow-design-studio-verbcondregular-webfont.svg#verbcondregular’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    }

    @font-face {
    font-family: ‘verbcondsemibold’;
    src: url(‘/webfonts/yellow-design-studio-verbcondsemibold-webfont.eot’);
    src: url(‘/webfonts/yellow-design-studio-verbcondsemibold-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘/webfonts/yellow-design-studio-verbcondsemibold-webfont.woff’) format(‘woff’),
    url(‘/webfonts/yellow-design-studio-verbcondsemibold-webfont.ttf’) format(‘truetype’),
    url(‘/webfonts/yellow-design-studio-verbcondsemibold-webfont.svg#verbcondsemibold’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    }
    /*
    html, body, div, p { font-family: ‘verbregular’; }
    h1, h2, h3, h4, h5, h6, strong { font-family: ‘verbsemibold’; font-weight: normal;text-transform:none!important; }*/

    html, body, div, p { font-family: ‘verbcondregular’; }
    h1, h2, h3, h4, h5, h6, strong { font-family: ‘verbcondsemibold’; font-weight: normal;text-transform:none!important; }

    .button-transition-blue {
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    }

    .button-transition-blue:hover {
    background:#3a8cae!important;
    }

    .big-thin {
    font-size: 1.6em;
    line-height:1.2em;
    font-family:’verbextralight’;
    color:white;
    }

    .image-overlay {
    visibility: hidden;
    }

    #top #wrap_all .header_color .av-menu-button-colored > a .avia-menu-text {
    background: #f9a456!important;
    border: 0px solid white;
    }

    .big-thin span.av_font_icon.avia_animate_when_visible.av-icon-style-.avia-icon-pos-left.avia_start_animation.avia_start_delayed_animation {
    padding-bottom: 100px;
    }

    @media only screen and (max-width: 767px) {

    .big-thin span.av_font_icon.avia_animate_when_visible.av-icon-style-.avia-icon-pos-left.avia_start_animation.avia_start_delayed_animation {
    padding-bottom: 20px;
    }
    }

    .big-thin span.av-icon-char {
    line-height: 1em!important;
    margin-right: 10px;
    }

    #top .av_header_transparency #header_meta {
    border:none;
    }

    div#content {border-color:transparent!important;}

    #top .chatlio-widget textarea {
    line-height: unset!important;
    min-height: unset!important;
    }

    /*this changes the width of the tabs */

    .av-inner-tab-title {
    width: 200px !important;
    font-size: 13px !important;
    font-weight: medium !important;
    }

    /*this adjusts the tab arrow */

    .av-tab-arrow-container {
    width: 200px !important;
    }

    /*this CSS styles the scroll down arrow */
    #top .scroll-down-link {
    /*color: #f9a456 !important; */
    font-size: 150px;

    }

    /* This styles the animated icon list on the PS page */

    .card-container {
    cursor: pointer;
    height: 530px;
    perspective: 600;
    position: relative;
    width: 100%;
    margin-bottom: 25px ;
    }

    .card {
    height: 100%;
    position: absolute;
    border-radius: 6px;
    transform-style: preserve-3d;
    transition: all 1s ease-in-out;
    width: 100%;
    }

    .card:hover {
    transform: rotateY(180deg);
    }

    .card .side {
    backface-visibility: hidden;
    border-radius: 6px;
    height: 530px;
    position: absolute;
    overflow: hidden;
    width: 100%;
    }

    .card .back {
    padding: 20px;
    background: #eaeaed;
    color: #606a71;
    line-height: 20px;
    text-align: left;
    transform: rotateY(180deg);
    }

    /* the following css snippets adjust the icon list that is on the PS page */
    .horizontal-icon-list ul.avia-icon-list li {
    float: left;
    clear: none;
    width: 20%;
    }

    .horizontal-icon-list .iconlist-timeline {
    display: none;
    }

    div.description {
    position:absolute; /* absolute position (so we can position it where we want)*/
    bottom:0px; /* position will be on bottom */
    left:0px;
    width:100%;
    /* styling bellow */
    background-color: #eaeaed;
    color: #606a71;
    }

    p.description_content{
    padding:10px;
    margin:0px;
    font-size: 15px;
    }

    @font-face {
    font-family: ‘Font Awesome 5 Free’;
    font-style: normal;
    font-weight: 900;
    font-display: auto;
    src: url(“../webfonts/fa-solid-900.eot”);
    src: url(“../webfonts/fa-solid-900.eot?#iefix”) format(“embedded-opentype”), url(“../webfonts/fa-solid-900.woff2”) format(“woff2”), url(“../webfonts/fa-solid-900.woff”) format(“woff”), url(“../webfonts/fa-solid-900.ttf”) format(“truetype”), url(“../webfonts/fa-solid-900.svg#fontawesome”) format(“svg”); }

    .fa,
    .fas {
    font-family: ‘Font Awesome 5 Free’;
    font-weight: 900; }

    @media only screen and (max-width: 700px) {
    .cta_text_block p {
    line-height: 1.5em;
    }

    }

    @media only screen and (max-width: 700px) {
    .section_heading h2 {
    line-height: 1.5em;
    }

    }

    /* this targets the Learn More btn on the Tech services page */
    .sleeknote-btn {
    display: flex;
    /*justify-content: space-around;*/
    }

    /* this adjusts the padding on the Tech services page */
    .custom-btn-slknte {
    padding-right: 10px;
    }

    /* This removes the comments from the blog */
    .slide-content .slide-meta .slide-meta-comments a, .slide-content .slide-meta .slide-meta-del {
    display: none;
    }

    /* Centers the text on blog page */
    .hero-blog-entry-center {
    text-align: center;
    }

    .hero-blog-entry-center .read-more-link {
    display: block;
    text-align: center;
    margin: 30px auto 20px auto;
    clear: both;
    width: 150px;
    border: none;
    border-style: solid;
    border-width: 2px;
    border-color: #3a8cae;
    padding: 10px 0;
    border-radius: 5px;
    }

    .hero-blog-entry-center .read-more-link .more-link-arrow {
    display: none;
    }

    .new-blog .av-masonry-entry .av-inner-masonry-content {
    height: 158px;
    }

    .logo-bg {
    position: absolute;
    top: 400px;
    right: -400px;
    opacity: 0.05;
    z-index: -10;
    transform: rotate(-30deg);
    }

    /*—————————————-
    // CSS – Content Slider style – 2
    //————————————–*/

    /* Slider Background */
    #top .av-contentslider-style-2 {
    margin: 20px 50px;
    background: #ffffff;
    }

    /* Arrow position */
    #top .av-contentslider-style-2 .avia-slideshow-arrows.avia-slideshow-controls {
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    z-index: 999;
    }

    /* Right arrow*/
    .av-contentslider-style-2 .avia-slideshow-arrows.avia-slideshow-controls .next-slide {
    right: -35px !important;
    }
    /* Arrow icon */
    #top .av-contentslider-style-2 .avia-slideshow-arrows.avia-slideshow-controls a.next-slide:before{
    content:’\e875′;
    }

    /* Left arrow */
    .av-contentslider-style-2 .avia-slideshow-arrows.avia-slideshow-controls .prev-slide {
    left: -35px !important;
    }
    /* Arrow icon */
    #top .av-contentslider-style-2 .avia-slideshow-arrows.avia-slideshow-controls a.prev-slide:before{
    content:’\e874′;
    font-family: ‘entypo-fontello’;
    }

    /* Common arrow styles */
    #top .av-contentslider-style-2 .avia-slideshow-arrows.avia-slideshow-controls a {
    border-radius: 25px;
    color:#fff;
    font-weight: bolder;
    font-size: 24px;
    background: #f9a456;
    width: 30px;
    height: 30px;
    }

    #top .av-contentslider-style-2 .avia-slideshow-arrows.avia-slideshow-controls a:before {
    background: transparent;
    top:3px;
    }

    /* Arrow hover style */
    #top .av-contentslider-style-2 .avia-slideshow-arrows.avia-slideshow-controls a:hover {
    opacity: 1;
    background: #fab677;
    }

    .testimonial-cta {
    background-color: rgba(255, 255, 255, 0.9);
    }

    /* .testimonial-col {
    height: 400px;
    } */

    /* enfold social media icons fix */
    .social_bookmarks_twitter a::before, .av-social-link-twitter a::before {
    font-family: ‘entypo-fontello’;
    content: ‘’;
    }
    .social_bookmarks_facebook a::before, .av-social-link-facebook a::before {
    font-family: ‘entypo-fontello’;
    content: ‘’;
    }
    .social_bookmarks_linkedin a::before, .av-social-link-linkedin a::before {
    font-family: ‘entypo-fontello’;
    content: ‘’;
    }
    .social_bookmarks_pinterest a::before, .av-social-link-pinterest a::before {
    font-family: ‘entypo-fontello’;
    content: ‘’;
    }
    .social_bookmarks_tumblr a::before, .av-social-link-tumblr a::before {
    font-family: ‘entypo-fontello’;
    content: ‘’;
    }
    .social_bookmarks_reddit a::before, .av-social-link-reddit a::before {
    font-family: ‘entypo-fontello’;
    content: ‘’;
    }
    .social_bookmarks_vk a::before, .av-social-link-vk a::before {
    font-family: ‘entypo-fontello’;
    content: ‘’;
    }
    .social_bookmarks_gplus a::before, .av-social-link-gplus a::before {
    font-family: ‘entypo-fontello’;
    content: ‘’;
    }
    .social_bookmarks_mail a::before {
    font-family: ‘entypo-fontello’;
    content: ‘’;
    }
    .social_bookmarks_dribble a::before {
    font-family: ‘entypo-fontello’;
    content: ‘’;
    }
    .social_bookmarks_youtube a::before {
    font-family: ‘entypo-fontello’;
    content: ‘’;
    }
    .social_bookmarks_instagram a::before {
    font-family: ‘entypo-fontello’;
    content: ‘’;
    }
    .social_bookmarks_vimeo a::before {
    font-family: ‘entypo-fontello’;
    content: ‘’;
    }

    /* end enfold social media icons fix */

    .standards-solutions-container {
    display: flex;
    justify-content: space-evenly;
    }

    .standards-text-container {
    width: 500px;
    }

    .testimonial-container {
    display: flex;
    justify-content: space-evenly;
    }

    .img-container-test {

    }

    .text-container-test {
    width: 500px;
    margin-right: -60px;
    }

    .solutions-hover:hover {
    -ms-transform: translate(0, -5px);
    transform: translate(0, -5px);
    transition: 0.3s ease-in-out;
    cursor: pointer;
    }

    .hero-ul-list {
    width: 400px;
    margin-bottom: 40px;
    column-count: 2;
    padding: 0;
    }

    .hero-ul-list li {
    line-height:1.5em;
    float:left;
    list-style-type: square;
    }

    /* NEW EDIT */

    h1.headerh1 {
    position: absolute;
    top: 100px;
    z-index: 9999;
    text-align: center;

    }
    #product-feature .flex_column {
    width: 40%;
    }
    /* CSS Code by Agus */

    @media all and (min-width:1025px){
    .hero-content{
    min-height:863px !Important;
    }
    }

    /*.home-heading h1{
    font-family:’verbregular’ !important;
    font-size:38px !important;
    color:#fff !important;
    text-align:center;
    line-height:1.4em;
    letter-spacing:-0.5px !Important;
    margin-bottom:20px !important;
    }*/

    .home-heading h1{
    font-family:’verbcondregular’ !important;
    font-size:38px !important;
    color:#fff !important;
    text-align:center;
    line-height:1.4em;
    letter-spacing:-0.5px !Important;
    margin-bottom:20px !important;
    }

    .home-heading span.orange,
    .main-heading span.orange{color:#f69345 !important}

    .btn-product-tour span:before{
    background:#fff !Important;
    padding:9px;
    border-radius:30px;
    border:1px solid #fff !important;
    color:#f69345 !important;
    }

    .btn-product-tour:hover span:before{
    border:1px solid #f69345 !important;
    }

    .btn-product-tour .avia_iconbox_title{
    margin-right:5px;
    font-weight:600 !important;
    }

    .hero-image img{
    margin-top:-485px !important;
    margin-bottom:-150px;
    }

    .general-button span{
    font-family: ‘Poppins600’ !important;
    font-weight: 600 !important;
    }

    .products .entry-content-wrapper{
    max-width:1100px;
    margin:0 auto;
    }

    #products{
    background: radial-gradient(50% 50% at 50% 50%, #3E91BA 0%, #1D62A0 100%), #2F799E;
    }

    .main-heading h3{
    font-family: ‘verbsemibold’ !important;
    font-weight: 600 !important;
    }

    /*.main-heading span.special_amp{
    font-family:”verbregular” !Important;
    font-size:1em !important;
    font-style:normal !Important;
    }*/

    .main-heading span.special_amp{
    font-family:”verbcondregular” !Important;
    font-size:1em !important;
    font-style:normal !Important;
    }

    .features{
    height:400px !important;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(29px);
    border-radius: 10px;
    transition: all 0.2s ease-in-out;
    border: 1px solid #5597bf;
    }

    .features p{
    margin-right:80px !important;
    }

    .features:hover{
    background:#fff !important;
    }
    .features:hover h2{
    color:#f69345 !important;
    }

    .features:hover h4{
    color:#000 !important;
    }
    .features:hover p{
    color:#4d4d4d !important;
    }
    .products .flex_column_table{
    margin-top:70px !important;
    }

    .content-slider{
    overflow:visible !Important;
    }

    .content-slider .avia-content-slider-inner{
    max-width:1140px !Important;
    margin:0 auto;
    }

    .content-slider .slide-entry{
    border-radius: 10px;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #00000026;
    padding:12px;
    }

    .content-slider .slide-entry img{
    border-radius:10px !Important;
    }

    .content-slider .slide-entry h3{
    font-family:Roboto, sans-serif !important;
    color: #051728 !important;
    font-size: 22px !important;
    font-weight: 600;
    line-height: 33px;
    margin-top: 4px;
    max-height:98px;
    overflow:hidden;
    }

    .content-slider a.more-link{
    font-family: “Roboto”, Sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    padding: 0px 0px 0px 0px;
    border-radius: 0px;
    color: #458350;
    margin-top: 5px;
    }

    .content-slider .slide-content{
    padding:10px !important;
    }

    .content-slider .avia-content-slider-inner{
    overflow:visible !Important;
    }

    .content-slider .av_one_third,
    .success-story .av_one_third{
    margin-left: 3%;
    width: 31.333333333333332%;
    }

    .content-slider .av_one_third.first,
    .success-story .av_one_third.first{
    margin-left:0px !important;
    }

    .content-slider .avia-slideshow-arrows a.next-slide{ right: -40px !important}

    .content-slider .avia-slideshow-arrows a.prev-slide{ left: -40px !important}

    .content-slider .avia-slideshow-arrows a.next-slide,
    .content-slider .avia-slideshow-arrows a.prev-slide{
    border-radius: 50px !important;
    font-size: 16px !important;
    height: 41px !important;
    width: 41px !important;
    }

    .content-slider .avia-slideshow-arrows a:before{
    border-radius:50px !Important;
    line-height: 41px !important;
    background:#f69345 !Important;
    color:#fff !Important;
    border:1px solid #f69345;
    }

    .content-slider .avia-slideshow-arrows a:hover:before{
    background:#fff !important;
    color:#f69345 !important;
    }

    .content-slider .avia-slideshow-arrows a{
    top:50% !important;
    opacity:1 !important;
    }

    .success-story h3{
    display:none !Important;
    }

    /*.success-story h2{
    font-family:’verbregular’ !important;
    color:#051728 !important;
    line-height:1.4em !Important;
    margin-top:0px !Important;
    font-weight:600;
    -webkit-font-smoothing:antialiased;
    }*/
    .success-story h2{
    font-family:’verbcondregular’ !important;
    color:#051728 !important;
    line-height:1.4em !Important;
    margin-top:0px !Important;
    font-weight:600;
    -webkit-font-smoothing:antialiased;
    }

    .success-story p{
    font-size:16px !important;
    }

    .success-story a.read-more{
    color: #458350;
    font-family: “Vern font”, Sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    position:absolute;
    bottom:17px;
    }

    .success-story .slide-entry{
    min-height:463px;
    border-radius:10px;
    padding:15px;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #D9D9D9;
    transition: background 0s, border 0s, border-radius 0s, box-shadow 0s !Important;

    }

    .success-story .slide-entry-wrap{
    padding:0px 20px;
    margin:0 auto !Important;
    }

    .success-story .avia-slideshow-arrows {
    position: absolute !important;
    width: 100% !important;
    top: 50% !important;
    left: 0;
    height: 41px;
    }

    .success-story .avia-slideshow-arrows a{
    height:41px !Important;
    width:41px !important;
    line-height:41px !important
    }

    .success-story .avia-slideshow-arrows a:before{
    line-height:41px !important;
    font-size:16px !important
    }

    .success-story a:before{
    border:none !Important
    }

    .success-story a.prev-slide{
    left:-40px;
    }

    .success-story a.next-slide{
    right:-40px !important;
    }
    .success-story a.prev-slide, .success-story a.next-slide{
    min-width:41px !important;
    border-radius:50px;
    border:1px solid #f69345 !Important;
    background:#f69345 !important;
    color:#fff !important;
    }

    .success-story a.prev-slide:hover, .success-story a.next-slide:hover{
    background:#fff !important;
    color:#f69345 !important;
    opacity:1 !important;
    }

    .home-subscribe{
    background: rgb(255,255,255) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0) 75%, rgba(29,98,160,1) 75%) !important;
    }

    .home-footer{
    background: radial-gradient(50% 50% at 50% 50%, #3E91BA 0%, #1D62A0 100%), #2F799E;
    }

    .home-footer img{
    width:174px !Important;
    }
    .home-footer .avia-image-container{
    text-align:left !important;
    margin-bottom:20px;
    }

    .home-footer p{
    font-size:16px;
    color:#BED3E4;
    padding-right:100px;
    }

    .home-footer h3{
    font-size:20px !important;
    color:#ffffff !important;
    margin-bottom:20px !important;
    }

    /*.home-footer h5{
    font-family:”verbregular” !Important;
    font-size:16px !important;
    color:#ffffff !important;
    margin-bottom:20px !important;
    }

    .home-footer h6{
    font-family:”verbregular” !Important;
    font-size:14px !important;
    color:#ffffff !important;
    }*/

    .home-footer h5{
    font-family:”verbcondregular” !Important;
    font-size:16px !important;
    color:#ffffff !important;
    margin-bottom:20px !important;
    }

    .home-footer h6{
    font-family:”verbcondregular” !Important;
    font-size:14px !important;
    color:#ffffff !important;
    }

    .home-footer li{border-width:0px !Important}
    .home-footer li a{font-size:14px !important;color:#D8E9F1 !Important;padding:5px 0px !important;line-height:1.5em !Important}

    .home-footer li a:hover{background:transparent !Important;color:#D8E9F196 !important}

    .home-footer .av-share-box ul li a{
    width:38px !Important;
    height:38px !important;
    margin-right:12px;
    padding-top: 10px !important;
    background: #f69345 !important;
    }

    .home-footer .av-share-box ul li:hover a{
    margin-top:-10px !important;
    }

    .home-copyright{
    border-top:1px solid #fff !Important;
    padding-top:25px;
    }

    .home-footer .template-page{
    padding-bottom:20px !Important;
    }

    @media all and (max-width:1024px){
    .features p{margin-right:0px !important}
    .avia-section-huge .content{padding-top:60px !important;padding-bottom:60px !Important}
    .main-heading{margin-bottom:20px !Important;padding-bottom:0px !Important}
    .home-footer p{padding-right:50px !Important}
    .hero-content{min-height:720px !Important}
    }
    @media all and (max-width:767px){
    .home-heading h1{font-size:32px !important;line-height:1.2em !Important;}
    .hero-content{padding:40px 25px 25px 25px !important}
    .hero-image img{margin-top:-185px !important}
    .hero-content{min-height:auto !Important}
    .infographic{padding:0px !important}
    #domain-expertise .av_one_half,
    #professional-services .av_one_half,
    #innovative-software .av_one_half{padding:0px !Important}
    .products .av_one_half{padding:25px !important}
    .products .first{margin-bottom:85px !Important;overflow:hidden;}
    .home-subscribe {
    background: rgb(255,255,255) !important;
    background: linear-gradient(180deg, rgba(255,255,255,0) 85%, rgba(29,98,160,1) 85%) !important;
    }
    }

    Hi,
    That worked, thanks.
    So the space was created by the columns and other elements above have negative top margins for the overlay affect so by the time we get to your headline rotator there is a large gap:
    Enfold_Support_2449.jpeg
    so to correct I added a negative bottom margin to the last column row above the headline rotator, please note that this is for the desktop version only:
    Enfold_Support_2451.jpeg
    tablet and mobile seems fine as is, but you can adjust for these if you wish by choosing those buttons:
    Enfold_Support_2453.jpeg

    Best regards,
    Mike

    #1411583

    Hey Stefan,

    Assuming that this is a Pricing Table element and you want to add a different link to each inner table:
    Enfold_Support_2443.jpeg
    First add the custom class table-link to the table element developer settings:
    Enfold_Support_2441.jpeg
    Then add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

    function custom_script() { ?>
      <script>
    (function ($) { 
        $(".table-link .pricing-table-wrap:first-child").wrap(function() {
           var link = $('<a/>').css({'display':'table','width':'33%','float':'left'});
           link.attr('href', 'https://google.com');
           return link;
        });
        $(".table-link .pricing-table-wrap:nth-child(2)").wrap(function() {
           var link = $('<a/>').css({'display':'table','width':'33%','float':'left'});
           link.attr('href', 'https://duckduckgo.com');
           return link;
        });
        $(".table-link .pricing-table-wrap:nth-child(3)").wrap(function() {
           var link = $('<a/>').css({'display':'table','width':'33%','float':'left'});
           link.attr('href', 'https://bing.com');
           return link;
        });
    })(jQuery);
    </script>
      <?php
    }
    add_action('wp_footer', 'custom_script');

    note that each of the three inner tables have a different URL
    While this works, it has a drawback that the link changes the display of the table which changes the width, the script adds a hard width to the table to correct this issue but then it is not very response. Perhaps you don’t mind this, but I recommend just using the button that is in the table for your links.

    Best regards,
    Mike

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

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

    $.fn.magnificPopup = function(options) {
    	_checkInstance();
    
    	var jqEl = $(this);
    
    	// We call some API method of first param is a string
    	if (typeof options === "string" ) {
    
    		if(options === 'open') {
    			var items,
    				itemOpts = _isJQ ? jqEl.data('magnificPopup') : jqEl[0].magnificPopup,
    				index = parseInt(arguments[1], 10) || 0;
    
    			if(itemOpts.items) {
    				items = itemOpts.items[index];
    			} else {
    				items = jqEl;
    				if(itemOpts.delegate) {
    					items = items.find(itemOpts.delegate);
    				}
    				items = items.eq( index );
    			}
    			itemOpts.index = index;  // Added line per https://stackoverflow.com/questions/49131727/open-all-images-on-page-with-magnific-popup
    			mfp._openClick({mfpEl:items}, jqEl, itemOpts);
    		} else {
    			if(mfp.isOpen)
    				mfp[options].apply(mfp, Array.prototype.slice.call(arguments, 1));
    		}
    
    	} else {
    		// clone options obj
    		options = $.extend(true, {}, options);
    
    		/*
    		 * As Zepto doesn't support .data() method for objects
    		 * and it works only in normal browsers
    		 * we assign "options" object directly to the DOM element. FTW!
    		 */
    		if(_isJQ) {
    			jqEl.data('magnificPopup', options);
    		} else {
    			jqEl[0].magnificPopup = options;
    		}
    
    		mfp.addGroup(jqEl, options);
    
    	}
    	return jqEl;
    };

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

    (1) us Enfold users:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    And adding this to my child functions.php file:

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

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

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

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

    Thanks very much,
    Gary

    • This reply was modified 2 years, 8 months ago by garysch37.

    Hey philipbrook,

    Thank you for the inquiry.

    Adding the following css code should adjust the position of the wishlist button below the bundled package.

    #top .bundle_form.bundle_sells_form #wl-wrapper {
        margin-top: 0;
    }
    
    #top .bundle_form.bundle_sells_form + .<a href="https://refer.wordpress.com/r/84/woocommerce/" target="_blank" rel="nofollow">woocommerce</a>-variation-add-to-cart {
        margin-top: -90px;
    }

    Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings in order to ensure that the changes take effect.

    Best regards,
    Ismael

    rup
    Participant

    Dear Enfold Support Team,

    I hope this message finds you well. I am encountering an issue with the fullscreen button in the HTML5 video player of the Enfold theme on my website. I have compared the configuration with another website using the same theme and version, and it appears that there is a discrepancy.

    Here are the details of the issue:

    1. The fullscreen button does not appear in the video player controls, despite having the necessary settings and attributes enabled.
    2. Upon inspecting the original avia.js file provided by Enfold, I noticed that there should be a class named av-html5-fullscreen-btn on the container element. However, in the frontend of my website, I do not see this class applied. On the compared website, I noticed the presence of some other classes as well.
    3.While investigating the issue, I have reviewed my website’s setup and configuration. I haven’t identified any reasons why another plugin should be causing this issue. Therefore, I believe the problem may be specific to the Enfold theme or its integration on my website.

    Given these observations, it appears that there might be a bug or specific configuration issue related to my website’s implementation of the Enfold theme.

    Could you kindly investigate this issue and provide guidance on how to resolve it? I would greatly appreciate any insights or suggestions you can offer to help me enable the fullscreen button in the Enfold theme’s HTML5 video player.

    For your reference, here are some key details:

    Website URL: See private message
    Enfold Theme Version: 5.6.2
    WordPress Version: Version 6.2.2

    Please let me know if you require any further information or if there are any specific steps I should take to assist in the resolution process. I look forward to your prompt response and assistance in resolving this issue.

    Thank you for your attention and support.

    Kind regards

    • This topic was modified 2 years, 8 months ago by rup.
    #1411054

    Hi,

    • Please go to Enfold theme options > Layout Builder, enable the Show Advanced Options toggle, and enable the Debug Mode for admins (https://i.imgur.com/3FvoNJV.png).
    • On an empty page, add a Social Buttons element to your page, configure it, and copy its shortcode from the debug field (https://i.imgur.com/QbNvXT2.png)
    • Go to Appearance > Widgets, add a Custom HTML widget to your widget area, and paste the shortcode into it.

    Best regards,
    Yigit

    #1410601
    retom
    Participant

    Hello
    I have created our company webpage with your valued support.

    Today when I went into WordPress and Enfold with the intention to add some content, WordPress stated that there is a newer version of the website “Es gibt eine automatische Speicherung dieses Beitrags, die aktueller ist als die unten stehende Version.”
    I accepted this and since then – also after undoing the revision version – the site does not display correctly.

    Problems/ items not correctly displayed:
    – header: used to be gradient from dark grey to transparent at the bottom (and background image to the top). Now there is a black bar on top
    – Background image: used to be full page width. Now it is only in the width of the content block.
    – Fullwidth buttons: used to be same height and with background reaching from top line to bottom line. Now the buttons are not of same heigth and background does not reach down to buttom line.

    I would very much appreciate your help, as I need to fix this urgently. And I don’t know where the problem.

    Best Regards,
    Reto

    #1410499

    Hi Mike thanks for continuing to help me with this…

    I followed your instructions and which made it better. That brings the overlay down to the bottom of the logo – so that’s an improvement though I’d like the overlay to take up the full background as it does in the Aweber page that is not linked to Enfold. Is that possible?

    Also – the mobile view of the page i has the overlay cutting off at just above the form button.

    #1410422
    webagent007
    Participant

    Hey guys,

    i love enfold. using it since 2015 and i am still impressed by every new version.

    My problem:
    i have a button with the class “.trigger1” and a section (that is hidden by default) named “#hide1”.
    So whenever i´m hovering an element with that class, the hidden section fades in.
    therefore i searched the forums and used this code in my child-theme´s function.php.
    it works well on the test server but not on the new server even if the WordPress Versions and the enfold versions are exactly the same.

    here it´s working fine: http://www.silkeetex.de

    
    /* hide/show sections */
    function add_custom_cs(){
    ?>
    <style>
    .trigger1,
    .trigger2,
    .trigger3,
    .trigger4,
    .trigger5,
    .trigger6,
    .trigger7 {
        cursor: pointer; /* Change cursor to hand */
    }
    </style>
    <script>
    jQuery(window).load(function(){
        jQuery("#hide1, #hide2, #hide3, #hide4, #hide5, #hide6, #hide7").hide();
        
        jQuery(".trigger1").hover(function() {
            if (jQuery("#hide1").is(":visible")) {
                jQuery("#hide1").hide().removeClass("active");
            } else {
                jQuery(".active").hide().removeClass("active");
                jQuery("#hide1").show().addClass("active");
            }
        });
        
        jQuery(".trigger2").hover(function() {
            if (jQuery("#hide2").is(":visible")) {
                jQuery("#hide2").hide().removeClass("active");
            } else {
                jQuery(".active").hide().removeClass("active");
                jQuery("#hide2").show().addClass("active");
            }
        });
        
        jQuery(".trigger3").hover(function() {
            if (jQuery("#hide3").is(":visible")) {
                jQuery("#hide3").hide().removeClass("active");
            } else {
                jQuery(".active").hide().removeClass("active");
                jQuery("#hide3").show().addClass("active");
            }
        });
        
        jQuery(".trigger4").hover(function() {
            if (jQuery("#hide4").is(":visible")) {
                jQuery("#hide4").hide().removeClass("active");
            } else {
                jQuery(".active").hide().removeClass("active");
                jQuery("#hide4").show().addClass("active");
            }
        });
    	
    	jQuery(".trigger5").hover(function() {
            if (jQuery("#hide5").is(":visible")) {
                jQuery("#hide5").hide().removeClass("active");
            } else {
                jQuery(".active").hide().removeClass("active");
                jQuery("#hide5").show().addClass("active");
            }
        });
        
        jQuery(".trigger6").hover(function() {
            if (jQuery("#hide6").is(":visible")) {
                jQuery("#hide6").hide().removeClass("active");
            } else {
                jQuery(".active").hide().removeClass("active");
                jQuery("#hide6").show().addClass("active");
            }
        });
        
        jQuery(".trigger7").hover(function() {
            if (jQuery("#hide7").is(":visible")) {
                jQuery("#hide7").hide().removeClass("active");
            } else {
                jQuery(".active").hide().removeClass("active");
                jQuery("#hide7").show().addClass("active");
            }
        });
    });
    </script>
    <?php
    }
    add_action('wp_footer', 'add_custom_cs');
    
    /* avoid jumping up to header */
    function add_custom_href_remove(){
    ?>
    <script>
    jQuery(window).load(function(){
    jQuery('.trigger1,.trigger2,.trigger3,.trigger4,.trigger5,.trigger6,.trigger7').removeAttr('href');
    });
    </script>
    <?php
    }
    add_action('wp_footer', 'add_custom_href_remove');

    Why is that? Can anyone please help?

    • This topic was modified 2 years, 8 months ago by webagent007. Reason: typos
    #1410236

    Hey rixi,
    Try going to Enfold Theme Options ▸ Advanced Styling then from the dropdown choose Menu Links in overlay/slide out and click the button Edit Element then you will see the options:
    Enfold_Support_2320.jpeg

    Best regards,
    Mike

    #1410154

    Hey Stilecatalini,
    Thanks for your patience and the link to your site, I see your sticky close button at the bottom of your page, but it links to the homepage “Barche” section, so this is more like a “back” button than a “close” button.
    Nonetheless to add this button to your three pages venticinque, venticinque-panoramica, ventuno-sport-fisherman and have it hide on scroll down and show on scroll up, add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

    function custom_back_button() { ?>
      <script>
    (function($){
      var button = $('<div class="avia-button-wrap avia-button-right back-button"><a href="https://www.stilecatalini.it/#barche" class="avia-button avia-icon_select-yes-left-icon avia-size-large avia-position-center av-button-notext avia-color-light avia-font-color-white"><span class="avia_button_icon avia_button_icon_left" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span><span class="avia_iconbox_title"></span><span class="avia_button_background avia-button avia-color-theme-color"></span></a></div>');
      if ($("body").hasClass("page-id-738") || $("body").hasClass("page-id-5837") || $("body").hasClass("page-id-5667") == true) {
      $(button).prependTo('#wrap_all');
      } else {}
    })(jQuery);
      
    (function() {
        var doc = document.documentElement;
        var w = window;
        var prevScroll = w.scrollY || doc.scrollTop;
        var curScroll;
        var direction = 0;
        var prevDirection = 0;
        var backButton = document.querySelector('.back-button');
        var checkScroll = function() {
            curScroll = w.scrollY || doc.scrollTop;
            if (curScroll > prevScroll) {
                direction = 2;
            } else if (curScroll < prevScroll) {
                direction = 1;
            }
            if (direction !== prevDirection) {
                toggleButton(direction, curScroll);
            }
            prevScroll = curScroll;
        };
        var toggleButton = function(direction, curScroll) {
            if (direction === 2) {
                backButton.style.opacity=0;
                prevDirection = direction;
            } else if (direction === 1) {
                backButton.style.opacity=1;
                prevDirection = direction;
            }
        };
        window.addEventListener('scroll', checkScroll);
    }
    )();
    </script>
      <?php
    }
    add_action('wp_footer', 'custom_back_button');

    and this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    .back-button {
        position: fixed;
        top: 1%;
        right: 1%;
        z-index: 999;
        background-color: transparent;
    }

    Best regards,
    Mike

    #1410151

    Topic: Popup

    in forum Enfold
    Luisgasser
    Participant

    Hi, i use this solution for a popup window from another post:

    Hey axelfx07!

    Thank you for using Enfold.

    The Enfold uses MagnificPopup as default lightbox plugin. You can add this on functions.php:

    function popup_inline() { ?>
    <script type=”text/javascript”>
    jQuery(window).load(function(){
    jQuery(‘.open-popup-link’).magnificPopup({
    type:’inline’,
    midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don’t provide alternative source in href.
    });
    });
    </script>
    <?php }

    add_action(‘wp_head’, ‘popup_inline’);
    Then use this on a text block:

    <div id=”test-popup” class=”white-popup mfp-hide”>
    <p>PLACE CONTENT HERE</p>
    </div>

    Show inline popup
    Add this on Quick CSS or custom.css:

    .white-popup {
    position: relative;
    background: #FFF;
    padding: 20px;
    width: auto;
    max-width: 500px;
    margin: 20px auto;
    }
    Remove browser cache then reload the page a few times.

    Cheers!
    Ismael

    It works great, but on my mobile it scrolls automatically to the top on the page and the content of the popup doesn’t shown.

    Script is on “360° Tour” button on the bottom of the sidebar. Link ist in private content.

    May anybody have a solution to position it on the top of the mobile.

    Thank you for helping!

    #1410075
    biggsuccess
    Participant

    I closed an other topic on this, this but I’ve just noticed a couple other CSS issues I’m noticing on another landing page I’ve created using Aweber/ Enfold.

    The links are below. The font is smaller when linked to enfold and the darkened overlay cuts off at the opt-in button. Do you have some suggestions for these two issues?

    Thank you!

    • This topic was modified 2 years, 9 months ago by biggsuccess.
    #1409861

    In reply to: How to post a problem

    Hey Roman,

    You can do that by clicking this link , or this button on the support forum: https://imgur.com/a/AnoSPNb

    Best regards,
    Rikard

    #1409620

    Hi,
    If you add customizations to the parent theme function it will be lost on updates, but with a child theme they will not be lost.
    To add the Microsoft Team logo, I assume that this is not available as a icon so you can add it like we do for TikTok, try following these steps and adjust for your logo.
    If you are not using a child theme I recommend the WPcode plugin this plugin supports PHP code snippets, JavaScript code snippets, & CSS code snippets and allows you to export and import your custom code snippets to other sites that you may have or as a backup.

    Best regards,
    Mike

Viewing 30 results - 661 through 690 (of 11,204 total)