LH CSS Dates and Times


LH CSS Dates and Times dynamically adds dynamic Date & Time classes to your HTML body element. This enables you to So you customise the design of your website based on the date or time.

It does it the only foolproof way for your visitors, ie via javascript.

Dynamic body Classes Include

  • Date
  • Hour
  • AM or PM
  • time of day e.g. night, morning, afternoon, or evening
  • Day of the Week
  • Day of the Month
  • Month
  • Day of the Year
  • Year

See the FAQ for a full explanation of the selectors


  1. Click “Add New” from the Plugins page in your WordPress Dashboard
  2. Enter “LH CSS Dates and Times” in the “Search Plugins” field
  3. Locate LH CSS Dates and Times and click “Add Now” followed by “Activate”


Can you explain what you could do with this plugin?

This plugin enables you to have a different design for you site depending on trhe time or date!

For example a red, green, and gold design on Christmas day, or a firework background on the fourth of July.

The only limit is your imagination!

How does LH CSS Dates and Times work?

LH CSS Dates and Times automatically adds dynamic Date & Time classes to your HTML body element via javascript.

Why would I want this?

So you can add CSS selectors based on those classes to override and modify your site design.

For example sunrise background in the morninging? Just add the class to your CSS stylesheet.

.cssdt-evening { background-image: src(‘/wp-content/uploads/2017/10/sunrise.jpg’); }

Why is is better to do this via Javascript?

Two reasons!

  1. Dynamically adding this via javascript will not break your caching plugins ever!
  2. Your visitors time and deate is often different to the websites. This plugin uses javascript so the classes are based on the visitors time.

Why can’t I see these classes when I view source?

Because they are added by javascript on the domcontentloaded event. This still means they can be used for styling purposes though.

What selectors does it have?

  1. Simple date ie the first of january 2018 would be ‘cssdt-01-01-2017’
  2. Hour ie Midnight would be ‘cssdt-hour-0’
  3. Time of day (this is divided into 4 blocks, night being –
    0-6, morning 6-12, afternnon 12-18, and evening being 18-24. So 3PM would be ‘cssdt-afternoon’
  4. AM or PM , so 3PM would be ‘cssdt-pm’
  5. Weekday eg ‘cssdt-tuesday’
  6. Monthday so the first of January 2018 would be ‘cssdt-monthday-01’
  7. Month so the first of January 2018 would be ‘cssdt-january’
  8. Day of year, so the first of January 2018 would be ‘cssdt-yearday-01-01’
  9. Year, so the first of January 2018 would be ‘cssdt-2017’


There are no reviews for this plugin.

Contributors & Developers

“LH CSS Dates and Times” is open source software. The following people have contributed to this plugin.



1.00 October 20, 2017
Initail release

1.02 October 22, 2017
Added icons to plugin file

1.03 October 24, 2017
Changed readme.txt

1.04 March 05, 2018
Moved scipt to footer

1.05 March 05, 2019
Added direct path check