Primefaces CSS overwrite single component

Question

i want to overwrite the padding attribute of the Primefaces CSS Class for my tabview but with:

.ui-tabs .ui-tabs-panel
{
padding:0 !important;   
}

i overwrite all Component that uses this class.

i am not very familiar with css selectors so i tried some examples from

http://www.w3.org/TR/CSS2/selector.html

to find a solution.

<style>
.test 
{
padding:0 !important;
}
</style>

Not working

I have also tried:

.ui-tabs .ui-tabs-panel .test
.test .ui-tabs .ui-tabs-panel
.ui-tabs .ui-tabs-panel#tabView
tabView .ui-tabs .ui-tabs-panel .test

and some other variations with and without spaces between the dots all not working for me.

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
    <h:form id="form_content" styleClass="myContent" style="background:blue" >

        <p:tabView id="tabView" style="background:green;" StyleClass="test" >

                        <p:tab id="tab1" title="#{messages.Tab}" >
                    <ui:include src="ContentTab.xhtml" />
                </p:tab>

            </p:tabView>
        </h:form>
</ui:composition>

Can someone explain to me how i can build such a statement so that i only change this component element only?

EDIT: add some information to the source code. I know to much!important statments but it do not work without it. And even if i clear the whole css file it still dont work with the statement alone.

Server: Jetty 8 as Maven Plugin
Browser: Firefox: 17.0.9
Primefaces: 4.0.3
JavaServerFaces: MyFaces 2.0.2

StartPage

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

        <html xmlns="http://www.w3.org/1999/xhtml"
            xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:f="http://java.sun.com/jsf/core"
            xmlns:p="http://primefaces.org/ui">
        <h:head>


         </h:head>
         <h:body >
      <h:outputStylesheet id="primefaces_overwriteCSS" library="css"
                name="Primefaces_Overwrite.css" /> 
      <h:outputStylesheet id="myCSS"
                library="css" name="my.css" />
        <p:layout fullPage="true">

            <p:layoutUnit id="layoutTop" position="north"  >  
            <div id="div_topNavigation" >
            <ui:include src="/TopNavigation.xhtml"/>
            </div>
            </p:layoutUnit>

            <p:layoutUnit id="layoutLeft" position="west"  collapsible="true" collapsed="false" header=""
             styleClass="layoutLeft">

            <div id="div_leftHandNavigation" >
            <ui:include src="/LeftHandNavigation.xhtml"/>
            </div>
            </p:layoutUnit>

        <p:layoutUnit id="layoutCenter" position="center" styleClass="layoutCenter"  style="background:black;">
            <div id="div_content" style="background:red;">
            <ui:include src="Content.xhtml" />
            </div>

            </p:layoutUnit>

        </p:layout>

        </h:body>

        </html>

CSS FILES

Primefaces_Overwrite.css

.ui-accordion .ui-accordion-header {
    background: #fff ;
    border: none ;
}


.ui-accordion .ui-accordion-header a:hover {
    background: -moz-linear-gradient(center top, rgba(255, 255, 255, 0.6),
        rgba(255, 255, 255, 0)) repeat scroll 0 0 #C3D79C;
    border: none;
    box-shadow: 0 0 8px #000;
    color: black;
    font-weight: bold;
}

.ui-accordion .ui-accordion-content {
    border-top: 0 none;
    margin-bottom: 2px;
    margin-top: 5px;
    overflow: visible !important;
    padding: 0 !important;
    position: relative;
    top: 1px;

}

.ui-layout-unit {
    padding: 6px !important;
    visibility: hidden;
}

.ui-layout-unit-header, .ui-layout-unit-footer {
    padding: 0.4em 0.2em 1em 0.4em !important;
}


.ui-state-active a {
    color: #000 !important;
}


.ui-state-active a:link {
    background: -moz-linear-gradient(center top, rgba(255, 255, 255, 0.6),
        rgba(255, 255, 255, 0)) repeat scroll 0 0 #C3D79C ;
}

