PDA

View Full Version : New ExtJS 2.0 Theme: "Slate"



J.C. Bize
22 Oct 2007, 3:43 PM
January 31 2008 update:

Revision 5 is a minor update to fix an issue with QuickTips, and to add the Help and Print (see SVN rev #1609). Successfully tested with Ext JS 2.0.1.

Note: scroll down past the screenshots to the bottom of this post to download the attachment.

Cheers,
JC


Screenshots:

http://img206.imageshack.us/img206/9878/screen1wm2.png

http://img520.imageshack.us/img520/9940/screen2oj9.png

http://img521.imageshack.us/img521/7656/screen3ds8.png

http://img254.imageshack.us/img254/5968/screen4hb2.png

http://img204.imageshack.us/img204/3331/screen5xg9.png


Previous Updates:

November 15 2007 update:

Revision 4 is up. Changes were made to the HTML editor, resizable handles, tooltips, dialog window, and a few other tweaks here and there. Please let me know if you notice any issues.

------------------------------------------------------------------------------------------------------------------------
November 3 2007 update:

Thanks again for your feedback. I've fixed the couple of issues that have been reported so far, and taken this opportunity to tweak the appearance of the Grid a bit more... See this post (http://extjs.com/forum/showthread.php?p=81622#post81622) for comparison shots. Here is revision 3.

------------------------------------------------------------------------------------------------------------------------
October 24 2007 update:

Thanks everyone for the positive feedback! I've made some updates to the theme and here is revision 2.

In addition to implementing the few missing pieces (grid, calendar) I've made dozens of minor tweaks to the theme. You probably won't notice most of these changes without comparing the two revisions side by side; overall though, this version looks more consistent than the previous one. Updated screenshots below.

Unless I receive some "bug" reports, this will be the final version of this theme. I'm looking forward to more themes from the Ext community!

<old screenshots removed 11/4/2007>

------------------------------------------------------------------------------------------------------------------------
October 23 2007:
Hi,

Here is a new "Slate" theme I have been working on this weekend... I've attached screenshots below.

Please note that this is a full new theme, not just a re-coloring of an existing theme. What this means to you is that there will very probably be bugs! I've ran the theme through all the samples provided with ExtJS, but please notify me of any issues you come across. I'll fix them as quickly as I can.

There are still a few minor things I'm not too happy with, that will change in future updates. Additionally, I designed the theme on an LCD monitor, and although I did my best to calibrate it manually, some of the colors may appear "off" because of it. Again, please do let me know if anything looks out of place.

Enjoy!


Download:

jay@moduscreate.com
22 Oct 2007, 4:38 PM
very clean!! excellent job! :D

sintax.era
22 Oct 2007, 4:48 PM
nice :)

aconran
22 Oct 2007, 9:36 PM
Nice work. I particularly like the tool icons.

brian.moeskau
22 Oct 2007, 9:38 PM
Damn -- that looks hot! Thanks for contributing :)

madrabaz
23 Oct 2007, 1:15 AM
That is gorgeous, thanks =D>

galdaka
23 Oct 2007, 2:06 AM
Excellent work!!

Thanks for share!

cfExt
23 Oct 2007, 3:00 AM
i liked it

SeaSharp
23 Oct 2007, 3:52 AM
Now that is a theme for a sober financial systems developer like me!

dselkirk
23 Oct 2007, 6:14 AM
nice, thx

Nullity
23 Oct 2007, 6:31 AM
That's great, I love it!

kamelus
23 Oct 2007, 7:09 AM
that's great
wonderfull job high and clean style
thanks for sharing

jhorvath
23 Oct 2007, 8:17 AM
beautiful!

thank you, sir.

dantheman
23 Oct 2007, 11:50 AM
Very nice.

One niggle: I don't seem to be getting the nice overlap
between the active tab and the thin strip atop a tabpanel
(below the tabs, above the content of the various tab panels).

(pic attached)
The strip is a different color than the active tab.

I've made do with a 1px shift on top of the active strip (visible in the pic),
but I'd obviously prefer to see the nice effect from the screenshots.

Many thanks again for the great contribution! =D>
--dan

FritFrut
23 Oct 2007, 1:23 PM
Hi,

Here is a new "Slate" theme I have been working on this weekend... I've attached screenshots below.


Mmm, great...

J.C. Bize
24 Oct 2007, 1:56 AM
Very nice.

One niggle: I don't seem to be getting the nice overlap
between the active tab and the thin strip atop a tabpanel
(below the tabs, above the content of the various tab panels).

(pic attached)
The strip is a different color than the active tab.

I've made do with a 1px shift on top of the active strip (visible in the pic),
but I'd obviously prefer to see the nice effect from the screenshots.

Many thanks again for the great contribution! =D>
--dan

Dan,

Thanks for your post. This is exactly the kind of feedback I am looking for. Can you please provide additional information on your environment to assist in troubleshooting? I am unfortunately unable to reproduce this issue in Firefox 2.0.8 or IE7. Do you see this issue when you run the examples that ship with Ext? If you could post a short sample that illustrates the problem, that would be great.

Thanks,
JC

J.C. Bize
24 Oct 2007, 1:58 AM
New release... I will update the original post.

Cheers,
JC

wm003
24 Oct 2007, 2:02 AM
very cool! Keep it up!Thank you! :)

Brendan Carroll
24 Oct 2007, 5:51 AM
sweet!

