0

How to change background page

asked 2009-12-08 10:44:41 +0800

frankz gravatar image frankz
9 1 1

I wont to change the backgrount whit with an image or color, but i don't to do this.
Thanks per a replay

delete flag offensive retag edit

4 Replies

Sort by ยป oldest newest

answered 2009-12-08 11:07:54 +0800

gyowanny gravatar image gyowanny
283 1 2 6

updated 2009-12-08 11:08:40 +0800

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

link publish delete flag offensive edit

answered 2009-12-08 12:12:14 +0800

frankz gravatar image frankz
9 1 1

My idea was for create a page for login with an image for background and to hit the centre of the grid username and password,

link publish delete flag offensive edit

answered 2009-12-08 13:53:11 +0800

terrytornado gravatar image terrytornado flag of Germany
9393 3 7 16
http://www.oxitec.de/

updated 2009-12-08 13:54:28 +0800

<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>

link publish delete flag offensive edit

answered 2009-12-11 17:13:56 +0800

frankz gravatar image frankz
9 1 1

Thank you very much

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: 2009-12-08 10:44:41 +0800

Seen: 3,539 times

Last updated: Dec 11 '09

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