7 Replies Latest reply on Oct 22, 2015 9:05 PM by Arnie Morein

    Custom CSS for alternating row colors using skin parameter not working in RF 4.5.10.Final

    Arnie Morein Novice

      I want to use #{a4jSkin.headerGradientColor} as the background color of even data rows in my application's data tables. Creating a custom style:

       

      .table-row-even {

          background-color: '#{a4jSkin.headerGradientColor}';

          color: '#{a4jSkin.generalTextColor}';

      }

      .table-row-odd {

      }

       

      and adding:

       

      rowClasses="table-row-odd,table-row-even"

       

      to my data table at first didn't appear to work. Then I used:

       

      background-color: #70BA70; /* the color from the emeraldTown.skin.properties file */

       

      and oh look - it IS working.

       

      I tried taking the apostrophes off: no effect. I tried #{richSkin: no effect (but that was from a 2010 post).

       

      I don't need to create a whole new skin. I just want to create a few custom styles based on the default skin parameters so that if I change the skin, the mark up changes as well.

        • 1. Re: Custom CSS for alternating row colors using skin parameter not working in RF 4.5.10.Final
          Michal Petrov Master

          If you inspect the code with your browser it should show you what might be wrong with it, at the very least it will show you what '#{a4jSkin.headerGradientColor}' got generated as.

          • 2. Re: Custom CSS for alternating row colors using skin parameter not working in RF 4.5.10.Final
            Arnie Morein Novice

            I'd like to, but when I look at the generated page, the data rows are missing from the file! I've tried everything, but nothing works. Where is the attach file link in this thing?

            • 3. Re: Custom CSS for alternating row colors using skin parameter not working in RF 4.5.10.Final
              Michal Petrov Master

              You need to switch to the advanced editor to attach files. How are you linking to the file? I can't reproduce the issue.

              • 4. Re: Custom CSS for alternating row colors using skin parameter not working in RF 4.5.10.Final
                Arnie Morein Novice

                And where is this hidden switch for the Advanced Editor? It isn't under my preferences.

                 

                I was attaching my CSs file the old way:

                 

                <link href="#{appRootPath}/resources/css/general.css" rel="stylesheet" type="text/css" media="screen" ></link>

                 

                Which is part of a file that is included as the h:head part of my templates. So I moved it to my template footer file as:

                 

                <h:outputStylesheet library="css" name="general.css" />

                 

                and it is showing up in the generated page:

                 

                <link type="text/css" rel="stylesheet" href="/txgpmet/javax.faces.resource/general.css.xhtml?ln=css" />


                But the grid isn't highlighted; and when I look at the page source, the data rows aren't even listed at all. I don't get that. The Query script for highlighting the tables is generating:


                <span id="formInfoPersonList:panelDataGrid"><span

                                                id="formInfoPersonList:tableStyle"><span

                                                    id="formInfoPersonList:j_idt138" style="display: none;"><script

                                                            type="text/javascript">RichFaces.ui.jQueryComponent.query({"selector":"table[id$='infoPersonListTable'\u005D tbody tr:odd","query":"addClass('table\u002Drow\u002Dodd')"} );</script></span><span

                                                    id="formInfoPersonList:j_idt139" style="display: none;"><script

                                                            type="text/javascript">RichFaces.ui.jQueryComponent.query({"selector":"table[id$='infoPersonListTable'\u005D tbody tr:even","query":"addClass('table\u002Drow\u002Deven')"} );</script></span><span

                                                    id="formInfoPersonList:j_idt140" style="display: none;"><script

                                                            type="text/javascript">RichFaces.ui.jQueryComponent.query({"selector":"table[id$='infoPersonListTable'\u005D tbody tr","query":"mouseover(function(){jQuery(this).addClass('table\u002Drow\u002Dactive')})"} );</script></span><span

                                                    id="formInfoPersonList:j_idt141" style="display: none;"><script

                                                            type="text/javascript">RichFaces.ui.jQueryComponent.query({"selector":"table[id$='infoPersonListTable'\u005D tbody tr","query":"mouseout(function(){jQuery(this).removeClass('table\u002Drow\u002Dactive')})"} );</script></span></span></span>

                                           

                but doesn't appear to have any effect on the rows (the highlighting) but the on/off mouse over works.

                • 5. Re: Custom CSS for alternating row colors using skin parameter not working in RF 4.5.10.Final
                  Arnie Morein Novice

                  I thought I had tried this, but between this:

                   

                  .table-row-odd {

                      background-color: #{a4jSkin.headerGradientColor};

                      color: #{a4jSkin.generalTextColor};

                  }

                   

                  and this:

                   

                      <rich:jQuery selector="table[id$='#{tableName}'] tbody tr:odd" query="addClass('table-row-odd')" />
                      <rich:jQuery selector="table[id$='#{tableName}'] tbody tr:even" query="addClass('table-row-even')" />

                   

                  I got it working. But I had to swap the odd/even style values because RF is treating the table header row as a data row an applying the style on the row right below the header, which is wrong.

                  • 6. Re: Custom CSS for alternating row colors using skin parameter not working in RF 4.5.10.Final
                    Michal Petrov Master

                    And where is this hidden switch for the Advanced Editor? It isn't under my preferences.

                    it's in the reply window:

                    Screenshot from 2015-10-21 10-05-03.png

                    <link href="#{appRootPath}/resources/css/general.css" rel="stylesheet" type="text/css" media="screen" ></link>

                    This won't work, in order for the EL to resolve the file has to go through the resource servlet, i.e. you have to use h:outputStylesheet. (You could make the link look like "#{root}/javax.faces.resource/general.css.jsf?ln=css" but that won't resolve the current skin properly)

                     

                    But the grid isn't highlighted; and when I look at the page source, the data rows aren't even listed at all.

                    I don't understand, what do you mean by "data rows aren't listed"? If you're trying to highlight the rows on mouseover use the pseudoclass :hover in your CSS, no need doing it by toggling classes with jQuery.

                    • 7. Re: Custom CSS for alternating row colors using skin parameter not working in RF 4.5.10.Final
                      Arnie Morein Novice

                      I thought I had tried this setup already, but I got it working:

                       

                      CSS styles

                       

                      .table-row-odd {

                          background-color: #{a4jSkin.headerGradientColor};

                          color: #{a4jSkin.generalTextColor};

                      }

                      .table-row-even {

                      }

                       

                      DATA TABLE - no rowClasses parameter any more

                       

                      JQuery include for related pages:

                       

                      <a4j:outputPanel id="tableStyle">

                          <rich:jQuery selector="table[id$='#{tableName}'] tbody tr:odd" query="addClass('table-row-odd')" />

                          <rich:jQuery selector="table[id$='#{tableName}'] tbody tr:even" query="addClass('table-row-even')" />

                          <rich:jQuery selector="table[id$='#{tableName}'] tbody tr"

                              query="mouseover(function(){jQuery(this).addClass('table-row-active')})" />

                          <rich:jQuery selector="table[id$='#{tableName}'] tbody tr"

                              query="mouseout(function(){jQuery(this).removeClass('table-row-active')})" />

                      </a4j:outputPanel>

                       

                      and in the page with the data table:

                       

                      <ui:include src="/includes/tableStyle.xhtml" >

                          <ui:param name="tableName" value="infoPersonListTable" />

                      </ui:include>