Calendar styles: More fun with rcss and image controllers

11Dec06

By Josh Adams.

Here’s the latest bit of design work I did: a calendar. I wanted to make it reminiscent of a post-it note, and I don’t really know why. The colors are all themeable anyway (I just use a palette hash, so I can swap it out with another and keep a library of them on hand). Less talk, more photo:

isotope11 pete_and_dave

This is just the dynamic calendar helper for rails that you can find around. I use my rcss controller and the image controller (to generate gradients) on this thing. The rcss to style the calendar:


<%
 palette = {
  :color1 => '#a6b6c6',
  :color2 => '#d4ddee',
  :text_color => '#333',
  :color3 => '#feffc4',
  :color4 => '#e6e7a8',
  :color5 => '#cecf96'
 }
# Just getting rid of the '#' for the gradient helper, he wants numbers.
 calendar_gradient = [palette[:color3].gsub(/#/,''),palette[:color4].gsub(/#/,'')]
-%>
table.calendar{
 background: <%=gradient(:colors => calendar_gradient,
                      :height => '200')-%>;
 color:#777;
 margin:2.5em 1em 1em 1em;
 font-size:.85em;
 text-align: center;
 border:<%=2.px.to_em-%> solid <%=palette[:color4]-%>;
}
table.calendar td{
 padding: .25em .6em;
}
table.calendar tr.dayName th{
 font-weight:bold;
 text-align: center;
}
table.calendar tr.monthName th{
 font-size: 2em;
 text-align: center;
 padding-bottom:.25em;
 color:<%=palette[:color1]-%>;
 background: <%=gradient(:colors => calendar_gradient.reverse,
                      :height => '20')-%>;
}
table.calendar td.otherMonth{
 color:<%=palette[:color5]-%>;
}
table.calendar td.today{
 border:<%=1.px.to_em-%> solid <%=palette[:color1]-%>;
 background-color:<%=palette[:color2]-%>;
}
table.calendar td.weekendDay{
 background-color: <%=palette[:color3]-%>;
}

See? Simple…

Advertisements


2 Responses to “Calendar styles: More fun with rcss and image controllers”

  1. 1 Bill

    Do you know if there is a way to do this with an external style sheet?

    Could you create a link to stylesheet.rb?

    -b

  2. 2 onlyjustwords

    I think like it. What would you use it for? 🙂


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: