PDA

View Full Version : Theme Slickness [UPDATED 2008-03-05]



madrabaz
29 Feb 2008, 11:20 AM
Hi everyone;

I've created a new theme based on Theme Black and a beautiful gnome theme SlicknesS.

I hope, tou like it,
I am waiting your comments to improve it.
http://img507.imageshack.us/img507/6084/slicknesstheme5wu8.png
inspired by
Gnome SlicknesS Theme (http://www.gnome-look.org/content/show.php/SlicknesS?content=71993) - Robert Mets

J.C. Bize
29 Feb 2008, 1:16 PM
Looks awesome, thanks for sharing!

Cheers,
JC

garraS
29 Feb 2008, 1:56 PM
AWESOME!

Good work!

Thanks for sharing!

garraS

franckxx
29 Feb 2008, 3:18 PM
[B]A

sean
1 Mar 2008, 4:02 PM
gorgeous. i'm a sucker for black themes. bravo.

mjhaston
2 Mar 2008, 6:51 AM
In the words of one great thinker ... "that's hot!"

Thanks for the hard work. It looks great.

wm003
3 Mar 2008, 4:59 AM
Very nice. Thank you :)

madrabaz
5 Mar 2008, 1:55 AM
UPDATE - look first post for details


PS : do you plan to do "tools" buttons ? ---> help, collapse, gear, etc...

I hope you like ;)

wm003
5 Mar 2008, 2:48 AM
i recognized, that all of your (really wonderful! =P~ ) themes lack support of CycleButtons

- Color of currently selected items has not been adjusted (unreadable)
- triangle-Bitmap for dropdown Button is still black (a bit odd on a black theme...:) this should be updated aswell as you did for the "normal" dropdown/menu Buttons

see attachment for visual explanation

Another "wish" :D:

My Grid Headers are often heigher than usual, thus the default white background color is displayed above the new themed background imaga for gridheaders. If you would change this default backgroundcolor to the same as the upper color of your gridheader-gfx it will look as expected.

madrabaz
5 Mar 2008, 4:00 AM
i recognized, that all of your (really wonderful! =P~ ) themes lack support of CycleButtons

- Color of currently selected items has not been adjusted (unreadable)
- triangle-Bitmap for dropdown Button is still black (a bit odd on a black theme...:) this should be updated aswell as you did for the "normal" dropdown/menu Buttons

see attachment for visual explanation

Another "wish" :D:

My Grid Headers are often heigher than usual, thus the default white background color is displayed above the new themed background imaga for gridheaders. If you would change this default backgroundcolor to the same as the upper color of your gridheader-gfx it will look as expected.

Thanks for your feed back;

I fixed the cyclebutton and grid header...(I did not do anything for CycleButton arrow)

wm003
5 Mar 2008, 4:17 AM
I fixed the cyclebutton and grid header...(I did not do anything for CycleButton arrow)

\:D/ Wonderful! \:D/
Thank you for the fast fix ! Looks much better now! Have you changed your other themes aswell? (because all of them have the same "issue" :D

Please take a look at the attached screenshot. The Cyclebutton menu is very wide, and the background image for the menu does not seem to be wide enough to keep all area black. You should save this background picture with 500px width (instead of 250 by default) that should fit for most menu entries.

btw, why did you leave the cyclebutton arrow black? (no time left atm or some other reason?)

madrabaz
5 Mar 2008, 5:33 AM
I'll fix the other themes at this weekend.



Please take a look at the attached screenshot. The Cyclebutton menu is very wide, and the background image for the menu does not seem to be wide enough to keep all area black. You should save this background picture with 500px width (instead of 250 by default) that should fit for most menu entries.
I'll manage something for you...



btw, why did you leave the cyclebutton arrow black? (no time left atm or some other reason?)

If you look my prev. post, you can see CycleButton arrow is white so I don't know why is it black in your page.

wm003
5 Mar 2008, 6:22 AM
I'll fix the other themes at this weekend.

I'll manage something for you...


Thanks a lot!:):)




If you look my prev. post, you can see CycleButton arrow is white so I don't know why is it black in your page.

Mmh, are you sure, your screenshot shows a cyclebutton? (not just a menu?) look closely beside the little arrow to the left when you hover over the button with the mouse. When using cyclebuttons, there appears a little splitter between the button text/icon and the arrow. AFAIK on Cyclebuttons the Buttontext is either hidden or the same as the menuoptions. On your screenshot the button text is different (assuming this is just a normal menubutton and not a cyclebutton) It seems, these are different images for the arrow...)

try this code to reproduce:

btn = new Ext.CycleButton({

showText:true,
items: [
{
text: 'ONE',
checked:true
},

{
text: 'TWO'
},

{
text: 'THREE'
},
{
text: 'FOUR'
},
{
text: 'FIVE'
}]
});


:)

madrabaz
5 Mar 2008, 7:42 AM
It is a CycleButton but it has a iconCls prop., error ocurres if you use iconCls, anyway, I fixed it and added a long menu image

wm003
5 Mar 2008, 11:04 AM
It is a CycleButton but it has a iconCls prop., error ocurres if you use iconCls, anyway,

ahhh!/:) thanks for the tip. until now i always used cyclebuttons with iconCls

II fixed it and added a long menu image
Cool, you are my hero! Thanks a lot.:D

devnull
5 Mar 2008, 3:29 PM
bit of a bug report for forms.
at line 726 in the css:


.x-form-item-label{
color : #eee;
}

the default background color for panels (and by extension form backgrounds) is white:
ext-all.css line 644


.x-panel-body {
background:white none repeat scroll 0%;
...
}