wspnet
24 Oct 2007, 6:36 AM
www.kukumx.cn (http://www.kukumx.cn)
www.wspnet.cn

dantheman
24 Oct 2007, 12:22 PM
Dan,

Thanks for your post. This is exactly the kind of feedback I am looking for. Can you please provide additional information on your environment to assist in troubleshooting? I am unfortunately unable to reproduce this issue in Firefox 2.0.8 or IE7. Do you see this issue when you run the examples that ship with Ext? If you could post a short sample that illustrates the problem, that would be great.

Thanks,
JCHi JC,

I'm using Ext-2.0-beta1 in IE7.
I am creating a simple TabPanel. I cannot post my code (confidentiality),
but this example is almost identical to my code:


var tabs = new Ext.TabPanel({
renderTo: 'my-div',
activeTab: 0,
plain: true,
defaults: { autoScroll: true },
deferredRender: false,
width: 400,
height: 400,
items: [
{ id: 'official',
title: 'Official',
html: "<div id='official-legend'></div>"
},
{ id: 'user-generated',
title: 'User Generated'
}
]
});


I do not see the glitch when I change the theme for the Ext docs (in docs/index.html)

Thanks for your help,
--dan

m3nt0r
25 Oct 2007, 12:57 AM
very nice. thank you for sharing this! \:D/

jack.slocum
25 Oct 2007, 2:14 AM
Sharp!

J.C. Bize
25 Oct 2007, 5:03 PM
Hi JC,

I'm using Ext-2.0-beta1 in IE7.
I am creating a simple TabPanel. I cannot post my code (confidentiality),
but this example is almost identical to my code:


var tabs = new Ext.TabPanel({
renderTo: 'my-div',
activeTab: 0,
plain: true,
defaults: { autoScroll: true },
deferredRender: false,
width: 400,
height: 400,
items: [
{ id: 'official',
title: 'Official',
html: "<div id='official-legend'></div>"
},
{ id: 'user-generated',
title: 'User Generated'
}
]
});


I do not see the glitch when I change the theme for the Ext docs (in docs/index.html)

Thanks for your help,
--dan

Hi Dan,

Sorry I haven't had a chance to look into this yet. I've had the flu for the past two days and can't look at a monitor for longer than a minute without my head feeling like it's going to explode. I promise to take a look as soon as I feel better.

Cheers,
JC

dantheman
26 Oct 2007, 3:01 PM
Sorry I haven't had a chance to look into this yet. I've had the flu for the past two days and can't look at a monitor for longer than a minute without my head feeling like it's going to explode. I promise to take a look as soon as I feel better.Utterly no problem. I have the workaround in place, so no hurry.
Mainly just nit-picky feedback on what is excellent work.

Get well soon .. if your head explodes, you might have to get a new monitor :D
--dan

J.C. Bize
29 Oct 2007, 7:09 AM
Hi JC,

I'm using Ext-2.0-beta1 in IE7.
I am creating a simple TabPanel. I cannot post my code (confidentiality),
but this example is almost identical to my code:

<snip>

I do not see the glitch when I change the theme for the Ext docs (in docs/index.html)

Thanks for your help,
--dan

Feeling much better today, thanks for the kind words!

I'm still unable to reproduce this artifact with the tabs though, even when using your code snippet above. Do you perhaps have some custom CSS that could be interfering with the theme? What component type is the type of the tabs' parent container in your actual code?

Here is the entirety of the code I am using:



<html>
<head>

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

<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>

<script type="text/javascript">
Ext.onReady(function(){

var tabs = new Ext.TabPanel({
renderTo: 'tabs',
activeTab: 0,
plain: true,
defaults: { autoScroll: true },
deferredRender: false,
width: 400,
height: 400,
items: [
{ id: 'official',
title: 'Official',
html: "<div id='official-legend'></div>"
},
{ id: 'user-generated',
title: 'User Generated'
}
]
});

});
</script>

</head>

<body>
<div id="tabs"></div>
</body>
</html>


And here is what I see in IE7, and FF2, respectively:

http://extjs.com/forum/attachment.php?attachmentid=2368&stc=1&d=1193669954 http://extjs.com/forum/attachment.php?attachmentid=2369&stc=1&d=1193669960

Do you get different results than these when using the code above?

Cheers,
JC

captainm1uk
29 Oct 2007, 1:22 PM
Hi

I am trying to put this excellent slate theme into ext 1 and have managed most of it apart from the top tabs

Can anyone help me - see attached

Thanks

J.C. Bize
29 Oct 2007, 1:26 PM
Hi

I am trying to put this excellent slate theme into ext 1 and have managed most of it apart from the top tabs

Can anyone help me - see attached

Thanks

Can you post what you've got so far? I'm not too familiar with themes in Ext 1.x... I'm not sure how much I can help, but I will try!

Cheers,
JC

captainm1uk
29 Oct 2007, 1:34 PM
Hi

Here is the css i a using - i will post the full file



/*
* Ext JS Library 1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/
/* menus */
.x-menu {
border: 1px solid #718bb7;
z-index: 15000;
zoom: 1;
background: #f0f0f0 url(../images/menu/menu/menu.gif) repeat-y;
padding: 2px;
}
.x-menu-list{
background:transparent;
border:0 none;
}
.x-menu-item-icon {
margin-right: 8px;
}
.x-menu-sep {
background-color:#e0e0e0;
border-bottom:1px solid #fff;
margin-left:3px;
}
.x-menu-item {
color:#222;
}
.x-menu-item-active {
color: #233d6d;
background: #ebf3fd url(../images/aero/menu/item-over.gif) repeat-x left bottom;
border:1px solid #aaccf6;
padding: 0;
}
.x-date-mmenu .x-menu-list{
padding: 0;
}
.x-date-mmenu .x-menu-list{
border: 0 none;
}
.x-menu .x-color-palette, .x-menu .x-date-picker{
margin-left: 26px;
}
.x-menu-plain .x-color-palette, .x-menu-plain .x-date-picker{
margin: 0;
border: 0 none;
}

.x-menu-check-item .x-menu-item-icon{
background-image: url(../images/aero/menu/unchecked.gif);
}
.x-menu-item-checked .x-menu-item-icon{
background-image:url(../images/aero/menu/checked.gif);
}
.x-menu-group-item .x-menu-item-icon{
background: transparent;
}
.x-menu-item-checked .x-menu-group-item .x-menu-item-icon{
background: transparent url(../images/default/menu/group-checked.gif) no-repeat center;
}
/**
* Tabs
*/
.x-tabs-wrap, .x-layout-panel .x-tabs-top .x-tabs-wrap {
background: #deecfd;
border: 1px solid #8db2e3;
padding-bottom: 2px;
padding-top: 0;
}
.x-tabs-strip-wrap{
padding-top: 1px;
background: url(../images/aero/tabs/tab-strip-bg.gif) #cedff5 repeat-x bottom;
border-bottom: 1px solid #8db2e3;
}
.x-tabs-strip .x-tabs-text {
color: #15428b;
font: bold 11px tahoma,arial,verdana,sans-serif;
}
.x-tabs-strip .on .x-tabs-text {
cursor: default;
color: #15428b;
}
.x-tabs-top .x-tabs-strip .on .x-tabs-right {
background: url(../images/aero/tabs/tab-sprite.gif) no-repeat right 0;
}
.x-tabs-top .x-tabs-strip .on .x-tabs-left,.x-tabs-top .x-tabs-strip .on a:hover .x-tabs-left{
background: url(../images/aero/tabs/tab-sprite.gif) no-repeat 0 -100px;
}
.x-tabs-top .x-tabs-strip .x-tabs-right {
background: transparent url(../images/aero/tabs/tab-sprite.gif) no-repeat right -50px;
}
.x-tabs-top .x-tabs-strip .x-tabs-left {
background: transparent url(../images/aero/tabs/tab-sprite.gif) no-repeat 0 -150px;
}
.x-tabs-top .x-tabs-body {
border: 1px solid #8db2e3;
border-top: 0 none;
}
.x-tabs-bottom .x-tabs-wrap, .x-layout-panel .x-tabs-bottom .x-tabs-wrap {
background: #deecfd;
border: 1px solid #8db2e3;
padding-top: 2px;
padding-bottom: 0;
}
.x-tabs-bottom .x-tabs-strip-wrap{
padding-top: 0;
padding-bottom: 1px;
background: url(../images/aero/tabs/tab-strip-btm-bg.gif) #cedff5 repeat-x top;
border-top: 1px solid #8db2e3;
border-bottom: 0 none;
}
.x-tabs-bottom .x-tabs-strip .x-tabs-right {
background: transparent url(../images/aero/tabs/tab-btm-inactive-right-bg.gif) no-repeat bottom right;
}
.x-tabs-bottom .x-tabs-strip .x-tabs-left {
background: transparent url(../images/aero/tabs/tab-btm-inactive-left-bg.gif) no-repeat bottom left;
}
.x-tabs-bottom .x-tabs-strip .on .x-tabs-right,.x-tabs-bottom .x-tabs-strip .on a:hover {
background: url(../images/aero/tabs/tab-btm-right-bg.gif) no-repeat bottom left;
}
.x-tabs-bottom .x-tabs-strip .on .x-tabs-left,.x-tabs-bottom .x-tabs-strip .on a:hover .x-tabs-left {
background: url(../images/aero/tabs/tab-btm-left-bg.gif) no-repeat bottom right;
}
.x-tabs-bottom .x-tabs-body {
border: 1px solid #8db2e3;
border-bottom: 0 none;
}
/*
* Basic-Dialog
*/
.x-dlg-proxy {
background: #c7dffc;
border: 1px solid #a5ccf9;
}
.x-dlg-shadow{
background: #cccccc;
opacity: .3;
-moz-opacity: .3;
filter: alpha(opacity=30);
}
.x-dlg {
background: transparent;
}
.x-dlg .x-dlg-hd {
background: url(../images/aero/shared/hd-sprite.gif) repeat-x 0 -82px;
background-color: #aabaca;
color: #15428b;
zoom: 1;
padding-top: 7px;
}
.x-dlg .x-dlg-hd-left {
opacity: .85;
-moz-opacity: .85;
filter: alpha(opacity=80);
background: url(../images/aero/shared/hd-sprite.gif) no-repeat 0 -41px;
zoom: 1;
}
.x-dlg-modal .x-dlg-hd-left {
opacity: .75;
-moz-opacity: .75;
filter: alpha(opacity=70);
}
.x-dlg .x-dlg-hd-right {
background: url(../images/aero/shared/hd-sprite.gif) no-repeat right 0;
zoom: 1;
}
.x-dlg .x-dlg-dlg-body{
padding: 0 0 0;
position: absolute;
top: 24px;
left: 0;
z-index: 1;
border: 0 none;
background: transparent;
}
.x-dlg .x-dlg-bd{
background: #ffffff;
border: 1px solid #96b9e6;
}
.x-dlg .x-dlg-ft{
border: 0 none;
background: transparent;
padding-bottom: 8px;
}
.x-dlg .x-dlg-bg{
filter: alpha(opacity=80);
opacity: .85;
-moz-opacity: .85;
zoom: 1;
}
.x-dlg-modal .x-dlg-bg {
opacity: .75;
-moz-opacity: .75;
filter: alpha(opacity=70);
}
.x-dlg .x-dlg-bg-center {
padding: 2px 7px 7px 7px;
background: transparent url(../images/aero/basic-dialog/bg-center.gif) repeat-x bottom;
zoom: 1;
}
.x-dlg .x-dlg-bg-left{
padding-left: 7px;
background: transparent url(../images/aero/basic-dialog/bg-left.gif) no-repeat bottom left;
zoom: 1;
}
.x-dlg .x-dlg-bg-right{
padding-right: 7px;
background: transparent url(../images/aero/basic-dialog/bg-right.gif) no-repeat bottom right;
zoom: 1;
}
.x-dlg-auto-tabs .x-dlg-dlg-body, .x-dlg-auto-layout .x-dlg-dlg-body{
background: transparent;
border: 0 none;
}
.x-dlg-auto-tabs .x-dlg-bd, .x-dlg-auto-layout .x-dlg-bd{
background: #ffffff;
border: 1px solid #e9f3f5;
}
.x-dlg-auto-tabs .x-tabs-top .x-tabs-body,.x-dlg-auto-tabs .x-tabs-bottom .x-tabs-body{
border-color: #8db2e3;
}
.x-dlg-auto-tabs .x-tabs-top .x-tabs-wrap,.x-dlg-auto-tabs .x-tabs-bottom .x-tabs-wrap{
border-color: #8db2e3;
}
.x-dlg .x-dlg-toolbox {
width: 50px;
height: 20px;
right: 5px;
top: 5px;
}
.x-dlg .x-dlg-close, .x-dlg .x-dlg-collapse {
width: 21px;
height: 20px;
margin: 0;
}
.x-dlg .x-dlg-close {
background-image: url(../images/aero/basic-dialog/aero-close.gif);
}
.x-dlg .x-dlg-collapse {
background-image: url(../images/aero/basic-dialog/collapse.gif);
}
.x-dlg-collapsed {
border-bottom: 1px solid #96b9e6;
}
.x-dlg .x-dlg-close-over {
background-image: url(../images/aero/basic-dialog/aero-close-over.gif);
}
.x-dlg .x-dlg-collapse-over {
background-image: url(../images/aero/basic-dialog/collapse-over.gif);
}
.x-dlg-collapsed .x-dlg-collapse {
background-image: url(../images/aero/basic-dialog/expand.gif);
}
.x-dlg-collapsed .x-dlg-collapse-over {
background-image: url(../images/aero/basic-dialog/expand-over.gif);
}
.x-dlg div.x-resizable-handle-east{
background-image: url(../images/aero/s.gif);
border: 0 none;
}
.x-dlg div.x-resizable-handle-south{
background-image: url(../images/aero/s.gif);
border: 0 none;
}
.x-dlg div.x-resizable-handle-west{
background-image: url(../images/aero/s.gif);
border: 0 none;
}
.x-dlg div.x-resizable-handle-southeast{
background-image: url(../images/aero/basic-dialog/se-handle.gif);
background-position: bottom right;
width: 9px;
height: 9px;
border: 0;
right: 2px;
bottom: 2px;
}
.x-dlg div.x-resizable-handle-southwest{
background-image: url(../images/aero/s.gif);
background-position: top right;
margin-left: 1px;
margin-bottom: 1px;
border: 0;
}
.x-dlg div.x-resizable-handle-north{
background-image: url(../images/aero/s.gif);
border: 0 none;
}
#x-msg-box .x-dlg-bd{
background: #cfe0f5;
border: 0 none;
}
body.x-masked #x-msg-box .x-dlg-bd, body.x-body-masked #x-msg-box .x-dlg-bd{
background: #c4d2e3;
border: 0 none;
}
/* BorderLayout */
.x-layout-container{
background: #deecfd;
}
.x-layout-collapsed{
background-color: #a2b4c6;
border: 1px solid #a2b4c6;
}
.x-layout-collapsed-over{
background-color: #a2b4c6;
}
.x-layout-panel{
border: 1px solid #a2b4c6;
}
.x-layout-nested-layout .x-layout-panel {
border: 0 none;
}
.x-layout-split{
background-color: #deecfd;
}
.x-layout-panel-hd{
background: url(../images/aero/grid/grid-hrow.gif) #ebeadb repeat-x;
border-bottom: 1px solid #99bbe8;
}
.x-layout-panel-hd-text {
color: #15428b;
font: bold 11px tahoma,arial,verdana,sans-serif;
}
.x-layout-split-h{
background: #deecfd;
}
.x-layout-split-v{
background: #deecfd;
}
.x-layout-panel .x-tabs-top .x-tabs-wrap{
border: 0 none;
border-bottom: 1px solid #8db2e3;
}
.x-layout-panel .x-tabs-bottom .x-tabs-wrap{
border: 0 none;
border-top: 1px solid #8db2e3;
}
.x-layout-nested-layout .x-layout-panel-north {
border-bottom: 1px solid #99bbe8;
}
.x-layout-nested-layout .x-layout-panel-south {
border-top: 1px solid #99bbe8;
}
.x-layout-nested-layout .x-layout-panel-east {
border-left: 1px solid #99bbe8;
}
.x-layout-nested-layout .x-layout-panel-west {
border-right: 1px solid #99bbe8;
}
.x-layout-panel-dragover {
border: 2px solid #99bbe8;
}
.x-layout-panel-proxy {
background-image: url(../images/aero/gradient-bg.gif);
background-color: #f3f2e7;
border: 1px dashed #99bbe8;
}
.x-layout-container .x-layout-tabs-body{
border: 0 none;
}
/** Resizable */
.x-resizable-proxy{
border: 1px dashed #3b5a82;
}
/* grid */
.x-grid-hd-text {
color: #15428b;
font-weight: bold;
}
.x-grid-locked .x-grid-body td {
background: #fbfdff;
border-right: 1px solid #deecfd;
border-bottom: 1px solid #deecfd !important;
}
.x-grid-locked .x-grid-body td .x-grid-cell-inner {
border-top: 0 none;
}
.x-grid-locked .x-grid-row-alt td{
background: #f5fafe;
}
.x-grid-locked .x-grid-row-selected td{
color: #ffffff !important;
background-color: #316ac5 !important;
}
.x-grid-hd{
border-bottom: 0;
background: none;
}
.x-grid-hd-row{
height: auto;
}
.x-grid-hd-over {
border-bottom: 0 none;
}
.x-grid-hd-over .x-grid-hd-body{
background: none;
border-bottom: 0 none;
}
.x-grid-hd-over .x-grid-hd-body{
background-color: transparent;
border-bottom: 0;
}
.x-grid-split {
background-image: url(../images/aero/grid/grid-blue-split.gif);
}
.x-grid-header{
background: url(../images/aero/grid/grid-hrow.gif);
border: 0 none;
border-bottom: 1px solid #6f99cf;
}
.x-grid-row-alt{
background-color: #f5f5f5;
}
.x-grid-row-over td, .x-grid-locked .x-grid-row-over td{
background-color: #eeeeee;
}
.x-grid-col {
border-right: 1px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
}
.x-grid-header .x-grid-hd-inner {
padding-bottom: 1px;
}
.x-grid-header .x-grid-hd-text {
padding-bottom: 3px;
}
.x-grid-hd-over .x-grid-hd-inner {
border-bottom: 1px solid #316ac5;
padding-bottom: 0;
}
.x-grid-hd-over .x-grid-hd-text {
background: #d5e4f5;
border-bottom: 1px solid #ffffff;
padding-bottom: 2px;
}
.x-grid-header .sort-asc .x-grid-hd-inner, .x-grid-header .sort-desc .x-grid-hd-inner {
border-bottom: 1px solid #316ac5;
padding-bottom: 0;
}
.x-grid-header .sort-asc .x-grid-hd-text, .x-grid-header .sort-desc .x-grid-hd-text {
border-bottom: 0 none;
padding-bottom: 3px;
}
.x-grid-header .sort-asc .x-grid-sort-icon {
background-image: url(../images/aero/grid/sort_asc.gif);
}
.x-grid-header .sort-desc .x-grid-sort-icon {
background-image: url(../images/aero/grid/sort_desc.gif);
}
.x-dd-drag-proxy .x-grid-hd-inner{
background: url(../images/aero/grid/grid-hrow.gif) #ebeadb repeat-x;
height: 22px;
width: 120px;
}
.x-grid-locked td.x-grid-row-marker, .x-grid-locked .x-grid-row-selected td.x-grid-row-marker{
background: url(../images/aero/grid/grid-hrow.gif) #ebeadb repeat-x 0 0 !important;
vertical-align: middle !important;
color: #000000;
padding: 0;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #6f99cf !important;
border-right: 1px solid #6f99cf !important;
text-align: center;
}
.x-grid-locked td.x-grid-row-marker div, .x-grid-locked .x-grid-row-selected td.x-grid-row-marker div{
padding: 0 4px;
color: #15428b !important;
text-align: center;
}
/** Toolbar */
.x-toolbar{
padding: 2px 2px 2px 2px;
background: url(../images/aero/toolbar/tb-bg.gif) #d0def0 repeat-x;
}
.x-toolbar .ytb-sep{
background-image: url(../images/aero/grid/grid-blue-split.gif);
}
.x-toolbar .x-btn-over .x-btn-left{
background: url(../images/aero/toolbar/tb-btn-sprite.gif) no-repeat 0 0;
}
.x-toolbar .x-btn-over .x-btn-right{
background: url(../images/aero/toolbar/tb-btn-sprite.gif) no-repeat 0 -21px;
}
.x-toolbar .x-btn-over .x-btn-center{
background: url(../images/aero/toolbar/tb-btn-sprite.gif) repeat-x 0 -42px;
}
.x-toolbar .x-btn-click .x-btn-left, .x-toolbar .x-btn-pressed .x-btn-left, .x-toolbar .x-btn-menu-active .x-btn-left{
background: url(../images/aero/toolbar/tb-btn-sprite.gif) no-repeat 0 -63px;
}
.x-toolbar .x-btn-click .x-btn-right, .x-toolbar .x-btn-pressed .x-btn-right, .x-toolbar .x-btn-menu-active .x-btn-right{
background: url(../images/aero/toolbar/tb-btn-sprite.gif) no-repeat 0 -84px;
}
.x-toolbar .x-btn-click .x-btn-center, .x-toolbar .x-btn-pressed .x-btn-center, .x-toolbar .x-btn-menu-active .x-btn-center{
background: url(../images/aero/toolbar/tb-btn-sprite.gif) repeat-x 0 -105px;
}
/*************** TABS 2 *****************/
/**
* Tabs
*/
.x-tab-panel-header, .x-tab-panel-footer {
background: #deecfd;
border: 1px solid #4f4f4f;
}
.x-tab-panel-header {
background: #deecfd;
border: 1px solid #4f4f4f;
padding-bottom: 2px;
}
.x-tab-panel-footer {
background: #deecfd;
border: 1px solid #4f4f4f;
padding-top: 2px;
}
.x-tab-strip-top{
padding-top: 1px;
background: url(../images/aero/tabs/tab-strip-bg.gif) red repeat-x bottom;
border-bottom: 1px solid #8db2e3;
}
.x-tab-strip-bottom{
padding-bottom: 1px;
background: url(../images/aero/tabs/tab-strip-btm-bg.gif) #a2b4c6 repeat-x top;
border-top: 1px solid #8db2e3;
border-bottom: 0 none;
}
.x-tab-strip .x-tab-strip-text {
color: #ffffff;
font: bold 11px tahoma,arial,verdana,sans-serif;
}
.x-tab-strip .x-tab-strip-active .x-tab-text {
cursor: default;
color: #000000;
}
.x-tab-strip-top .x-tab-strip-active .x-tab-right {
background: url(../images/aero/tabs/tab-sprite.gif) no-repeat right 0;
}
.x-tab-strip-top .x-tab-strip-active .x-tab-left {
background: url(../images/aero/tabs/tab-sprite.gif) no-repeat 0 -100px;
}
.x-tab-strip-top .x-tab-right {
background: url(../images/aero/tabs/tab-sprite.gif) no-repeat right -50px;
}
.x-tab-strip-top .x-tab-left {
background: url(../images/aero/tabs/tab-sprite.gif) no-repeat 0 -150px;
}
.x-tab-strip-bottom .x-tab-right {
background: url(../images/aero/tabs/tab-btm-inactive-right-bg.gif) no-repeat bottom right;
}
.x-tab-strip-bottom .x-tab-left {
background: url(../images/aero/tabs/tab-btm-inactive-left-bg.gif) no-repeat bottom left;
}
.x-tab-strip-bottom .x-tab-strip-active .x-tab-right {
background: url(../images/aero/tabs/tab-btm-right-bg.gif) no-repeat bottom left;
}
.x-tab-strip-bottom .x-tab-strip-active .x-tab-left {
background: url(../images/aero/tabs/tab-btm-left-bg.gif) no-repeat bottom right;
}
.x-tab-panel-body-top {
border: 1px solid #a2b4c6;
border-top: 0 none;
}
.x-tab-panel-body-bottom {
border: 1px solid #8db2e3;
border-bottom: 0 none;
}

