...
Note that later versions of uPortal (not sure which ones yet) may possibly change fl-activeTab to a newer class name since that one was changed in 1.0 (or earlier) of Fluid Infusion (or prior). So, if you find that the active tab is not being highlighted properly, then check to make sure that fl-activeTab is defined.
uPortal v2.5.x-v3.0.x, possibly version of uPortal beyond 3.1.x, and Other JSR-168-Compliant Portals
The MailPortlet UI by default depends on FSS classes (Fluid Skinning System CSS) introduced in uPortal 3.1.x. While we don't expect that you implement all of the FSS and related skin classes as defined in
If you aren't using uPortal 3.1.x , in order for the tabs to look like tabs, you'll need to add the following to each of your skins if these classes are not already implemented. (and possibly other later versions of uPortal), it takes only a slight modification to the CSS available on your page (your skin) to implement the classes used: (Please forgive the redefines here (- we just copied the FSS and FSS uPortal 3.1 skin redefines with minor modifications).
| No Format |
|---|
/* The following is basically copied from uPortal 3.1.1's css with exception of removal of the skin class from the lower-half. Please modify to suit your skins */
.fl-container-flex {width: 100%; clear:both;}
/*
* Tabs: a quick tab system
* Dependency: list-based markup ?
*/
.fl-tabs {margin:0.75em 0 0 0; border-bottom:1px solid #000; text-align:center; padding-bottom:0.2em;}
.fl-tabs li {list-style-type:none; display:inline;}
.fl-tabs li a {padding:0.25em 1.25em; background-color:#fff; margin-left:-5px; *margin-bottom:-8px; zoom:1; border:1px solid #000; border-bottom:1px solid #fff;}
.fl-tabs li a:hover {}
.fl-tabs .orderable-drop-marker {padding:0 3px; background-color:#c00;margin:0 5px 0 -5px; zoom:1;}
.fl-tabs .fl-activeTab {}
.fl-tabs-center {text-align:center;}
.fl-tabs-left {text-align:left; padding-left:10px;}
.fl-tabs-right {text-align:right; padding-right:15px;}
/* Helper: Tabs */
.fl-tabs {border-bottom-color:#4070a1;}
.fl-tabs li {background-color:#dfefff;}
.fl-tabs li,
.fl-tabs li a {font-weight:bold; color:#4070a1; border-color:#4070a1; text-decoration:none;}
.fl-tabs li:hover,
.fl-tabs li:hover a,
.fl-tabs li a:hover {background-color:#5a95cf; color:#fff;}
.fl-tabs li.fl-activeTab,
.fl-tabs li.fl-activeTab:hover,
.fl-tabs li.fl-activeTab a,
.fl-tabs li.fl-activeTab a:hover {background-color: #fff; border-bottom-color:#fff; color:#508cc9;}
.fl-tab-content {background-color:#ffffff; color:#000;}
|
In addition, if you don't have the following JSR-168 PLT.C classes defined (the "portlet-*" classes), you might may want to define them to suit your skin's needs. In older versions of uPortal these classes were defined per portlet in the skin, like cartoon_portlet.css in uPortal 2.5.3.1. In comparison, the default skin has a dedicated CSS file in the skin jsr168_portlet_spec.css in uPortal 3.1.1. Here are the portlet-* CSS classes it uses as of 2.0-alpha-5:
...
Here are the portlet-* CSS classes it uses as of 2.0-alpha-5:
- portlet-msg-info
- portlet-msg-error
- portlet-form-button
- portlet-section-header
- portlet-section-subheader
- portlet-form-field-label
Note: In older versions of uPortal these PLT.C classes were defined per portlet in the skin, like cartoon_portlet.css in uPortal 2.5.3.1. In comparison, in uPortal 3.1.1, the default skin has a dedicated CSS file in the skin jsr168_portlet_spec.css. Their location will likely change again in later versions of uPortal.
Internationalization/Internationalisation/I18n/Localization/Localisation/L10n/Message Customization
...