Helpful Information
 
 
Category: vBulletin 5.x Modifications
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?

https://www.vbulletin.org/forum/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

cool. Thank you :)

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

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

Updated the CSS for 5.3.0 support.










privacy (GDPR)