captainm1uk
30 Oct 2007, 12:27 PM
Hi

Any luck with the slate css for ext 1 ?

Thanks

J.C. Bize
31 Oct 2007, 11:07 AM
Hi

Here is the css i a using - i will post the full file

<snip>



Hi,

Are you sure you posted the correct file? This looks like xtheme-vista.css with only a handful of color/path changes. I'm not getting any UI elements themed when I apply the ported stylesheet, it just looks like the Ext 1.1 Vista theme. Which sample are you trying this out with?

Cheers,
JC

dantheman
31 Oct 2007, 11:12 AM
Feeling much better today, thanks for the kind words!

I'm still unable to reproduce this artifact with the tabs though, even when using your code snippet above. Do you perhaps have some custom CSS that could be interfering with the theme? What component type is the type of the tabs' parent container in your actual code?

Here is the entirety of the code I am using:

And here is what I see in IE7, and FF2, respectively:

http://extjs.com/forum/attachment.php?attachmentid=2368&stc=1&d=1193669954 http://extjs.com/forum/attachment.php?attachmentid=2369&stc=1&d=1193669960

Do you get different results than these when using the code above?

Cheers,
JCHey JC,

Thanks for the example. Glad you're feeling better! :)

Using your example, I produced the exact same effect as your screenshots show.
(first attachment, showing side-by-side IE7/FF [yes, I finally got FF at work ..thanks 8-|] )

That they're the same is the problem.

My second attachment shows the slate theme used in the Ext docs.
Notice the thin rectangle underlying all the tabs has the darker hue
of the active tab? That's the proper effect, at least according to me :D

Why it shows there and not elsewhere is not something I've had time
to debug. I just threw these shots together to aid your effort (which is,
again, much appreciated!)

--dan

captainm1uk
31 Oct 2007, 11:19 AM
Hi,

Are you sure you posted the correct file? This looks like xtheme-vista.css with only a handful of color/path changes. I'm not getting any UI elements themed when I apply the ported stylesheet, it just looks like the Ext 1.1 Vista theme. Which sample are you trying this out with?

Cheers,
JC
Hi

I should have been tidier - I was just replacing files as i went along. The only issue I have is the tabs at the top - would you be able just to look at that part or do you need the full css ?

Thanks

J.C. Bize
31 Oct 2007, 11:56 AM
Hey JC,

Using your example, I produced the exact same effect as your screenshots show.
(first attachment, showing side-by-side IE7/FF [yes, I finally got FF at work ..thanks 8-|] )

That they're the same is the problem.



Hmmm wow, I see what you're referring to now. I had been troubleshooting the wrong problem the entire time. Good thing I never went into medicine :)

I'll update the theme file in the next day or so. For now, you can replace line 276 of xtheme-slate.css with the following:


background: #6b869f;

Let me know how it goes. Thanks again for pointing this out.

Cheers,
JC

J.C. Bize
31 Oct 2007, 12:21 PM
Hi

I should have been tidier - I was just replacing files as i went along. The only issue I have is the tabs at the top - would you be able just to look at that part or do you need the full css ?

Thanks


