CODEWITHSUNDEEP
htmlcsszk
Mrye
Mrye

Reputation: 727

ZK : How to change <html> background-color

I want to change the whole background color in CSS. Usually in HTML we just apply style to <html> tag like this :

<html style="background-color:black;">
    <body>
       ...
    </body>
</html>

But in ZK .zul file, the code is usually like this :

<zk>
   <div>
    ...
   </div>
</zk>

There is no <html> tag. Is there any way to change the whole background-color in ZK ? I've tried the .z-page but it's limited to everything under <zK> component only and not the whole page.

Upvotes: 2

Views: 2607

Answers (5)

Coder_SPS
Coder_SPS

Reputation: 22

Put this in the your css, or in a style tag:

body { background-color: white }

Upvotes: 0

Vy Do
Vy Do

Reputation: 52516

Put your CSS rules inside <style>...</style> tags:

<zk>
    <style>
        body {
            background-color: black;
        }
    </style>
    ....
    ....
    ....

</zk>

Read ZK CSS Classes and Styles.

Upvotes: 0

Mrye
Mrye

Reputation: 727

It seems like although zk technically don't have the <html> tag inside the .zul file, ( in my opinion ) the client browser translate the .zul file from like this :-

<zk>
  <div>
    ...
  </div>
</zk>

into this structure as inspected via Inspect Element in Google Chrome.

<html>
    <body>
       ...
    </body>
</html>

So yeah, we can't apply inline style directly into <html>. And we need to use the type selector as suggested by @Tushar, simply by using external css which contain this block.

html {
    background-color : black;
}

Upvotes: 0

Ashish Ranade
Ashish Ranade

Reputation: 605

You can try jQuery for this:

$( document ).ready(function() {
    $("html").css("background-color","black");
});

If jQuery won't help you, please check the link it might add some light on your issue. Hope this helps.

<zk>
    <window border="3d">
        <style>
            body { background-color: #EBEBEB; }
        </style>
    </window>
</zk>

Upvotes: 1

Tushar
Tushar

Reputation: 87203

You can use type selector to change the background color of all the elements.

/* Add all the elements here */
div, span, table, ... {
    background: #fff;
}

Add this at the start of your styles, otherwise it'll override the styles of other elements.

You can also use zk to style

zk {
    background: #fff;
}

Upvotes: 1

Related Questions