Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1427359

    I’m looking at the timeline element in the advanced layout builder. We need the timeline to be different based on the day of the week. So we have a shortcode [isMonday] [_isMonday]. Any content in between those brackets is shown on Monday. So, how can we put the timeline element within the shortcode? Alternatively, what’s another way I can make the timeline appear only if it is a specific day of the week?

    #1427413

    Hey KCMRfm,

    Thank you for the inquiry.

    This is possible but you may need to modify the themes/enfold/config-templatebuilder/avia-shortcodes/timeline/timeline.php shortcode file directly or override it in your child theme. Please check the documentation below for more info on how to override a builder element.

    // https://kriesi.at/documentation/enfold/intro-to-layout-builder/#add-elements-to-alb

    You can add the custom shortcode around line 1363.

    $output .= $timeline_items_html;
    

    Another option is to extract the actual shortcode of the timeline element, place it in a Text or Code Block element and wrap it with your custom shortcode. In order to extract the shortcodes from the builder, you have to set the builder to debug mode first.

    // https://kriesi.at/documentation/enfold/intro-to-layout-builder/#debug-mode

    Best regards,
    Ismael

    #1427463

    We don’t have a child theme so the instructions say to do:

    if(isset($avia_config['use_child_theme_functions_only'])) return;

    I can’t find this file in the functions.php file. Is my search not working?

    #1427464

    Also, the first link doesn’t talk about overriding an element.

    #1427519

    Hi,

    Thank you for the inquiry.

    If you don’t have a child theme, you can’t follow the first suggestion above. If you prefer the second option, edit the functions.php file and add the code below the line mentioned above. This will enable the debug mode and allow you to extract the builder shortcodes from the shortcodes field.

    //set builder mode to debug
    add_action('avia_builder_mode', "builder_set_debug");
    function builder_set_debug()
    {
        return "debug";
    }

    Place it below this code around line 46.

    if( isset( $avia_config['use_child_theme_functions_only'] ) )
    {
    	return;
    }
    

    After that, edit one of the pages with the timeline element and extract the timeline shortcode from the shortcodes field. The shortcodes field should be located right below the Advanced Layout Builder. You can then copy and paste this shortcode into a Text or Code Block element.

    Best regards,
    Ismael

    #1427569

    New issue: now the spacing is wrong for the timeline:
    Spacing Issue
    And if I collapse the screen a little bit it also has issues
    Collpased screen

    I can create a temp account for support if needed.

    • This reply was modified 11 months, 3 weeks ago by KCMRfm.
    • This reply was modified 11 months, 3 weeks ago by KCMRfm.
    • This reply was modified 11 months, 3 weeks ago by KCMRfm.
    #1427716

    Hi,
    The default Vertical Alignment Title and Content is baseline, if you would like it centered please adjust this setting.
    Enfold_Support_4050.jpeg
    It looks like there is some left padding on your timeline element, I’m not seeing this on my demo site so perhaps the shortcode you wrapped it with has some styling, please link to your page so we can examine.

    Best regards,
    Mike

    #1427720

    I put the website URL in the private content section. I think there is padding on there I can’t find. Also, how can we make the text smaller?

    • This reply was modified 11 months, 3 weeks ago by KCMRfm.
    #1427728

    Hi,
    To change the font size, please use the element font size options, note that you can also set the size based on the device size by clicking the device icons and setting a size for each one if you wish.
    Enfold_Support_4060.jpeg
    It looks like you have the timeline in a 1/3 column and the next item in a 2/3 column while it has a lot of extra space to the right, perhaps if they were both in 1/2 columns it would give you more room. Then after you change the font sizes it should look better. the only padding and margin is from your site layout, it has a max-width of 1310px at Enfold Theme Options ▸ General Layout ▸ Dimensions ▸ Maximum Container width so you could change that setting or try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    .responsive #top.home #av_section_2>.container {
    	max-width: 100%;
    }

    to change the max width for just that one section
    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1428868

    I almost have it working. How can I get the text to not have so much space above it when next to the image? I want the text on both sides of the image to be in line with the image. Right now there’s a big space above the time and the description.
    Current Site
    Thanks for the help!

    #1428875

    Hi,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    h2.av-milestone-date {
        vertical-align: middle;
    }

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.