.ui-state-active a:hover {
    background: #fff;
}

.ui-menubar {
    width: -moz-max-content !important;
}

.ui-panel .ui-panel-content {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    padding: 0 !important;
}

.ui-panelgrid {
    border-collapse: separate !important;
}

.ui-panelgrid td {
    border-width: 0 !important;
    border-color: inherit;
    border-style: solid;
    padding: 0 !important;
}

.ui-menu {
    padding: 0 !important;
}

.ui-menuitem-link.ui-corner-all.ui-state-hover {
    background: -moz-linear-gradient(center top, rgba(255, 255, 255, 0.6),
        rgba(255, 255, 255, 0)) repeat scroll 0 0 #C3D79C;;
    border: none;
    box-shadow: 0 0 8px #000;
    color: black;
    font-weight: bold;
}

.ui-tabs .ui-tabs-nav li a:hover {
    background: -moz-linear-gradient(center top, rgba(255, 255, 255, 0.6),
        rgba(255, 255, 255, 0)) repeat scroll 0 0 #C3D79C;
    border: none;
    box-shadow: 0 0 8px #000;
    color: black;
    font-weight: bold;
}

.ui-tabs {
    margin-top: -7pt;
    border: medium none;
    padding: 0 !important;
    padding-top: 0.2em !important;
}

my.css

    .layoutLeft
    {
    min-width:180px !important;
    }


    .topNavigation {
        font-size: 8pt;
    }

    .topNavigatonUser {
        width: 160px;
        float: right;
        border: none;
    }


    .leftHandNavigation {
        font-size: 11px !important;
        heigth: 100%;
    }

    .leftHandNavigatonPanel {
        width: 98%;
        min-height: 600px;
        border: none;
    }

    .myContent {
        font-size: 12px;
        height:100%;

    }

    #tabView .ui-tabs-panel
    {
        padding: 0;   
    }

score 1 · Answer 1 · answered Dec 13 '13 at 08:57

1

To only apply the style to the tabview with id tabView you can use the following:

#tabView .ui-tabs-panel
{
    padding: 0;   
}

This will overwrite the style as the id selector has a higher precedence than the class selector and the padding is set via the class selector.

answered Dec 13 '13 at 08:57

user1983983

4,793
2
15
24

Does not work. I posted some additonal informations to the source code. Maybe the problem is more than a simple syntax error – Shibas Dec 13 '13 at 10:23

score 1 · Answer 2 · answered May 21 '14 at 22:22

I had a similar problem trying to get rid of the "select all" checkbox for a primefaces selectCheckboxMenu on one specific menu. One problem is that for the actual popup menu, the id actually changes to "/yourID/_panel". I tried using that ID in the CSS, but it didn't work (possibly because it was in a form). I wound up using:

div[id*="mySpecificID"] .ui-selectcheckboxmenu-header .ui-chkbox {
    visibility: hidden;
}

This worked, so using the wildcard selector on ID might be an option for this.

Posted just in case someone else is looking for a solution like I was.

nico1510 · Answer 3 · 2013-12-13T11:45:19.213

0

try putting your own stylesheets in the body and not in the head Tag. So like this

<h:body>
    <h:outputStylesheet name="my.css" />
    <h:outputStylesheet name="Primefaces_Overwrite.css" />

edited Dec 13 '13 at 11:45

answered Dec 13 '13 at 10:27

nico1510

606
9
29

Sorry no changes. Updated my Code. – Shibas Dec 13 '13 at 10:47
Primefaces_Overwrite.css is also one of your own stylesheets right ? Since you want to overwrite the primefaces sylesheet this has to be loaded after primefaces so you have to put this also in the body tag. And there's no need to specify library="css" when you do this – nico1510 Dec 13 '13 at 11:44
Without the library="css"he dont overwrite the default css. – Shibas Dec 13 '13 at 13:05

Primefaces CSS overwrite single component

3 Answers3

Linked