How to give the a specific background color in CSS?

Question

I've a <p:dataTable>:

<p:dataTable styleclass="mylist" style="font-size: 11pt;width: 100%;" rowKey="#{tech.ccode}"  value="#{recommendedTech.rectech}" selectionMode="single" selection="#{selectedCourses.tecobj}" var="tech">
        <p:ajax event="rowSelect" update=":form:form:main:"  listener="#{selectedCourses.techRowselect}"/>
        <f:facet name="header">
            <label style="font-size: 12pt">Recommended Technical Courses</label>
        </f:facet>
        <p:column headerText="Technology Name">
            <p:outputLabel  value="#{tech.cname}"/>
        </p:column>
        <p:column headerText="Course Code">
            <p:outputLabel  value="#{tech.ccode}"/>
        </p:column>
        <p:column headerText="Add To MyCourse">
            <span class="button-success" title="Click To Add To Mycourse" onclick="setTimeout(function() {alert('Selected Course Added To My Course Successfuly');},1000);"  style="color: green">Click here</span>
        </p:column>
    </p:dataTable>

I'd like to give the <p:dataTable> a specific background color, e.g. red. I tried adding styleclass="mylist" with the following CSS class:

.mylist {
    background-color: red;
}

However, it didn't have any effect. How can I get it to work?

It has to be `styleClass` instead of `styleclass`. And have a look at `h:outputStylesheet`. — user1983983, Feb 12 '14 at 12:50

Daniel Teleginski Camargo · Accepted Answer · 2014-02-12T18:54:28.360

0

The dataTable background is defined (mostly) by ui-widget-content and ui-datatable-odd/even styles. If you want to override them you will need to use something like this:

<style>
    .mylist tr.ui-widget-content, .mylist tr.ui-datatable-odd, .mylist ui-datatable-odd {
        background-color: red;
    }
</style>

In this case the mylist class will be used only to mark the appropriate dataTable.

See more on overriding primefaces CSS values here.

edited Feb 12 '14 at 18:54

answered Feb 12 '14 at 15:18

Daniel Teleginski Camargo

4,263
2
33
54

If you explain the importance of `!important` in right technical terms, you'll get an upvote. This is namely completely unnecessary if you declate the style class the right way. – BalusC Feb 12 '14 at 16:05
I'm really sorry! Sometimes we need to override default PrimeFaces CSS placing !important to our values. I thought it would be safer to add it to the property as the asker didn't specify where he was defining it. I didn't realized at the moment that using a specific class would override default values no matter what. I've updated the question to reflect that. The way you pointed that suggests you wanted me to feel embarrassed for making that mistake. It's really not that bad to commit or to correct them and I'm sure you appreciate when people take it easy on your bad moments :) – Daniel Teleginski Camargo Feb 12 '14 at 18:53
This answer may then be valuable to learn about `!important`: http://stackoverflow.com/a/8774997 – BalusC Feb 12 '14 at 18:55

score 0 · Answer 2 · answered Mar 04 '14 at 05:33

0

look the primefaces library they will be css for your component. Use the same class name to give your style to the component .

answered Mar 04 '14 at 05:33

vicky

109
2
17

How to give the a specific background color in CSS?

2 Answers2