This makes form item labels quite hard to read.

tobiu
5 Mar 2008, 4:39 PM
hi madrabaz,

i must admit, this theme is my favorite one of the themes, you created this far.
really beautiful!

i like the updated tool-icons!

just some ideas, what you could still look on:

Ext.tree.TreePanel: black folder and leave icons would be sweet.

Ext.form.FormPanel: since Panels and FormPanels have a white background-color, the almost white LabelText of FormElements (TextFields for example) are not readable.
[edit:]just seen devnull posted this one just before, should not let a window open this long^^

kind regards, tobiu

tobiu
6 Mar 2008, 7:09 AM
hi madrabaz,

another idea:



.x-grid3-row {
color: #000000;
border: 1px solid #666;
border-bottom : 1px solid #000;
}


could be changed to:



.x-grid3-row {
color: #000000;
border: 1px solid #666;
border-bottom : 1px solid #fff;
}


in your version, there is a dark-grey border around each grid-row, except the bottom-one which is black. so between each row, there is a dark grey and a black line.

please try out my attempt =)


thx, tobiu

madrabaz
6 Mar 2008, 8:14 AM
@tobiu, first version had a 'border-bottom : 1px solid #fff;' but it looked bad with special columns (number, check or expand ...)

Foggy
6 Mar 2008, 9:27 AM
Woa, nice work, i like your tabs really much ;)

timb
20 Mar 2008, 9:48 AM
Thanks for the great themes! These are all excellent.

One thing that I noticed you fixed in this theme is the .x-grid3-row-selected style. In your other themes, !important isn't included in background, so it doesn't end up overriding the selected row style background colour. This fixes it.

I just wanted to let you know, just in case you wanted to update your other themes (I have manually updated my copies).

Thanks again!
Tim

Darklight
7 Apr 2008, 1:42 AM
very nice man, my kind of color scheme :D i can probably find a use for this soon!

trancee
9 Apr 2008, 4:41 AM
Thank you very much for your work!

What background color (body) do you recommend to use with this theme?

paulovitin
7 May 2008, 10:08 AM
It could make a green theme.

joku
7 May 2008, 3:52 PM
Solid!

brikonwall
8 May 2008, 10:34 AM
I downloaded the latest Ext (which is 2.1) on 4/29/08. Then I tried to apply Slickness theme to the viewport I am working on, but it's not working. Any idea?

blademansw
12 Jun 2008, 7:23 AM
Fantastic theme

Can i suggest you add this into the css:


.x-statusbar .x-status-text{height:21px;line-height:21px;padding:0 4px;cursor:default; color:white;}
.x-statusbar .x-status-busy{padding-left:25px;background:transparent url(../images/default/grid/loading.gif) no-repeat 3px 3px;}
.x-statusbar .x-status-text-panel{border-top:1px solid #99BBE8;border-right:1px solid #fff;border-bottom:1px solid #fff;border-left:1px solid #99BBE8;padding:2px 8px 2px 5px;}

That makes the status bar text white, as the default is black you cannot read it!

Oh, and the black theme could do with it as well :-)

Legend
13 Jul 2008, 7:48 PM
Thanks a lot for the great theme... I am having some problem with the text being displayed on a panel. Could someone please help me out?

razor
14 Jul 2008, 9:46 AM
Does that wizard has its own CSS code? I think so, please dig into that.

Legend
14 Jul 2008, 10:18 AM
Thank you so much. That solved it!

jay@moduscreate.com
14 Jul 2008, 4:21 PM
why's it gotta be black? - kidding, an american joke.

ok, that said, very nice dude!

Frank
23 Sep 2008, 6:04 PM
Thank you for your theme:)

bonholigan
11 Mar 2009, 12:54 AM
I'm newbie, Who's any body help me?

If you give me one example so ... :D very good

Thanks

grahamda
21 Oct 2009, 12:52 PM
Hi,

I love this theme and use it for a number of projects. I'm eager to update to Ext 3.0 but the css structuring changes mean that this theme is not fully compatible. The main problem areas seem to be buttons (xtype: 'htmleditor' is particularly unusable) and text colors (black on black in some places). Are there any plans to update this theme to work with Ext 3.0?

Thanks :o)

georgiosleon
16 Nov 2009, 5:58 AM
/* Editor
.x-html-editor-tb .x-btn-text {
background: transparent url(../images/slickness/editor/tb-sprite.gif) no-repeat ! important;
}
*/

.x-html-editor-tb .x-btn-small .x-btn-text, .x-html-editor-tb .x-menu-item .x-menu-item-icon {
background-image: url(../images/slickness/editor/tb-sprite.gif) ;
}in xtheme-slickness.css

;)

Thanks for cool theme man





Hi,

I love this theme and use it for a number of projects. I'm eager to update to Ext 3.0 but the css structuring changes mean that this theme is not fully compatible. The main problem areas seem to be buttons (xtype: 'htmleditor' is particularly unusable) and text colors (black on black in some places). Are there any plans to update this theme to work with Ext 3.0?

Thanks :o)

mepfuso
9 Nov 2010, 9:58 AM
This thread has updates to the theme:

http://www.sencha.com/forum/showthread.php?78692-Slickness-theme-for-3.0


Still, the HTML editor shows wrong icons. So I had to replace this



/* Editor */
.x-html-editor-tb .x-btn-text {
background: transparent url(../images/slickness/editor/tb-sprite.gif) no-repeat;
}


by this



/* Editor */
.x-html-editor-tb .x-btn-text {
background-image: url(../images/slickness/editor/tb-sprite.gif) no-repeat;
}