0

changing the window color

asked 2008-08-21 14:56:08 +0800

beginner gravatar image beginner
123 2

Hello,

i am new to zk. I tried the examples provided on the page. I have an easy and maybe stupid question.

How can i chang the background color of the ZK window title? Can i change it, for example, to red, or are there only predefined colors available?

Thx,

best & bestregards

delete flag offensive retag edit

10 Replies

Sort by ยป oldest newest

answered 2008-08-21 21:14:26 +0800

dastultz gravatar image dastultz
797 8

Hello, "beginner", it sounds like you need to learn CSS. Working with Zk is probably not the best way to do this - the CSS is pretty complex. To change the window title bar default color (all usages) you'll need to override the CSS definition for it. Using FireBug in FireFox or some tool for that other browser, figure out what CSS rule is in effect, add a stylesheet to your app (see Zk docs for this) and redefine the rules. You'll need to do the center portion, the rounded corners and probably the button. Start with

td.mwt-popup, td.rwt-popup, td.lwt-popup {
background-image: none;
background-color: Red;
}

You can create a mold for it, too, but I haven't gotten far with it yet.

link publish delete flag offensive edit

answered 2008-08-22 13:39:25 +0800

beginner gravatar image beginner
123 2

Hello,

thanks for your anser, that helped me to understand how to do. But something doesn't go right.

I read the style-guide for Window and i I wrote the following ZUL-File:

-----
<zk>
<style>
.mywin td.mwt-embedded, td.rwt-embedded, td.lwt-embedded {
background-image: none;
background-color: Red;
}
</style>
<window title="hello" border="normal" width="200px">
Hello World!
</window>
</zk>
----


For this code the left and the right part of the window caption are red. In the middle the caption is without change.

it seems, that td.mwt-embedde is ignored. Is this an documentation error, or do i understand something wrong?

link publish delete flag offensive edit

answered 2008-08-22 15:19:33 +0800

mh1 gravatar image mh1
15

Hello,

you have to write
------------
<zk>
<style>
td.mwt-embedded, td.rwt-embedded, td.lwt-embedded {
background-image: none;
background-color: Red;
}
</style>
<window title="hello" border="normal" width="200px">
Hello World!
</window>
</zk>
------

so everything is fine!

link publish delete flag offensive edit

answered 2008-08-22 15:54:04 +0800

dastultz gravatar image dastultz
797 8

As I said, zk is complex and not easy to learn css on. For this selector:

.mywin td.mwt-embedded, td.rwt-embedded, td.lwt-embedded {

you are specifying three things you want to style. The first is the middle section BUT only when under something that has mywin applied. If you set sclass="mywin" you will find that it works, but you will be better off doing what mh1 said. You could do this:

.warning td.mwt-embedded, .warning td.rwt-embedded, .warning td.lwt-embedded {

then apply sclass="warning" to your window and have a "specialty" embedded window that is different from the default.

/Daryl

link publish delete flag offensive edit

answered 2008-08-25 08:25:17 +0800

beginner gravatar image beginner
123 2

thanks for help :)

link publish delete flag offensive edit

answered 2008-09-14 10:59:35 +0800

beginner gravatar image beginner
123 2

Hello again,

i tried this in the "Try me" of the ZK live demo:

<zk>
<style>
.warning td.mwt-embedded, .warning td.rwt-embedded, .warning td.lwt-embedded {
background-image: none;
background-color: Red;
}
</style>
<window title="hello" border="normal" width="200px" sclass="warning">
Hello World!
</window>
</zk>

Why it doesn't work? Has ther something changed in the new version 3.5 between 3.0.7?

link publish delete flag offensive edit

answered 2008-09-17 04:07:21 +0800

robertlee gravatar image robertlee
561

Hi beginner,

You should try the following in 3.0.7:

<zk>
<style>
.warning td.mwt-warning, .warning td.lwt-warning, .warning td.rwt-warning{
background-color: Red;
}
</style>
<window title="hello" border="normal" width="200px" sclass="warning">
Hello World!
</window>
</zk>	

for 3.5.0 there are new names for css : z-window-embedded-tl, z-window-embedded-tr, z-window-embedded-tm
however its the same concept.

<zk>
<style>
.warning .z-window-embedded-tl, .warning .z-window-embedded-tr, .warning .z-window-embedded-tm{
background: Red;
}
</style>
<window title="hello" border="normal" width="200px" sclass="warning">
Hello World!
</window>
</zk>	

You should experiment with this and post your results here
have fun :D

/robert lee

link publish delete flag offensive edit

answered 2008-09-17 14:48:25 +0800

mabusch gravatar image mabusch
27

updated 2008-09-17 14:48:47 +0800

I have the problem that I can't change it anymore with ZK 3.5.0 and IE7 and Chrome.

In Firefox everything works fine.

robertlee: event the example doesn't work in ZK live demo. Only with Firefox :/ anyone an idea?

link publish delete flag offensive edit

answered 2008-09-18 01:54:06 +0800

robertlee gravatar image robertlee
561

thanks for help from flyworld, I tried following code in Chrome, IE and FF, all worked.
Its a better solution.

<zk>
<window title="hello" border="normal" width="200px">
<style>
 .z-window-embedded-tl, .z-window-embedded-tr, .z-window-embedded-tm{
background-image: none;
background-color: Red;
}
</style>
Hello World!
</window>
</zk>		

link publish delete flag offensive edit

answered 2008-09-18 10:41:51 +0800

mabusch gravatar image mabusch
27

updated 2008-09-18 10:51:05 +0800

Doesn't work for me because I use it with modal windows and the code example will change the style of all windows...

I found the Problem: the style tag must be inside the window tag or it won't work in IE. This is new since ZK 3.5.0.

this works:

<zk>
<window title="test" sclass="error" border="none" mode="modal" width="500px">
<style>
.error .z-window-modal-tl, .error .z-window-modal-tr, .error .z-window-modal-tm,
.error .z-window-modal-cl, .error .z-window-modal-cr, .error .z-window-modal-cm,
.error .z-window-modal-bl, .error .z-window-modal-br, .error .z-window-modal-bm{
	background: Red;
}
.error .z-window-modal-cnt-noborder {
	background: #FFCC00;
}
</style>
 <button label="Continue" onClick="spaceOwner.detach()"/>  
 </window>
</zk>

this don't:

<zk>
<style>
.error .z-window-modal-tl, .error .z-window-modal-tr, .error .z-window-modal-tm,
.error .z-window-modal-cl, .error .z-window-modal-cr, .error .z-window-modal-cm,
.error .z-window-modal-bl, .error .z-window-modal-br, .error .z-window-modal-bm{
	background: Red;
}
.error .z-window-modal-cnt-noborder {
	background: #FFCC00;
}
</style>
<window title="test" sclass="error" border="none" mode="modal" width="500px">
 <button label="Continue" onClick="spaceOwner.detach()"/>  
 </window>
</zk>

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow

RSS

Stats

Asked: 2008-08-21 14:56:08 +0800

Seen: 1,689 times

Last updated: Sep 18 '08

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More