Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
I wont to change the backgrount whit with an image or color, but i don't to do this.
Thanks per a replay
Hi,
To set the background color you can use the css code in the style property of the components tags. Please refer to the following examples:
You can use the <div> tag and set the style property with the background color as you can notice in the following example:
PS: I'm not sure if this div approach actually works for all the ZK components.
<zk>
<div style="background-color: black">
<!-- all your UI code goes here -->
</div>
</zk>
But if you are using the <borderlayout> component you can set the background color of each region, like this:
<zk>
<borderlayout>
<north style="background-color: yellow">
<label value="my yellow label"/>
</north>
<center style="background-color: blue">
<label value="my blue label"/>
</center>
</borderlayout>
</zk>
For background images you can do the following:
<zk>
<borderlayout>
<north style="background-color: yellow">
<label value="my yellow label"/>
</north>
<center style="background:#dfe8f6 url('../my_img_folder/my_background_picture.png') no-repeat center center;">
</center>
</borderlayout>
</zk>
Hope this help
Gyo
<window
<!--
style="background-image:url(${c:encodeURL('/images/sample.jpg')}) "
or
style="background-image:url(${c:encodeURL('/images/sample.jpg') }); border: 'none'; background-repeat:no-repeat; "
-->
</window>
or sample as a grayed background page
<?xml version="1.0" encoding="UTF-8" ?>
<zk xmlns="http://www.zkoss.org/2005/zul"
xmlns:h="http://www.w3.org/1999/xhtml"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.zkoss.org/2005/zul http://www.zkoss.org/2005/zul/zul.xsd">
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
<?page title="Timeout"?>
<window border="3d">
<style>
body { padding: 0 0; background-color: #EBEBEB; /* 0 padding
on top and bottom and 0 padding on right and left */ }
</style>
<div align="center">
<panel>
<panelchildren style="background-color: #EBEBEB;">
<vbox>
<separator />
<separator />
<separator />
<separator />
<label
value="${c:l('message_Session_Timeout')}" />
<separator />
<separator />
<div align="center">
<toolbarbutton
label="${c:l('btnBackToStart')}" href="/" />
</div>
</vbox>
</panelchildren>
</panel>
</div>
</window>
</zk>
Asked: 2009-12-08 10:44:41 +0800
Seen: 3,574 times
Last updated: Dec 11 '09