I did try out both tab examples that ship with Ext 1.1.1, and they showed in the Ext 1.x Vista style... nothing close to the picture you posted earlier, which is why I was wondering if you had posted the correct file. Can you post the code you used to generate this image (http://extjs.com/forum/attachment.php?attachmentid=2381&d=1193692903)?

Cheers,
JC

dantheman
31 Oct 2007, 12:46 PM
Hmmm wow, I see what you're referring to now. I had been troubleshooting the wrong problem the entire time. Good thing I never went into medicine :)

I'll update the theme file in the next day or so. For now, you can replace line 276 of xtheme-slate.css with the following:


background: #6b869f;

Let me know how it goes. Thanks again for pointing this out.
Hey JC,

You are more than welcome.
I am very grateful for such a great-looking theme!

And your suggestion worked ... when applied to line 254 ... ;)

Many thanks,
--dan

captainm1uk
31 Oct 2007, 1:46 PM
OK

I have imported your images into the notes database and given them the same path as the imported path. I then took the vista css and replaced the vista with slate - this css is how 1.1 would use it so I just need someone to look at this as I am not too good with css and onle understand the basics

Thanks



/*
* Ext JS Library 1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
* licensing@extjs.com
*
* http://www.extjs.com/license
*/
.ext-el-mask-msg {
border:1px solid #aaa;
background: #ddd url(../images/default/box/tb.gif) repeat-x 0 -16px;
}
.ext-el-mask-msg div {
border:1px solid #ccc;
}
/*
Menu
*/
.x-menu {
border-color: #999 #999 #999 #999;
background-image:url(images/slate/menu/menu.gif);
}
.x-menu-item-arrow{
background-image:url(images/slate/menu/menu-parent.gif);
}
.x-menu-item {
color:#222;
}
.x-menu-item-active {
background:#ddd;
border:1px solid #aaa;
}
.x-menu-sep {
background:#aaa;
}
/**
* Tabs
*/
.x-tabs-wrap {
background:#4f4f4f;
border-bottom:1px solid #b3b6b0;
}
.x-tabs-strip .x-tabs-text {
color:white;
font-weight:normal;
}
.x-tabs-strip .on .x-tabs-text {
cursor:default;
color:#333333;
}
.x-tabs-top .x-tabs-strip a.x-tabs-right {
background:transparent url(images/slate/tabs/tab-sprite.gif) no-repeat right -50px;
}
.x-tabs-top .x-tabs-strip a .x-tabs-left{
background:transparent url(images/slate/tabs/tab-sprite.gif) no-repeat 0px -150px;
}
.x-tabs-top .x-tabs-strip .on .x-tabs-right {
background: url(images/slate/tabs/tab-sprite.gif) no-repeat right 0;
}
.x-tabs-top .x-tabs-strip .on .x-tabs-left{
background: url(images/slate/tabs/tab-sprite.gif) no-repeat 0px -100px;
}
.x-tabs-strip .x-tabs-closable .close-icon{
background-image:url(images/slate/layout/tab-close.gif);
}
.x-tabs-strip .on .close-icon{
background-image:url(../images/slate/layout/tab-close-on.gif);
}
.x-tabs-strip .x-tabs-closable .close-over{
background-image:url(../images/slate/layout/tab-close-on.gif);
}
.x-tabs-body {
border:1px solid #b3b6b0;
border-top:0 none;
}
.x-tabs-bottom .x-tabs-strip {
background:#4f4f4f;
}
.x-tabs-bottom .x-tabs-strip a.x-tabs-right {
background:transparent url(/images/slate/tabs/tab-btm-inactive-right-bg.gif) no-repeat bottom right;
}
.x-tabs-bottom .x-tabs-strip a .x-tabs-left{
background:transparent url(/images/slate/tabs/tab-btm-inactive-left-bg.gif) no-repeat bottom left;
}
.x-tabs-bottom .x-tabs-wrap {
border-bottom:0 none;
padding-top:0;
border-top:1px solid #b3b6b0;
}
.x-tabs-bottom .x-tabs-strip .on .x-tabs-right {
background: url(../images/slate/tabs/tab-btm-right-bg.gif) no-repeat bottom left;
}
.x-tabs-bottom .x-tabs-strip .on .x-tabs-left {
background: url(../images/slate/tabs/tab-btm-left-bg.gif) no-repeat bottom right;
}
.x-tabs-bottom .x-tabs-body {
border:1px solid #b3b6b0;
border-bottom:0 none;
}
/**
* Basic-Dialog
*/
.x-dlg-proxy {
background:#d3d6d0;
border:2px solid #b3b6b0;
}
.x-dlg-shadow{
background:#cccccc;
opacity:.3;
-moz-opacity:.3;
filter: alpha(opacity=30);
}
.x-dlg .x-dlg-hd {
background: url(../images/slate/basic-dialog/hd-sprite.gif) repeat-x 0 -82px;
background-color:#333333;
zoom:1;
}
.x-dlg .x-dlg-hd-left {
opacity:.95;-moz-opacity:.95;filter:alpha(opacity=90);
background: url(../images/slate/basic-dialog/hd-sprite.gif) no-repeat 0 -41px;
zoom:1;
}
.x-dlg .x-dlg-hd-right {
background: url(../images/slate/basic-dialog/hd-sprite.gif) no-repeat right 0;
zoom:1;
}
.x-dlg .x-dlg-dlg-body{
background:#fff;
border:0 none;
border-top:0 none;
padding:0 0px 0px;
position:absolute;
top:24px;left:0;
z-index:1;
}
.x-dlg-auto-tabs .x-dlg-dlg-body{
background:transparent;
}
.x-dlg-auto-tabs .x-tabs-top .x-tabs-wrap{
background:transparent;
}
.x-dlg .x-dlg-ft{
border-top:1px solid #b3b6b0;
background:#F0F0F0;
padding-bottom:8px;
}
.x-dlg .x-dlg-bg{
opacity:.90;-moz-opacity:.90;filter:alpha(opacity=85);
zoom:1;
}
.x-dlg .x-dlg-bg-left,.x-dlg .x-dlg-bg-center,.x-dlg .x-dlg-bg-right{
}
.x-dlg .x-dlg-bg-center {
padding: 0px 4px 4px 4px;
background:transparent url(../images/slate/basic-dialog/bg-center.gif) repeat-x bottom;
zoom:1;
}
.x-dlg .x-dlg-bg-left{
padding-left:4px;
background:transparent url(../images/slate/basic-dialog/bg-left.gif) no-repeat bottom left;
zoom:1;
}
.x-dlg .x-dlg-bg-right{
padding-right:4px;
background:transparent url(../images/slate/basic-dialog/bg-right.gif) no-repeat bottom right;
zoom:1;
}
.x-dlg .x-tabs-top .x-tabs-body{
border:0 none;
}
.x-dlg .x-tabs-bottom .x-tabs-body{
border:1px solid #b3b6b0;
border-bottom:0 none;
}
.x-dlg .x-layout-container .x-tabs-body{
border:0 none;
}
.x-dlg .x-dlg-close {
background-image:url(../images/slate/basic-dialog/close.gif);
}
.x-dlg .x-dlg-collapse {
background-image:url(../images/slate/basic-dialog/collapse.gif);
}
.x-dlg-collapsed .x-dlg-collapse {
background-image:url(../images/slate/basic-dialog/expand.gif);
}
.x-dlg div.x-resizable-handle-east{
background-image:url(../images/slate/s.gif);
border:0 none;
}
.x-dlg div.x-resizable-handle-south{
background-image:url(../images/slate/s.gif);
border:0 none;
}
.x-dlg div.x-resizable-handle-west{
background-image:url(../images/slate/s.gif);
border:0 none;
}
.x-dlg div.x-resizable-handle-southeast{
background-image:url(../images/slate/s.gif);
background-position: bottom right;
width:8px;
height:8px;
border:0;
}
.x-dlg div.x-resizable-handle-southwest{
background-image:url(../images/slate/s.gif);
background-position: top right;
margin-left:1px;
margin-bottom:1px;
border:0;
}
.x-dlg div.x-resizable-handle-north{
background-image:url(../images/slate/s.gif);
border:0 none;
}
/* QuickTips */
.x-tip .x-tip-top {
background-image: url(../images/slate/qtip/tip-sprite.gif);
}
.x-tip .x-tip-top-left {
background-image: url(../images/slate/qtip/tip-sprite.gif);
}
.x-tip .x-tip-top-right {
background-image: url(../images/slate/qtip/tip-sprite.gif);
}
.x-tip .x-tip-ft {
background-image: url(../images/slate/qtip/tip-sprite.gif);
}
.x-tip .x-tip-ft-left {
background-image: url(../images/slate/qtip/tip-sprite.gif);
}
.x-tip .x-tip-ft-right {
background-image: url(../images/slate/qtip/tip-sprite.gif);
}
.x-tip .x-tip-bd-left {
background-image: url(../images/slate/qtip/tip-sprite.gif);
}
.x-tip .x-tip-bd-right {
background-image: url(../images/slate/qtip/tip-sprite.gif);
}
.x-tip .x-tip-bd-inner {
padding:2px;
}
/* BorderLayout */
.x-layout-container{
background:#4f4f4f;
}
.x-layout-collapsed{
background-color:#9f9f9f;
border:1px solid #4c535c;
}
.x-layout-collapsed-over{
background-color:#bfbfbf;
}
.x-layout-panel{
border:1px solid #4c535c;
}
.x-layout-nested-layout .x-layout-panel {
border:0 none;
}
.x-layout-split{
background-color:#f3f2e7;
}
.x-layout-panel-hd{
background-image: url(../images/slate/layout/panel-title-bg.gif);
border-bottom:1px solid #b5bac1;
color:white;
}
.x-layout-panel-hd-text{
color:white;
}
.x-layout-tools-button-over{
border:1px solid #4c535c;
background:#9f9f9f url(../images/slate/layout/panel-title-bg.gif) repeat-x;
}
.x-layout-close{
background-image:url(../images/slate/layout/tab-close.gif);
}
.x-layout-stick{
background-image:url(../images/slate/layout/stick.gif);
}
.x-layout-collapse-west,.x-layout-expand-east{
background-image:url(../images/slate/layout/collapse.gif);
}
.x-layout-expand-west,.x-layout-collapse-east{
background-image:url(../images/slate/layout/expand.gif);
}
.x-layout-collapse-north,.x-layout-expand-south{
background-image:url(../images/slate/layout/ns-collapse.gif);
}
.x-layout-expand-north,.x-layout-collapse-south{
background-image:url(../images/slate/layout/ns-expand.gif);
}
.x-layout-split-h{
background:#9f9f9f;
}
.x-layout-split-v{
background:#9f9f9f;
}
.x-layout-panel .x-tabs-wrap{
background:#4f4f4f;
}
.x-layout-nested-layout .x-layout-panel-north {
border-bottom:1px solid #4c535c;
}
.x-layout-nested-layout .x-layout-panel-south {
border-top:1px solid #4c535c;
}
.x-layout-nested-layout .x-layout-panel-east {
border-left:1px solid #4c535c;
}
.x-layout-nested-layout .x-layout-panel-west {
border-right:1px solid #4c535c;
}
.x-layout-panel-dragover {
border: 2px solid #4c535c;
}
.x-layout-panel-proxy {
background-image: url(../images/slate/layout/gradient-bg.gif);
background-color:#f3f2e7;
border:1px dashed #4c535c;
}
.x-layout-container .x-layout-tabs-body{
border:0 none;
}
/** Resizable */
.x-resizable-over .x-resizable-handle-east, .x-resizable-pinned .x-resizable-handle-east{
background:url(../images/slate/sizer/e-handle.gif);
background-position: left;
}
.x-resizable-over .x-resizable-handle-east, .x-resizable-pinned .x-resizable-handle-west{
background:url(../images/slate/sizer/e-handle.gif);
background-position: left;
}
.x-resizable-over .x-resizable-handle-south, .x-resizable-pinned .x-resizable-handle-south{
background:url(../images/slate/sizer/s-handle.gif);
background-position: top;
}
.x-resizable-over .x-resizable-handle-south, .x-resizable-pinned .x-resizable-handle-north{
background:url(../images/slate/sizer/s-handle.gif);
background-position: top;
}
.x-resizable-over .x-resizable-handle-southeast, .x-resizable-pinned .x-resizable-handle-southeast{
background:url(../images/slate/sizer/se-handle.gif);
background-position: top left;
}
.x-resizable-over .x-resizable-handle-northwest,.x-resizable-pinned .x-resizable-handle-northwest{
background:url(../images/slate/sizer/nw-handle.gif);
background-position:bottom right;
}
.x-resizable-over .x-resizable-handle-northeast,.x-resizable-pinned .x-resizable-handle-northeast{
background:url(../images/slate/sizer/ne-handle.gif);
background-position: bottom left;
}
.x-resizable-over .x-resizable-handle-southwest,.x-resizable-pinned .x-resizable-handle-southwest{
background:url(../images/slate/sizer/sw-handle.gif);
background-position: top right;
}
.x-resizable-proxy{
border: 1px dashed #615e55;
}
/** Toolbar */
.x-toolbar{
border:0 none;
background: #efefe3 url(../images/slate/toolbar/gray-bg.gif) repeat-x;
padding:3px;
}
.x-toolbar .ytb-button-over{
border:1px solid transparent;
border-bottom:1px solid #bbbbbb;
border-top:1px solid #eeeeee;
background:#9f9f9f url(../images/slate/grid/grid-vista-hd.gif) repeat-x;
}
.x-paging-info {
color:#000;
}
/* grid */
.x-grid-topbar .x-toolbar{
border:0;
border-bottom:1px solid #555;
}
.x-grid-bottombar .x-toolbar{
border:0;
border-top:1px solid #555;
}
.x-grid-locked .x-grid-body td {
background: #fafafa;
border-right: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1 !important;
}
.x-grid-locked .x-grid-body td .x-grid-cell-inner {
border-top:0 none;
}
.x-grid-locked .x-grid-row-alt td{
background: #f1f1f1;
}
.x-grid-locked .x-grid-row-selected td{
color: #fff !important;
background-color: #316ac5 !important;
}
.x-grid-hd{
border-bottom:0;
background:none;
}
.x-grid-hd-row{
height:auto;
}
.x-grid-split {
background-image: url(../images/slate/grid/grid-split.gif);
}
.x-grid-header{
background: url(../images/slate/grid/grid-vista-hd.gif);
border:0 none;
border-bottom:1px solid #555;
}
.x-grid-row-alt{
background-color: #f5f5f5;
}
.x-grid-row-over td{
background-color:#eeeeee;
}
.x-grid-col {
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.x-grid-header .x-grid-hd-inner {
padding-bottom: 1px;
}
.x-grid-header .x-grid-hd-text {
padding-bottom: 3px;
color:#333333;
}
.x-grid-hd-over .x-grid-hd-inner {
border-bottom: 1px solid #555;
padding-bottom: 0;
}
.x-grid-hd-over .x-grid-hd-text {
background-color: #fafafa;
border-bottom: 1px solid #555;
padding-bottom: 2px;
}
.x-grid-header .sort-asc .x-grid-hd-inner, .x-grid-header .sort-desc .x-grid-hd-inner {
border-bottom: 1px solid #555;
padding-bottom: 0;
}
.x-grid-header .sort-asc .x-grid-hd-text, .x-grid-header .sort-desc .x-grid-hd-text {
border-bottom: 1px solid #3b5a82;
padding-bottom: 2px;
}
.x-dd-drag-proxy .x-grid-hd-inner{
background: url(../images/slate/grid/grid-vista-hd.gif) repeat-x;
height:22px;
width:120px;
}
.x-props-grid .x-grid-col-name{
background-color: #eee;
}
/* toolbar */
.x-toolbar .ytb-sep{
background-image: url(../images/slate/grid/grid-split.gif);
}
.x-toolbar .x-btn-over .x-btn-left{
background:url(../images/slate/toolbar/tb-btn-sprite.gif) no-repeat 0 0px;
}
.x-toolbar .x-btn-over .x-btn-right{
background:url(../images/slate/toolbar/tb-btn-sprite.gif) no-repeat 0 -21px;
}
.x-toolbar .x-btn-over .x-btn-center{
background:url(../images/slate/toolbar/tb-btn-sprite.gif) repeat-x 0 -42px;
}
.x-toolbar .x-btn-click .x-btn-left, .x-toolbar .x-btn-pressed .x-btn-left, .x-toolbar .x-btn-menu-active .x-btn-left{
background:url(../images/slate/toolbar/tb-btn-sprite.gif) no-repeat 0 -63px;
}
.x-toolbar .x-btn-click .x-btn-right, .x-toolbar .x-btn-pressed .x-btn-right, .x-toolbar .x-btn-menu-active .x-btn-right{
background:url(../images/slate/toolbar/tb-btn-sprite.gif) no-repeat 0 -84px;
}
.x-toolbar .x-btn-click .x-btn-center, .x-toolbar .x-btn-pressed .x-btn-center, .x-toolbar .x-btn-menu-active .x-btn-center{
background:url(../images/slate/toolbar/tb-btn-sprite.gif) repeat-x 0 -105px;
}
/* combo box */
.x-combo-list {
border:1px solid #999;
background:#dddddd;
}
.x-combo-list-hd {
background-image: url(../images/slate/layout/panel-title-bg.gif);
border-bottom:1px solid #b5bac1;
color:white;
}
.x-resizable-pinned .x-combo-list-inner {
border-bottom:1px solid #aaa;
}
.x-combo-list .x-combo-selected{
background:#ddd !important;
border:1px solid #aaa;
}

captainm1uk
1 Nov 2007, 7:46 AM
Hi JC - I have found out what the problem was - it asn't the style sheet, it was the image. Your tab-sprite for v2 is different than the one in v1.1 so I edited the v1 tab-sprite to incorporate your theme and it works ok

J.C. Bize
1 Nov 2007, 11:38 AM
Hi JC - I have found out what the problem was - it asn't the style sheet, it was the image. Your tab-sprite for v2 is different than the one in v1.1 so I edited the v1 tab-sprite to incorporate your theme and it works ok

Good to hear! I'm glad you were able to figure it out. Themes in Ext 1.x were quite different and I would rather spend time creating new 2.x themes than backport 2.x themes to 1.x... especially considering the Ext 2.0 release is imminent.

Cheers,
JC

tobiu
3 Nov 2007, 2:55 AM
Hi J.C.,

i really like your theme!

i played around with it a bit and found two little bugs:



.x-grid3-hd-btn{
background:red url(../images/slate/grid/grid3-hd-btn.gif) no-repeat left center;
}


-> if you move your mouse over the grid hd for the first time, it blinks red in firefox for the short time, until the image is loaded. better a color similar to the image.

the second thing is a bit more general: if you use a grid with a paging toolbar, the font color of beforePageText, afterPageText etc. seemed black (or gray?) on a blue background, while on other ones always white is chosen.


kind regards, tobiu

J.C. Bize
3 Nov 2007, 5:19 AM
Thanks tobiu! I appreciate your reporting these quirks. The paging toolbar appearance was definitely an oversight on my part. I have now fixed these inconsistencies (as well as the one reported by dantheman earlier) and updated the attachment in my original post to revision 3. I've also tweaked some of the Grid colors a bit, hopefully making the theme a bit less monochromatic. Comparison shots:

Old and busted :(
http://img61.imageshack.us/img61/9420/oldandbustedde1.png

New hotness :)
http://img61.imageshack.us/img61/3690/newhotnessio2.png

Jul
3 Nov 2007, 4:19 PM
Those tweaks are very nice. Great use of complimentary colors. This is unquestionably the most polished theme extension to Ext 2.0 now.

mdissel
4 Nov 2007, 3:03 AM
Thanks! Very nice!

bobwaycott
5 Nov 2007, 4:31 PM
I'm noticing that toolbar buttons aren't being styled. Am I missing something?

J.C. Bize
5 Nov 2007, 4:50 PM
I'm noticing that toolbar buttons aren't being styled. Am I missing something?

The toolbar buttons should be styled. Are you referring to the Grid's paging toolbar, or just any other plain old toolbar? You can see the styled paging toolbar in the Grid screenshots I posted a few days ago, or plain old toolbars being styled in the first screenshot of my original post.

Let me know if somehow we are talking about two different things.

Cheers,
JC

bobwaycott
5 Nov 2007, 5:00 PM
Right now, all I have is a toolbar through Ext.Toolbar

The background is there. But none of the menu buttons are styled properly. I have ext-all.css and xtheme-slate.css linked in the html.

Any thought on what I'm doing wrong in implementing the theme?

EDIT: Geez . . . I think 12 hours ought to just be my limit. I was linking xtheme-slate.css before ext-all.css . . . As someone who's done this for years, I should have known the problem. I just looked back at my source and saw it. Link xtheme-slate.css after ext-all.css and everything's beautiful. Thanks. The theme looks great so far.

J.C. Bize
5 Nov 2007, 5:12 PM
Right now, all I have is a toolbar through Ext.Toolbar

The background is there. But none of the menu buttons are styled properly. I have ext-ass.css and xtheme-slate.css linked in the html.

Any thought on what I'm doing wrong in implementing the theme?

Can you please post some screenshots and code to help me reproduce this issue?

Are you able to see the themed toolbar in the Menu sample that ships with Ext? Here is what it should look like:


http://img139.imageshack.us/img139/8835/slatemenusxi5.png

Any additional information you can provide would be helpful.

Cheers,
JC

bobwaycott
5 Nov 2007, 5:20 PM
FOLLOW-UP: Fixed. See my EDITed response. Thanks, though. This was definitely my own stupidity, not an oversight on your part. I'm liking the look so far. Thanks again.

EDIT: I also fixed the ext-all.css typo so brilliantly displayed in your quoting me before I realized my mistake. Sorry. Wasn't trying to be foul.

J.C. Bize
5 Nov 2007, 5:24 PM
I'm glad to hear things worked out! Thanks for following up. FYI, I had a good laugh at that typo. :)

Cheers,
JC

bobwaycott
5 Nov 2007, 5:30 PM
FYI, I had a good laugh at that typo. :)

