PDA

View Full Version : Change Global theme



mihai.s
20 Feb 2007, 11:05 PM
Hi All !

First of all , congratulations Jack on a great piece of work !

Second :lol:

you're menu example got me thinking
now that you added multiple themes
how can we change the theme of an application from a menu :?:
or is that even possible :?:

thanks and keep up the good work !

jack.slocum
20 Feb 2007, 11:12 PM
If you were to give the theme style element an ID:

<link rel="stylesheet" id="theme" href="../css/ytheme-gray.css" />

Then you can call:

Ext.util.CSS.swapStyleSheet('theme', '../css/ytheme-aero.css');

If any BasicDialogs are visible, they may not update correctly without a call to syncBodyHeight. Also, Opera appears to need a window resize in order to apply the new styles.

mihai.s
20 Feb 2007, 11:25 PM
Thanks Jack
you really are the greatest !!!!!!

it works !!!!

check this out
http://86.106.94.205/test/

PS

is there any other way i can donate :?:
cause I live in Romania and i cannot create a paypal account :(

in the mean time i'll try to help the forum
[/url]

jack.slocum
20 Feb 2007, 11:29 PM
Nice. Seeing it reminds me the toolbar is dying for a new look in the default theme!

As for contributing, if you can build any example/tutorial files that is always a huge contribution!

thejoker101
21 Feb 2007, 7:30 AM
I just wanted to chime in to say that the theme switcher does work without a hitch.

If you explicitly have a css theme in your html and then wish to remove it, and thereby revert to the default theme, you have to put an ID on your <link /> declaration.

Webnet
21 Feb 2007, 7:43 AM
You don't have to have a paypal account to donate. You can donate via a credit card using the paypal web site, it does not require an account.

thameema
22 Feb 2007, 2:42 AM
Hi Jack,

I have one menubar and a context menu in the same page. But I want to use the default theme for context menu and different custom theme for menubar menu. How do I acheive this...?

Thanks,
Thameem

thameema
22 Feb 2007, 2:56 AM
If you were to give the theme style element an ID:

<link rel="stylesheet" id="theme" href="../css/ytheme-gray.css" />

Then you can call:

Ext.util.CSS.swapStyleSheet('theme', '../css/ytheme-aero.css');

If any BasicDialogs are visible, they may not update correctly without a call to syncBodyHeight. Also, Opera appears to need a window resize in order to apply the new styles.

I don't find the 'swapStyleSheet' under the new alpha API documentation. Is it public or should i go thru the code and find out ??

Also please let me know or make a tutorial about how to use the themes as it is very important to many users. If we want to use the theme do i need to import the ext-all.css or just the theme css?

Thanks,
Thameem

bone
22 Feb 2007, 3:08 AM
dont trust the API docs yet....
the only thing you can trust right now is the actual code.... go dig !



edit: horrible spelling error

jack.slocum
22 Feb 2007, 3:45 AM
thameema,

Every example uses a different theme. If you look at the source, I'm sure you will be able to figure it out.

thameema
24 Feb 2007, 6:54 AM
Hi jack,

I like the idea of changing the global theme but here is what I would like to achieve. I have a main top menu which is using the global style and in the same page i have the left navigation with context menu. For the context menu i want to use different style. I tried putting the local style block in my jsp page and the rendering works with two different themes. But if I mouse over the context menu its taking the same theme from global. I am not sure how do I put the local style block for mouse over.

Please help me.

Thanks,
Thameem

jack.slocum
24 Feb 2007, 8:01 AM
The only way you are going to be able scope a theme to a particular element is to add class based rules to the theme file. It won't be fun, but it would work for most elements.

thameema
24 Feb 2007, 8:10 AM
I am not familiar with that class based rules..can you please explain..I just want to do for mouseover and only for the context menu ..

Thanks,
Thameem

jack.slocum
24 Feb 2007, 8:21 AM
So in the theme file there are tons of rules, here's an excerpt:



.x-dlg .x-dlg-hd-left {
background: url(../images/default/basic-dialog/hd-sprite.gif) no-repeat 0 -41px;
padding-left:3px;
margin:0;
}
.x-dlg .x-dlg-hd-right {
background: url(../images/default/basic-dialog/hd-sprite.gif) no-repeat right 0;
padding-right:3px;
}

You will need to pull out the rules you want and add them to a css file and prefix them with a class or id:



.my-dialog .x-dlg-hd-left {
background: url(../images/default/basic-dialog/hd-sprite.gif) no-repeat 0 -41px;
padding-left:3px;
margin:0;
}
.my-dialog .x-dlg-hd-right {
background: url(../images/default/basic-dialog/hd-sprite.gif) no-repeat right 0;
padding-right:3px;
}

And then add that class (or id) to your component. Like I said, it won't be fun. :(

thameema
24 Feb 2007, 8:44 AM
Thanks for your reply. Here is what I tried but it didn't work.

I have a menu which has menuitem with cls: spmi-conmenu-item

.spmi-conmenu-item {
cursor:pointer;
display:block;
line-height:14px;
outline-color:invert;
outline-style:none;
outline-width:0pt;
padding:3px 21px 3px 3px;
text-decoration:none;
white-space:nowrap;
color:#000000;
}

.spmi-conmenu-item .x-menu-item-active {
background:#09249F none repeat scroll 0%;
border:1px solid #FFFFFF;
color:#FFFFFF;
font-weight:bold;
font-family:verdana,Tahoma,Times New Roman;
padding:0pt;
}

If I mouse over the menu item it suppose to bring the style from second style block but its failing to do. Am I missing something??

jack.slocum
24 Feb 2007, 5:41 PM
My guess would be both styles are being applied to the same element so the selector doesn't match. Can you look in FireBug and see if that's the case?

thameema
25 Feb 2007, 3:40 AM
Yes. There are three different style blocks with same name applied to the element. But my guess would be the last applied style should take effect overriding the other two style blocks. Thats the reason I wrote those two style blocks inside the jsp instead of writing it in separate css file.

Thanks,
Thameem

waterlowa
14 Mar 2007, 3:49 PM
The themes seem to work mostly, with little adjustment here and there.

The only thing that the themes don't apply is buttons - they don't register any theme stylesheets and just use ext-all.css only. Here's the little code for the button:



var button = new Ext.Button("myButton", {text:'Click Me', handler: this.handleClick, scope: this, tooltip:'Click Me'});


The tooltip's not working either.

ketty
10 Feb 2010, 5:04 AM
I am using ext-3.0.3
I have created different theme from following URL
1. http://extbuilder.dynalias.com/springapp/mainpage.htm
2. http://playground.ideashs.com/themescolor/
Both the theme creator create 2 directory in theme images & css. I have copied content of these new theme in images & css directory in ext-3.0\resources\css & ext-3.0\resources\images.

Following are theme files
-theme css=xtheme-red.css, image folder =images/red/*
-theme css=xtheme-green.css, image folder =images/green/*


I have added link tag for theme css like following in my code.
<link rel="stylesheet" id= 'ext-theme' href="ext-3.0/resources/css/xtheme-red.css" />


I have grid on page. When I hardcode link tag it works perfectly & theme applies properly.
But When i try to change theme using javascrip it do not get applied, grid theme reset to default sky blue theme. link element ext-theme gets deleted from dom. Following is the js code that I use to change the theme.
Ext.util.CSS.swapStyleSheet('ext-theme', '../css/xtheme-red.css');
I have also checked with absolute path of css.

Would you please guide me to solve the problem?
Thanks

Boxcopter
12 Feb 2010, 12:29 PM
I am using ext-3.0.3
I have created different theme from following URL
1. http://extbuilder.dynalias.com/springapp/mainpage.htm
2. http://playground.ideashs.com/themescolor/
Both the theme creator create 2 directory in theme images & css. I have copied content of these new theme in images & css directory in ext-3.0\resources\css & ext-3.0\resources\images.

Following are theme files
-theme css=xtheme-red.css, image folder =images/red/*
-theme css=xtheme-green.css, image folder =images/green/*


I have added link tag for theme css like following in my code.
<link rel="stylesheet" id= 'ext-theme' href="ext-3.0/resources/css/xtheme-red.css" />


I have grid on page. When I hardcode link tag it works perfectly & theme applies properly.
But When i try to change theme using javascrip it do not get applied, grid theme reset to default sky blue theme. link element ext-theme gets deleted from dom. Following is the js code that I use to change the theme.
Ext.util.CSS.swapStyleSheet('ext-theme', '../css/xtheme-red.css');
I have also checked with absolute path of css.

Would you please guide me to solve the problem?
Thanks

Same problem. Using 3.1 js.

I have tried several different implimentations including blatantly using the code on the ExtJS 3.0 Color Theme Changer site. with no effect. Not sure if calling is causing the issue but all the examples I have seen have that included. Totally lost. Will post an answer if I find it myself.

Fixed: Path issue. CSS was actually moved by a coworker without notice on the last SVN update. Not an EXT issue. The function works great! Thanks.