Here is a basic guide to creating a custom theme for your ECR calendar.
To start creating a theme for your calendar go to http://stylebuilder.telerik.com/
Select “New Skin”
Enter your new skin name. (letters, numbers and underscore only)
Select “Base Skin” from the drop down. If you want a clean theme like Google Calendar start with the “Simple” skin
Select “Scheduler” from the “skin Control” options
Click “Create” at the bottom of the page
Most of your styling will be done on the “Fine-tune” tab at the top and “Scheduler” on the left.
There are series of sub tabs that allow you to change certain color and layout elements for Day, Week, and Month
Make sure to click “Save” on the upper right corner of the page so you don’t lose your work.
Once you have finished, click “Download” on the upper right corner of the page.
This will download a zip file containing your new Theme.
Save the Zip file to you desktop in a working folder.
Unzip the file. This will contain several directories and css files for your Theme.
THIS IS IMPORTANT: Copy the “images” folder from the “default” Theme located on your DNN install: /DesktopModules/EventsCalendar/Themes/default
Copy this “images” folder into the root folder where you unzipped your theme.
You should now have 5 folders in the Theme folder: Calendar, ComboBox, images (copied from “default”), Input, and Scheduler
Next you need to copy skin.default.css and default.css files into the root of your Theme folder. These file are located in the root of the “default” folder: /DesktopModules/EventsCalendar/Themes/default
Rename the two copied css files to [YOURTHEMENAME].css and skin.[YOURTHEMENAME].css
To be safe make sure to use the exact same characters as your Theme name.
Your theme folder should now contain 28 files across 5 folders.
Copy this entire THEME folder back into /DesktopModules/EventsCalendar/Themes/ of your DNN install.
The file structure should look like this /DesktopModules/EventsCalendar/Themes/ [YOURTHEMENAME] Your theme folder should contain some css files and the following folders: Calendar, ComboBox, images (copied from default), Input, and Scheduler
Login to DNN
Go to your calendar page
Go to your calendar module
Hover over “Manage” of the calendar module
Select “View Options”
You should now be at the “View Options” page
Scroll down and look for “Theme Settings”
Click the plus (+) sign to Expand “Theme Settings”
Click the “Select your theme:” drop down and your new theme should appear in the list
Select your theme
Scroll to the bottom of the page
Click “Update”
VOILA! You should now have a new theme!
You can further tweak your theme by using Firebug and a decent text editor (Like Notepad++) to style even more to taste.
If you want to dig around, take a look at the files in the “images” folder. This is where the ECR specific images are stored. If you want some different colored images you can try copying images from the other Themes like “red, yellow, purple or green” Or you can edit the image directly in Photoshop.
You will also some images in Calendar, ComboBox, Input, and Scheduler that are used for your theme. These are delicate so be careful editing them.
Good Luck! |