Are you enjoying the extensions? Did you like the support? Help others decide.

Leave a review
Details
Category: Tutorials
Hits: 8812
27Mar2023
Information
Print

Giving calendar dates an original look

Information
First published April 17, 2016
8812 hits -
 
Required:
Article Details Article Details
Article Details Profiles Article Details Profiles
or Latest News Enhanced Latest News Enhanced
or Latest News Enhanced Pro Latest News Enhanced Pro

Calendars are a visual way to represent dates associated with an article.
The Latest News Enhanced modules (free and pro) and the free Article Details plugin offer such possible display.

Despite the default style appeal, it is possible, just with a little help from CSS, to change the look of it and make it your own.

Here are a few examples to feed your imagination.

Required:
Article Details Article Details
Article Details Profiles Article Details Profiles
or Latest News Enhanced Latest News Enhanced
or Latest News Enhanced Pro Latest News Enhanced Pro

Calendars are a visual way to represent dates associated with an article.
The Latest News Enhanced modules (free and pro) and the free Article Details plugin offer such possible display.

Despite the default style appeal, it is possible, just with a little help from CSS, to change the look of it and make it your own.

Here are a few examples to feed your imagination.

Example 1

Result Calendar Example 1
Head width 80
height 80 (will adjust automatically)
Positions top none
2nd empty
3rd day
4th empty
bottom month
Formats weekday n/a
month January...December
day 1...31
Border width 0
radius 3
color n/a
Shadow width 10
Top colors text n/a
background 1 n/a
background 2 n/a
Overall colors text #2e0c0c
background 1 #ffffff
background 2 #e6e6e6 
Bottom colors text #ffffff
background 1 #f5f118
background 2 #e8e409
Additional CSS 
.newshead .calendar .day {
    font-size: 3em !important;
}

.newshead .calendar .month {
    letter-spacing: 0 !important;
    text-indent: 0 !important;
}

Example 2

Result Calendar Example 2
Head width 80
height 80 (will adjust automatically)
Positions top month
2nd none
3rd day
4th none
bottom none
Formats weekday n/a
month January...December
day 1...31
Border width 0 
radius 3
color n/a
Shadow width 3
Top colors text #ffffff
background 1 #f52727
background 2 #b81414
Overall colors text #2e0c0c
background 1 #ffffff
background 2 #e6e6e6
Bottom colors text n/a
background 1 n/a
background 2 n/a
Additional CSS 
.newshead .calendar .day {
    font-size: 3em !important;
}

.newshead .calendar .month {
    letter-spacing: 0 !important;
    text-indent: 0 !important;
}

.newshead .calendar.noimage .position1 {
    text-transform: capitalize !important;
    border-bottom: 3px solid #2e0c0c;
}

Example 3

Result Calendar - Example 3
Head width 60
height 80 (will adjust automatically)
Positions top day
2nd none
3rd none
4th none
bottom month
Formats weekday Mon...Sun
month n/a
day 01-31
Border width 0
radius 5
color n/a
Shadow width 5
Top colors text #a3a1a1
background 1 #ffffff
background 2 #f0eded
Overall colors text n/a
background 1 n/a
background 2 n/a
Bottom colors text #ffffff
background 1 #de2a2a
background 2 #a10909
Additional CSS 
.newshead .calendar .weekday {
    font-weight: bold;
}

.newshead .calendar.noimage .position1 {
    height: 1.3em;
    font-size: 2.6em !important;
    line-height: 1.3em !important;
    letter-spacing: 0px;
    text-indent: 0;
    font-weight: normal;
    margin-bottom: 0;
}

.newshead .calendar.noimage .position5 {
    height: 1.75em;
    font-size: 1.4em !important;
    line-height: 1.75em !important;
    letter-spacing: 0px;
    text-indent: 0;
    margin-top: 0;
}

Example 4

Result Calendar - Example 4
Head width 64
height 80 (will adjust automatically)
Positions top empty
2nd day
3rd month
4th none
bottom empty
Formats weekday n/a
month Jan...Dec
day 01-31
Border width 0
radius 0
color n/a
Shadow width 5
Top colors text n/a
background 1 n/a 
background 2 n/a
Overall colors text #ffffff
background 1 #1da4f2
background 2 #3381db
Bottom colors text n/a
background 1 n/a
background 2 n/a 
Additional CSS 
.newshead .calendar.noimage .day {
    font-size: 2.4em;
    line-height: 1em;
}

.newshead .calendar.noimage .position1 {
    height: 1em;
    margin-bottom: 0
}

.newshead .calendar.noimage .position5 {
    height: 1em
}

.newshead .calendar.noimage::after {
    content: " ";
    background-color: #000;
    position: absolute;
    left: 7px;
    opacity: 0.1;
    width: 64px;
    height: 2.2em; /* (1 + 2.4 / 2) */
    top: 7px;
}
Information