6 Replies Latest reply on May 16, 2013 4:12 AM by Michal Petrov

    Background image : tabpanel

    mohamed sassi Newbie

      Background image is not applied to activated tab

      (the url of the image is correct, I tested in <img src="">)

       

       

      .rf-tab-act {

                background: url("../upload/images/bg_tab1_a_hover.png") repeat-x scroll

                          center top;

                height: 29px;

                color: #FFFFFF;

      }

        • 1. Re: Background image : tabpanel
          Siva P Master

          It is possible to set the background image,use style or styleClass for the tab component like below,

           

          XHTML page or JSP page:

           

          <rich:tabPanel switchType="client">

                  <rich:tab label="Overview" styleClass="tabImage">

                      <h:graphicImage value="/img/doc.png" style="float:right" alt="rf" />

                      RichFaces is a component library for JSF and an advanced framework for

                      easily integrating AJAX capabilities into business applications.

                      <ul>

                          <li>100+ AJAX enabled components in two libraries</li>

                          <li>a4j: page centric AJAX controls</li>

                      </ul>

                  </rich:tab>

                  <rich:tab label="JSF 2 and RichFaces 4">

                      <p>We are working hard on RichFaces 4.0 which will have full JSF 2 integration. That is not all though, here is

                          a summary of updates and features:</p>

                      <ul>

                          <li>Redesigned modular repository and build system.</li>

                          <li>Simplified Component Development Kit with annotations, faces-config extensions, advanced templates

                              support and more..</li>              

                      </ul>

                  </rich:tab>

              </rich:tabPanel>

           

          In CSS sheet:

           

          .tabImage

          {

              background-image:url(../img/horizontalEight.gif);

             background-attachment:fixed;

          }

           

          Image,

          I have purposly added red line for ur reference.

          TabBgimage.jpg

          Thanks,

          Siva

          • 2. Re: Background image : tabpanel
            Michal Petrov Master

            There is no .rf-tab-act class, so that's probably why it does not work.

             

            What are you trying to set the background to? The header of the panel? If it's the header then use tabActiveHeaderClass attribute in <rich:tabPanel>, if it's the panel then use the solution posted above. There is no "active panel" property, you only see one panel and it doesn't have to look any different from the rest of the panels if the rest is not visible.

            • 3. Re: Background image : tabpanel
              mohamed sassi Newbie

              I want to change background image for <rich:tab>,

               

              My problem is that I am trying to migrate from version 3 to version 4 (CSS class name in  version 3 changed) , iI want migrate this :

               

               

               

              .rich-tab-bottom-line {


              border-bottom: 6px solid #5FBAE2;

              }

               

               

              .rich-tab-header {


              background: url("../upload/images/bg_tab1_a_finished.png") repeat-x


              scroll 0 0 transparent;

              border-radius: 5px 5px 0 0;

              border: none;

              color: #FFFFFF;

              display: block;

              height: 26px;

              line-height: 29px;

              margin: 0;

              padding: 0 20px;

              position: relative;

              text-align: center;

              text-decoration: none;

              width: auto;

              behavior: url(/byblos/PIE.htc);

              }

               

               

              .rich-tabhdr-side-border {


              border-top-style: none;

              border-right-style: none;

              border-bottom-style: none;

              border-left-style: none;

              border-width: 0;

              display: none;

              }

               

               

              .rich-tabhdr-side-cell {


              border-top-style: hidden;

              border-top-width: 0;

              /*border-bottom-style: hidden;

              border-bottom-width: 0;*/

              }

               

               

              .rich-tab-active {


              background: url("../upload/images/bg_tab1_a_hover.png") repeat-x scroll


              center top;

              height: 29px;

              color: #FFFFFF;

              }

               

               

              .rich-tab-inactive {


              CURSOR: pointer;

              cursor: hand;

              }

               

               

              .rich-tab-disabled {


              background: url("../upload/images/bg_tab1_a_finished.png") repeat-x


              scroll center bottom transparent;

              color: #FFFFFF;

              }

               

               

              .rich-tabpanel-content {


              background-color: inherit;

              border-bottom-color: #BED6F8;

              border-left-color: #BED6F8;

              border-right-color: #BED6F8;

              border: none;

              }

               

               

              .rich-home-tabpanel-content {


              background-color: inherit;

              border-radius: 0px 0px 3px 3px;

              -moz-border-radius: 0px 0px 3px 3px;

              border-bottom-color: #BED6F8;

              border-left-color: #BED6F8;

              border-right-color: #BED6F8;

              border: 2px solid #99CCFF;

              height: 585px;

              border-top-width: 0px;

              }

              • 4. Re: Background image : tabpanel
                Michal Petrov Master

                Here are the current classes.

                 

                It seems that you can migrate like this:

                RF3RF4
                .rich-tab-bottom-line.rf.tab-hdr-brd
                .rich-tab-header.rf-tab-hdr
                .rich-tabhdr-side-border.rf-tab-hdr-spcr
                .rich-tabhdr-side-cell.rf-tab-hdr-top
                .rich-tab-active.rf-tab-hdr-act
                .rich-tab-inactive.rf-tab-hdr-inact
                .rich-tab-disabled.rf-tab-hdr-dis
                .rich-tabpanel-content.rf-tab-cnt
                .rich-home-tabpanel-content this doesn't seem to be an"official" RF class

                 

                but you will probably have to change a few things, the tabs in RF4 are generated differently.

                • 5. Re: Background image : tabpanel
                  mohamed sassi Newbie

                  thank you for the answer it works

                   

                  how can I change this part in the red circle to make it the same color as the active tab?

                  Sans titre.png

                  here is my css:

                  .rf-tab-hdr {

                            background: url("../upload/images/bg_tab1_a_finished.png") repeat-x

                                      scroll 0 0 transparent !important;

                            border-radius: 5px 5px 0 0 !important;

                            border: none !important;

                            color: #FFFFFF !important;

                            display: block ;

                            height: 26px !important;

                            line-height: 29px !important;

                            margin: 0 !important;

                            padding: 0 20px !important;

                            position: relative !important;

                            text-align: center !important;

                            text-decoration: none !important;

                            width: auto !important;

                            behavior: url(/byblos/PIE.htc) !important;

                  }

                  .rf-tab-hdr-tabline-vis

                  {background-color: transparent !important;

                  border-color:transparent !important;

                  background: transparent !important;

                            }

                  .rich-tabhdr-side-border {

                            border-top-style: none !important;

                            border-right-style: none !important;

                            border-bottom-style: none !important;

                            border-left-style: none !important;

                            border-width: 0 !important;

                            display: none !important;

                  }

                   

                   

                  .rf-tab-hdr-top {

                            border-top-style: hidden !important;

                            border-top-width: 0 !important;

                  }

                   

                   

                  .rf-tab-hdr-act {

                            background: url("../upload/images/bg_tab1_a_hover.png") repeat-x scroll

                                      center top !important;

                            color: #FFFFFF !important;

                  }

                   

                   

                  .rf-tab-hdn {

                            CURSOR: pointer !important;

                            cursor: hand;

                  }

                   

                   

                  .rf-tab-hdr-dis {

                            background: url("../upload/images/bg_tab1_a_finished.png") repeat-x

                                      scroll center bottom transparent !important;

                            color: #FFFFFF !important;

                  }

                   

                   

                  .rf-tab-cnt {

                            background-color: inherit !important;

                            border-bottom-color: #BED6F8 !important;

                            border-left-color: #BED6F8 !important;

                            border-right-color: #BED6F8 !important;

                            border: none !important;

                  }

                  • 6. Re: Background image : tabpanel
                    Michal Petrov Master

                    Redefine .rf-tab-hdr-brd

                     

                    If you're using Chrome, Firefox, Opera or IE9+ you can inspect the HTML in your browser, it will even highlight the elements for you so you can find what class it uses.

                    1 of 1 people found this helpful