Tagged: day of the week, timeline element
-
AuthorPosts
-
December 6, 2023 at 4:04 pm #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?
December 7, 2023 at 8:24 am #1427413Hey 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,
IsmaelDecember 7, 2023 at 2:53 pm #1427463We 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?
December 7, 2023 at 2:55 pm #1427464Also, the first link doesn’t talk about overriding an element.
December 8, 2023 at 2:55 am #1427519Hi,
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,
IsmaelDecember 8, 2023 at 2:51 pm #1427569New issue: now the spacing is wrong for the timeline:
And if I collapse the screen a little bit it also has issues
I can create a temp account for support if needed.
December 10, 2023 at 7:12 pm #1427716Hi,
The default Vertical Alignment Title and Content is baseline, if you would like it centered please adjust this setting.
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,
MikeDecember 10, 2023 at 7:45 pm #1427720I 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 10 months, 3 weeks ago by KCMRfm.
December 10, 2023 at 8:46 pm #1427728Hi,
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.
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,
MikeDecember 26, 2023 at 3:29 am #1428868I 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.
Thanks for the help!December 26, 2023 at 11:22 am #1428875 -
AuthorPosts
- You must be logged in to reply to this topic.