-
1. Re: Background image : tabpanel
sivaprasad9394 May 6, 2013 2:34 AM (in response to med7sassi)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.
Thanks,
Siva
-
2. Re: Background image : tabpanel
michpetrov May 6, 2013 4:40 AM (in response to med7sassi)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
med7sassi May 7, 2013 12:20 PM (in response to michpetrov)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
michpetrov May 14, 2013 5:28 AM (in response to med7sassi)Here are the current classes.
It seems that you can migrate like this:
RF3 RF4 .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
med7sassi May 15, 2013 2:58 PM (in response to michpetrov)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?
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
michpetrov May 16, 2013 4:12 AM (in response to med7sassi)1 of 1 people found this helpfulRedefine .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.