Solved! Go to Solution.
With a bit of JS and CSS, anything is possible!
{{system.Time}} on a landing page writes the time, and {{system.dateTime}} writes the date and time.
Take the JavaScript and you can do whatever you want with it. Really, if you're already using JS, you might as well just do it all with JS instead of adding more languages in the mix. Just a getTime function would give you the time, and you can add your own if-then statements to change the contents on the landing page.
With that, you can write to JS variables and then do whatever you want with the functionality.
<script>var time = '{{system.Time}}';</script>
If you don't want/can't use JavaScript, there's not an easy out-of-the-box way to customize landing page content. I just tried a few workarounds with CSS and didn't see anything that would easily make time-based dynamic content without JavaScript. The closest I can find is if you want to do AM versus PM—you can create an HTML element with a class of {{system.Time}} and it will output AM or PM as a class:
<h1 class="{{system.Time}}">HELLO, WORLD!</h1>
Leads to:
<h1 class="04:11 PM (GMT -0800)">HELLO, WORLD!</h1>
So you could write CSS to either the AM or PM here:
<style>
h1.PM {color:red!important}
h1.AM {color:blue!important}
</style>
That would make the H1 text red in the PM (local time for the user) and blue in the AM (local time for the user).
But that's mostly a parlor trick. You're probably looking at JavaScript if you want to do anything more advanced than that.
Best,
Edward Unthank | Founder, Etumos
With a bit of JS and CSS, anything is possible!
{{system.Time}} on a landing page writes the time, and {{system.dateTime}} writes the date and time.
Take the JavaScript and you can do whatever you want with it. Really, if you're already using JS, you might as well just do it all with JS instead of adding more languages in the mix. Just a getTime function would give you the time, and you can add your own if-then statements to change the contents on the landing page.
With that, you can write to JS variables and then do whatever you want with the functionality.
<script>var time = '{{system.Time}}';</script>
If you don't want/can't use JavaScript, there's not an easy out-of-the-box way to customize landing page content. I just tried a few workarounds with CSS and didn't see anything that would easily make time-based dynamic content without JavaScript. The closest I can find is if you want to do AM versus PM—you can create an HTML element with a class of {{system.Time}} and it will output AM or PM as a class:
<h1 class="{{system.Time}}">HELLO, WORLD!</h1>
Leads to:
<h1 class="04:11 PM (GMT -0800)">HELLO, WORLD!</h1>
So you could write CSS to either the AM or PM here:
<style>
h1.PM {color:red!important}
h1.AM {color:blue!important}
</style>
That would make the H1 text red in the PM (local time for the user) and blue in the AM (local time for the user).
But that's mostly a parlor trick. You're probably looking at JavaScript if you want to do anything more advanced than that.
Best,
Edward Unthank | Founder, Etumos