5 Replies Latest reply on Apr 4, 2012 10:56 AM by lipe.82

    rich data table with css

    lipe.82

      Hi

      I put this style on my xhtml to configure the rich table css but it doesn't work. Is anybody know why? If there is more configurations to make.

       

      <style type="text/css">

      .rich-table-thead {
      background-color: #2F4388;
      font-size: 20px;
      background-image: none;
      }
      </style>

      ...

      <rich:dataTable
      value="#{consultaInconsistenciasImportacaoBean.arquivosInconsistentes}"
      rendered="#{consultaInconsistenciasImportacaoBean.listSize > 0}"
      var="arquivo" width="100%" cellspacing="1"
      cellpadding="0" rows="20">
      <rich:column>
        <f:facet name="header">
         <h:outputText value="Nome do arquivo" />
        </f:facet>
        <h:outputText value="#{arquivo.nomeArquivo}" />
      </rich:column>

        • 1. Re: rich data table with css
          chris2209

          I did not test it, but I think it is worth to try it. Use rf-dt-hdr instead of rich-table-thead.

          See http://docs.jboss.org/richfaces/latest_4_2_X/Developer_Guide/en-US/html/appe-Developer_Guide-Style_classes_and_skin_parameters.html

          • 2. Re: rich data table with css
            lipe.82

            Didn't work when i put "rf-dt-hdr"

            I do not know what is happening, because i can see the tag "rich-table-thead" by firebug on Firefox. It should apply.

            • 3. Re: rich data table with css
              chris2209

              I am using Richfaces 4.2 Final.

              This works for me:

               

                   <h:outputStylesheet>

                        .rf-dt-shdr-c {

                             background-color: #2F4388;

                             font-size: 20px;

                             background-image: none;

                        }

                   </h:outputStylesheet>

              • 4. Re: rich data table with css
                lipe.82

                Hello Chris, I tried your answer but didn't work

                I also tried this on my web.xml

                 

                 

                 

                 

                 

                 

                 

                 

                <

                context-param>

                 

                <param-name>org.richfaces.CONTROL_SKINNING</param-name>

                 

                <param-value>disable</param-value>

                 

                </context-param>

                 

                 

                <context-param>

                 

                <param-name>org.richfaces.CONTROL_SKINNING_CLASSES</param-name>

                 

                <param-value>disable</param-value>

                 

                </context-param>

                 

                But still didn't work. I am using richfaces 3.3. Any other hints?

                Thanks...

                • 5. Re: rich data table with css
                  lipe.82

                  I got it to work, finally

                   

                  table.rich {
                  background-color: #FFFFFF;
                  font-weight:normal;
                  background-repeat:repeat-x;
                  background-position:left bottom;
                  text-align: left;
                  }

                  table.rich th {
                  background-color:#2F4388;
                  font-weight:bold;
                  background-repeat:repeat-x;
                  background-position:left bottom;
                  border-top:3px solid #FFFFFF;
                  border-bottom:none;
                  border-left:none;
                  border-right:none;
                  color:#FFFFFF;
                  text-align:left;
                  font-weight:bold;
                  padding:0 8px 0 8px;
                  }

                  table.rich tbody tr:hover{
                  background-color:#F9E9DF;
                  color:red;
                  }

                  <rich:dataTable
                  rendered="#{consultaInconsistenciasImportacaoBean.inconsistenciasArquivoEvolucaoShow}"
                  value="#{consultaInconsistenciasImportacaoBean.inconsistenciasArquivoEvolucao}"
                  var="item" id="tabelaArquivosEvolucaoInconsistentes"
                  cellspacing="1" cellpadding="0" styleClass="rich">

                  and at web.xml ->

                  <context-param>
                  <param-name>org.richfaces.CONTROL_SKINNING</param-name>
                  <param-value>disable</param-value>
                  </context-param>

                  <context-param>
                  <param-name>org.richfaces.CONTROL_SKINNING_CLASSES</param-name>
                  <param-value>disable</param-value>
                  </context-param>

                   

                  and Ctrl+F5 at the page. lolololol

                  Thanks Chris!