Yeah . . . not sure what happened there. S is nowhere near L, after all.

JeffHowden
5 Nov 2007, 11:25 PM
No, but both keys are typed with the ring fingers (just on different hands).

mkidder
9 Nov 2007, 2:32 PM
Great theme... has the images/icons on the 'htmleditor' been addressed yet, or is this something yet to do?

Thanks for your work on this....

J.C. Bize
9 Nov 2007, 5:04 PM
Great theme... has the images/icons on the 'htmleditor' been addressed yet, or is this something yet to do?

To be honest, they don't look quite right... This is due to the dark toolbar background as well as the antialiasing in the default theme's icons. I'll look into it this week-end.

Cheers,
JC

Rock
10 Nov 2007, 3:58 AM
very nice! good god!

thejoker101
10 Nov 2007, 5:25 PM
Are you planning to skin the Resizable handle?

bobwaycott
12 Nov 2007, 9:48 PM
I'm really liking this theme for my current project. Here's something strange:

In FF (haven't checked IE yet), I have a toolbar rendered. Everything looks quite nice. When I drop down a menu and click an item, the toolbar text goes all gray. When I mouse over the items again, they appear white, as they should be?

Is this due to a CSS property I haven't yet found or something else?

J.C. Bize
13 Nov 2007, 12:57 PM
I'm really liking this theme for my current project. Here's something strange:

In FF (haven't checked IE yet), I have a toolbar rendered. Everything looks quite nice. When I drop down a menu and click an item, the toolbar text goes all gray. When I mouse over the items again, they appear white, as they should be?

Is this due to a CSS property I haven't yet found or something else?

I'm not able to reproduce this issue in FF... Can you reproduce it with any of the Ext samples? Do you have a code sample you can post?

Edit: I've got a minor update ready for release now but would like to make sure this issue is fixed, if I can reproduce it.

Cheers,
JC

icono77
14 Nov 2007, 10:57 AM
Hi J.C.

How I can download the latest version of the "Slate" theme, is very nice and I would like to contribute it by making test. :D

regards,
icono77.-

potdarko
14 Nov 2007, 11:30 AM
it's attached to the 1st post in this thread...
or try here: Slate Theme rev3 (http://extjs.com/forum/attachment.php?attachmentid=2297&d=1194095176)

bobwaycott
14 Nov 2007, 11:58 AM
I'm not able to reproduce this issue in FF... Can you reproduce it with any of the Ext samples? Do you have a code sample you can post?

Edit: I've got a minor update ready for release now but would like to make sure this issue is fixed, if I can reproduce it.

Cheers,
JC

I've got a link for you:

http://www.corporatesafety.us/srs/safety2.html

First, notice how nice and bright the white text is for the menu parents. click a child: 'Add New Contractor' -- notice the toolbar text goes all gray until you mouse over again.

icono77
14 Nov 2007, 2:33 PM
it's attached to the 1st post in this thread...
or try here: Slate Theme rev3 (http://extjs.com/forum/attachment.php?attachmentid=2297&d=1194095176)

Thk!! :D

J.C. Bize
14 Nov 2007, 3:22 PM
First, notice how nice and bright the white text is for the menu parents. click a child: 'Add New Contractor' -- notice the toolbar text goes all gray until you mouse over again.

Awesome, thanks for providing the link! Just so I'm clear, are you referring to the difference in color between when a top-level menu item is being hovered over and when it is not?

E.g.: 2739 vs. 2738 (open in 2 new tabs and flip back and forth to see the difference). The first color is #ffffff while the second one is #f4f4f4, which is very slightly darker.

If so, there is not much that can be done about that in the theme itself... When hovered over, a menu button is assigned the css class ".x-toolbar .x-btn-over button" however when you move the mouse away from it (such as to one of its subitems), Ext reassigns the standard class ".x-toolbar button" to it instead... which is why it's turning slightly darker. I would argue that this is incorrect behavior and that the top-level menu button really should appear highlighted as long as its submenu is expanded, but I doubt most people would notice.

For now if you want to make all top-level menu items bright white so that this quirk is no longer noticeable, add the following override to your app's CSS (must be after the include for xtheme-slate.css):


.x-toolbar button {
color:#fff;
}

Hopefully this makes sense... Let me know if I am misunderstanding what you are reporting.

Cheers,
JC

bobwaycott
14 Nov 2007, 3:25 PM
Actually, that part's fine. It's when you click an item. Drop down the Contractors menu and click the add button. A window pops up. Notice that the toolbar items are now darker than white?

Is that in the CSS? Once I hover over them, they go white again.

J.C. Bize
14 Nov 2007, 3:37 PM
Hmm that's strange, I'm just not seeing it in IE7 or FF2.

This is how it looks after I click on Contractors > Quick Add Form:

2740

The color of the toolbar items is the same as it was prior to clicking the menu item. Are you seeing something different?

Cheers,
JC

bobwaycott
14 Nov 2007, 3:51 PM
I see this:

Picture 1: Pre-click (each parent item in the toolbar looks both white and bold)
Picture 2: Post-click (each parent item looks grayish and not bold)

EDIT: Again, this is, oddly, only happening in Firefox. Safari, Camino, and Internet Explorer don't do this. (And this is Firefox on a Mac)

EDIT2: Not repeatable in Firefox on Windows XP. Strange.

J.C. Bize
14 Nov 2007, 4:08 PM
EDIT: Again, this is, oddly, only happening in Firefox. Safari, Camino, and Internet Explorer don't do this. (And this is Firefox on a Mac)

EDIT2: Not repeatable in Firefox on Windows XP. Strange.

Ah, no wonder I could not reproduce it! :) I'm on XP... I was trying to change my Cleartype settings, but that made no difference... I'm guessing this is what you're running into here, some kind of a font smoothing issue.

Cheers,
JC

bobwaycott
14 Nov 2007, 6:43 PM
JC, thanks a bunch for looking into this with me. Sorry to delay your update. I am guessing it is something the Mac is doing under Firefox that it's not doing under Camino and Safari, and Windows isn't doing it in either IE or FF.

I love the theme, as does my boss and our client. Thanks a bunch.

Bob

J.C. Bize
15 Nov 2007, 6:42 PM
The theme has now been updated to revision 4. Please see the first post in this thread for a list of updates.

Bob, thanks for troubleshooting, and you're quite welcome - I'm glad you find the theme to your liking.

mkidder, thejoker101, the HTML Editor and Resizable handles have been addressed in this update. Thanks for your patience!

Cheers,
JC

bbiao
15 Nov 2007, 8:54 PM
it's nice

xjdawu
18 Nov 2007, 6:30 PM
Great!
I think it's a great work, how long did it take you?

J.C. Bize
18 Nov 2007, 10:40 PM
Great!
I think it's a great work, how long did it take you?
Thanks for the kind words!

I actually did most of the work over one week-end... including the tweaks/updates made afterwards, I'd say I probably spent a total of about 20 hours or so. It really wasn't too bad.

Cheers,
JC

adrian.tarau
19 Nov 2007, 1:04 PM
Hello J.C,

Thanks for your skin, it's really nice. I would like to create my own skin and it will be really useful to have a starting point :)

Did you made the skin images in Photoshop? If yes, can you share the PSD file?

Thanks.

kohwuyea
19 Nov 2007, 5:04 PM
thanks for your great jobs,and I have applied it in my Ext project,wooooooo,It looks so
forcomfortable.

Iveco
20 Nov 2007, 6:23 AM
Thanks for the theme.

Really nice job, well done!

Thanks!

alexi
22 Nov 2007, 3:41 PM
Could somebody point me to a page that explains how to enable the Slate theme.

Thank you,

Alex

sigaref
23 Nov 2007, 6:41 AM
Could somebody point me to a page that explains how to enable the Slate theme.

Thank you,

Alex

First decompress the files in the correct resource path, then use the following lines:


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

BernardChhun
25 Nov 2007, 4:22 AM
:) it's quite a beautiful work dude!

rikugun
25 Nov 2007, 10:02 PM
wonderful ,TKS for share

dantheman
26 Nov 2007, 8:03 AM
J.C., your slate theme richly deserves the attention it's getting.

Many thanks,
--dan

J.C. Bize
26 Nov 2007, 9:58 AM
Hello J.C,

Thanks for your skin, it's really nice. I would like to create my own skin and it will be really useful to have a starting point :)

Did you made the skin images in Photoshop? If yes, can you share the PSD file?

Thanks.


Hi Adrian,

Sorry for the delay, I was out most of last week for Thanksgiving break.

I mostly used Corel PSP to create the skin, and unfortunately I don't have any sort of "reference" image that you could start from... I just used the existing Gray and Default themes as templates and worked my way one component at a time.

Cheers,
JC


PS: Thanks everyone for your positive feedback!

brian.moeskau
7 Jan 2008, 8:59 AM
This thread was closed, but I've re-opened it. If it was closed for a reason, please let me know.

Ytorres
8 Jan 2008, 5:05 AM
Hi J.C. and thanks for this very great theme.

About tool.sprites.gif, there's no "Help" img.

Could you add this to your theme ?

firzen
13 Jan 2008, 8:31 AM
great work!!!!!!!1

J.C. Bize
14 Jan 2008, 6:35 AM
I'm not sure why this thread was closed, but thanks for reopening it.

Yves, I can definitely add the Help image to the theme. I'm going to wait a few days before releasing an update though, just in case someone else has another issue to report.

Cheers,
JC

Ytorres
14 Jan 2008, 9:21 AM
I'm not sure why this thread was closed, but thanks for reopening it.

Yves, I can definitely add the Help image to the theme. I'm going to wait a few days before releasing an update though, just in case someone else has another issue to report.

Cheers,
JC

So thanks JC for this !

Could you please review all yours greats themes & add this button for all ?

I have notice some issue with "Black Theme", for example.... it's yours too, no ?
Anyway, if you want to see all your theme in action & find some issue, you can go to http://extjs.keliglia.com ; this is my demo server (witch show Desk-Kregator, an Atom/RSS viewer that i wrote). There is some theme's bug on it (text on status bar, text on preview panel... generaly, pb with font color)

dantheman
14 Jan 2008, 9:40 AM
I have notice some issue with "Black Theme", for example.... it's yours too, no ?No. Those you refer to are by Madrabaz.

--dan

jeswa
14 Jan 2008, 10:44 AM
i'm having trouble installing these themes.
i'm using extplorer, maybe that's my issue?
i've looked around but can't find an answer.
sorry, i'm not much of a programmer.

here's what my extplorer looks like:
http://devinesound.net/Picture4.png

Any hints?

ckr
15 Jan 2008, 5:48 AM
You should be able to unzip in the resources directory.
Then in your html link to the css.
I have my stuff installed in /extjs so the head in my html would look like



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

jeswa
20 Jan 2008, 7:56 PM
sorry for the noobish question, but which html file do i add the css links to?

J.C. Bize
28 Jan 2008, 4:45 AM
jeswa,

Are you still trying to figure out the answer to your question? I think Chuck covered it pretty well above, so hopefully you were able to resolve this issue.

Cheers,
JC

willydee
29 Jan 2008, 4:05 AM
Hello J.C.,
there's a little problem with styling of QuickTips (see attached screenshot)

J.C. Bize
30 Jan 2008, 7:34 AM
Thanks WillyDee,

I was able to reproduce the QuickTips issue and it is fixed in the latest version of the theme. I've also added the Help and Print tool sprites.

If no one has any other issues to report I will release this minor update at the end of the day.

Cheers,
JC

yelirekim
31 Jan 2008, 10:05 AM
i'm having pretty major issues with this, my window looks like this: http://yelirekim.com/brandaid/img/capture/Capture.JPG

and the only thing i've changed is the CSS link in the header, it used to look like this:

http://yelirekim.com/brandaid/img/capture/Capture2.JPG

i haven't deployed exactly as you had mentioned in your post, I have the CSS file in /css and the images for your theme are saved in /img/ext/slate, but i updated the css file to properly reference the folder, any idea why it's not working properly?

J.C. Bize
31 Jan 2008, 10:12 AM
Hi yelirekim,

Do you have a link to the page in question that I can access, or can you post a short sample so that I can reproduce this problem locally? I'll try to get this fixed ASAP as I'd like to release the minor update today.

Cheers,
JC

yelirekim
31 Jan 2008, 10:28 AM
I figured out what the problem with it was, I hadn't included the original ext-all.css file, it seems kind of inneficient to be overwriting all of the ext-all configuration, I think i might try to manually merge the two documents to remove redundancy.

Would anybody be interested in this?

J.C. Bize
31 Jan 2008, 10:56 AM
it seems kind of inneficient to be overwriting all of the ext-all configuration, I think i might try to manually merge the two documents to remove redundancy.

Actually, xtheme-slate.css overrides only those parts of ext-all.css with which it differs. This is why you have to link to both files in your HTML page.

The Slate theme CSS file is 18kb. If your web server is configured properly it should be gzip'd down to a mere 3kb when sent to the client, where it will subsequently be cached. I think in practice the benefits of merging with ext-all.css would be negligible.

I'm glad you figured out what the issue was... enjoy the theme!

Cheers,
JC

J.C. Bize
31 Jan 2008, 11:45 AM
Updated to revision 5.

Cheers,
JC

bhaidaya
1 Feb 2008, 10:07 AM
You should include this in the Themes section. Nice stuff.
http://extjs.com/learn/Ext_Extensions#Ext_2.0_Themes

J.C. Bize
1 Feb 2008, 11:07 AM
Done, thanks for the reminder.

Cheers,
JC

Snake.Zero
2 Feb 2008, 10:36 PM
Oh~that's beautiful!

rstanley
4 Feb 2008, 9:14 AM
Incredible...!!!!

Thanks ;)

foog
14 Feb 2008, 8:14 AM
Nice Job this is the best theme yet.

Rajkumar
6 Mar 2008, 9:54 PM
themes very useful, Thanks

austin1030
7 Mar 2008, 9:12 AM
January 31 2008 update:

Revision 5 is a minor update to fix an issue with QuickTips, and to add the Help and Print (see SVN rev #1609). Successfully tested with Ext JS 2.0.1.

Note: scroll down past the screenshots to the bottom of this post to download the attachment.

Cheers,
JC


Screenshots:

http://img206.imageshack.us/img206/9878/screen1wm2.png

http://img520.imageshack.us/img520/9940/screen2oj9.png

http://img521.imageshack.us/img521/7656/screen3ds8.png

http://img254.imageshack.us/img254/5968/screen4hb2.png

http://img204.imageshack.us/img204/3331/screen5xg9.png


Previous Updates:



Download:

WOW!!! excellent work...thanks..:D:D

gpstatnon
20 Mar 2008, 6:33 PM
Thanks very cool theme!

qwerti
26 Apr 2008, 2:12 AM
I don't suppose we'd be lucky enough to get this beautiful theme for Ext 2.1?

Micko
11 May 2008, 6:33 AM
Hi,

Nice job !! - The theme looks superb. One small problem, when the zip file is downloaded, it says that its invalid when attempting to open it.

Can anyone help?

Thanks
Micko

J.C. Bize
12 May 2008, 12:18 AM
Hi,

Nice job !! - The theme looks superb. One small problem, when the zip file is downloaded, it says that its invalid when attempting to open it.

Can anyone help?

Thanks
Micko

Hi Micko,

I just double-checked and the ZIP file is opening properly for me in WinRAR. Please try clearing your browser cache and download the theme again.

Cheers,
JC

J.C. Bize
12 May 2008, 1:54 AM
I don't suppose we'd be lucky enough to get this beautiful theme for Ext 2.1?

I do have an update available for Ext 2.1, however at the moment I am waiting to hear back regarding licensing before I release it. I posted the question in the Open Source License Exception thread (http://extjs.com/forum/showthread.php?p=166656#post166656). Once that gets sorted out, I'll be able to release the update. Thanks for your patience!

Cheers,
JC

Micko
12 May 2008, 8:06 AM
Hi Micko,

I just double-checked and the ZIP file is opening properly for me in WinRAR. Please try clearing your browser cache and download the theme again.

Cheers,
JC

Hi JC,

Thanks for your prompt response. It worked a treat!.

Cheers
Micko

gates_lee
5 Jun 2008, 12:26 AM
well done.
thanks for shareing.
i like it

qwerti
16 Jun 2008, 7:08 PM
I do have an update available for Ext 2.1, however at the moment I am waiting to hear back regarding licensing before I release it. I posted the question in the Open Source License Exception thread (http://extjs.com/forum/showthread.php?p=166656#post166656). Once that gets sorted out, I'll be able to release the update. Thanks for your patience!



Hi JC,

Are you happy with the outcome of the licensing thread? Would be a great to see the 2.1 version posted.

Thanks!

Blue123
1 Jul 2008, 8:41 AM
How can I use this theme on extGwt?

BTW: very nice theme!!! Congratulations! :)

spsenthilraja
19 Jul 2008, 12:43 AM
Thanks...

papagallo
22 Jul 2008, 9:28 AM
A very slick and eye-candy theme. Thank you for contributing. :)

qwerti
7 Aug 2008, 2:53 AM
Will this be available for 2.2 now, seeing as we weren't graced with a 2.1 version? :D

fanzzz
11 Aug 2008, 6:47 PM
nice work

J.C. Bize
18 Aug 2008, 1:14 PM
Will this be available for 2.2 now, seeing as we weren't graced with a 2.1 version? :D

I should have a 2.2 version available at the end of the week.

Cheers,
JC

tim.sporcic
18 Aug 2008, 7:30 PM
Fantastic news, JC! Slate is best Ext theme I've seen so far, and I'm sure I'm not alone in saying we really appreciate the hard work you have put in to it.

I look forward to seeing the 2.2 version.

Thanks,
-Tim

Vaevictus
28 Aug 2008, 12:37 AM
eagerly awaiting a 2.2 version :D

any news?

J.C. Bize
28 Aug 2008, 5:50 PM
Sorry about the delay, I've been out of town these last few days. The update will be out some time this weekend.

Cheers,
JC

J.C. Bize
2 Sep 2008, 6:30 PM
Again, sorry about the delay. The work on an Ext 2.2 version of the theme is now complete.

At this time I am waiting for word back from Ext licensing to release the update. It's still not 100% clear what the best way is to make the theme available to both Free and Commercial users.

Hopefully I will hear back from them quickly. In the past I've received a reply after one day, and another one after two months. :) If I haven't received a reply by the end of the week, I will release under two distinct licenses, GPLv3 and CC-BY-SA, and just cross my fingers that I'm not breaking the Ext license.

Cheers,
JC

djcode
5 Sep 2008, 5:06 PM
Hey mate, awsome theme... it is by far my favorite one available.

The only odd thing I have noticed so far is with a split button item, as you can see the arrow has a bright green background :)

http://shup.com/Shup/60565/1088519152-My-Desktop.png

Just wanted to throw that out there in case its something you would like to fix, cheers.

J.C. Bize
8 Sep 2008, 2:49 PM
Hey mate, awsome theme... it is by far my favorite one available.

The only odd thing I have noticed so far is with a split button item, as you can see the arrow has a bright green background :)

