Como remover todas as bordas em margens em um layoutUnit?

Front-end
#1

E ae galera,
Como posso remover todas as bordas em margens em um layoutUnit?

Code xhtml:

        <p:layout >
            <p:layoutUnit position="north" size="20%"> 
                <p:layout>
                    <p:layoutUnit position="north" styleClass="topDivisonContainer" size="70%" collapsible="true" gutter="0"/> 
                    
                    <p:layoutUnit position="center" collapsible="true" gutter="0"/> 
                </p:layout> 
            </p:layoutUnit> 
            
            <p:layoutUnit position="center"/> 
        </p:layout>

Code CSS

.topDivisonContainer 
{
    border: none;
    margin: 0 0 0 ;   
    background-image:url('topmenu/green_gradient_top.png'); 
    padding: 13px 100%;
    width: 100%;
}

Image:

Abraços!

#2

Olá amigo,

Para sobrescrever o css do primefaces você tem que colocar “!important” depois dos atributos css, então tenta isso e vê se funciona:

[code]

.topDivisonContainer
{
border: none !important;
margin: 0 0 0 ;
background-image:url(‘topmenu/green_gradient_top.png’) !important;
padding: 13px 100% !important;
width: 100% !important;
}

Tem um “aplicativo” que já vem junto com o firefox (não precisa instalar nada) que é muito bom para mexer com o Css da sua aplicação com o Primefaces.

Abre o firefox, clica em firefox/desenvolvedor web/ inspecionar . é só clicar nos componentes e ver o css que está valendo, se é o seu, ou o default do primefaces. Você tem inclusive como modifica-lo e ver o resultado , sem modificar o seu código original, depois é só copiar as modificações para o seu código fonte.

Abraço,

Gustavo

#3

[quote=gustavo_souza]Olá amigo,

Para sobrescrever o css do primefaces você tem que colocar “!important” depois dos atributos css, então tenta isso e vê se funciona:

[code]

.topDivisonContainer
{
border: none !important;
margin: 0 0 0 ;
background-image:url(‘topmenu/green_gradient_top.png’) !important;
padding: 13px 100% !important;
width: 100% !important;
}

Tem um “aplicativo” que já vem junto com o firefox (não precisa instalar nada) que é muito bom para mexer com o Css da sua aplicação com o Primefaces.

Abre o firefox, clica em firefox/desenvolvedor web/ inspecionar . é só clicar nos componentes e ver o css que está valendo, se é o seu, ou o default do primefaces. Você tem inclusive como modifica-lo e ver o resultado , sem modificar o seu código original, depois é só copiar as modificações para o seu código fonte.

Abraço,

Gustavo[/quote]

E ae Gustavo.

Acabei desistindo de fazer desse jeito, a aplicação já estava começando a virar uma gambiarra perdendo assim as boas características do primefaces. Estou redesenhando o layout tentando não alterar muito os CSS originais…

De qualquer forma, valeu as dicas, a do firefox e do important foram valiosas

Abraço

#4