How to give the a specific background color in CSS?

Tags: css,jsf-2,primefaces

Problem :

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>
        <p:column headerText="Technology Name">
            <p:outputLabel  value="#{tech.cname}"/>
        <p:column headerText="Course Code">
            <p:outputLabel  value="#{tech.ccode}"/>
        <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>

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?

Solution :

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:

    .mylist tr.ui-widget-content, .mylist tr.ui-datatable-odd, .mylist ui-datatable-odd {
        background-color: red;

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

See more on overriding primefaces CSS values here.

    CSS Howto..

    How to overlap 2 charaters with CSS

    How to show hidden div in the same line as the paragraph text?

    how to make a css border for div

    How do I make a div link open in a new tab Javascript onClick="window.location

    How to get element to fill 100% height of parent

    How to create square image thumbnails using only CSS

    How to make a table scrollable with fixed header?

    How to display the the full content of a database on clicking on 'Read More' button

    How to generate image background that flips with each duplication in css? [duplicate]

    How to load CSS in Django templates?

    How can I prevent scroll bars from being hidden for OS X trackpad users in WebKit/Blink?

    How to scale down CSS background-image when using various background-positions?

    How to centrally assign a same CSS class to multiple elements, such as when using frameworks like Bootstrap?

    Can't figure out how to make a box with multiple images with CSS/HTML

    How to style my HTML form using CSS

    How to prevent the backdrop of bootstrap modal dialog from covering the whole screen?

    Use css to not show the text box

    How do I display a DIV if the current version of the program is greater than the version I have?

    How to center an element based on the parent div?

    How can I enlarge a table row when hovering over it? - Variation

    How to CSS a two column list of items?

    How to align horizontally nav bar in css?

    How to control size of list-style-type disc in CSS?

    How to fit image into table cell by height with CSS (where the height is not defined explicitly)

    How do I display div's next to each other within a wrapper div?

    Showing a demo of my CSS on any website

    How to apply css style for HTML element using Mootools

    How to make button that changes grid dimensions using JS?

    How to completely remove borders from HTML table

    How to preserve aspect ratio when scaling image using one (CSS) dimension in IE6?