http://shup.com/Shup/60565/1088519152-My-Desktop.png

Just wanted to throw that out there in case its something you would like to fix, cheers.

Thanks! This has been fixed in the latest version.

I've been exchanging emails with Ext licensing these past few days. Hopefully we can find a way to make this update available to everyone soon.

Cheers,
JC

djcode
8 Sep 2008, 2:51 PM
Awsome... I hope so too! Keep up the good work!

Darklight
9 Sep 2008, 3:38 AM
nice, can't wait for the fixed 2.2 version! thanks for the update!
Ext Licensing: hurry ;)

Darklight
16 Sep 2008, 6:32 AM
any update on the update?

ZooKeeper
17 Sep 2008, 2:15 AM
What's the delay? What can the problem be? There's like 10 other Ext themes out there and they don't seem to have any problems with licencing.

mjlecomte
17 Sep 2008, 5:30 AM
What's the delay?
You must be kidding? Surely you could do this yourself if you're in such a rush?

tim.sporcic
17 Sep 2008, 11:43 AM
You must be kidding? Surely you could do this yourself if you're in such a rush?

He asks a fair question. J.C. says the work on the 2.2 update is done. And Ext, LLC, has published their Open Source License Exception (http://extjs.com/products/ux-exception.php). Since J.C. has not made the update available and is swapping emails with Ext, LLC, it means he is not satisfied with the licensing exception and is probably seeking to have changes made.

That means either J.C. compromises and accepts the constraints Ext, LLC, has placed around licensing extensions, or Ext, LLC, modifies their licensing to accomodate J.C.. Since Ext, LLC, hasn't demonstrated much tact in their licensing, I'm not expecting them to compromise for J.C., even if it is the best alternate theme for ExtJS.

If the negotiations are at a standoff, then the users just want to know. It potentially means Slate is now dead and we move on.

-Tim

ZooKeeper
17 Sep 2008, 12:00 PM
If I needed it badly I sure would have done it myself.
It's just the author is saying the theme is done. And I cann't really figure what can possibly the issue be with licensing since he's not using ANY Ext code. It's just a css file with a bunch of images HE created.

brian.moeskau
17 Sep 2008, 12:51 PM
We are working with J.C. and will have an update shortly. There's no call for speculating about "negotiations" etc. J.C. has delayed to ensure that there are no licensing issues -- i.e., watching out for you, the user, who gets to benefit freely from his work. I think a little patience is not too much to ask.

The updated theme will be bundled in Ext going forward thanks to J.C.'s generosity, so licensing will not be a concern. I'll update this thread again once it is available.

J.C. Bize
17 Sep 2008, 10:03 PM
Thanks Brian, I appreciate your reply.

Sorry about the delay guys, I didn't want to make any announcement before things were finalized.

There will be no need to worry about licensing issues going forward, whether you are an Ext JS Free or Commercial or user. Yay!

Cheers,
JC

Darklight
18 Sep 2008, 7:30 AM
w00t, can't wait!

Bruce wang
22 Sep 2008, 2:02 AM
thank you very much!

brian.moeskau
22 Sep 2008, 9:24 AM
The updated Slate theme has officially hit the SVN 2.2 branch and will be available in the download for the next version of Ext. Thanks once again to the hard work and generosity of JC in making this happen.

Darklight
22 Sep 2008, 9:30 AM
thanks!
no way to get update without SVN access? is there an ETA for the next version?

dbraiden
30 Sep 2008, 8:28 AM
If i have SVN access can i download the latest version of this theme with all the fixes?

Regards
Dave

mjlecomte
30 Sep 2008, 9:04 AM
If i have SVN access can i download the latest version of this theme with all the fixes?

Regards
Dave

Appears it was checked in 9/22/08.

mikecx
6 Nov 2008, 8:35 AM
Any updates on the status or perhaps an idea of what needs to be fixed on the current version to make it work right for 2.2 and splitbuttons?

Thanks for all the hard work on this theme!

twosouth
13 Nov 2008, 6:47 AM
Does anyone know where to find a clean version?

Thanks,
Scott

pjesus
14 Nov 2008, 3:56 AM
Is possible to anyone release to the community (that don't have access do SVN) the Theme Slate reviewed to extJs2.2 ?

I think We all will appreciate.

Thank You for all the excellent work on ExtJs.

Regards

Paulo Jesus

Darklight
14 Nov 2008, 4:02 AM
i agree, why can't you just release the fixed version right now? if this is such an open source project, why are you locking this theme away only for paying customers?

pjesus
14 Nov 2008, 10:51 AM
Hi again.

I'm a paying costumer of extJs, i just don't payed for the support, and only users with support have access to SVN. I use slate in a project of mine, and with FF3 some things are broken, that's why I've made this request.

Thankz again.

Paulo Jesus

pjesus
17 Nov 2008, 1:40 AM
bump

tonedeaf
17 Nov 2008, 5:59 AM
Wow, its almost two months when it was checked in to SVN and still noone outside of premium access gets to download the theme!

Like pjesus, I've bought a commercial license for ExtJS, just not bought a support subscription. Does that mean that we cannot get to integrate this theme into our applications? Why is the release of this theme connected to an existing support subscription?

wm003
17 Nov 2008, 9:48 AM
Hi again.

I'm a paying costumer of extJs, i just don't payed for the support, and only users with support have access to SVN.

Just curious: i always thought paying Ext-members automatically get Premium members here in the forum at least? is getting a forum premium member bound to buy a support subscription? i'm gonna read the commercial licenses once more.../:)

pjesus
17 Nov 2008, 9:53 AM
Just curious: i always thought paying Ext-members automatically get Premium members here in the forum at least? is getting a forum premium member bound to buy a support subscription? i'm gonna read the commercial licenses once more.../:)

Hi.

Nop, you only get access to premium member buying support.

If I'm wrong, please tell me what I have to do to get access to SVN and Premium Support in the Forums.

Cumptz

Paulo Jesus

pjesus
18 Nov 2008, 3:17 AM
bump

pjesus
21 Nov 2008, 2:00 AM
Is possible to anyone release to the community (that don't have access do SVN) the Theme Slate reviewed to extJs2.2 ?

I think We all will appreciate.

Thank You for all the excellent work on ExtJs.

Regards

Paulo Jesus

bump

tonedeaf
21 Nov 2008, 5:24 AM
I sent PMs to brian.moeskau and jack.slocum but didn't recieve any replies. Today I mailed J.C. requesting him to provide the latest theme for ExtJS 2.2

I hope we see a resolution soon for this issue.

pjesus
21 Nov 2008, 8:44 AM
I sent PMs to brian.moeskau and jack.slocum but didn't recieve any replies. Today I mailed J.C. requesting him to provide the latest theme for ExtJS 2.2

I hope we see a resolution soon for this issue.

I hope so!

Thank You ;)

PJ

pjesus
26 Nov 2008, 7:59 AM
Hi there.

I'm asking myself if I need to put a post in the bug forum...... maybe someone of ext support team will read this thread??????

After a lot of PM's and a lot of posts no one replied to this question, why?????? :(

Is a sensible question?????? (:|

Cumptz

Paulo Jesus

mjlecomte
26 Nov 2008, 10:13 AM
Dunno, but perhaps you have your answer already. If you want access to svn and what it has you need to subscribe to svn, otherwise wait for the updates when they are released. This theme was checked in to svn.

The bug thread is for bugs, not for feature requests or enhancements. I doubt you'll help your cause posting there.

probert
27 Nov 2008, 6:21 PM
Great one. Very awesome. Really enjoy it. :)

Best regards.

hansellh
28 Nov 2008, 12:39 AM
try this

tonedeaf
28 Nov 2008, 2:20 AM
Thanks hansellh !!

pjesus
28 Nov 2008, 4:24 AM
Thank you ;)

LisburnLad
16 Jan 2009, 4:30 AM
Neither the "resources.zip" file on this page, nor the zip from the original post, seem to be valid. Has something happened to them?

It also appears that this theme did not get included with the 2.2 release as had been promised. Is there somewhere else where I can obtain this theme, or could someone repost a working zip file?

Thanks for any help

yannah
26 Jan 2009, 7:17 PM
hey guys... when i tried downloading the zip file.. it is somehow corrupt and cannot be opened here in my end.

could someone pls re-post the zip here? many many thanx

provagino
26 Jan 2009, 11:57 PM
hey guys... when i tried downloading the zip file.. it is somehow corrupt and cannot be opened here in my end.

could someone pls re-post the zip here? many many thanx


try downloading with firefox
IE has problems with vBulletin

wm003
27 Jan 2009, 12:03 AM
hey guys... when i tried downloading the zip file.. it is somehow corrupt and cannot be opened here in my end.

could someone pls re-post the zip here? many many thanx

try using firefox...works fine

yannah
27 Jan 2009, 5:59 PM
Hey Guyssss... Many many thanx!!!! Godbless u all \:D/

yannah
30 Jan 2009, 12:40 AM
one more problem.. when my page loads -- the default css (aero glass) was displayed eventhough i've already done this :

<link...... src="ext-all.css">
<link.......src="xtheme-slate.css" >

but as i do continue doing transaction with this page... then that's the time the slate theme was loaded.

what's wrong with this? tnx for the help. :)

PLaymaker-37
3 Feb 2009, 10:42 PM
:)...thnx!!!

