Gig Calendar - Customizing the Look

From Hostbaby Wiki

Jump to: navigation, search

This tutorial is for Full/Export Accounts

Your calendar probably looks something like my example here.


CAL-uglyex.gif


I think we made it this ugly on purpose, to force you to learn how to change the look and colors yourself.


Date and Time

One important note: If you are not in Pacific Standard Time (PDT) or outside the United States, you will want to change the display options for your calendar so it shows the time zone correctly. To do this, return to the main Hostbaby Administration screen ( http://www.yoursite.com/hostbaby ) and look in the Your Stuff box.


You will see a line that says "change your options/preferences". Click on options/preferences and the very first drop-down box will allow you to choose your correct time zone and select how the date will be formatted on your calendar. That's all you need to do there.


Look and Feel

You can change all fonts, size, colors, and alignment with CSS stylesheets. They're a great thing to get to know.


Changing the look and feel (fonts, size, colors, alignment) won't change the data in your calendar. They're kept in two different places. This is important to understand. The actual calendar dates, artist name, address of the venue, and all that stuff you entered before, is all kept as raw text in your own database. And now, to present it, you can choose any color scheme you want, and any raw data in your calendar will be shown with that "theme".


It's a very cool way of working, and it's how XML and all future website technologies will work in the future, so you should learn a little something about it.


Here are some good links about CSS stylesheets:



Trying different stylesheets

Go back into editing your calendar.html file.


ADD THIS ONE LINE: 

<head>
<title>yourdomain.com Concert Calendar</title>
<link rel="stylesheet" href="http://www.hostbaby.com/css/calendar1.css" type="text/css">
</head>


Upload and look at it. It should look like:


CAL-look2.gif


Change "calendar1" to "calendar2" stylesheet 

<head>
<title>yourdomain.com Concert Calendar</title>
<link rel="stylesheet" href="http://www.hostbaby.com/css/calendar2.css" type="text/css">
</head>


Upload and look at it. It should look like:


CAL-look3.gif


Change "calendar2" to "calendar3" stylesheet 

<head>
<title>yourdomain.com Concert Calendar</title>
<link rel="stylesheet" href="http://www.hostbaby.com/css/calendar3.css" type="text/css">
</head>


Upload and look at it. It should look like:


CAL-look4.gif


DO YOU SEE HOW COOL STYLESHEETS ARE?


Now, go forth and Make Stuff Pretty!

Retrieved from "http://www.hostbaby.org/wiki/Gig_Calendar_-_Customizing_the_Look"
Personal tools