Customizing the Appearance
From WebCalendar Wiki
Note: You will need to be logged in as an administrator to make changes to the way WebCalendar looks (The default 'admin' login is an administrator.)
The first port of call when customising the look of WebCalendar is the box labeled 'Appearance' in 'System Settings', under the 'Settings' tab. Make all the changes you want there first.
Contents |
[edit] WebCalendar Themes
Before adding CSS using 'Site customisation' from the system settings it's a good idea to create WebCalendar theme. A theme can be used to customise the calendar and menu style. Using a theme makes re-installs, upgrades and backups easier.
Go to the 'System Settings', under the 'Settings' tab you will see a box labeled 'System options'. Make sure 'Allow user to use themes' is set to 'Yes'. Now you can choose a theme, WebCalendar comes with a few.
[edit] Creating a theme
Creating a theme is very simple. Browse to the 'themes' folder inside your Webcalendar installation and, using one of the pre-installed ones as a template, make your own. Once saved you will be able to choose it in the same way you can choose the pre-installed ones.
Public or other users calendars will need to have their themes changed by going to 'Settings' > 'Public calendar' > 'Preferences' and the 'Themes' tab.
There are actually two parts to a theme, the *_pref.php in the themes folder (the one you have just finished editing) and a CSS file in 'includes/menu/themes'. The latter is for styling the menu but can also be used to style the whole WebCalendar application which is very handy.
Important: Whatever you stated as 'MENU_THEME' in *_pref.php is what the dir for your theme in 'includes/menu/themes' must be called.
Note: The 'includes/menu' location also includes a 'menu_config.php' file which allows you to edit which menu entries are shown.
Copy one of the folders inside 'includes/menu/themes', rename it to match your theme's name and use it as a template. You will now be able to select the second part of your theme from 'Preferences' > 'Themes' > 'Menu theme'.
Only put CSS relevant to the calendar etc. in the theme's style sheet. If you have global styling or styling for the header & footer, this should go in the 'Custom script/stylesheet'. This is because there are parts of WebCalendar that, unfortunately, do not use the theme's style sheet (such as the login page).
Note: you will need to use the '! important' CSS override in your menu theme.
[edit] Custom header & footer
To add a header & footer to WebCalendar go to 'System Settings' > 'Site customisation'. Then you will have the option to enter code for the header 'trailer' (footer) and CSS to style them. You could use a menu theme's style sheet to to style them if you like.
There is an option to 'Allow external file for header/script/trailer'. If this is set to 'Yes' you can place a file location, relative to WebCalendar's root dir, inside the custom header/trailer/css entry rather than code. This makes it possible to theme WebCalendar in a 'neater' way.
[edit] Custom CSS
Go to the 'System Settings', under the 'Settings' tab you will see a box labeled 'Site customization'. Make sure 'Custom script/stylesheet' = 'Yes' then click on 'Edit' to begin styling WebCalendar.
This is where you need to enter any CSS specific to your header, footer or pages of WebCalendar that do not call on your theme CSS.
By default WebCalendar adds your CSS to the header so begin and end like this:
<style type="text/css"> ... ... ... </style>
Tip: The Firefox add on 'Firebug' can be very useful here!
Note: There is an option to 'Allow external file for script'. If this is set to 'Yes' you can place a file location, relative to WebCalendar's root dir, inside the custom header/trailer/css entry rather than code. This makes it possible to theme WebCalendar in a 'neater' way.
