CMS Made Simple Forums

Posted: **Wed Oct 01, 2014 1:36 pm**

Hi

Can anyone explain how I can position the title in the calendar frontend view.
Attached is screen shot.

I am trying to position the title on the left side of the box, this would then allow for a longer title without wrapping.
I have looked in the css and template but no obvious answer.

Could the day box be made to stretch auto to title length?

Thanks

Posted: **Wed Oct 01, 2014 11:02 pm**

Get rid of left padding/margin, look in CSS for something like #cal-calendar li and reduce/set to 0.

Posted: **Sat Oct 04, 2014 9:47 am**

Hi Power Poster

I am using the basic css code as supplied with all padding/margins set to zero. But still the same, my code below.

Code: Select all

Example stylesheet for Calendar module

For using this "big"-class insert something like this in your page
or template;

{cms_module module='Calendar'}

*/



/* make all links red */
.calendar tr td a
{
  color: blue;
}

/* highlight "today" for the small calendar */
.calendar-today
{
  font-weight: bold;
}

/* display the "upcominglist" as one line per entry (assuming default class and id names) */
#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 default class and id names) **/
/* border on for #cal-calendar */
#cal-calendar{
  margin: 0px;
  border-collapse:    collapse;
  border: 1px solid black;
}

/* nice squares for the #cal-calendar table */
#cal-calendar th
{
  border: 1px solid black;
  padding: 0px;
  width: 100px;
}

#cal-calendar td {
  border: 1px solid black;
  vertical-align: top;
  padding: 0px;
  height: 100px;
  width: 220px;
}

/* format summaries nicely in #cal-calendar */
#cal-calendar ul
{
  margin: 0px;
  padding: 0px;
  padding-left: 0px;
}

#cal-calendar li
{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
text-align:left;
}

/* background colours for #cal-calendar */
#cal-calendar td
{
  background-color: silver;
}

#cal-calendar .calendar-day
{
  background-color: #80ff80;
}

#cal-calendar .calendar-today
{
  font-weight: normal;
  background-color: #69c765;
}

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

  display: none;

}

Posted: **Sat Oct 04, 2014 10:08 am**

Firefox web developer plugin will show you which CSS rules are styling that item. Failing that post a link to that page.

CMS Made Simple Forums

CGcalender 1.4.3

CGcalender 1.4.3

Re: CGcalender 1.4.3

Re: CGcalender 1.4.3

Re: CGcalender 1.4.3