PDA

View Full Version : 5 Themes - Light Colors (gray, brown, green, orange, wine)



syscobra
1 Jan 2009, 3:04 PM
Hello there!

In this holidays i had time to work with some themes for Ext to help myself and the community.
I started with a way to change the themes more easy so i separated the colors from the main css file. (i hate to look in ext-all.css for changing colors, so i separated them for easy change and no errors or mistake when changing them or missing some color in the work)
So i made 2 files:
ext-all-no-colors.css
ext-colors.css
Download these files (http://www.ideashs.com/extthemes/ext-colors-separated.zip)

Then i made a list of colors in ext-colors.css (default original colors), and proceed to change them.

To make the themes i only used fireworks to change the colors of all images to the one that i wanted, then i made a png with all the colors used in the default theme and applied the same changes i made to the images to these colors, then copied the resultant colors and puff done. This means i can make any color theme like the original only applying effects to the images and the image of colors i made for change.

To use you have to include the 2 css files in the css directory, for example:

<link rel="stylesheet" type="text/css" href="path-to/resources/css/xtheme-light-orange.css" />
<link rel="stylesheet" type="text/css" href="path-to/resources/css/xtheme-light-orange-colors.css" />

YOU DONT NEED TO INCLUDE "ext-all.css" the theme files has all the css of that file.

But maybe you already knew it :))

Well enough talk, here are the themes.

Ext Theme Gray:
I made this theme because when you use the default gray theme from the ext package you obtain the blue colors on it (the default original colors) in some parts so i changed all the way in and then its gray without the blue!.
http://www.ideashs.com/extthemes/xtheme-gray.jpg


Download Ext Theme Gray (http://www.ideashs.com/extthemes/xtheme-gray.zip)

Ext Theme Light Brown:
http://www.ideashs.com/extthemes/xtheme-light-brown.jpg



Download Ext Theme Light Brown (http://www.ideashs.com/extthemes/xtheme-light-brown.zip)

Ext Theme Light Green:
http://www.ideashs.com/extthemes/xtheme-light-green.jpg


Download Ext Theme Light Green (http://www.ideashs.com/extthemes/xtheme-light-green.zip)

Ext Theme Light Orange:
http://www.ideashs.com/extthemes/xtheme-light-orange.jpg


Download Ext Theme Light Orange (http://www.ideashs.com/extthemes/xtheme-light-orange.zip)

Ext Theme Light Wine:
http://www.ideashs.com/extthemes/xtheme-light-wine.jpg


Download Ext Theme Light Wine (http://www.ideashs.com/extthemes/xtheme-light-wine.zip)

These themes are for free to use in any commercial or other project, and donations are always welcome(you can buy me a beer or two lol)

Donate with PayPal (https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=2204262)

Contact me if you have any question - request.


JUST UPDATED ALL THE FILES FOR ERRORS FOUND (like 5 errors) REDOWNLOAD AGAIN (01/02/2009)

Have Phun!B)

zhw511006
1 Jan 2009, 7:22 PM
Thank you for sharing!

Good Work!

but the backcolor is blue When i drag the window !

maybe some change ;)

galdaka
2 Jan 2009, 1:36 AM
Hi,

1) Not work without ext-all.css (Or wrong work).

2) Many bug

syscobra
2 Jan 2009, 5:48 AM
Thank you for sharing!

Good Work!

but the backcolor is blue When i drag the window !

maybe some change ;)
Hey Thanks, I can't find why the window ghost is blue. I am looking into it. I will release an small fix i found when looking into the examples.
[QUOTE=galdaka;268429]Hi,

1) Not work without ext-all.css (Or wrong work).

2) Many bug

galdaka
2 Jan 2009, 6:43 AM
Sorry. :">

I

syscobra
2 Jan 2009, 7:21 AM
Just updated some litle errors in the themes.
Download again please.

Light Red theme is like pink theme :D, i will try, i am making some dark ones right know, stay close

syscobra
2 Jan 2009, 7:28 AM
PD: All in one file for dinamic style change.

You can always copy the contents of colors in the theme file so you obtain one file.

Not colorized folder images in gray theme (View your accordion example).

You can copy the image file from the tree directory of default to change that image, its easy, if you don't like any image just copy the one from default and change it yourself with an image editor.

I will try to post a tutorial but i think i have explained the steps with the post.

Thanks

mystix
2 Jan 2009, 7:45 AM
one question -- did u manually separate the colours out, or did you use a regex / script?

if it's the latter i'm interested in the regex / script you used.

syscobra
2 Jan 2009, 8:09 AM
one question -- did u manually separate the colours out, or did you use a regex / script?

if it's the latter i'm interested in the regex / script you used.

