You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@myfaces.apache.org by Dave <ja...@yahoo.com> on 2006/05/06 03:50:22 UTC
RE: tabbedPane - style question?
How to make tab border corner round? Can it be done using CSS?
Thanks!
Jeffrey Porter <PO...@WMGMAIL.wmg.warwick.ac.uk> wrote:
Thanks Jeremy,
I found this for an age old version JSF.
http://209.61.157.8:8080/taglibs/
And this link on tab style¡
http://www.mail-archive.com/users@myfaces.apache.org/msg04006.html
It¡¯s a start. I¡¯d like to get my tab¡¯s looking like they do in the first link, I feel this isn¡¯t possible at the moment though.
(MyFaces limitation)
Jeff
-----Original Message-----
From: Jeremy Sager [mailto:jsager@chessys.com]
Sent: 26 January 2006 15:18
To: 'MyFaces Discussion'
Subject: RE: tabbedPane - style question?
Here¡¯s an example Jeff. Note that I¡¯m not using disabledStyleClass because in my pane, no tabs will ever be disabled. Also note that to change the look & feel of the tab buttons, I use two additional css entries. The CSS here has a lot of duplicate stuff and needs to be cleaned up a lot, but it should be a good starting point for you.
<t:panelTabbedPane id="editorPane"
activeTabStyleClass="editorPane_activeTab"
inactiveTabStyleClass="editorPane_inactiveTab"
tabContentStyleClass="editorPane_tabContent"
inactiveSubStyleClass="editorPane_subStyle"
activeSubStyleClass="editorPane_subStyle">
.editorPane_activeTab {
background-color: #316AC5 !important;
font-family: verdana;
font-size: 10px;
font-color: #FFFFFF !important;
padding: 4;
}
.editorPane_inactiveTab {
background-color: #EFEFE7 !important;
border-style: solid !important;
border-width: 1px !important;
border-color: #444444 !important;
font-family: verdana !important;
font-size: 10px !important;
margin-left: 2em;
margin-right: 2em;
}
.editorPane_tabContent {
background-color: #FFFFFF !important;
border-style: solid !important;
border-right-width: 1px !important;
border-left-width: 1px !important;
border-bottom-width: 1px !important;
border-top-width: 0px !important;
border-color: #000000 !important;
font-family: verdana !important;
font-size: 10px !important;
margin:0;
padding:0;
}
.myFaces_panelTabbedPane{
background-color: #316AC5 !important;
border-style: solid !important;
border-width: 0px !important;
border-color: #000000 !important;
}
.editorPane_inactiveTab input{
padding: 4;
font-family: verdana;
font-size: 10px;
background-color: transparent !important;
color: #000000;
border:0;
}
.editorPane_activeTab input{
padding: 4;
font-family: verdana;
font-size: 12px;
background-color: transparent !important;
color: #FFFFFF;
border:0;
}
Jeremy Sager
Data Communications Product Manager
Chesapeake System Solutions
410.356.6805 x120
JSager@chessys.com
---------------------------------
From: Jeffrey Porter [mailto:PORTER_J@WMGMAIL.wmg.warwick.ac.uk]
Sent: Thursday, January 26, 2006 9:45 AM
To: MyFaces Discussion
Subject: tabbedPane - style question?
Does anyone know of any examples of using a t:tabbedPane and changing the look and feel of them?
Thanks
Jeff
---------------------------------
Get amazing travel prices for air and hotel in one click on Yahoo! FareChase
---------------------------------
Yahoo! Mail goes everywhere you do. Get it on your phone.
Re: tabbedPane - style question?
Posted by Sanjiv Jivan <sa...@gmail.com>.
I had asked a related question a while ago :
http://www.nabble.com/Tomahawk-TabbedPane-and-buttons-t1474145.html#a3986894
The tabs in Tomahawk's TabbedPane component are rendered as buttons and not
lists and this limits the CSS style that can be applied to the tabs.
I ended up going with a approach used by the DVD Store sample of Seam which
uses plain lists which allows you to easily style the tabs with rounded
corners using CSS.
In orders page :
<ui:include src="/WEB-INF/incl/cust_nav.xhtml">
<ui:param name="page" value="orders"/>
</ui:include>
custom_nav.xhtml
<c:choose
xmlns="http://www.w3.org/1999/xhtml"
xmlns:c="http://java.sun.com/jstl/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
...
<c:when test="${page=='orders'}">
<ul>
<li><a href="browse.faces">Search for Movies</a></li>
<li id="current"><a href="showorders.faces">My Orders</a></li>
</ul>
</c:when>
<c:otherwise>
<ul>
<li id="current"><a href="browse.faces">Search for
Movies</a></li>
<li><a href="showorders.faces">My Orders</a></li>
</ul>
</c:otherwise>
</c:choose>
Sanjiv
On 5/5/06, Dave <ja...@yahoo.com> wrote:
>
> How to make tab border corner round? Can it be done using CSS?
>
> Thanks!
>
> *Jeffrey Porter <PO...@WMGMAIL.wmg.warwick.ac.uk>* wrote:
>
>
> Thanks Jeremy,
>
>
> I found this for an age old version JSF.
> http://209.61.157.8:8080/taglibs/
>
>
> And this link on tab style＃
> http://www.mail-archive.com/users@myfaces.apache.org/msg04006.html
>
> It＊s a start. I＊d like to get my tab＊s looking like they do in the first
> link, I feel this isn＊t possible at the moment though.
> (MyFaces limitation)
>
>
> Jeff
>
> -----Original Message-----
> *From:* Jeremy Sager [mailto:jsager@chessys.com]
> *Sent:* 26 January 2006 15:18
> *To:* 'MyFaces Discussion'
> *Subject:* RE: tabbedPane - style question?
>
> Here＊s an example Jeff. Note that I＊m not using disabledStyleClass because
> in my pane, no tabs will ever be disabled. Also note that to change the look
> & feel of the tab buttons, I use two additional css entries. The CSS here
> has a lot of duplicate stuff and needs to be cleaned up a lot, but it should
> be a good starting point for you.
>
> <t:panelTabbedPane id="editorPane"
> activeTabStyleClass="editorPane_activeTab"
> inactiveTabStyleClass="editorPane_inactiveTab"
> tabContentStyleClass="editorPane_tabContent"
> inactiveSubStyleClass=
> "editorPane_subStyle"
> activeSubStyleClass="editorPane_subStyle">
>
>
> .editorPane_activeTab {
> background-color: #316AC5 !important;
> font-family: verdana;
> font-size: 10px;
> font-color: #FFFFFF !important;
> padding: 4;
> }
> .editorPane_inactiveTab {
> background-color: #EFEFE7 !important;
> border-style: solid !important;
> border-width: 1px !important;
> border-color: #444444 !important;
> font-family: verdana !important;
> font-size: 10px !important;
> margin-left: 2em;
> margin-right: 2em;
> }
>
> .editorPane_tabContent {
> background-color: #FFFFFF !important;
> border-style: solid !important;
> border-right-width: 1px !important;
> border-left-width: 1px !important;
> border-bottom-width: 1px !important;
> border-top-width: 0px !important;
> border-color: #000000 !important;
> font-family: verdana !important;
> font-size: 10px !important;
> margin:0;
> padding:0;
> }
>
> .myFaces_panelTabbedPane{
> background-color: #316AC5 !important;
> border-style: solid !important;
> border-width: 0px !important;
> border-color: #000000 !important;
> }
>
> .editorPane_inactiveTab input{
> padding: 4;
> font-family: verdana;
> font-size: 10px;
> background-color: transparent !important;
> color: #000000;
> border:0;
> }
>
> .editorPane_activeTab input{
> padding: 4;
> font-family: verdana;
> font-size: 12px;
> background-color: transparent !important;
> color: #FFFFFF;
> border:0;
> }
>
>
> Jeremy Sager
> Data Communications Product Manager
> Chesapeake System Solutions
> 410.356.6805 x120
> JSager@chessys.com
> ------------------------------
> *From:* Jeffrey Porter [mailto:PORTER_J@WMGMAIL.wmg.warwick.ac.uk]
> *Sent:* Thursday, January 26, 2006 9:45 AM
> *To:* MyFaces Discussion
> *Subject:* tabbedPane - style question?
>
>
> Does anyone know of any examples of using a t:tabbedPane and changing the
> look and feel of them?
>
> Thanks
> Jeff
>
>
>
> ------------------------------
> Get amazing travel prices for air and hotel in one click on Yahoo!
> FareChase<http://farechase.yahoo.com/;_ylc=X3oDMTFpMnJnZ3IxBF9TAzk3NDA3NTg5BHNlYwNtYWlsLXRhZ2xpbmVzBHNsawNmYXJlY2hhc2UtMDQyNzA2%0A>
>
> ------------------------------
> Yahoo! Mail goes everywhere you do. Get it on your phone<http://us.rd.yahoo.com/evt=31132/*http://mobile.yahoo.com/services?promote=mail>.
>
>
>
Re: tabbedPane - style question?
Posted by Gerald Müllan <bi...@gmail.com>.
Hi,
I don`t think it is possible to style div elements or other dom nodes
with css in order to get rounded shapes. But I know that the rico js
library has some features to get round corners.
Have a look at:
http://openrico.org/rico/demos.page?demo=rico_effect_round
cheers,
Gerald
On 5/6/06, Dave <ja...@yahoo.com> wrote:
>
> How to make tab border corner round? Can it be done using CSS?
>
> Thanks!
>
> Jeffrey Porter <PO...@WMGMAIL.wmg.warwick.ac.uk> wrote:
>
>
>
> Thanks Jeremy,
>
>
> I found this for an age old version JSF.
> http://209.61.157.8:8080/taglibs/
>
>
> And this link on tab style＃
> http://www.mail-archive.com/users@myfaces.apache.org/msg04006.html
>
> It＊s a start. I＊d like to get my tab＊s looking like they do in the first
> link, I feel this isn＊t possible at the moment though.
> (MyFaces limitation)
>
>
> Jeff
>
> -----Original Message-----
> From: Jeremy Sager [mailto:jsager@chessys.com]
> Sent: 26 January 2006 15:18
> To: 'MyFaces Discussion'
> Subject: RE: tabbedPane - style question?
>
> Here＊s an example Jeff. Note that I＊m not using disabledStyleClass because
> in my pane, no tabs will ever be disabled. Also note that to change the look
> & feel of the tab buttons, I use two additional css entries. The CSS here
> has a lot of duplicate stuff and needs to be cleaned up a lot, but it should
> be a good starting point for you.
>
> <t:panelTabbedPane id="editorPane"
> activeTabStyleClass="editorPane_activeTab"
> inactiveTabStyleClass="editorPane_inactiveTab"
> tabContentStyleClass="editorPane_tabContent"
> inactiveSubStyleClass="editorPane_subStyle"
> activeSubStyleClass="editorPane_subStyle">
>
>
> .editorPane_activeTab {
> background-color: #316AC5 !important;
> font-family: verdana;
> font-size: 10px;
> font-color: #FFFFFF !important;
> padding: 4;
> }
> .editorPane_inactiveTab {
> background-color: #EFEFE7 !important;
> border-style: solid !important;
> border-width: 1px !important;
> border-color: #444444 !important;
> font-family: verdana !important;
> font-size: 10px !important;
> margin-left: 2em;
> margin-right: 2em;
> }
>
> .editorPane_tabContent {
> background-color: #FFFFFF !important;
> border-style: solid !important;
> border-right-width: 1px !important;
> border-left-width: 1px !important;
> border-bottom-width: 1px !important;
> border-top-width: 0px !important;
> border-color: #000000 !important;
> font-family: verdana !important;
> font-size: 10px !important;
> margin:0;
> padding:0;
> }
>
> .myFaces_panelTabbedPane{
> background-color: #316AC5 !important;
> border-style: solid !important;
> border-width: 0px !important;
> border-color: #000000 !important;
> }
>
> .editorPane_inactiveTab input{
> padding: 4;
> font-family: verdana;
> font-size: 10px;
> background-color: transparent !important;
> color: #000000;
> border:0;
> }
>
> .editorPane_activeTab input{
> padding: 4;
> font-family: verdana;
> font-size: 12px;
> background-color: transparent !important;
> color: #FFFFFF;
> border:0;
> }
>
>
>
> Jeremy Sager
> Data Communications Product Manager
> Chesapeake System Solutions
> 410.356.6805 x120
> JSager@chessys.com
>
> ________________________________
>
> From: Jeffrey Porter
> [mailto:PORTER_J@WMGMAIL.wmg.warwick.ac.uk]
> Sent: Thursday, January 26, 2006 9:45 AM
> To: MyFaces Discussion
> Subject: tabbedPane - style question?
>
>
> Does anyone know of any examples of using a t:tabbedPane and changing the
> look and feel of them?
>
> Thanks
> Jeff
>
>
>
>
>
> ________________________________
> Get amazing travel prices for air and hotel in one click on Yahoo! FareChase
>
> ________________________________
> Yahoo! Mail goes everywhere you do. Get it on your phone.
>
>
>
>
--
Gerald Müllan
Schelleingasse 2/11
1040 Vienna, Austria
0043 699 11772506
Bierbrauen@gmail.com