nikhilkrishnan
10 Feb 2009, 4:49 AM
WOW great work .... Its awesome...

ComputerSnacks
10 Feb 2009, 10:56 AM
Looks good! Great work!

stmulligan
16 Feb 2009, 6:56 PM
So once you install the theme files and folders, how do you select that theme for use in your code?

mystix
16 Feb 2009, 9:56 PM
So once you install the theme files and folders, how do you select that theme for use in your code?

to use the theme, simply include the theme css file immediately after ext-all.css.

lferland
2 Mar 2009, 8:07 PM
http://img206.imageshack.us/img206/9878/screen1wm2.png

Saurabh.Maind
12 Mar 2009, 5:15 AM
Thanks it is the best theme ,
Thanks once again

Muktha
4 May 2009, 8:17 PM
Thanks u very much for this theme. relay good.:)

rjackson64840
15 May 2009, 8:44 AM
I tried the slate theme with ExtJS 3 RC1 and from what I can tell it looks very sharp, but the buttons don't look correct and are not styled as shown in the first posting on this thread. Perhaps I am doing something wrong.

brentdooley999
27 May 2009, 8:31 AM
rjackson, I am having the same problem. It seems some of the element names and background-image layouts have changed with the new version. From a quick glance it looks like the new layouts were added for better/cleaner resizing of buttons.

