0

ZK CSS Help : use multiple classes in the same selector [closed]

asked 2013-05-06 12:13:46 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2615 3 8
http://emrpms.blogspot.in...

updated 2013-05-07 07:13:27 +0800

Hi

I Just came to know that we can use multiple CSS Classes for the same selector using this link

I am trying the same to change the color of the group box header as follows

ZUL File

<?page title="new page title" contentType="text/html;charset=UTF-8"?>

<zk> <style src="style.css"/> <window title="new page title" border="normal"> <groupbox id="gb" mold="3d" width="300px" closable="false" sclass="grpboxSectionBar themegrad">

        <caption label="Enable Backups12" />
        <hbox>
            <label value="Directory:" />
            <textbox value="/home/zk/projects" />
        </hbox>
        <checkbox label="Compress archived files" />
    </groupbox>
</window>

</zk>

CSS

@CHARSET "ISO-8859-1";

.themegrad { background-image: none; background-image: none; background: transparent repeat-x 0 0; background: #006466; /* Old browsers / background-image: -ms-linear-gradient(top, #00A9A7 0%, #006466 100%); / IE10+ / background-image: -moz-linear-gradient(top, #00A9A7 0%, #006466 100%); / Firefox 3.6+ / background-image: -o-linear-gradient(top, #00A9A7 0%, #006466 100%); / Opera 11.10+ / background-image: -webkit-gradient(linear, top, bottom, color-stop(0%, #00A9A7), color-stop(100%,, #006466) ); / Chrome,Safari4+ / background-image: -webkit-linear-gradient(top, #00A9A7 0%, #006466 100%); / Chrome10+,Safari5.1+ / background-image: linear-gradient(to bottom, #00A9A7 0%, #006466 100%); / W3C / filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00A9A7', endColorstr='#006466', GradientType=0 ); / IE6-9 */ }

.grpboxSectionBar.themegrad .z-groupbox-3d-hl .z-groupbox-3d-header { background: none repeat scroll 0 0 transparent; border: 0 none; color: #083A6E; font-size: 12px; font-weight: bold; padding: 4px 5px; color: white; }

But in the output, instead of changing the header color, it changes the content color.

Here is the output image description

Instead of changing the header color, it changes the content color. Why ?

Ok. Let me explain inn detail what i am trying to achieve. I am maintaining some 6 to 7 custom themes in my project. So in most of the cases, i want to change the background color of the group box header, messagebox box header, model window header, etc.

In each of the selector, i need to write the same set of lines as written in themegrad class in the above example. Instead of that , i am trying to tune the code, by writing once and use the same for all ZK Components.

delete flag offensive retag edit

The question has been closed for the following reason "the question is answered, right answer was accepted" by Senthilchettyin
close date 2013-05-20 14:19:56

5 Answers

Sort by ยป oldest newest most voted
0

answered 2013-05-07 04:21:07 +0800

ashishd gravatar image ashishd flag of Taiwan
1972 6

This has nothing to do with using multiple selectors. Just use the exact css selector that gets applied to the groupbox header html element and override the corresponding css properties. If you open your zul page in browser and use developer tool to inspect the

.z-groupbox-3d-hl .z-groupbox-3d-header {
background: none;
border: 0 none;
background-color: #083A6E;
font-size: 12px;
font-weight: bold;
padding: 4px 5px;
color: white;
}

image description

link publish delete flag offensive edit
0

answered 2013-05-07 06:12:55 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2615 3 8
http://emrpms.blogspot.in...

Ok. Let me explain inn detail what i am trying to achieve. I am maintaining some 6 to 7 custom themes in my project. So in most of the cases, i want to change the background color of the group box header, messagebox box header, model window header, etc.

In each of the selector, i need to write the same set of lines as written in themegrad class in the above example. Instead of that , i am trying to tune the code, by writing once and use the same for all ZK Components.

Got it now ?

link publish delete flag offensive edit

Comments

Please add this to your question above as this is not an answer but more details about the question itself.

ashishd ( 2013-05-07 06:56:48 +0800 )edit

Done added in the question itself

Senthilchettyin ( 2013-05-07 07:14:13 +0800 )edit
0

answered 2013-05-20 08:03:34 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

Because the child element probably inherit parent's style, e.g., there is no "color" style specified at native span in the code below but it will show red text

<zk xmlns:n="native">
    <div style="color: red">
        <n:span>test</n:span>
    </div>
</zk>

As a workaround, you can find the selector of header text and specify a color to it.

e.g.,

<zk>
    <style>
        .grpboxSectionBar.themegrad .z-groupbox-3d-hl .z-groupbox-3d-header {
            background: none repeat scroll 0 0 transparent;
            border: 0 none;
            font-size: 12px;
            font-weight: bold;
            padding: 4px 5px;
            color: white;
        }
        .z-caption-l {
            color: #363636;
        }
    </style>
    <groupbox id="gb" mold="3d" width="300px" closable="false" sclass="grpboxSectionBar themegrad">

        <caption label="Enable Backups12" />
        <hbox>
            <label value="Directory:" />
            <textbox value="/home/zk/projects" />
        </hbox>
        <checkbox label="Compress archived files" />
    </groupbox>

</zk>
link publish delete flag offensive edit
0

answered 2013-05-20 11:20:44 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2615 3 8
http://emrpms.blogspot.in...

Thank you benbai. But i dont think so it will help for me in the project different theme for each user.

As i said earlier, i have the general class for gradient background. I would like to apply this in various zk components header such as group box, listbox, window, etc.

So in all the zk component header classes, i need to repeat the 6 lines everywhere.

Look this css file

Look the menu, listbox, window, grandient background color for different browser is repeated again and again. I am just trying to write once and use it other places

link publish delete flag offensive edit

Comments

but wait, you mentioned you just want to change background color, maybe you just need to remove "color: #083A6E;" and "color: white;" in ".grpboxSectionBar.themegrad .z-groupbox-3d-hl .z-groupbox-3d-header" ?

benbai ( 2013-05-21 00:56:34 +0800 )edit
0

answered 2013-05-20 12:49:20 +0800

benbai gravatar image benbai
2228 6
http://www.zkoss.org

updated 2013-05-20 12:50:07 +0800

Yes, I just describe the reason.

For your requirement, I probably will try to solve it with widget override instead of css selector,

e.g., override the bind_ function of widget as below:

bind_: function (a, b, c) {
    this.$bind_(a, b, c); // or _wgt.bind_.apply(this, arguments); whatever...
    // probably detect widget class as needed
    var head;
    if (head = this.$n('head')) {
        jq(head).css(...); // apply style as needed
    }
}

Since I think the naming rule of element in widget is more reliable than selector.

link publish delete flag offensive edit

Question tools

Follow

RSS

Stats

Asked: 2013-05-06 12:13:46 +0800

Seen: 129 times

Last updated: May 20 '13

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