[vBMods.rocks] Event Date That Rocks using CSS

[noypiscripter]

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?

https://vborg.vbsupport.ru/external/2017/03/4.jpg

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-5-modifications/vbulletin-5-template-only-modifications/3004-event-date-that-rocks-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.