CMS Made Simple Forums

I would like the event text on the main calendar to align all the way to the left of each cell-- just like the calendar that appears on this site.  I have tried everything and have given up!  Please help.

Will you tell us a bit more what you have done? Template and link to your calendar would help also.

I truly appreciate any help you can give.  I have struggled for 12 hours to get this calendar to look right!  I also am not crazy about the dotted lines to separate the events within the same day, but I can't figure out any other way to do it.  I would welcome any ideas you might have.  Thank you very much!

Here is how it looks now:

http://www.quuf.org/index.php?mact=Cale ... 3&page=193

Here is my Calendar css code:[/b]
/*

insert something like this in your page
or template;

{cms_module module="Calendar" table_id="cmscal" first_day_of_week="0"}


*/

#cmscal {
  width: 98%;
  border: 2px solid #696d6e;
  margin: auto;
}
#cmscal .calendar-prev {
  font-size: 1.6em;
}
#cmscal .calendar-month {
  font-weight: bold;
padding: 6px;

}
#cmscal .calendar-next {
  font-size: 1.6em;
}
#cmscal td {
  width: 14%;
  border: 1px solid #696d6e;
  margin: 0;
  padding: 0px;
  background-color: #f3dda;
align: left;
text-align: left;
}
#cmscal .calendar-today{background-color: #af6d61;
font-weight:bold;}

#cmscal th {
  border-bottom: 2px solid #696d6e;
  color: #f3dda;
}
#cmscal tr {
  vertical-align: top;
}
#cmscal ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#cmscal li { 
border-bottom: 2px dotted #696d6e;
margin: 0;
  padding: 0;
  list-style-type: none;
}

#cmscal a, #cmscal a:link, #cmscal a:visited {
  font-size: .9em;
font-weight: bold;
  color: #af6d61;
  text-decoration: none;
}


.calendar-event .calendar-date-title,
    .calendar-event .calendar-summary-title,
    .calendar-event .calendar-details-title




Here is my Event template code:[/b]



{$event.event_title}

{assign var=month_number value=$event.event_date_start|date_format:"%m"}
{assign var=end_month_number value=$event.event_date_end|date_format:"%m"}
{$lang.date}: {$event.event_date_start|date_format:"%B %e, %Y"}

Time: {$event.event_date_start|date_format:"%I:%M %p"} - {$event.event_date_end|date_format:"%I:%M %p"}

{if $event.event_summary !="" && ($detail != 1 || ($event.event_details =="" || 

$event.event_details == "
"))}
{$event.event_summary}
{/if}
{if $detail == 1}
{if $event.event_details !="" && $event.event_details != "
"}
{$lang.details}: {$event.event_details}
{/if}
{else}
{if $event.event_details !="" && $event.event_details != "
"}
{$moretext}
{/if}
{/if}


{* Display custom fields
  There are two ways to address custom fields
  1) {$event.fields.fieldname}
  2) {foreach from=$event.fields key='fieldnamee' item='fieldvalue'}
        {$fieldname}: {$fieldvalue}
      {/foreach}
  You may want to use the former method with file upload fields.
*}

  {foreach from=$event.fields key='fieldname' item='fieldvalue'}
      {$fieldname}: {$fieldvalue}
  {/foreach}

{$return_url}

Be more spesific when pointing an element you want to style.
Instead of  #cmscal li { ... } write #main #cmscal ul li in your style.

That did the trick!!!  Now how do I get some padding around the date and the event text?  When I made the padding 2 and margin 2, it threw all the text back over to the right.

Specify margins to element "#main #cmscal ul" ( you  may also  explicitly set style to "#main #cmscal > a"  more at w3.org/TR/CSS21/selector.html)

Or add classes to elements in calendar template.

When I made the padding 2 and margin 2 ....

as you already noticed you want to be more specific ...

Do you use firebug to inspect page style ?
If not - search this forum, or check cmsms documentation, or simply google for it.

If you look in the bottom of the main layout style sheets you will see some UL and LI styles with #main in front of them if you don't need these for any other UL LI remove them or use them for this pages styling, #main ul and #main li are over riding what your trying to do...