portals-jetspeed-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Earl Shultz"<shul...@midknightoil.com>
Subject Jespeed Skins Alternatives
Date Mon, 31 Mar 2003 19:38:24 GMT
I seldom post but this posting touched home on some development I have already addressed. 
I see a need to ensure that some aspects of style control be carried over or included in future
revision.  Specifically let me list my major concerns:

First, Jetspeeds default.css includes a very cryptic list of class references for style control.
 Most are inherent to the control of the Jetspeed appearance but most of the existing classes
are very obscure and it is not immediately apparent what they control. As a result I have
been pruning existing classes and establishing a clearer hierarchy.  Below is an example snippet
however I realize this is completely up to the developer for control.  I mention it simply
so that you might consider establishing clearer naming conventions for Jetspeed specific classes.
 One important note however is that I am establishing individual CSS documents for each skin.

######  default.css SAMPLE

.Portal { }
.Portal-Header {
   background-color: #000000;   
   }
.Portal-Header-Logo {
   text-align: left;
   vertical-align: top;
   width: 100%;
   }
.Portal-Header-Navbar {
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   border: 0px;
   text-align: right;
   }
.Portal-Header-Navbar-Button {
   border: none;
   text-align: right;
   }
.Portal-Header-Buttonbar {
   padding: 5px 0px 0px 0px;
   border: none;
   text-align: right;
	}
.Portal-Header-Buttonbar-Button {
   border: 0px;
   text-align: right;	
	}
.Portal-Header-Authentication {
   background-color: #87ACD6;
   text-align: right;
   }
.Portal-Header-Authentication-Field {
   padding: 1px 1px 1px 1px;
   color: #000000;
   font-family: Arial, Verdana, Helvetica;
   font-size: 80%;
   font-weight: 600;
   text-align: right;
   }
.Portal-Menu { }
.Portal-Portlet-Titlebar
   {
   padding: 0px 0px 3px 3px;
   border: 1px 1px 1px 1px solid #000000;
	background-image: url(../../images/blue-gold/scanline_light.gif);
	background-repeat: repeat-x;
   color: #000000;
   font-weight: 900;
   }
.Portal-Portlet-Titlebar-Actions
   {
   background-color: #CCCC99;
   padding: 2px 3px 1px 3px;   
   border: 1px 0px 1px 1px solid #000000;
   }
.Portal-Portlet { }
.Portal-Footer { 
   background-color: #87ACD6;
   color: #000000;
   font-family: Arial, Verdana, Helvetica;
   font-size: 90%;
   font-weight: 400;
   text-align: center;
   }

Second, There has been a bit of discussion as to addressing only .gif images.  Scott's proposal
is far more ideal as it allows any web image format.  I support that recommendation completely
as jpgs are necessary for compressed photo quality images.  I believe actions are a small
part of image control in a skin.  The ability to control the users complete experience through
a skin is limitless.  One difference to my implementation is that not only do I allow the
skin to control the appearance of certain aspects of the portal but I have built beneath the
images directory individual directories for each Skin theme.  (images/gold-black/default.css
or images/blue-gold/default.css).  Inside each directory I can have a completely unique library
of images so that even down to the logo, navigation, action images, etc... I can change the
complete appearance of the site beyond just background colors, borders, etc...

I have eliminated most references to style within the skins.xreg, instead we have established
effective style through CSS documents and we refer to a library of class references to handle
the page presentation from the vm or jsp pages.

######  Skin.xreg

    <skin-entry name="gold-black" hidden="false">
        <property name="skin-name" value="gold-black" hidden="true"/>
        <property name="title-style-class" value="TitleStyleClass" hidden="false"/>
        <property name="highlight-title-style-class"
            value="HighlightTitleStyleClass" hidden="false"/>
        <property name="controller-style-class"
            value="ControllerStyleClass" hidden="false"/>
        <property name="portlet-style-class" value="PortletStyleClass" hidden="false"/>
        <property name="content-style-class" value="ContentStyleClass" hidden="false"/>
        <property name="tab-style-class" value="TabStyleClass" hidden="false"/>
        <property name="tab-title-style-class"
            value="TabTitleStyleClass" hidden="false"/>
        <property name="tab-content-style-class"
            value="TabContentStyleClass" hidden="false"/>
    </skin-entry>


These CSS classes are then referenced by the associated VM documents such as top.vm or top.jsp...
An example follows:

######  top.vm

<div>
#if ($!{data.profile.document.portlets.skin.name} != "null")
    #set ($skinName = "$!{data.profile.document.portlets.skin.name}")
#else
    #set ($skinName = $config.getString("services.PortalToolkit.default.skin"))
#end
#if ($data.User.hasLoggedIn())
<TABLE>
   <TR>
      <TD class="Portal-Header-Logo"><IMG SRC="images/$skinName/fnmoc_home_banner_metoc.jpg"
/></TD>
      <TD>
         <TABLE class="Portal-Header-Navbar" cellspacing="0" cellpadding="0">
            <TR>
               <TD class="Portal-Header-Navbar-Button">
                  <!-- CUSTOMIZE HTML BUTTON -->
                  <A HREF="$link.setAction("controls.Customize")?reset=on&level=top">
                     <IMG BORDER="0" ALT="Customize HTML" SRC="images/$skinName/edit_html.jpg"
/>
                  </A>
               </TD>


Likewise the css can be unique for each skin as follows in the layouts\html\default.vm:

######  default.vm

<HTML>
  <HEAD>
    <base href="$clink.External" />
    #if ($!{data.profile.document.portlets.skin.name} != "null")
        #set ($skinName = "$!{data.profile.document.portlets.skin.name}")
    #else
        #set ($skinName = $config.getString("services.PortalToolkit.default.skin"))
    #end
    <link href="$clink.setURI("css/$skinName/default.css").Absolute" type="text/css" rel="stylesheet"
/> 
    #set ($titlePrefix = $config.getString("portalpage.title_prefix"))
    <title>#if ($titlePrefix)$titlePrefix #end$!{data.profile.document.portlets.getMetaInfo().title}</title>
  </HEAD>

 
I am happy to see that Skins are an issue warranting futher development by the Jetspeed developers.
 The old addage "Better to Look Good than to Feel Good" has a great deal of merit to the public.
 People will always favor aesthics over functionality when it comes to end users. But Fuctionality
coupled closely with aesthetics is always destined for a successful future.

If you have any other questions regarding anything I have mentioned please feel free to contact
me.  Thank you for your consideration.

V/R,


Kevin Shultz

"The difference between 'involvement' and 'commitment' is like an eggs-and-ham breakfast:
the chicken was 'involved' - the pig was 'committed'." 
     - unknown

---------------------------------------------------------------------
To unsubscribe, e-mail: jetspeed-dev-unsubscribe@jakarta.apache.org
For additional commands, e-mail: jetspeed-dev-help@jakarta.apache.org


Mime
View raw message