Gray Skin for Extensible Calendar Pro

Plugins and extensions for Extensible components, usage examples, links to applications using Extensible, etc.

Gray Skin for Extensible Calendar Pro

Postby gabe.sidler » Thu Jan 12, 2012 6:03 am

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
Attachments
GraySkinForExtensibleCalendar_1-5-0.rar
(2.7 KiB) Downloaded 2191 times
User avatar
gabe.sidler
Moderator
Moderator
 
Posts: 126
Joined: Sun Sep 25, 2011 4:34 am

Re: Gray Skin for Extensible Calendar Pro

Postby brian.moeskau » Thu Jan 12, 2012 9:54 am

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.
Personal Blog: Extraneous / Twitter: @bmoeskau / Meetup: Austin Bleeding Edge Web
User avatar
brian.moeskau
Site Admin
Site Admin
 
Posts: 1344
Joined: Sat Sep 18, 2010 5:00 pm
Location: Austin, Texas

Re: Gray Skin for Extensible Calendar Pro

Postby Farish » Tue Jan 24, 2012 6:17 am

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
Farish
Premium Member
Premium Member
 
Posts: 30
Joined: Thu Jun 30, 2011 12:31 am


Return to Plugins, Examples & Extras

Who is online

Users browsing this forum: No registered users and 1 guest

cron