Layout background color

[laurens]

Hello,

I have a full page layout with a top and center layout unit. In the top layout unit, I have another (element-based) layout with a left and center layout unit. I am trying to set the background color of the entire top layout unit, including the nested layout using the following code:

Code: Select all

        <p:layout fullPage="true">
            <p:layoutUnit position="top" height="80" gutter="0" style="background-color: red;">
                <p:layout styleClass="ui-content ui-header">
                    <p:layoutUnit position="left" width="630">
                        Left
                    </p:layoutUnit>
                    <p:layoutUnit position="center">
                        (omitted for brevity)
                    </p:layoutUnit>
                </p:layout>
            </p:layoutUnit>
            (omitted for brevity)
        </p:layout>

It is however coming out like this:

http://postimage.org/image/35uldc204/

You can clearly see that the background color is not applied on the nested layout as I want it to be. I have tried setting the background color on the nested layout's layout units as well but this only colors the actual content and not the entire unit. How can I set the background color for the entire top layout unit, including the nested layout as well?

Thanks!

[leventgny]

p:layout style and style class effects wrapper div element. and you can acces and customize inner elements like;

Code: Select all

.myLayoutStyleClass .ui-layout-unit-header{
    background: yellow;
}

.myLayoutStyleClass .ui-layout-unit-content{
   background: red;
}

[laurens]

Thanks, that is working perfectly!

[johntheo]

Can u post your final code?
I'm with the same problem e dont understand how solve it.

[laurens]

Hi,

This is the relevant excerpt from my CSS file:

Code: Select all

.ui-top, .ui-top .ui-layout, .ui-top .ui-layout-bd, .ui-top .ui-layout-unit {
    background-image: none;
    background-color: #87B6D9; }

And this is the relevant excerpt from my template.xhtml:

Code: Select all

        <p:layout fullPage="true">
            <p:layoutUnit position="top" height="80" gutter="0"
                          styleClass="ui-top">

All I did was set the styleClass for the top layout unit to "ui-top".

Cheers!

[abdul_majid_bajwa]

I need help.when i set layout background color it is not applied on the whole layout area.always bottom area is remain white. Anyone please tell me solution

[rasha]

Thinks for shearing
now it working perfectly

[Abdul Majid]

I need help in layout unit only border color is changed . I want to change the background color of entire center portion
I try to change the color as mentioned above but its not work. Hope you explain it briefly

[kukeltje]

Briefly: learn css! (and see the answer/comment/duplicate on your stackoverflow question)