I have done it Manually, didn't know anything about regex script, I just used netbeans find/replace to change all the colors, but it would be nice to have an script to change it. i will look in the net to have such thing, (the find/replace is the real work in the change of files, because all the other work is too easy)

Thanks

zhw511006
2 Jan 2009, 9:22 PM
Download again! I work well for me !

Thank you !

galdaka
6 Jan 2009, 9:43 AM
I

syscobra
6 Jan 2009, 10:48 AM
[QUOTE=galdaka;269799]I

galdaka
6 Jan 2009, 11:49 AM
Thanks for your fast reply!! ;)

But I use Ext.ux.ThemeCycleButton: http://extjs.com/forum/showthread.php?t=34014

And I pass them as parameter the head when I change theme.

With my theme "gray-extend" I not have any problem :-?

Is posible dark blue theme :)

Thanks in advance,

syscobra
7 Jan 2009, 10:07 AM
Thanks for your fast reply!! ;)

But I use Ext.ux.ThemeCycleButton: http://extjs.com/forum/showthread.php?t=34014

And I pass them as parameter the head when I change theme.

With my theme "gray-extend" I not have any problem :-?

Is posible dark blue theme :)

Thanks in advance,

Ok you have 2 ways to change it, you can open the xtheme-{name of theme}.css files and change the value !important in the line 1044( in the case of the light green theme file you made, the code is this:

.x-tab-panel-body, .x-editor .x-form-check-wrap, .x-editor .x-form-radio-wrap, .x-resizable-handle, .x-resizable-overlay, .x-props-grid .x-grid3-body .x-grid3-td-name, .x-date-picker, .x-date-mp, .x-menu-plain, .x-panel-body, .x-html-editor-wrap {
background:#FFFFFF none repeat scroll 0% 0% !important;
}

Or the other way when you pass the new background

Ext.util.CSS.updateRule('.header .x-panel-body', 'background', 'url(resources/img/cabecera-Gris.jpg) !important');
you add the !important to the css rule, i don't know if you can pass that way the !important throught that function but always you can try if its ok then its a better way than the first one.

The dark themes are comming!, but first i will change this ones to make them one file only.
(i have made the black theme but still need some improvements)

Good luck!

galdaka
7 Jan 2009, 1:35 PM
I try with two solutions and not work :s

updateRule with "important" is not supported.

And I change the brown theme and I add "!important" with same results.


Is there any specific wrong order in your themes. With others themes work without errors!! :-?

Thanks in advance,

syscobra
7 Jan 2009, 5:52 PM
I try with two solutions and not work :s

updateRule with "important" is not supported.

And I change the brown theme and I add "!important" with same results.


Is there any specific wrong order in your themes. With others themes work without errors!! :-?

Thanks in advance,

Sorry is not ADD its REMOVE that sentence, i tryed with the firebug and when i erase the !important on that line the graphics appear inmediately, i am changing the themes right now, if you want wait until i change them in one file or you can try again.

The !important you have to eliminate is the one at the line 1044 i said in the brown theme.

Hope that helps you getting the problem out, or you can add all the files of your project in a rar and send them to my email i will check it on my machine. (jjrincon@gmail.com)

galdaka
7 Jan 2009, 11:55 PM
Hi,

I try to remove "!important" sentence and there is my results:

1) In IE the head never appears.

2) In FF2 only appears with gray and orange themes. :-?

I will wait for a new version of your themes ;)

Thanks again,

galdaka
8 Jan 2009, 1:44 PM
Bump!! All working, view www.jadacosta.es (http://www.jadacosta.es)

I wait your modification of this themes and the new dark themes!! :)

Awesome results!! =D>

Thanks in advance,

syscobra
8 Jan 2009, 7:27 PM
Bump!! All working, view www.jadacosta.es (http://www.jadacosta.es)

I wait your modification of this themes and the new dark themes!! :)

Awesome results!! =D>

Thanks in advance,

Hey Jos

galdaka
8 Jan 2009, 11:39 PM
Hey,

Thanks for the suggestions.

My page is only for test pourposes, but in future I will make all of theses changes.

Would be great change themeCyclebutton by themeSlider and generate automaticaly themes on the fly.


I hope yoor avances.

Thanks in advance,

tobiu
9 Jan 2009, 7:53 AM
hi syscobra,

i have not tested your themes yet, just read this topic.
the screens look promising, but the idea to directly implement them into the ext-all.css has a big disadvantage:

when having seperated theme files, it is possible to change themes without reloading the site (just the theme-file). so, if there is a big overhead for "items" that are not changed, the performance will go down (loading time increases).


good job until now, tobiu

syscobra
9 Jan 2009, 9:35 AM
hi syscobra,

i have not tested your themes yet, just read this topic.
the screens look promising, but the idea to directly implement them into the ext-all.css has a big disadvantage:

