What steps will reproduce the problem?
When setting a background-color for .mochaTitlebar in the ui.css I get a colored square above
the window canvas.
What is the expected output? What do you see instead?
As a wbdesigner I would expect that setting the background-color in the css would result in a
gradient of that color applied to the titlebar.
What version of MochaUI are you using?
r395
On what operating system and with what browser?
Safari 3.2.1, Firefox 3.0.5 and Opera 9.60.5246
A simple solution which could lead to better themeing of MochaUI is to look at the background-
color, apply that to the canvas and then removing the background-color. I have done just that in
the hack below which should be inserted after the window is inserted into the DOM (line 502 in
Window.js):
// Set TitlebarColor
if (this.titleBarEl.getStyle('background-color') !== '') {
this.options.headerStartColor = new Color(this.titleBarEl.getStyle('background-
color')).mix('#fff', 20);
this.options.headerStopColor = new Color(this.titleBarEl.getStyle('background-
color')).mix('#000', 20);
this.titleBarEl.setStyle('background-color', 'transparent');
}
By adding the following to the ui.css you can se the changes on the parametrics window and in
the json demo:
.mochaTitlebar {
background-color: #fff000;
}
json01 .mochaTitlebar {
background-color: #ff0000;
}
json02 .mochaTitlebar {
background-color: #0000ff;
}
json03 .mochaTitlebar {
background-color: #00ff00;
}
Sorry for spamming you with all of theese issues but I'm between jobs and thought it would be a
good time to get to know this cool library a bit!
Comment 1 by gregory.houston, Jan 30, 2009
This is a great idea. I want to think about it a bit more, but will probably
implement it in a future release.
Feel free to spam as much as you wish. :)
Summary: Color Theming in CSS
Labels: -Type-Defect -Priority-Medium Type-Enhancement Priority-Low
Comment 2 by gregory.houston, Feb 26, 2009
This has been implemented in r502. Rather than setting titleBarEl's background-color
to transparent with JavaScript, the title bar is given the class, "replaced", which
allows for dynamic Theme changes.
As well in r502, all of the window color options can be set in the CSS, and this is
now the preferred method. Setting them in the Window options will be deprecated.
headerStartColor: .mochaTitlebar background-color (See notes below.)
headerStopColor: .mochaTitlebar background-color (See notes below.)
If you set the background color of .mochaTitlebar, a gradient will be created from
that value. The gradient will start with the value you gave plus 20% white, and end
with the value you assigned plus 20% black. So the color in the middle of the
gradient should be the color you defined.
If you want more control over the start and end colors of the gradient then you will
need to set the background-image of .mochaTitlebar in the following way. Here we got
a bit creative using a query string appended to a background image.
"from" is the top color of the gradient. "to" is the bottom color of the gradient.
Both must be hex values without the leading # sign.
To style some windows or panels differently than others using the addClass option.
The example windows created from with JSON for instance have been given the class,
"jsonExample". We can change their title bar color like so:
mui-org
commented
14 years ago
Reported by carlsholmberg, Jan 30, 2009
What steps will reproduce the problem? When setting a background-color for .mochaTitlebar in the ui.css I get a colored square above the window canvas.
What is the expected output? What do you see instead? As a wbdesigner I would expect that setting the background-color in the css would result in a gradient of that color applied to the titlebar.
What version of MochaUI are you using? r395
On what operating system and with what browser? Safari 3.2.1, Firefox 3.0.5 and Opera 9.60.5246
A simple solution which could lead to better themeing of MochaUI is to look at the background- color, apply that to the canvas and then removing the background-color. I have done just that in the hack below which should be inserted after the window is inserted into the DOM (line 502 in Window.js): // Set TitlebarColor if (this.titleBarEl.getStyle('background-color') !== '') { this.options.headerStartColor = new Color(this.titleBarEl.getStyle('background- color')).mix('#fff', 20); this.options.headerStopColor = new Color(this.titleBarEl.getStyle('background- color')).mix('#000', 20); this.titleBarEl.setStyle('background-color', 'transparent'); } By adding the following to the ui.css you can se the changes on the parametrics window and in the json demo: .mochaTitlebar { background-color: #fff000; }
json01 .mochaTitlebar {
}
json02 .mochaTitlebar {
}
json03 .mochaTitlebar {
}
Sorry for spamming you with all of theese issues but I'm between jobs and thought it would be a good time to get to know this cool library a bit!
Comment 1 by gregory.houston, Jan 30, 2009
This is a great idea. I want to think about it a bit more, but will probably implement it in a future release.
Feel free to spam as much as you wish. :)
Summary: Color Theming in CSS Labels: -Type-Defect -Priority-Medium Type-Enhancement Priority-Low Comment 2 by gregory.houston, Feb 26, 2009
This has been implemented in r502. Rather than setting titleBarEl's background-color to transparent with JavaScript, the title bar is given the class, "replaced", which allows for dynamic Theme changes.
As well in r502, all of the window color options can be set in the CSS, and this is now the preferred method. Setting them in the Window options will be deprecated.
If you set the background color of .mochaTitlebar, a gradient will be created from that value. The gradient will start with the value you gave plus 20% white, and end with the value you assigned plus 20% black. So the color in the middle of the gradient should be the color you defined.
If you want more control over the start and end colors of the gradient then you will need to set the background-image of .mochaTitlebar in the following way. Here we got a bit creative using a query string appended to a background image.
{{{background: url(../images/spacer.gif?from=fafafa&to=e5e5e5);}}}
"from" is the top color of the gradient. "to" is the bottom color of the gradient. Both must be hex values without the leading # sign.
To style some windows or panels differently than others using the addClass option. The example windows created from with JSON for instance have been given the class, "jsonExample". We can change their title bar color like so:
{{{ .jsonExample .mochaTitlebar { background-color: #6db6db; } }}}
Status: Started Owner: gregory.houston Labels: -Priority-Low Priority-Medium