5/3/17 - How to Style Date Elements

When making a Splash page, sometimes the default formatting for the date element on the theme is not ideal for your specific needs. FEAR NOT! This step by step guide will help get you style the element with ease.

  1. Find the date element on your page (or add one if you are in Designer Pro Mode).

  2. Click into the Date Element found within the Layout tree on the righthand side of the screen.

    unnamed.png


  3. When the Accordion tools open, click on the Change Date & Time button.

    unnamed-1.png

  4. This will open a modal where you can control the formatting of this element for any event length:

    a) Single Day Event
    b) Multi Day Event
    c) Multi Month Event

  5. The components of the start time will be represented with a gold line and the components of the end time will be represented with a blue line

    unnamed-2.png


  6. Click on any component to change its format (i.e. change a long day of the week, such as Monday, to an abbreviated day of the week: “Mon”)

    6.gif


  7. Add components to either your start time or your end time by clicking on the blue plus at the end of the component list.

    7.gif


  8. Drag the component to your desired order

    8.gif


  9. Add or change separators to add polish to your format

    9.gif

  10. Click Save at the bottom of the modal; you should see your new format reflected on your page.

    10.png


    Pro Tip:
    If you are designing your page to be a theme (a template to be reused over and over again) you should style the Date element for all event lengths listed, so as to be prepared for any potential uses in the future. 


unnamed.jpg

Lizzy Hindman-Harvey
Director of Content

 

Was this article helpful?
0 out of 1 found this helpful