Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Calendar Styling
Mottie (MVP) 12/17/2009 2:00 PM EST : Calendar Styling
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Calendar Styling

With the new calendar comes a bunch of new built in CSS classes! YAY! So I put this post together showing you how to modify this new calendar using custom CSS.

 Before 
 After

Because the default calendar styling isn't added in with the rest of the custom CSS, you'll need to add the code to your footer area. So, you have two choices:
  1. If you like my choice of colors (ignore the blue and purple event colors, because you set those yourself in the calendar event panel), then just copy this link and add it to your Footer HTML

    <link  rel="stylesheet" media="screen" type="text/css" href="http://www.axiomfiles.com/Files/258012/default-calendar.css">

  2. If you want to use different colors or background images for your calendar, then either copy the code below (or download my css file) then:
  • Modify the colors and images to match your site.
  • Upload the file to your guild files
  • Copy the <link> from choice #1 above and paste it into your footer HTML (Control Panel > Custom HTML & Script > Footer Area)
  • Copy the link to your file (right click and choose "Copy link location") then replace the URL in the <link> (the text in orange).
The CSS
/* Overall Calendar */
#gpFullCal { }

/* Header - Contains Selection buttons and Month & Year */
.fc-header { }
.fc-header-title { font-size: 24px; }

  /* All Header Buttons (default=normal, hover=when hovered over, down=when clicked, active=when selected (m/w/d butons) */
  .fc-header .fc-state-default span { background-color: #444; color: #ddd; border: #777 1px outset; }
  .fc-header .fc-state-hover span { background-color: #777; }
  .fc-header .fc-state-down span { background-color: #333; }
  .fc-header .fc-state-active span { background-color: #555; }

  /* Arrow button */
  .fc-header .fc-button-prev span { }
  .fc-header .fc-button-next span { }

  /* Today button */
  .fc-header .fc-button-today span { }

  /* Month-Week-Day buttons */
  .fc-header .fc-button-month span { }
  .fc-header .fc-button-agendaWeek span { }
  .fc-header .fc-button-agendaDay span { }

/* Calendar Body */

  /* All borders */

  .fc-widget-content, .fc-content .fc-state-default { border-color: #555;}

  /* All Calendar Headers (m/w/d views) */

  .fc-content th.fc-state-default { background: #444; color: #ddd; font-size: 120%; }

  /* Calendar Time (left columns with times in week & day views) */
  .fc-content th.fc-axis  { background: #222; color: #ddd; font-size: 120%; }

  /* Today */
  .fc-today.fc-state-default { background: #002200 url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/cell-today-big.gif) top center repeat-x; }

  /* Days current Month */
  .fc-not-today.fc-state-default { background: #111111 url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/cell-big.gif) top center repeat-x; }

  /* Days outside of current Month */
  .fc-other-month.fc-state-default { background: #070707 url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/cell-out-big.gif) top center repeat-x; }

  /* Events */
  .fc-event { font-size: 16px; }
  .fc-event-time { padding-right: 4px; }
  .fc-event-title { }
  .fc-event-title img { float: right; max-width: 30px !important; max-height: 30px !important; padding:3px;}

  /* Event Header & Footer (week & day views)  */
  .fc-event .ui-resizable-handle.ui-resizable-s { background-color: #555 !important; }
  .fc-event, .fc-agenda .fc-event-time, .fc-event a { background-color: #555; }
Customizing

Some CSS classes are blank { } in the css above. I left them this way so you can more add more generalized CSS (like a background image for the entire calendar) or more specifically target an element (like just the today button in the header.
  • Overall Calendar

    • #gpFullCal is the ID of the wrapper that contains the entire calendar. If you want to add a background image for your calendar, do it here. But then you might want to make the calendar body backgrounds all transparent.

  • Header

    • .fc-header wraps the entire header - it contains the arrows, today button, calendar title and the month/week/day buttons.
    • .fc-header-title is the css for the calendar title.
    • "All Header Buttons" section in the css is the overall css for the header buttons... there are classes for "default", "hover", "down (or clicked)" and "active (actively being clicked)".
    • "Arrow Buttons" section lets you specifically target the previous and next buttons styles.
    • "Today Button" section lets you target the today button styles.
    • "Month-Week-Day Buttons" section lets you target those buttons separately.

  • Calendar Body

    • "All Borders" section targets the classes that assign the border color.
    • "All Calendar Headers" section targets the top row of the calendar in the month, week and day views.
    • "Calendar Time" section targets the left column that contains the times in the week and day views.
    • "Today" section targets the today cell of the calendar.
    • "Days current Month" targets all days within the current month.
    • "Days outside of current Month" targets all days outside of the current month.

  • Events

    • The last section targets the events contained within the calendar body.
    • All this CSS does is enlarge the event font, adds some space between the time and title (padding-right) and then enlarges &moves the image to the upper right corner of the event. The image may become partially hidden if the event is short ( < 1 hour ).
    • Don't change the event colors here as the colors are assigned by category in the calendar event panel
    • Event header and footer CSS added - default header color turned out to be blue and the footer is transparent.
Edit 12/18/2009: Added Event Header & Footer CSS for week and day views.
TopBottom

Valdaglerion (Guild Admin) 12/18/2009 8:49 PM EST : RE: Calendar Styling
Valdaglerion
Posts: 2473
Zomgawsh Poster

I was using your old code for adding icons to events and the "my signups" and "add event" links but the code isn't working with the new calendar.  In your images above, I still see icons.  Have you updated the code?
TopBottom

Mottie (MVP) 12/19/2009 9:29 AM EST : RE: Calendar Styling
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Valdaglerion!

Nope, the new calendar includes event categories that allow you to assign icons to each category - essentially what the old calendar code was doing. But, the icons are rather small, so the CSS above is merely repositioning them.
TopBottom

Keilana55 (Guild Admin) 12/19/2009 2:18 PM EST : RE: Calendar Styling
Keilana55
Posts: 4537
Zomgawsh Poster

Some of the members are only seeing a blank calendar.  Those that we have categorized can not be edited.  I will look on Mottie's site and see if I can fix it myself.

TopBottom

Mottie (MVP) 12/19/2009 3:09 PM EST : RE: Calendar Styling
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Keilana55!

I don't think there's anything I can do to fix that. If I were you I'd ask those members to take a screen shot of their calendar and include what operating system and browser they are using and submit a ticket.
TopBottom

BladeDVD (New Admin) 12/19/2009 3:18 PM EST : RE: Calendar Styling
BladeDVD
Posts: 2414
Zomgawsh Poster


We use the Announcements function (entries made from General Settings tab) to display a quote of the day on our Calendar as part of a contest.

It seems to not be showing since this update.

Do I have to do something in the Event Calendar's Pages & and Content area to get this to show up properly again?

TopBottom

Mottie (MVP) 12/19/2009 4:10 PM EST : RE: Calendar Styling
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi BladeDVD!

This also is something I am not able to help you with... unless you are actually seeing the announcement (it might have been missed being added when the new calendar was implemented) somewhere on your page, even if it's there but hidden, then sadly I can't do anything. It would be best if you submitted a support ticket for this problem.
TopBottom

Valdaglerion (Guild Admin) 12/19/2009 9:36 PM EST : RE: Calendar Styling
Valdaglerion
Posts: 2473
Zomgawsh Poster

Mottie said:

Nope, the new calendar includes event categories that allow you to assign icons to each category - essentially what the old calendar code was doing. But, the icons are rather small, so the CSS above is merely repositioning them.


What about that code that used to replace the text "add new event" and "view my signups" with icons?  That doesn't seem to be working now either.
TopBottom

Mottie (MVP) 12/20/2009 1:32 AM EST : RE: Calendar Styling
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Valdaglerion!

Ok, I've updated the code here.
TopBottom

Valdaglerion (Guild Admin) 12/20/2009 3:05 PM EST : RE: Calendar Styling
Valdaglerion
Posts: 2473
Zomgawsh Poster

Thanks!
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%