PDA

View Full Version : 3 new themes: indigo, midnight and silverCherry



elyxr
13 Feb 2008, 12:05 PM
Well, since this is my first post, I wanted to make it count. Also, this is my first post, so, you've been warned ;)

Actually, I really appreciate this library, and I'm probably going to have a lot of questions soon. For now, though, I've got three new 2.0 themes for you all. I may have missed a few little nuances, I'm sure.

I've gotten the zips as tightened up as they will go, but unfortunately, each theme zipped is about 156k.

Please refer to the third post for download.

jack.slocum
13 Feb 2008, 12:34 PM
The settings have been updated. 100k was too small anyway. :)

elyxr
13 Feb 2008, 12:43 PM
Awesome. Here they are. Hope someone can put these to use!

Please note that the original silverCherry has been updated.
If you downloaded this file previously, please update. Current version = rc1.1

shimaaa
14 Feb 2008, 6:59 AM
hOW CAN I USE IT

THANKS.............

elyxr
14 Feb 2008, 7:15 AM
If you don't already have Ext 2.0, you will need to download it, and unpack it to a directory within your web project.

Within the \ext\ folder, you will have the following paths:
\ext\resources\css\
\ext\resources\images\
Take a look at the two folders, and what they contain.

Download and unzip one of the xtheme attachments from my previous post. Each zip has the following basic structure:
\%name%\

\css\
\images\
\%name%\



The structure of the zip was made to mirror the structure within the resources directory. The css file in the zip needs to go to \ext\resources\css\
and the folder within \images\ needs to move into \ext\resources\images\
You should be able to extract the zip directly to the \ext\resources\ folder.

The official instructions, which I just found, and wish I had before ^^^
Installation

1. Download xtheme-silverCherry.zip.
2. Drop the contents of the zip file into your extjs/resources folder
3. In your HTML page, add a link to xtheme-silverCherry.css after ext-all.css:


<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="resources/css/xtheme-silverCherry.css" />


hth

chemist458
14 Feb 2008, 8:01 AM
Nice work dude,
Really smart and corporate, but good for almost any occasion as well ;)
George

Allan
14 Feb 2008, 9:13 AM
Hi,

lest anyone get slightly confused by these instructions:



The official instructions, which I just found, and wish I had before ^^^
Installation

1. Download xtheme-silverCherry.zip.
2. Drop the contents of the zip file into your extjs/resources folder
3. In your HTML page, add a link to xtheme-silverCherry.css after ext-all.css:


<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="resources/css/xtheme-silverCherry.css" />




Step 2 means 'move the contents of the zip file to the correct locations within the resources directly, as described further up in the original post. Not, as I originally interpreted it as 'put the contents of the zip file in the resources folder and do nothing else'! :">

Allan

DigitalSkyline
14 Feb 2008, 9:41 AM
+1 for silverCherry!

elyxr
14 Feb 2008, 10:10 AM
@allan :D

@digitalSkyline
Thanks! I was really happy with that one too. You could really easily do a photoshop hue batch on the images and end up with just about anything.

mjhaston
14 Feb 2008, 10:14 AM
+1 for silverCherry!


I'm digging the silverCheery as well, but I'm seeing more of the standard blue-gray in it than I thought I would. Not sure if it's me or not.

elyxr
14 Feb 2008, 10:27 AM
yikes. I ran it just now against the default grid/grouping.html and it looked horrible. I'll have an update in a bit.

elyxr
14 Feb 2008, 10:40 AM
I'm digging the silverCheery as well, but I'm seeing more of the standard blue-gray in it than I thought I would. Not sure if it's me or not.

good catch, not sure how that snuck through, but as I said, I'm sure i missed something. This had no QA. :s

here's a quick and dirty at lines 529-530:


.x-grid-group-hd{border-bottom:2px solid #d21313;color: #d21313 !important;cursor:pointer;padding-top:6px;}
.x-grid-group-hd div{background:transparent url(../images/silverCherry/grid_group-expand-sprite.gif) no-repeat 3px -47px;padding:4px 4px 4px 17px;color:#990000;font:bold 11px tahoma,arial,helvetica,sans-serif;}


I see an image that needs to be fixed too, but that will have to be later this aft.

elyxr
14 Feb 2008, 2:21 PM
I'm digging the silverCheery as well, but I'm seeing more of the standard blue-gray in it than I thought I would. Not sure if it's me or not.

Thank you for the catch. Too bad we don't have a repository for these...
I've done a full update, details below. Please refer to the third post for the zips.

The current beta version has not been thru any QA other than developer unit-testing.

Anyhow, the original silverCherry was based on the default gray theme, and did not include all styles and images. I have updated the theme as a full replacement for the default theme (ext-all.css).

Because im a noob, I'm not sure if it's a _fantastic_ idea to use xtheme-silverCherry.css as standalone, considering that point releases to the build may introduce styles that are not supported. I'd love to hear some thoughts on that.

Also, I have the folders in this theme structured differently than the default. I have maintained all of the original folders, but moved all of the files up to the images root for easier manipulation. Each original folder has a changelog so that the original structure could be restored, if so desired.

I have also collected all of the images that use the red of this theme and placed them in a folder called /masters. These are the only images that would absolutely _need_ to be modified to port this theme to a different color scheme.

mjhaston
14 Feb 2008, 5:04 PM
Love the changes. Looks much better.

I'm assuming this is probably just the difference between the Blue and Gray theme base, but in my column options I don't see the little check boxes for some options that I am used to.

Not nit-picking at all, just pointing it out in case it's supposed to be there. This silverCherry really pops! Thanks again for this contribution.

I'm using the theme like this:


<link rel="stylesheet" type="text/css" href="/ajax/ext2/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/ajax/ext2/resources/css/xtheme-silverCherry.css" />

elyxr
14 Feb 2008, 5:11 PM
nit pick your head off! If you're willing to QA it, I'm willing to keep goin!

I looked at the screen cap you sent, and sure enough, there's nothin there! But...since i'm so new to this, you think you could give me an example of the checkboxes in action? I'm not sure i know what to look for :D

update: nm I think i can figure it out.

elyxr
14 Feb 2008, 5:19 PM
Thanks for the catch!
Updated: pull down the latest zip in the third post, or mass find/replace the css:
changed: /silverCherry/menu/
to: /silverCherry/menu_

mjhaston
14 Feb 2008, 5:46 PM
Looks great. Thanks for all your hard work. This is sharp!

wm003
17 Feb 2008, 12:14 AM
Very nice ! Thanks for sharing :)

devnull
18 Feb 2008, 3:23 PM
Always love to see new themes, thanks :)
one small issue though, the image button_btn-arrow.gif for indigo and midnight has a nice bright green background, which I am guessing is supposed to be transparent. I "borrowed" one from another theme and it appears to work ok.

elyxr
19 Feb 2008, 12:17 PM
thanks for pointing that out... I'm glad you were able to come up with a workaround.

I think I see a couple of other little issues, mainly with the inheritance from ext-all.css, so I may end up rebuilding those as well.

tobiu
4 Mar 2008, 9:30 AM
hi!

really a good job, along with slate and slickness the silvercherry-theme belongs to my personal top3 =)

i have 2 little ideas to improve it:

1) the colour, when you click on a tree node is almost like the background-colour, so the active element is almost unnoticed.

