events calendar css

[caggens]

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?

[Kathy8s]

I would be interested in this too.

[acoleman]

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;}
td.date {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; }


[caggens]

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 td.date{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 th.date 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:''}



[saltybeagle]

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;
color:#FFF !important;

There's a couple tips. Feel free to ask more questions!

[caggens]

Thanks.

I think I get it.

The "!important" tip is very useful!