Calendar Enhancements - [vBMods.rocks] Event Date That Rocks using CSS

The current design of the Event date in the Upcoming Events module in vBulletin 5.2.6 looks bland. Want to make it rock and look more appealing like below?



Add this custom CSS in css_additional.css template in AdminCP or in Sitebuilder > Style > CSS Editor

For vB 5.3.0+:

.b-event__date {
    border: 1px solid #ccc;
    margin-right: 10px;
    text-align: center;
    box-shadow: 3px 3px 0px rgba(00,0,0,.15);
    position: relative;
}
.b-event__date:before {
    content: '';
    position: absolute;
    left: calc(50% - (100% - 32px)/2);
    top: -4px;
    width: calc(100% - 34px);
    height: 7px;
    border-left: solid 1px #aaa;
    border-right: solid 1px #aaa;
}

For vB 5.2.6:

.b-event__bigdate {
    border: 1px solid #ccc;
    margin-right: 10px;
    text-align: center;
    box-shadow: 3px 3px 0px rgba(00,0,0,.15);
    position: relative;
}
.b-event__bigdate:before {
    content: '';
    position: absolute;
    left: calc(50% - (100% - 53px)/2);
    top: -4px;
    width: calc(100% - 53px);
    height: 7px;
    border-left: solid 1px #aaa;
    border-right: solid 1px #aaa;
}

This mod is also posted at https://vbmods.rocks/forum/vbulletin...ocks-using-css.

For more mods, visit https://vbmods.rocks

[vbul.org]

cool. Thank you

[Mark.B]

A quick heads up on this.....the css for the date is changing in 5.3.0 which makes the date text much smaller.
See http://www.talknewsuk.com/events
Then it will change again at some point...as per http://tracker.vbulletin.com/browse/VBV-17141

[noypiscripter]

Thanks for the heads up Mark. I'll update the css accordingly.

[noypiscripter]

Updated the CSS for 5.3.0 support.