PDA

View Full Version : Calendar Enhancements - [vBMods.rocks] Event Date That Rocks using CSS


noypiscripter
11 Mar 2017, 01:29
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

vbul.org
20 Mar 2017, 16:56
cool. Thank you :)

Mark.B
26 Mar 2017, 11:26
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
28 Mar 2017, 02:56
Thanks for the heads up Mark. I'll update the css accordingly.

noypiscripter
05 Apr 2017, 19:32
Updated the CSS for 5.3.0 support.