i changed
.x-tree-node .x-tree-selected{background-color:#f5f5f5;}
to
.x-tree-node .x-tree-selected{background-color:#DFE8F6;}

which is atm the active colour of a grid row as well. this brings me to point2:

2) there are two entries for the active grid row:

line 368
.x-grid3-row-selected{background:#f5f5f5!important;border:1px dotted #e8e8e8;}

line 1345
.x-grid3-row-selected{background:#DFE8F6!important;border:1px dotted #a3bae9;}

which lets number2 be the active one. line 368 would be too decent imho.

if you don't think, blue fits the theme, maybe just a red border, or red bgcolor with white text?


kind regards and good job, tobiu

CraigTheCoder
28 Aug 2008, 12:31 PM
These files all seem to be badly corrupted. I am unable to open any of the 3 zipped themes using WinZip. Even a zip file recovery tool marks them as corrupt. I have tried downloading again multiple times and tried unarchiving them on multiple machines.

Anyone else had trouble with these or suggestions on how to successfully download?

Thanks.

-craig

mjlecomte
28 Aug 2008, 3:15 PM
These files all seem to be badly corrupted. I am unable to open any of the 3 zipped themes using WinZip. Even a zip file recovery tool marks them as corrupt. I have tried downloading again multiple times and tried unarchiving them on multiple machines.

Anyone else had trouble with these or suggestions on how to successfully download?

Thanks.

-craigtry using firefox to download

galdaka
28 Aug 2008, 10:43 PM
These files all seem to be badly corrupted. I am unable to open any of the 3 zipped themes using WinZip. Even a zip file recovery tool marks them as corrupt. I have tried downloading again multiple times and tried unarchiving them on multiple machines.

Anyone else had trouble with these or suggestions on how to successfully download?

Thanks.

-craig

The files are re-compressed. Extract, rename and extract again. There are multiple post in this forum with same question.

I want to add to this list, my theme: http://extjs.com/forum/showthread.php?t=25212

In xtheme-gray-extend.css are two part xtheme-gray + my modification for extend gray to all widgets. If anybody wants modify midnight, silvercherry or indigo themes for create a real and complete theme, modifing the second part of xtheme-gray-extend (Colors and images) can do it.

Greetings,

galdaka
28 Aug 2008, 11:15 PM
Awesome. Here they are. Hope someone can put these to use!

Please note that the original silverCherry has been updated.
If you downloaded this file previously, please update. Current version = rc1.1

The images in three themes are out of her folder. Please put the themes with images in folders.

Thanks in advance,

franck34
29 Aug 2008, 10:09 AM
I really like this theme and it match with the design i have.

Btw, on tabs, there is a little circle at the right of the text of the tab. I don't know how to fix that, any idea ?

Regards,
Franck

CraigTheCoder
29 Aug 2008, 10:23 AM
Thanks everyone! I got them all pulled down correctly now. Appreciate all the responses.

-craig

franck34
29 Aug 2008, 10:35 AM
I really like this theme and it match with the design i have.

Btw, on tabs, there is a little circle at the right of the text of the tab. I don't know how to fix that, any idea ?

Regards,
Franck

Fixed, my fault, conflict with another CSS property which has nothing to do with extjs.

Franck

franck34
2 Sep 2008, 6:37 AM
Checkbox have no style in the theme. Forced to use both ext-all.css and silvercherry in the same time.

tobiu
4 Sep 2008, 5:03 PM
hi Franck,

if i have not got it wrong, you should always use the ext-all.css and the theme.css, which does not replace the all.css -> only the elements which need to be replaced.

at least in older ext versions it was like that.


kind regards, tobiu

mystix
4 Sep 2008, 6:42 PM
hi Franck,

if i have not got it wrong, you should always use the ext-all.css and the theme.css, which does not replace the all.css -> only the elements which need to be replaced.


bingo.

smudgeface
6 Feb 2009, 3:12 PM
Silver cherry (possibly the others) has some problems in ext 2.2.1
I have address some of the problems below. Just replace the appropriate line.

text in a grid menu overlaps the icon
line 573:

.x-menu a.x-menu-item{display:block;line-height:16px;padding:3px 21px 3px 27px;white-space:nowrap;text-decoration:none;color:#222;-moz-outline:0 none;outline:0 none;cursor:pointer;}

Q-tips dont render right
lines 538-546
/* INCLUDE ATTACHED NEW qtip_tip-sprite2.gif */
.x-tip .x-tip-tc{background:transparent url(../images/silverCherry/qtip_tip-sprite2.gif) no-repeat 0 -62px;padding-top:3px;overflow:hidden;}
.x-tip .x-tip-tl{background:transparent url(../images/silverCherry/qtip_tip-sprite2.gif) no-repeat 0 0;padding-left:6px;overflow:hidden;}
.x-tip .x-tip-tr{background:transparent url(../images/silverCherry/qtip_tip-sprite2.gif) no-repeat right 0;padding-right:6px;overflow:hidden;}
.x-tip .x-tip-bc{background:transparent url(../images/silverCherry/qtip_tip-sprite2.gif) no-repeat 0 -121px;height:3px;overflow:hidden;}
.x-tip .x-tip-bl{background:transparent url(../images/silverCherry/qtip_tip-sprite2.gif) no-repeat 0 -59px;padding-left:6px;}
.x-tip .x-tip-br{background:transparent url(../images/silverCherry/qtip_tip-sprite2.gif) no-repeat right -59px;padding-right:6px;}
.x-tip .x-tip-mc{border:0 none;font:normal 11px tahoma,arial,helvetica,sans-serif;}
.x-tip .x-tip-ml{background:#fff url(../images/silverCherry/qtip_tip-sprite2.gif) no-repeat 0 -124px;padding-left:6px;}
.x-tip .x-tip-mr{background:transparent url(../images/silverCherry/qtip_tip-sprite2.gif) no-repeat right -124px;padding-right:6px;}

tobiu
17 Feb 2009, 8:57 AM
hi smudgeface,

thanks for posting this, i thought it was a general problem with ext 2.2.1 and continued to work with 2.2 =)

i am not sure if this was posted before, but in my version of the silverCherry theme, tabs with position bottom are displayed broken. to fix it, just remove the following css-code:



.x-tab-strip .x-tab-with-icon .x-tab-right{padding-left:6px;}

line 84
and



.x-tab-strip-bottom .x-tab-right {
background-image:url(../images/silverCherry/tabs_tab-btm-inactive-right-bg.gif);
}

1068

the lines may vary, since i did some other changes.

kind regards, tobiu

tobiu
17 Feb 2009, 7:49 PM
hi again smudgeface,

i tested a bit more: you attached a jpg instead a gif. when renaming all gif to jpg in your css, the qtip looks broken again, though different broken ;)


kind regards, tobiu

smudgeface
17 Feb 2009, 10:53 PM
oops, the forum was (strangely) converting my gif to a jpeg. I have attached the gif as a zip.

edited - I improved the file size of the gif, it is now a svelte 3.5 k

tobiu
21 Feb 2009, 6:26 AM
with the new image, the qtips are working fine with me (ff3).


thx, tobiu

tobiu
21 Feb 2009, 7:23 AM
i found another one:

ext-mb-question (warning and error too) the images are not displayed.



.x-window-dlg .ext-mb-info{background:transparent url(../images/silverCherry/window/icon-info.gif) no-repeat top left;}
.x-window-dlg .ext-mb-warning{background:transparent url(../images/silverCherry/window/icon-warning.gif) no-repeat top left;}
.x-window-dlg .ext-mb-question{background:transparent url(../images/silverCherry/window/icon-question.gif) no-repeat top left;}
.x-window-dlg .ext-mb-error{background:transparent url(../images/silverCherry/window/icon-error.gif) no-repeat top left;}


first, the images do not exist in the folder "window".
there is a text-file, saying they were renamed to window_icon-info.gif.
but even with replacing the paths, the images are not displayed (only tested with ff3).

removing the whole block won't help either.

any ideas?

i think the whole theme needs a cleanup, since it is unnecessary big.


kind regards, tobiu

tfrugia
29 May 2009, 9:39 AM
Thanks for these themes!

Is there any chance to get some fixes for Ext3? Silvercherry, indigo and midnight's has icon issues on the html editor (every icon is the 'bold' icon (B)).

Silvercherry also has some issues with the menu on grids (when selecting/deselecting columns, sorting, etc).

Otherwise they seem to work fine on 3.0.


Thanks!

rainmaker
26 Jan 2010, 11:40 AM
I can't download the zipped file that is attached in this thread. I get 'invalid or corrupted' message.

Scorpie
26 Jan 2010, 2:27 PM
I can't download the zipped file that is attached in this thread. I get 'invalid or corrupted' message.

Use Firefox ;)

rainmaker
26 Jan 2010, 3:32 PM
We're using ExtJs 3.1 and I tried to port this midnight theme over. I was able to download the files, dropped them in the proper directories but I am not seeing the right colors. Can anyone help?

tobiu
1 Feb 2010, 12:23 AM
hi rainmaker,

the themes were build for ext2.x and are not working with 3.x without quite a lot of changes. i am interested in porting them over for a small fee, see
http://www.extjs.com/forum/showthread.php?t=90957

kind regards,
tobiu

rainmaker
1 Feb 2010, 10:00 AM
Thanks but no thanks.

itfreelancer
2 Feb 2010, 12:58 PM
good working and thanks for share it

ajaxvador
20 May 2010, 2:09 AM
xtheme-silverCherry in EXT 3.2.0 ?

tobiu
20 May 2010, 12:55 PM
hi vador,

actually i ported the silverCherry to 3.* and minified the sources from 120kb+ to less than 40.
i tried to reach the original creator via pm, but got no answer. it seems he is no longer joining the ext-community, is he?

that was the reason we recreated all images and developed the theme in a different direction. the result was our redWine-theme.


kind regards,
tobiu