Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
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
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.
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?
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!
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
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?
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
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?
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>
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>Asked: 2008-08-21 14:56:08 +0800
Seen: 1,709 times
Last updated: Sep 18 '08