Jump to:

10979 Posts in 2722 Topics by 1815 members

All other Modules

SilverStripe Forums » All other Modules » event calendar font

Discuss all other Modules here.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 1099 Views
  • bettsaj
    Community Member
    46 Posts

    event calendar font Link to this post

    anyone know how to change the colour and type of font in the event calendar? In the main body of the page, not the actual calendar widget.



  • UncleCheese
    4085 Posts

    Re: event calendar font Link to this post


  • bettsaj
    Community Member
    46 Posts

    Re: event calendar font Link to this post

    I do know it's CSS... I just want to know what one. I've checked all the CSS sheets for the event calendar and can't find any reference to font style and colour for those elements in any of the event calendar sheets.

    I know a bit about style sheets, but this is a bit beyond me.... Can you please at least tell me what one I should be looking at.

  • bettsaj
    Community Member
    46 Posts

    Re: event calendar font Link to this post

    Anyone have any ideas what style sheet changes the colour of the font in the main body of the event calender page. It doesn't seem to be anything derived from the original theme template, it's got to be one of the event calendar css files.

  • bettsaj
    Community Member
    46 Posts

    Re: event calendar font Link to this post


  • Howard
    Community Member
    215 Posts

    Re: event calendar font Link to this post

    I'm not sure which exact style to change but something that will tell you is a CSS inspector. These are built into Chrome and Safari or else you can use the addon to Firefox called Firebug. Check out the video on the Firebug page which quickly shows you how you can see all the CSS properties that are making a box or some text look the way it does and which file they are in. Makes things like this 100x easier to work out.

    Let me know if that helps.

  • bettsaj
    Community Member
    46 Posts

    Re: event calendar font Link to this post

    Ok... i've checked it with Firefox web developer plugin, and have found that it's pointing toward a style sheet called calendar.css

    #calendar-main {width:68%;float:left;}
    #calendar-sidebar {width:30%; float:right; padding-top: 0;}

    /* [YYYY]-[MM]-[DD]T[hh]:[mm]-[hh] */

    /*Button styling

    a.btn { display:block; padding:4px; color:#fff; background:#225eaf; border:1px solid #dedede; font-size:9px;
    text-transform:uppercase; text-align:center; text-decoration:none; }
    a.btn:hover { color:#fff; background:#6a6a6a; border:1px solid #dedede; }

    a.add { width:16px; height:16px; background:transparent url(../images/calendar__plus.png) 0 0 no-repeat; padding:0; border:0; text-indent:-9999em; }
    a.add:hover { background:transparent url(../images/calendar__plus.png) 0 0 no-repeat; border:0; }

    /*Top Heading
    #topHeading { border-bottom:3px solid #6a6a6a; padding:12px 0 4px 0; }
    #topHeading h2 {clear:both;}
    #topHeading span { display:block; margin-top:12px;float:left; }
    #topHeading span.feed { padding:3px 0 3px 20px;float:right; background:transparent url('../images/feed.png') left top no-repeat; }

    /*Date Heading*/
    #dateHeader {text-align:center; margin:8px 0 ; padding: 18px 0 16px 0; border-top:3px double #D4D4D4; border-bottom:3px double #D4D4D4;}
    #dateHeader h3 {line-height: 0; margin: 0; padding:0;}

    /*Month Navs
    #monthNav { text-align:center; background: #dedede; padding:8px 0; margin:10px 0 22px; }
    #monthNav a { width:20px;}
    #monthNav h2 {cursor:pointer;}
    #monthNav h2:hover {color:#aaa;}
    #monthNav a:hover { }
    #monthNav a.prev { float:left; }
    #monthNav a.next { float:right; }
    #monthNav h3 { padding:0; margin:0; font-size:18px; }

    #monthSelect { background:#dedede; border:2px solid #c4c4c4; text-align:center; padding:10px; margin-top:10px; }
    #monthSelect select { width:100%; }

    /*Sort and View Type
    #calView { border-bottom: 2px solid #dedede; }
    #calView ul { display:inline; float:left; margin:8px 0 0 140px; }
    #calView ul li { display:inline; margin:0; }
    #calView ul li span { float:left; margin-right:8px; padding-bottom:6px; }

    #calView ul li a { float:left; padding-bottom:3px; margin-left:5px; text-decoration:none; }
    #calView ul li a:hover, #calView ul li a.active { border-bottom:3px solid #666; text-decoration:none; }
    #calView ul li a:hover { border-color:#aaa; }

    #calView ul li.more a, #calView ul li.less a { display:block; text-decoration:none; padding:0 0 3px; margin:0 5px 0 0; }
    #calView ul li.more a.open, #calView ul li.less a.open { border-bottom:3px solid #666; }
    #calView ul li span {font-weight:700;}
    #calView h5 {float:right; display: inline; margin:7px 8px 0 0; padding: 0;}

    /*Event Summary (single date)
    .vevent { border-bottom: 1px solid #dedede; padding:10px 0; }

    .vevent div.dates, .vevent div.details { float:left; }
    .vevent ul.utility { float:right; }
    .vevent div.dates { width:20%; margin-right:15px; }
    .vevent div.details { width:54%; margin-right:0; padding-left:15px; border-left:1px solid #dedede; }
    .vevent ul.utility { width:100px; margin:0; list-style:none; }
    .vevent ul.utility li { list-style:none; margin:0 0 5px; }

    .vevent dl.more-dates { margin:10px 0 0; }
    .vevent dl.more-dates dt { font-weight:700; }

    .vevent .summary { margin:0 0 5px; }
    .vevent .location { text-transform:uppercase; font-size:11px; }
    .vevent .description { margin:5px 0; clear:both; }

    .vevent .dtstart { display:inline; font-weight:700; text-transform:uppercase; border:0; margin:0 0 10px; }
    .vevent .dtend { display:inline; font-weight:700; border:0; }
    .vevent h5 span.dtstart, .vevent h5 span.dtend {display: inline;}

    .vevent dt span.dtstart, .vevent dt span.dtend { display:inline; }

    .vevent dl, .vevent dt, .vevent dd { margin:0; }
    .vevent dt { font-weight:700; clear:both; float:left; margin-bottom:4px; }
    .vevent dd { float:left; }
    .vevent h4.dates { font-size:12px; margin:5px 0; border-bottom:1px solid #ccc; width:30%; }

    .vevent #eventImage img { float:right; }

    /* Event Detail with Image*/
    #eventImage { padding:5px; }

    #Form_CalendarFilterForm {padding:0 10px;}
    #Form_CalendarFilterForm fieldset {border:0;}
    #Form_CalendarFilterForm div.field {padding:5px 0;}
    #Form_CalendarFilterForm div.middleColumn {background:none;margin:0;padding:0;}
    #Form_CalendarFilterForm label {display:block;margin:0;}
    #Form_CalendarFilterForm div.field {width:216px;text-align:left;}
    #Form_CalendarFilterForm select {width:auto;clear:both;}
    #Form_CalendarFilterForm option {width:auto;padding:0 5px;}
    #Form_CalendarFilterForm div.Actions {margin:0;text-align:left;}
    #Form_CalendarFilterForm div.fieldgroup select {font-size:12px;font-weight:normal;}

    #StartMonthStartDayStartYear div.fieldgroupField,
    #StartDayStartMonthStartYear div.fieldgroupField {display:inline;}
    #EndMonthEndDayEndYear div.fieldgroupField,
    #EndDayEndMonthEndYear div.fieldgroupField {display:inline;}
    #Form_CalendarFilterForm div.fieldgroup label {display:block;width:200px;border-bottom:1px solid #aaa;margin-bottom:5px;}

    /* clearfix */
    .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
    .clearfix {display: inline-block;}
    /* Hides from IE-mac \*/
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}
    /* End hide from IE-mac */

    Primarily topheading h2 on line 19, dateheader on line 24 and calendar-main on line 1... I've highlighted them in bluse seeing as there's no line numbers

Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.