events calendar css

Notes on the visual redesign process

events calendar css

Postby caggens » Tue Jul 28, 2009 12:45 pm

Hey Brett,

I find that creating a local css file to modify the upcoming events or month widget involves a lot of guess work (for me). It would be really helpful if there was a list of css selectors with a definition for each. Do you have something like this that you can share?

In the meantime, will you share the css file that was used to format upcoming events on the WDN index page?
Posts: 65
Joined: Tue Jun 21, 2005 10:52 am
Location: RH 120


Postby Kathy8s » Tue Aug 18, 2009 3:06 pm

I would be interested in this too. :)

Postby acoleman » Tue Aug 25, 2009 5:03 pm

I've seen a few people use this CSS styling and I think it looks pretty nice...

Code: Select all
/* events widget */

#local_calendar .upcoming-header { display: none; }
table.upcoming {border-collapse:collapse;}
table.upcoming td {padding:4px;} {vertical-align:top;}
.dtstart {font-size:80%;}
.dtstart:after {display:none;}
.upcoming thead th {border-bottom:1px solid; border-bottom-color:#a1a1a1;}
#local_calendar .location, #local_calendar .location a {font-size:80%;color:green; display:block;}
table .alt {background-color:#fafafa;}
table tbody tr:hover {background-color:#FFFDE2;}
tbody .description {font-style:italic;}
thead .title {font-style:normal;}
.alt td {border-top:1px dashed; border-top-color:#a1a1a1;}
#icsformat, #rssformat { display: block; }
Posts: 48
Joined: Tue Sep 20, 2005 2:54 pm
Location: 321 Canfield

Postby caggens » Fri Sep 18, 2009 11:28 am

In a single column, the event time in the above css wraps 3-4 times, and the event description runs down the page. I used what I had, modified it to suppress the event description and show the time at 70%, which is very small, but it doesn't wrap like crazy. I cannot figure out how to control the event location color. Sometimes it is green, sometimes it is red.

I think training or a detailed description of each selector would be very useful. If anyone can tell me how to control the event color, let me know (changing the event color below doesn't do anything)

Code: Select all

@charset "UTF-8";
/* CSS Document */
table.upcoming {clear:both;width:100%;border-collapse:collapse;}
table.upcoming{width:27%;vertical-align:top;text-align:left;font-size: 0.75em;}
table.upcoming td.title{width:80%;}
table.upcoming td{ padding:7px;border-top:1px solid #d7e6ee;font-size:0.80em;}
#maincontent table.upcoming thead th{background: none;border-bottom-width:thin;padding:7px;text-align: left;}
table.upcoming thead th.title{font-style:normal;}
table.upcoming thead a, table.upcoming thead th.title a{ color: #ffffff;text-decoration:none;}
table.upcoming span.location, table.upcoming span.location a{ color: #060;font-size: .90em;text-transform:uppercase;display:bloc;}
table.upcoming a {background:transparent none repeat scroll 0 0;}
#maincontent h4.upcoming-header{display:none;float:left;font-size:1.5em;padding: 4px 0 7px 30px!important; background: url(images/date.gif) no-repeat 0 0;font-style:normal;}
#maincontent tbody .description { display:none;font-style:normal;}
#maincontent h4.ongoing{font-size:1.5em;background:url(images/ongoing.gif) no-repeat 0 0;margin-top:15px;padding:6px 0 7px 34px;clear:both;}
/* Other upcoming events formating */
#feeds {display:none}
table.upcoming abbr.dtstart:after, abbr.dtend:after {content:''}

Posts: 65
Joined: Tue Jun 21, 2005 10:52 am
Location: RH 120

Postby saltybeagle » Thu Sep 24, 2009 9:57 am

This is probably a "selector strength" issue. There's a detailed formula for calculating the strength of css selectors to determine what CSS attributes cascade.

The short of it is, the more specific the selector, the stronger the cascade (or power to override the cascade). So both these selectors modify elements with the class="location", but the second is much stronger (or more specific) and will override the first CSS declaration
.location {}
body #maincontent .upcoming .location {}

Also, on specific CSS attributes you can add !important to help override the cascade. Like so:
color:#FFF !important;

There's a couple tips. Feel free to ask more questions!
Brett Bieber
Posts: 376
Joined: Fri Jan 16, 2004 3:10 pm
Location: 321 Admin

Postby caggens » Thu Sep 24, 2009 4:53 pm


I think I get it.

The "!important" tip is very useful!
Posts: 65
Joined: Tue Jun 21, 2005 10:52 am
Location: RH 120

Return to Visual Redesign

Who is online

Users browsing this forum: No registered users and 0 guests