Skins / Interface Designs

General Concept

HTML web skins provide a unique way to control the look and feel of each page served by this digital library. The skin controls the stylesheet used, as well as the header and footer. This allows the same digital collection to be branded by each of the partners involved. Examples of common web skins include UFDC, DLOC, and the Matheson.

Skins are controlled through the Online Administrative Tasks and file structure for the skins.

Directory and Structure

One of the options in the Online Administrative Tasks is to set a Base Skin Code. This allows the new skin to 'inherit' from another web skin. In this case, the common images used for buttons, tabs, etc.. are referenced from the base web skin's folder. This allows many different web skins, without repeating each image file.

Additionally, the new skin can also have completely new common images as well as new headers, footers, and styles.

Files for skins exist in the SKINS subfolder directly under the main design folder. The files for each separate skin are located in a subfolder with the skin name. For instance, for a skin named PALMM, the directory structure is:

\skins\PALMM\

With the Base Skin Code supporting any degree of design on a new skin, specific files are not required within the SKIN folder. The additional files support any level of customization and the subfolders and files in the SKIN folder may include:

• SKIN.css
• html (subfolder) with:
  • footer.html
  • footer_item.html
  • header.html
  • header_item.html
• buttons (subfolder) with:
  • customized image versions of the main buttons, if wanted these should follow the standard naming standards for existing skins
• tabs (subfolder) with:
  • customized image versions of the main tabs, if wanted these should follow the standard naming standards for existing skins
• zoom_controls (subfolder) with:
  • customized image versions of the main zoom controls, if wanted these should follow the standard naming standards for existing skins

Skins are addressed by the skin name with one of the following URL query strings: ?n=[skin] or &n=[skin]. The source parameter in these query strings should be replaced with just the foldername for the particular SKIN folder.

SobekCM Directive Keywords

Several special directive keywords can be placed in the body of the source header and footer html files. These keywords will be replaced during runtime by the web application. Think of these as SobekCM-specific server side includes.

Directives available in the header and footer files

• <%BASEURL%>

  This directive is replaced with the base URL for the current user's request. So, if the user comes through http://www.dloc.com, that is the base URL. Likewise, if the base URL for http://ufdc.uflib.ufl.edu/juv/all/brief/4 is http://ufdc.uflib.ufl.edu. Use this directive for all links within the digital library, to support access via multiple URLs.
  
  A link to return the user to their home link would be..
  <a href="<%BASEURL%><%?URLOPTS%>" title="Home">
  
  A link to send a user to a info page on their base url would be..
  <a href="<%BASEURL%>/info/adminhelp/staticinfo<%?URLOPTS%>" title="Static Information">

• <%SKINURL%>

  This directive is replaced with the URL pointing to the base web skin folder. This can be used to reference images within the web skin folder. Using the base URL for this will not work, since the base URL includes an ending which indicates if the user is currently logged on.
  
  For example, referencing an image in an images subfolder under the web skin folder would be...
  <img src="<%SKINURL%>images/banner.jpg" alt="banner" <

• <%?URLOPTS%>

  This directive is replaced with the current user's general options, which includes the user's current web skin, user interface language, etc. The encoded url options are preceeded with a question mark. This would be used for links which do not already have any query strings associated with it, such as..
  <a href="<%BASEURL%>/info/adminhelp/staticinfo/<%?URLOPTS%>" title="Static Information">.
  
  Without this included, following one of your links may cause a user to lose their scope and settings.

• <%&URLOPTS%>

  This directive is replaced with the current user's general options, which includes the user's current web skin, user interface language, etc. The encoded url options are preceeded with an ampersand. This would be used for links which already has query strings associated with it, such as search URLs..
  <a href="<%BASEURL%>/juv/results/?t=kittens<%&URLOPTS%>" title="Canned Search">.
  
  Without this included, following one of your links may cause a user to lose their scope and settings.

• <%URLOPTS%>     ( legacy directive )

  This directive is scheduled to be deprecated. It currently functions by putting the URL Options but excludes any leading character ( ? or & )

Directives available in the header only

• <%BREADCRUMBS%>

  Replaced with hotlinked breadcrumbs back to the system home, or item aggregations related to a digital resource.

• <%MYSOBEK%>

  Replaced with either the link to sign onto the mySobek portion, or a link to the mySobek home and a logout link

• <%BANNER%>

  Replaced with the appropriate banner. If this omitted, no banner is included.

• <%ENGLISH%>

  Replaced with a link to switch the current language to english, while retaining the same current mode and display information

• <%FRENCH%>

  Replaced with a link to switch the current language to french, while retaining the same current mode and display information

• <%SPANISH%>

  Replaced with a link to switch the current language to spanish, while retaining the same current mode and display information

Directives available in the footer only

• <%CONTACT%>

  Replaced with the link to the email/contact page

• <%VERSION%>

  Repaced with the current version number of the SobekCM Web Application