Hi,
While working on design of 3.1.0, the easiest solution i found was just
creating completely new skin. We're trying to implement different skins
with same layout (a bit different from default uportal3). To achieve
that we're adopting some parts of yui guidelines - we're creating
layout.css and colors.css (we're pretty happy with default fonts from FSS).
About namespacing - thats wasn't an issue. We removed all those
namespaces from our .css files to improve readability (and decrease file
size). Although I don't see any disadvantages of using namespaces.
CSS spec in JSR168 is far from perfect. And it looks like JSR286 won't
fix that. I would like to use standard HTML structure (cleaner code),
but so far we have used portlet spec as much as it is possible. I
totally agree with things said in http://www.unicon.net/node/730
Arvids
Arlo White wrote:
I just migrated our custom skin from an older 3.1 trunk version to
3.1.0-GA. In my opinion, the FSS style namespacing is one of the
lesser issues. It's easy to just global replace "fl-theme-uportal3".
Granted it did bite me a few times. For example, I forgot to replace
uportal3 in the *portlet_content.css file and so those styles weren't
taking affect until I caught it.
I'm fairly happy with the styling and structure of the theme and
uportal skin overall. The only real difficulty I encountered was with
single column portal screens. In our skin the columns are surrounded
by a top gradient and two curved corners. In the CSS file the curves
are within the .left and .right columns. However, the single column
doesn't have this convention (because it's a single column). So I had
to implement these same features differently within the single
column's inner components. Even though it's not technically correct
it would make skinning easier if the single column had extra div
elements with .left and .right so you didn't have to worry about
writing more CSS statements to accommodate single portal columns.
Another issue is understanding the new .fl css. (fl-tabs,
fl-listmenu, etc) When I first looked at the new FSS skin for
uportal3 I couldn't understand how these were used. fl-tabs seemed to
affect the navigation tabs in some ways. I wasn't clear if the idea
was that fl-tabs would define colors and fonts and the navigation tabs
would set the background-images or what. If I want tabs in my
portlets should I use fl-tabs? Is their a JSR 168 standard for tabs?
The .fl-listmenu seems to only be used in sidebars. So I styled it to
look good on the dark background of the sidebar. However, I'm now
unsure if it might be used within portlets, where my color choices
would look bad against a white background.
An explanation of what these new CSS conventions are used for would be
helpful.
My next concerns are with portlet CSS. I'm still not clear what the
correct approach for styling portlets is. Should we try to use JSR
168 as much as possible or should we just use standard html structure
except where it's necessary to use some CSS classes.
For example, for a main heading in a portlet, should I just use an h1
tag? (Styled by fluid.theme.*.css .fl-theme-mycp3 h1)
Or should I use JSR168 (.portlet-section-header)
Looking at PLT.C.4 I'm a little confused how to use it. Should my
structure look something like this?
<div class="portlet-section-header">My Heading</div>
<div class="portlet-section-body">
<div class="portlet-section-subheader">Sub Section Heading</div>
<div class="portlet-section-footer" />
</div>
Looking at the jsr168.css file I see stuff like .portlet-menu. Should
I use this or .fl-listmenu?
I think it would make more sense to move all styles in
fluid.theme.*.css that affect portlet content to
*_portlet_content.css. (The h1,h2,a styles) Or else be more clear
about what they're used for. For example:
/* This is the default h1,h2 styling for use in the theme, you should
use JSR168 standards for your portlets, e.g. portlet-section-header
instead of h1 */
I think people would really appreciate a broader overview of these
topics and good CSS practices as it relates to the portal. Maybe this
can be added to the uPortal 3 manual and a link could be put in the
main CSS file so people aren't so confused.
--
You are currently subscribed to uportal-dev@lists.ja-sig.org as:
arch...@mail-archive.com
To unsubscribe, change settings or access archives, see
http://www.ja-sig.org/wiki/display/JSG/uportal-dev
