Page 1 of 1
CSS calendar Module layout
Posted: Tue Jun 19, 2007 7:53 pm
by factor1
Does anyone have good examples of a clean CSS driven calendar module?
I am using the calendar module, and the one example of the CSS layout, but its messy, and cumbersome when you have a handful of events.
Is there any sample CSS files for this module out there? Or even examples of cleanly done calendars?
Re: CSS calendar Module layout
Posted: Tue Jun 19, 2007 8:05 pm
by RonnyK
I've got one on
www.ruimzicht.eu (calendar shows in the left sidebar) but there no entries in the future. If you want to see an entry and the behaviour, post the reply and I'll put in a test-entry.
Ronny
Re: CSS calendar Module layout
Posted: Wed Jun 20, 2007 9:33 pm
by factor1
Wow ronny, thats great. That is exactly what I wanted it to do. I went to some past events to see how an event worked.
Is it possible to see your CSS for that? Is it just CSS or is CSS & Modifying the calendar output?
Re: CSS calendar Module layout
Posted: Thu Jun 21, 2007 10:11 am
by Milhaus
You can see my styling of calendar
here. I especially tried to make it able display more events on one day - thats why events look like lists. If you want to use it, here is code:
Code: Select all
/* make all links red */
/* highlight "today" for the small calendar */
.calendar-today
{
font-weight: bold;
}
/* display the "upcominglist" as one line per entry (assuming table_id='cal-upcominglist') */
#cal-upcominglist .calendar-date-title
,#cal-upcominglist .calendar-summary-title
{
display: none;
}
#cal-upcominglist h2
,#cal-upcominglist .calendar-date
,#cal-upcominglist .calendar-summary
{
display: inline;
margin-right: 5px;
}
/* tidy up text sizes for lists */
#cal-list h1, #cal-upcominglist h1
{
color: red;
font-size: 120%;
}
#cal-list h2, cal-upcominglist h2
{
font-size: 110%;
}
/** large calendar rules (assuming table_id='big') **/
/* border on for #big */
#big{
margin-bottom: 10px;
border-collapse: collapse;
border: 2px solid #999966;
}
/* nice squares for the #big table */
#big th
{
border: 1px solid #999966;
padding: 3px;
width: 75px;
}
#big td {
border: 1px solid #999966;
vertical-align: top;
padding: 3px;
height: 75px;
width: 75px;
}
/* format summaries nicely in #big */
#big ul
{
margin: 0px;
padding: 0px;
padding-left: 5px;
}
#big li
{
list-style-type: circle;
padding: 0px;
margin-left: 10px;
}
#big a
{
}
#big .dayurl
{
display:inline;
margin-left:0px;
}
#big .month_navigation
{
display:inline;
margin-left:0px;
}
/* background colours for #big */
#big td
{
background-color: khaki;
}
#big .calendar-day
{
background-color: ;
}
#big .calendar-today
{
font-weight: normal;
background-color: #999966;
}
#big .calendar-today a
{color:khaki;}
#big .calendar-today .dayurl
{display:inline;
margin-left:0px;}
.calendar-event {margin-top:5px;
margin-bottom:10px;
padding-left:5px;
padding-bottom:5px;
border: 2px solid #999966;}
.calendar-event .calendar-date-title,
.calendar-event .calendar-summary-title,
.calendar-event .calendar-details-title
{
font-weight:bold;
}
.calendar-event .calendar-event-title
{width:100%;
background-color:khaki;
padding-top:5px;
padding-left:5px;
padding-bottom:5px;
margin-left:-5px;
border-bottom:1px solid #999966;}
#big caption
{margin-bottom:5px;}
#big caption a
{text-decoration:none;}
.calendar-prev{display:inline;}
Milhaus
Re: CSS calendar Module layout
Posted: Mon Jul 09, 2007 12:34 pm
by RonnyK
I'm just back from holiday and saw your reply. If you stll want the styling, please post a reply. I'll put my code and CSS over here then.
Ronny