Full-width Container

You have probably noticed in my demo on how to embed the calendar, the sidebar is missing and a full-width content area was made available to display more details on the calendar.

Normally, I can just turn off the login and sidebar by going to Settings > Website Preferences but that will hide the sidebar on all pages. I needed a way to optionally hide the sidebar on some pages and still have it on some. I achieved it by applying a simple CSS rule.

Here's the stylesheet I used:

<style type="text/css">
.page-schedules #sidebar { display:none; }
.page-schedules #content { width:910px; }
</style>

What this does is, it hides the element with an id of sidebar and sets the element with an id of content width to 910px. I added the page-schedules class selector before the rules so they are only applied to the schedules page. Of course, you already know that!

That's it, no voodoo involved, just pure CSS.

Back to Tips & Tricks