when having seperated theme files, it is possible to change themes without reloading the site (just the theme-file). so, if there is a big overhead for "items" that are not changed, the performance will go down (loading time increases).


good job until now, tobiu

Hey tobiu.

Yes, i then notices that some people want to change the themes on the fly (galdaka and others). When i first make these themes i made them for an application i am developing and i have the user select the theme they want and only charge that theme when user login. So for me changing directly the ext-all.css was the real job, but now i am making the new ones and i will have all these things in mind. (the speed, and the change on the fly stuff)

Stay close for them.

Galdaka - it cant be a slider to change the colors because the graphics you have to regenerate them and its very dificult to do it on php or javascript, i am only making the scripts to make the themes more easy so i can have lots of themes with lots of colors, but i cant generate it on the fly with an slider :D, that would be fantastic (i thinked about that but i realize its almost imposible, well with the actual theme, if we make a theme without graphics it would be possible)

Thanks and see ya

galdaka
9 Jan 2009, 11:39 AM
@syscobra: OK. I not remenber the images. :(. But no problem, I will play with your future themes anyway.

I think that the weight of each theme can be reduced deleting some images like tree + and - images (In my opinion theses images should not be colorized).

@tobiu: All in one is implemented in my web: www.jadacosta.es (http://www.jadacosta.es)


Greetings,

jay@moduscreate.com
9 Jan 2009, 12:58 PM
I work well for me !

god, i would hope so ;)

donssmith
9 Jan 2009, 8:17 PM
@galdaka

I tried your site (FF3 WinXP SP3), but I'm getting the following error:

this.menu.items.get is not a function ext-all-debug.js (line 20199)

item = this.menu.items.get(item);

galdaka
10 Jan 2009, 7:45 AM
@galdaka

I tried your site (FF3 WinXP SP3), but I'm getting the following error:

this.menu.items.get is not a function ext-all-debug.js (line 20199)

item = this.menu.items.get(item);

Thanks, Solved!

cobnet
11 Jan 2009, 4:08 PM
Thanks syscobra, testing your latest download at:

http://qwikioffice.com/forum/viewtopic.php?f=2&t=79 a web desktop ver 1.0 Alpha testing.

I like the seperation of the images and the colors in the files, nice work. I can see how someone could easily add a new css file with only the changes needed for their particular purpose.

Looking forward to your updates!

B)

Jachnicky
12 Jan 2009, 1:35 AM
hi,

guys,how about integrate the two css file into one css file?

galdaka
12 Jan 2009, 11:57 AM
Hi,

small bug. Remove extra border in tollbars. View image.

Live example in www.jadacosta.es (http://www.jadacosta.es)

Greetings,

galdaka
16 Jan 2009, 5:03 AM
Any changes?

jackyx
23 Mar 2009, 10:40 PM
Thank you for your share´╝îI find the Theme long time :)

galdaka
24 Mar 2009, 7:40 AM
Hi,

The themes are not updted for 2.2.1 and have many bugs.

Greetings,

galdaka
24 Mar 2009, 7:40 AM
Hi,

The theme are not updted for 2.2.1 and have many bugs.

Greetings,

syscobra
9 Apr 2009, 1:44 PM
Sorry, I wasn't looking at this themes because i am waiting the 3.0 to come out and make the theme files for that.

Because i am from Venezuela and i can't buy enough US$ (we have a limit of 400 per year :(( ) i can't buy the premium access to the SVN of ExtJS.

So i decided not to work more in this until the 3.0 launch (everybody will start using the 3.0 and maybe the 2.x.x will be forgotten in some time).

Well its about next week the launch is spected until the Conference is over (damn how i would love to go there but i cant).

So expect me to make the changes to the new version cause i read in another post the css files would be in better coordination for changes on them. (Maybe they are working on some cool new themes for that too)

So for me is better to wait.

rockerox
3 Jul 2009, 6:38 AM
/extjs/resources/images/light-wine/tree/elbow-minus.gif

elkidos
25 Jul 2009, 7:31 AM
Hi syscobra,

Do you plan to update the light themes for 3.0 soon? I find the orange theme particulary attractive. :)

Thanks and nice work! ~o)

andreiastra
4 Mar 2010, 2:39 AM
Hi,

I would also like to know if you plan to update the thenes for 3.0. In particular, I can see that the image for the button changed from images\default\button\btn-sprite.gif to images\default\button\btn.gif and it seems that the two images are in different formats.

Do you know what the formats are? How do you edit the images?

Thank you,

Andrei

jefhendrickson
26 Aug 2010, 6:43 AM
I too have been heading in this direction. What I can't figure out is why the xtheme-blue.css changes that I make don't override the ext-all.css settings. I've even pulled out the color parts and when I do, everything breaks. Is there a trick to getting the newer themed colors, etc to override the ext-all settings?

Tks,
Jeff