Page 1 of 1

Gray Skin for Extensible Calendar Pro

PostPosted: Thu Jan 12, 2012 6:03 am
by gabe.sidler
Hi,
Since my calendar application is integrated into many different existing web sites, I had a need to support a calendar look that is very plain and goes with many other colors. The ExtJS framework already supports a gray skin but the Ext Calendar does not so far. Therefore, I created a small extension to Ext Calendar that adds support for the gray skin.

Here a screen shot of the sample application at http://ext.ensible.com/deploy/dev/examp ... t-app.html with a gray skinning:

Image

Maybe some of you find this useful as well. Note, that this is for Extensible 1.5.0 only! The skinning is achived with an additional small style sheet that overwrites some of the existing styling, plus three images. These are attached below.

a) gray-skin.css and gray-skin-min.css
Save these files to directory resources/css/ inside your copy of the Extensible distribution.

b) page-next.gif, page-prev.gif, toolbar-bg.gif
Save these images to a directory resources/images/gray-theme/ inside your copy of the Extensible distribution.

To enable the gray skin you need to do the following:

1) Enable the gray skin for the ExtJS framework: In your application's html file, replace
<link rel="stylesheet" type="text/css" href="<EXTJS Root Dir>/resources/css/ext-all.css" />
by
<link rel="stylesheet" type="text/css" href="<EXTJS Root Dir>/resources/css/ext-all-gray.css" />

2) Load the style sheet for the gray skin: In your application's html file, add the following to the head section:
<link rel="stylesheet" type="text/css" href="<Extensible Root Dir>/resources/css/gray-skin.css" />
This link tag must be inserted after the link tag that loads the extensible-all.css style sheet.

I hope some of you find it useful.
Gabe

Re: Gray Skin for Extensible Calendar Pro

PostPosted: Thu Jan 12, 2012 9:54 am
by brian.moeskau
Awesome Gabe, thanks! It's been on my list to add support for the official Ext themes (Slate and Accessibility as well, and soon Neptune...), just haven't gotten around to it yet. This should be really helpful to others.

Re: Gray Skin for Extensible Calendar Pro

PostPosted: Tue Jan 24, 2012 6:17 am
by Farish
Thanks Gabe! This will be really helpful. I was just trying themes with Ext JS and realized that I couldn't theme the calendar.

Regards,
Farish