Details
-
Type: Improvement
-
Status: Closed
-
Priority: Major
-
Resolution: Fixed
-
Affects Version/s: None
-
Component/s: ACE-Components
-
Labels:None
-
Environment:ICEfaces 2.1, Advanced Component Environment (ace:)
-
Affects:Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial, Compatibility/Configuration
Description
Make the ace:tabSet component skinnable by Themeroller themes instead than by YUI skins. This task would entail changing the class names of the markup to those used by Themeroller, while preventing YUI from overriding these class names with its own.
Activity
Arturo Zambrano
created issue -
Arturo Zambrano
made changes -
Field | Original Value | New Value |
---|---|---|
Assignee | Arturo Zambrano [ artzambrano ] |
Arturo Zambrano
made changes -
Salesforce Case | [] | |
Fix Version/s | 2.1 [ 10241 ] |
Arturo Zambrano
made changes -
Link | This issue depends on ICE-7018 [ ICE-7018 ] |
Arturo Zambrano
made changes -
Attachment | tabset-top.png [ 13364 ] | |
Attachment | tabset-bottom.png [ 13365 ] | |
Attachment | tabset-left.png [ 13366 ] |
Arturo Zambrano
made changes -
Attachment | tabset-right.png [ 13367 ] |
Arturo Zambrano
made changes -
Attachment | tabset-rotated_gradient.png [ 13390 ] | |
Attachment | tabset-glowball_background.png [ 13391 ] |
Arturo Zambrano
made changes -
Attachment | screenshot-left_tabs.jpg [ 13397 ] |
Arturo Zambrano
made changes -
Attachment | screenshot-right_tabs.jpg [ 13398 ] |
Ken Fyten
made changes -
Salesforce Case | [] | |
Affects | [Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial, Compatibility/Configuration] | |
Assignee Priority | P1 |
Ken Fyten
made changes -
Attachment | Screen shot 2011-08-24 at 5.33.40 PM.png [ 13466 ] |
Arturo Zambrano
made changes -
Status | Open [ 1 ] | Resolved [ 5 ] |
Resolution | Fixed [ 1 ] |
Ken Fyten
made changes -
Salesforce Case | [] | |
Fix Version/s | 2.1-Beta [ 10291 ] | |
Fix Version/s | 2.1 [ 10241 ] | |
Assignee Priority | P1 | |
Security | Private [ 10001 ] |
Ken Fyten
made changes -
Fix Version/s | 3.0 [ 10241 ] |
Ken Fyten
made changes -
Status | Resolved [ 5 ] | Closed [ 6 ] |
Completed a working prototype in supporting themeroller themes in tabSet.
It was straight-forward to make the component use the Themeroller theme that
was loaded on the page. However, there were a few issues:
are hard-coded in the jQuery-ui Javascript code. So, it was necessary to override
the CSS class names used by YUI. Fortunately, YUI uses fields like ACTIVE_CLASSNAME
to hold the string value of the class name used for the active class (in YUI it's 'selected'
by default, while in jQuery-ui it's ui-state-active).
successfully to the component, the component doesn't look good right away. At the
end, the theme CSS is only concerned with colors, fonts and background images and
not so much with positions, spacing, margins, etc. So, it was necessary to add some
structural CSS styles for the component to look good. These structural CSS styles were
taken from jQuery-ui CSS.
to initialize the widget, we add and modify some of the markup in the component, which
results in some styles not being applied correctly. So, it was necessary to make
adjustments to the structural CSS styles to work with our markup. Further, it might be
necessary to make some slight changes to the markup we render in order for the
component to look completely right. For example, we are rendering a <div> element
inside <li> elements to display the tab header; it was necessary to make some adjustments
to the structual CSS to apply the theme to this <div> element, but the code only
makes changes to the <li> element, so these changes are hidden by the styling of the <div> element.