Topic: Google Calendar CSS?!?

Okay, so this page right here allows you to embed the google calendar gadget on your webpage. It seems a lot more customizable than I expected, especially with the ability to link to a (gasp!) EXTERNAL STYLESHEET! Problem is, I wouldn't know how create the stylesheet for this bad boy, cuz I don't have any idea of what css selectors are behind it. Do any of you know? Ironically, googling the subject didn't do anything for me. smile Any help at all would be appreciated.

UPDATE:Nevermind, I found it! A quick view of the javascript in action using Firebug gave me the info I needed. I also found this article to be quite helpful

Here's the css, near as I can tell. I'll leave it up to you to decipher. smile

<style>
.pbox {
  top:         1px;
  width:       15em;
  line-height: 1.2em;
  margin:0 10px 10px 0;
  font-size: 85%;
}


/* =Menu borders (top and bottom) creates rounded corners
----------------------------------------------- */
.pbox .t2, .pbox .b2, .pbox .sb2 {
  background-color:#BBBBBB; /* D */
  position:relative;
  top:-1px;
  height:1px;
  margin:0 1px;
  font-size:1px;
  line-height:1px;
  }

.pbox .offset, .pbox .b2 {
  border-right:1px solid #666666; /* A */
  }
.pbox .t2 {
  margin-right:2px;
  }
.pbox .b2 {
  background-color:#BBBBBB; /* D */
  }
.pbox .sb2 {
  display:block;
  background-color:#666666;/* A */
  margin-left:2px;
  }

.boxbody {
  background-color:#DDDDDD; /* E */
  position:relative;
  top:-1px;
  border:solid #BBBBBB; /* D */
  border-width:0 1px;
  }
.boxbody ul, .boxbody li {
  margin:0;
  padding:0;
  list-style:none;
  }

/* The main chrome containing the calendar is spaced this far from the side */
.datePickerDiv {
  background: #c3d9ff;
  padding: 0px 0px 9px 9px;
  line-height: 1em;
}

.DP_monthtable {
  width: 100%;
  background: #fff;
  padding: 0px;
  border-bottom: 1px #A2BBDD solid;
  font-size: 83%;
}

.DP_monthtable TD {
  text-align: center;
  padding: 2px;
  font-family: Verdana;
  font-size: 85%;
}

.DP_heading {
  cursor: pointer;
  background: rgb(195, 217, 255);
  color: #112ABB;
  vertical-align: middle;
}

.DP_days {
  background: rgb(195, 217, 255);
}

.DP_dayh {
  cursor: default;
  font-size: 78%;
}

.DP_cur {
  font:bold 78%/1em Verdana,Sans-serif;
  padding-bottom: 4px;
  text-align: center;
}
.DP_prev, .DP_next {
  font-size: 125%;
  padding-bottom: 6px;
  cursor: pointer;
}

.DP_prev { text-align: right; }
.DP_next { text-align: left; }

/* today  */
.DP_today {
  background :  #9ab !important;
  border:       1px solid !important;
  border-color: #567 #abc #abc #567 !important;
  color:        #fff;
}
.DP_today_selected {
  background :  #579 !important;
  border:       1px solid !important;
  border-color: #246 #9bd #9bd #246 !important;
  color:        #fff;
}

/* weekday is Gmail blue when selected */
.DP_weekday {
  background: rgb(255, 255, 255);
}
.DP_weekday_selected {
  background: rgb(170, 204, 238);
}

/* weekend goes from gray to dark blue when selected */
.DP_weekend {
  background: #E8EEF7;
}
.DP_weekend_selected {
  background: rgb(153, 187, 221);
}

.DP_onmonth {
}

.DP_offmonth {
  color: #888;
}

.DP_day_top {
  border-top: 1px #A2BBDD solid;
}

.DP_day_right {
  border-right: 1px #A2BBDD solid;
}

.DP_day_left {
  border-left: 1px #A2BBDD solid;
}
.fakelink {
  text-decoration: underline;
  cursor: pointer;
  color: rgb(0, 0, 204);
}
.eventChip {
  font-size: 82%;
  font-family: Arial;
}
.eventCell {
  vertical-align: top;
  font-size: 82%;
  font-family: Arial;
}
.agendaLine {
  background-color: rgb(229, 236, 249);
  line-height: 1px;
  height: 1px;
  padding: 0px;
  font-size: 1px;
}
.timeSlot {
  text-align: right;
  white-space: nowrap;
  padding-right: 0.5em;
}
.dateDescription {
  white-space: nowrap;
  font-style: italic;
  color: gray;  
}

a.eventCell:link, a.eventCell:visited {text-decoration: none; }
a.eventCell:hover, a.eventCell:active {text-decoration: underline; }

/* need full URL if not hosted on google.com */
td.tl {background:url("http://www.google.com/calendar/images/corner_tl.gif") top left}
td.bl {background:url("http://www.google.com/calendar/images/corner_bl.gif") bottom left}
td.tr {background:url("http://www.google.com/calendar/images/corner_tr.gif") top right}
td.br {background:url("http://www.google.com/calendar/images/corner_br.gif") bottom right}
td.evhtml {background-repeat:no-repeat;padding-left:4px;width:4px}
td.dphtml {background-repeat:no-repeat;width:2px}

/* used with Quick Add */
.reset {
  clear:both;
  height:1px;
  margin:0;
  font-size:1px;
  line-height:1px;
}


.t2 {
  line-height: 1px;
  height: 1px;
  font-size: 1px;
  border-width: 0 1px;
  border-style: solid;
  border-color: white;
}

.calChip {
  color: white;
  padding: 0 2px;
}

.subscribeLinks {
  margin-top: 10px;
  font-size: 80%;
}
</style>

Last edited by osugodfan (2007-10-14 07:50:43)

You can teach what you know, but you'll ultimately reproduce what you are.

Re: Google Calendar CSS?!?

Very nice find, thanks for posting this helpful reference. I will put in in my reference manual.

Thanks

† Taj

Re: Google Calendar CSS?!?

I might add, that the article I referenced to above states that the external stylesheet won't really work, and will be ignored. I have yet to prove otherwise, so be warned!

--m

You can teach what you know, but you'll ultimately reproduce what you are.

Re: Google Calendar CSS?!?

jenkinsta wrote:

Very nice find, thanks for posting this helpful reference. I will put in in my reference manual.

Thanks

Heh, Godbit IS my reference manual. wink

"Bear 270, young man. Bear two, seven, zero, over." - Musings of a flight simulator guru, me.