Does anyone know if there is plans to update Slate? Has anyone managed to fix this on their own?

OutpostMM
31 May 2009, 11:16 AM
Here's a quick fix. Download the attached file, it contains btn.gif. Copy btn.gif to the ext/resources/images/slate/button directory. Open the slate CSS file, and add these rules to it:


.x-btn button{
color:#fff;
}
.x-btn-tl, .x-btn-tr, .x-btn-tc, .x-btn-ml, .x-btn-mr, .x-btn-mc, .x-btn-bl, .x-btn-br, .x-btn-bc{
background-image:url(../images/slate/button/btn.gif);
}

brentdooley999
1 Jun 2009, 11:21 AM
Looks great, thanks.

Frank
2 Jun 2009, 4:13 AM
Thanks for sharing!

tfrugia
5 Jun 2009, 9:18 AM
In Ext 3.0 (RC2) the HTML Editor icons do not work properly with the slate theme (every icons show the bold icon). Any chance of getting that fixed?

mschwartz
16 Jun 2009, 12:50 PM
.x-toolbar{
border-color:#abc;
background:#516275 url(../images/slate/toolbar/bg.gif) repeat-x top left;
}
A toolbar that's taller than 56 pixels looks really messed up otherwise.

Pressed buttons still look like blue theme. (toggle buttons can be in all the time, looks messed up...)

But awesome and thanks

mschwartz
17 Jun 2009, 4:57 AM
Something not quite right about menus.

As I highlight menu items, the whole menu gets wider/narrower, depending on the width of the highlighted item.

maxjosino
29 Jun 2009, 6:03 AM
Nice colors and icons!

Good job!

:D

italoc
11 Aug 2009, 12:50 AM
i have a problem with htmleditor i don't see the icon..

can you help me?

omermx
11 Aug 2009, 11:14 AM
Hi not sure if anyone else has encountered this problem, but this theme doesnt seem to work with button groups - see attached image.

eyurdakul
30 Aug 2009, 12:57 PM
very nice template but i am getting same bold icon for all buttons on htmleditor.

eyurdakul
31 Aug 2009, 9:33 AM
i've found a quick solution for the html editor cause i didn't have time to investigate deeper and latest version of firebug makes it more difficult! If you're having similar problem (you should if you use slate and html editor) comment line 370 in xtheme-slate.css and put the toolbar image (i don't know the name) /resources/images/xslate/editor/somethingwithtb.jpg to the /resources/images/default/editor/. This is not a clean solution but it did the job.

kavih7
8 Sep 2009, 10:26 PM
Man, it would be great to have the author go through and update his theme for Ext 3.0. The SpinnerField is also missing its up/down images. Might be a quick fix, but I haven't looked into it yet.

PLEASE J.C. BIZE, it would be great of you to update your theme for 3.0! :)

J.C. Bize
9 Sep 2009, 9:27 AM
Sorry for the lack of updates, it's been pretty busy. I'll begin work on a proper conversion in a week or two.

Note that Dave Sanders has already started converting the theme for 3.0; you can find his work here: http://www.extjs.com/forum/showthread.php?t=65633

Regards,
JC