CSS Date Time Pro automatically adds date and time-related CSS styles to your HTML body element. Now you can easily customize the look and feel of your website based on the month, day of the week, time of day, holidays and more. You can even add your own date and time-based events.
Want to change the background of your site in the morning? No problem!
body.morning {
background: rgb('244,200,146);
}
Need all your content to be upside-down on April Fools Day? Super easy!
body.april-fools-day {
transform: rotate(180deg);
}
With CSS Date Time Pro the only limit is your imagination!
Menu
Quick Start
- Download and install the plugin
- Update the Settings
- Add your custom CSS properties for the CSS Date Time classes
Menu
CSS Body Class Overview
CSS, or Cascading Style Sheets, is a powerful tool for controlling the visual styling of your website. By default, WordPress includes a number of CSS classes in the HTML <body> element such as "home", "page-#", "logged-in". These classes can be used to your pages based on page-specific parameters.
A simple example would be using the "logged-in" class to change the background color of your <header> element when a user is logged in to your site. In your CSS stylesheet you could add the following code:
body.logged-in header {
background-color: rgb(65,147,238);
}
Since the "logged-in" class is only included in the <body> when a user is logged in, this style would only be visible to logged in users.
Learn more about customizing WordPress with CSS.
Menu
Default CSS Classes
Full list of default CSS classes available within CSS Date Time & CSS Date Time Pro.
| CSS Class Name |
Description |
Date / Time Active |
| cssdt-#### |
Year 4-digit – cssdt-2017 |
Always Active |
| cssdt-leap-year |
Leap Year |
During Leap Year |
| cssdt-month |
Month name – cssdt-november |
Always Active |
| cssdt-month-## |
Month name and date – cssdt-may-4 |
Always Active |
| cssdt-day |
Day name – cssdt-friday |
Always Active |
| cssdt-hour-#### |
Hour in 24-hour format – cssdt-hour-0800 |
Always Active |
| cssdt-night |
Night |
00:00:00 - 05:59:59 |
| cssdt-morning |
Morning |
06:00:00 - 11:59:59 |
| cssdt-afternoon |
Afternoon |
12:00:00 - 17:59:59 |
| cssdt-evening |
Evening |
18:00:00 - 23:59:59 |
| cssdt-am |
Time of day – cssdt-pm |
Always Active |
| cssdt-new-years-day |
New Years Day |
01-01 |
| cssdt-mlk-day |
MLK Day |
Variable Monday 01-15 - 01-21 |
| cssdt-valentines-day |
Valentines Day |
02-14 |
| cssdt-washingtons-birthday |
Washingtons Birthday |
Variable Monday 02-15 - 2-21 |
| cssdt-st-patricks-day |
St Patricks Day |
03-17 |
| cssdt-april-fools-day |
April Fools Day |
04-01 |
| cssdt-mothers-day |
Mothers Day |
Variable Sunday 05-08 - 05-15 |
| cssdt-memorial-day |
Memorial Day |
Variable Monday 05-25 - 05-31 |
| cssdt-fathers-day |
Fathers Day |
Variable Sunday 06-15 - 06-21 |
| cssdt-labor-day |
Labor Day |
Variable Monday 09-01 - 09-07 |
| cssdt-columbus-day |
Columbus Day |
Variable Monday 10-08 - 10-14 |
| cssdt-halloween |
Halloween |
10-31 |
| cssdt-thanksgiving-day |
Thanksgiving Day |
Variable Thursday 11-22 - 11-28 |
| cssdt-veterans-day |
Veterans Day |
11-11 |
| cssdt-christmas-eve |
Christmas Eve |
12-24 |
| cssdt-christmas-day |
Christmas Day |
12-25 |
| cssdt-new-years-eve |
New Years Eve |
12-31 |
| cssdt-new-years-day |
New Years Day |
01-01 |
Menu
Custom CSS Classes
Adding custom CSS classes for one-time and recurring events is easy with CSS Date Time Pro.
Custom CSS classes are available only in CSS Date Time Pro
Recurring Full-day Events
For recurring full-day events, enter the month and date followed by the CSS class name in the Recurring Full-day Events text area.
The following event would add the class "tax-day" every April 15th.
04-15 tax-day
Classes should be lowercase and not contain any spaces. Enter one event per line.
One-Time Full-day Events
For one-time full-day events, enter the month, date and year followed by the CSS class name in the One-time Full-day Events text area.
The following event would add the class "super-bowl-sunday" on February 2nd, 2018 and "academy-awards" on March 3rd, 2018.
2018-02-04 super-bowl-sunday
2018-03-04 academy-awards
Classes should be lowercase and not contain any spaces. Enter one event per line.
Menu
Settings
Enable Javascript Callback
Appends CSS classes after the page loads via Javascript to bypass page caching. Classes are added post-load there will be a brief delay before the classes take effect.
What is Caching?
WordPress caching plugins speed up page load times by reducing server load. Caching saves the entire page including the CSS body classes. This can pose a problem with date and time-based content as the content is not refreshed when each user visits the page.
If your caching plugin or service is set to cache pages for an hour or less, this may not pose much of an issue. At most, your dates and time will be off by no more than one hour.
If you are caching pages for more time, or if you would like the CSS classes immediately available, check the box and "Enable Javascript Callback".
CSS Prefix
Replace the default "cssdt-" prefix with your own prefix.
One-time Full-day Events
Add one-time full-day events. Pro version only.
Recurring Full-day Events
Add recurring full-day events. Pro version only.
Menu