XF 2.1 How can CSS be affected by the user's current time?

[Feanor]

For example, if it's 9:00 PM in their selected time zone (under account preferences), some parts of the forum style get darker.

 

[djbaxter]

Probably nothing to do with CSS and everything to do with the device used to view your forum.

1. That can happen on a desktop or laptop running Windows 10 if Night Light Settings are enabled and configured to display warmer colors in the evening.
2. There is a similar setting for iPhones and iPads. No idea about whether Androids have this feature.

 

[Feanor]

Probably nothing to do with CSS and everything to do with the device used to view your forum.

1. That can happen on a desktop or laptop running Windows 10 if Night Light Settings are enabled and configured to display warmer colors in the evening.
2. There is a similar setting for iPhones and iPads. No idea about whether Androids have this feature.

I am asking about styles in XF and having them affected by the current time. Not a person’s device or monitor.

 

[jmurrayhead]

I am asking about styles in XF and having them affected by the current time. Not a person’s device or monitor.

It's possible they use the user's set timezone in their preferences to conditionally load different CSS.

 

[Feanor]

It's possible they use the user's set timezone in their preferences to conditionally load different CSS.

I'm actually looking for a way to add some sort of logic to the one style (not a whole separate XF style). For example, if the time is > 17 then show this color or image, else use another color/image.

 

[beerForo]

Why don't you add a dark mode theme and let users choose. It might seem "cool" to have it change at night, but people tend to not like decisions like that made for them.

 

[Max Taxable]

9:00 PM in their selected time zone (under account preferences), some parts of the forum style get darker.

This happens to me automatically, after about 9 beers.

 

[Feanor]

Why don't you add a dark mode theme and let users choose. It might seem "cool" to have it change at night, but people tend to not like decisions like that made for them.

Because that's not what I'm looking for. Not to sound rude, but I'm just trying to do something different with a particular theme. I didn't post a question about XF styles and CSS for information about making a monitor darker, suggestions to have a completely separate theme, or condescending statements about what users might like. I'd like to put an if statement somewhere in the templates that allows me to control part of the theme. This is possible with vBulletin, so I'm trying to find a similar method with XenForo.

 

[beerForo]

You don't sound rude. You are looking for something particular and that's it. I get it.

 

[Max Taxable]

Because that's not what I'm looking for. Not to sound rude, but I'm just trying to do something different with a particular theme. I didn't post a question about XF styles and CSS for information about making a monitor darker, suggestions to have a completely separate theme, or condescending statements about what users might like. I'd like to put an if statement somewhere in the templates that allows me to control part of the theme. This is possible with vBulletin, so I'm trying to find a similar method with XenForo.

@Russ is THE cat to ask.

 

[beerForo]

Not sure if this helps or not

https://codepen.io/jamesbarnett/pen/kdDBL

 

[Jeremy P]

time($xf.time, 'G') will spit out the hour (0-23) for the visitor. You could do something like:

<div class="{{ (time($xf.time, 'G') >= 21) ? 'dark-class' : '' }}">
    <!-- ... -->
</div>

...and then apply your styling with the .dark-class CSS class.

This would reset at midnight, but you can adapt it to also check if the time is before (less than) a certain hour as well. Keep in mind that guests have the default timezone.

 

[Feanor]

time($xf.time, 'G') will spit out the hour (0-23) for the visitor. You could do something like:

<div class="{{ (time($xf.time, 'G') >= 21) ? 'dark-class' : '' }}">
    <!-- ... -->
</div>

And then apply your styling with the .dark-class CSS class.

Keep in mind that guests have the default timezone.

Thanks, I'll start there and see what I can do. And thanks to everyone else who posted here even if I didn't go with your suggestions!

 

[Feanor]

Not sure if this helps or not

https://codepen.io/jamesbarnett/pen/kdDBL

I'm assuming if it's JS it would use their computer time instead of XF profile time, so something like @Jeremy P said with $xf.time is probably closer.

 

[Max Taxable]

That's right I forgot Jeremy. He's the dawg to ask.

 

[Masetrix]

time($xf.time, 'G') will spit out the hour (0-23) for the visitor. You could do something like:

<div class="{{ (time($xf.time, 'G') >= 21) ? 'dark-class' : '' }}">
    <!-- ... -->
</div>

...and then apply your styling with the .dark-class CSS class.

This would reset at midnight, but you can adapt it to also check if the time is before (less than) a certain hour as well. Keep in mind that guests have the default timezone.

Oh, so highly optimized code, I have to ask... @Jeremy P
I have to go into an If..then ... else ... check whether more than a day (or three days) has passed between the time a topic was created and the current time. What would this time query look like?
"If {{ (ThreadCreateTime+3Days) >= TimeNow }}"

<xf:if> {{ (time($xf.time, 'G') >= 21) ? 'dark-class' : '' }} <xf:else />

 

[Jeremy P]

Timestamps are stored in Unix time, so I think something like this should work:

<xf:if is="$xf.time > $thread.post_date + 86400 * 3">
    <!-- this will only be displayed after 3 days -->
</xf:if>

(86400 is the number of seconds in one day)

 

[Masetrix]

Timestamps are stored in Unix time, so I think something like this should work:

<xf:if is="$xf.time > $thread.post_date + 86400 * 3">
    <!-- this will only be displayed after 3 days -->
</xf:if>

(86400 is the number of seconds in one day)

Thank you very much!
That saves me a lot of time because I would first have to search for how $xf.time is defined, what the 'G' means exactly, that would take days alone. That you saved me from that

Thanks again...