Objectif Lune PrintShop Web - 2.2 Skinning Guide
PrintShop Web
Skinning Guide
PrintShop Web Skinning Guide
Document version: PSW 2.2 R4300
Date: May, 2008
Objectif Lune - Contact Information
Objectif Lune Inc.
2030 Pie IX, Suite 500
Montréal, QC
Canada H1V 2C8
Tel.: 514-875-5863
Fax: 514-342-5294
www.objectiflune.com
To find an Objectif Lune office near you and for more information on our products and services, visit:
www.objectiflune.com
Table of Contents
Introduction.................................................................................................................................................5
Skinning....................................................................................................................................................... 5
Templates and styles.................................................................................................................................. 6
Getting started...........................................................................................................................................7
Creating your own skin............................................................................................................................... 7
Tools............................................................................................................................................................ 7
File organization..................................................................................................................................... 10
Template.php.............................................................................................................................................10
Style.php....................................................................................................................................................10
Images....................................................................................................................................................... 10
Web design parameters............................................................................................................................11
The template file..................................................................................................................................... 12
Function blocks..........................................................................................................................................12
Page title....................................................................................................................................................14
CSS includes.............................................................................................................................................14
Header....................................................................................................................................................... 14
User information........................................................................................................................................ 15
Menu..........................................................................................................................................................15
Crumbs.......................................................................................................................................................15
Messages...................................................................................................................................................15
Content.......................................................................................................................................................16
Sub menus.................................................................................................................................................16
Search........................................................................................................................................................16
Summary....................................................................................................................................................17
Preview...................................................................................................................................................... 17
Footer.........................................................................................................................................................17
Style.php.....................................................................................................................................................18
Tags, IDs and classes...............................................................................................................................18
CSS Syntax............................................................................................................................................... 19
Global styles..............................................................................................................................................20
Page specific styles...................................................................................................................................20
Browser exceptions................................................................................................................................... 21
Header..........................................................................................................................................................23
Replacing content......................................................................................................................................23
User information..................................................................................................................................... 24
CSS Lists...................................................................................................................................................24
Adding additional information....................................................................................................................25
Highlighting "hovered" items......................................................................................................................25
Menu bar.....................................................................................................................................................26
Styling the menu items..............................................................................................................................26
Creating a Tabbed menu..........................................................................................................................28
Styling the selected menu item.................................................................................................................28
Background...............................................................................................................................................29
Adding a background image.....................................................................................................................29
PrintShop Web Skinning Guide | 3
Overview tables.......................................................................................................................................30
Head...........................................................................................................................................................31
Subhead.....................................................................................................................................................31
Content.......................................................................................................................................................32
Footer.........................................................................................................................................................32
Buttons.......................................................................................................................................................32
Edit forms...................................................................................................................................................33
Form head................................................................................................................................................. 35
Form lines..................................................................................................................................................35
Warnings and Errors................................................................................................................................. 35
Group head................................................................................................................................................36
Sub menus.................................................................................................................................................37
Multiple sub menus................................................................................................................................... 38
Special variables.....................................................................................................................................39
Variables for Template.php.......................................................................................................................39
Variables for Style.php..............................................................................................................................40
PrintShop Web Skinning Guide | 4
Introduction
With the introduction of version 2.0 the PrintShop Web (PSW) web site is fully skinnable, everything
except the actual textual content of the page can - and will - vary from skin to skin. A skin is a series
of files that control the presentation of the web site. To allow PSW to be skinnable, style is completely
separated from contents. The web page use standard HTML elements, user defined classes and
unique IDs. The style information is stored in Cascading Style Sheets documents, allowing the styles to
be changed and manage the styles without the need to change the source code.
Skinning
The term Skinning refers to a software architecture which provides you with a manageable way of
separating application logic and content from its presentation. This abstraction of form and function
is sometimes referred to as a two-tiered presentation model. This allows web designers and system
integrators to customize the user interface without the risk of interfering with the functionality of the
application. Skins are used to define colors, fonts, images, borders and the placement of various
components in the web site.
PrintShop Web skin examples
PrintShop Web Skinning Guide | 5
PSW can use different skins for each company, allowing your customers to use the system in their
own house style or a style that closely matches their house style (depending on the time and effort
you have spend to match there corporate site). Users of that company can access the PSW web
site via a personalized URL which will invoke their skin. Personalized URL is controlled by the PSW
administrators by defining an URL variable for each company.
For example: http:/www.yourprintshopweb.com/yourclientscompanyname.
Templates and styles
Skinning involves the use of templates. A template is a series of files within the PSW web site that
control the presentation of the content and their position on the page. An embedded skinning engine is
used to assemble the dynamically generated content into the final HTML pages.
Skins are used in combination with Cascading Style Sheets (CSS). This is a mechanism for adding
style (e.g. fonts, colors, spacing) to Web documents, standard by the World Wide Web Consortium
(W3C). A skin combines uses HTML, JavaScript and PHP to define the look & feel of PSW. To create a
new skin or modify an existing skin some experience with these techniques is necessary.
PrintShop Web Skinning Guide | 6
Getting started
Creating a skin for the first time can be a daunting and sometimes a time consuming task. This section
gives you an overview of useful tools and sources on the web.
Creating your own skin
Before creating your own skins you should have some basic knowledge of HTML and CSS. There are
fine books on these subjects and you will find a lot of information on the web. The web is probably your
best source. If you're not familiar with HTML and CSS please visit the following web sites:
http://www.w3schools.com
•
http://www.htmldog.com/guides/
•
Tools
What is a craftsman without a good set of tools. Below you'll find a list of tools that will help you with
skin development.
PrintShop Web demo version
Download and install the demo version of PSW on your local machine. This allows you to develop
your skins offline without the risk of interfering with your production environment. The demo version
is limited regarding printing and previewing PrintShop Mail documents but has a fully functioning user
interface. A demo version can be downloaded from the Objectif Lune web site (www.objectiflune.com)
Design
Before you start creating a skin you should have a visual theme which determines the look & feel of
your web site. This can be the design of your current corporate site, your customers web site or a
new design. You'll probably start your design in an application like Adobe Photoshop ending up with a
bunch of sliced images (background images, icons, button backgrounds etc). On the web you can find
several samples and downloadable .psd files which will get you up and running in no time.
Text editor
There are several specialized CSS editors available. The PSW style sheet documents are a
combination of CSS and PHP so we advise you to use a text editor like Notepad++. This is an open
source editor (a Notepad replacement) that support coding in several programming languages. The
application runs under the MS Windows and can be downloaded for free at the following location:
http://notepad-plus.sourceforge.net/
PrintShop Web Skinning Guide | 7
The style.php file in Notepad++
Browser extensions
The toughest part will be to keep your skin compatible with the various browsers and browser versions.
You can download and install additional browser extensions that will help you during skin creation.
Typically these extensions expose the hierarchical structure of your web page allowing you to identify
tag names, ids and CSS classes quickly. These extensions are available for all popular web browsers
and can be downloaded for free. Below you'll find a list of popular extensions:
Web Developer extension for Fire Fox
•
https://addons.mozilla.org/firefox/
Firebug for Fire Fox (our personal favorite)
•
https://addons.mozilla.org/firefox/
Microsoft Internet Explorer Developer Toolbar
•
http://www.microsoft.com/downloads/
Microsoft Internet Explorer Developer Toolbar
PrintShop Web Skinning Guide | 8
The ID and class details are exposed by the Web Developer extension
PrintShop Web Skinning Guide | 9
File organization
Skins are organized under the Templates folder located in the PSW web site folder. Each skin has its
own directory tree. The name of this folder will be visible in the Skin-pull down menu in the Web design
section of a company and in the web design page in the Settings-menu.
Skin folders stores the items required to render a skin and can contain an unlimited number of files and
sub folders. A skin consists of the following elements:
Template.php
•
Cascading Style Sheet documents
•
Images
•
Web design parameters stored in the PSW database
•
The contents of skin folder
Template.php
The Template.php file is the main file for your skin and can be compared with an index.html file of a
regular HTML web site. The file calls the different functions of the skinning engine that assembles
the final HTML output. The Template.php file controls the logical positions of the page elements and
processes the items in the order that they appear in that file.
Style.php
As stated before skins are used in combination with Cascading Style Sheets (CSS). PSW uses a PHP
file that generates a CSS structure. To be able to call special functions that insert special variables like
color information or an image file. The variable information is retrieved from the PSW database and
can be set by the administrator in the Edit Web Design page. This can be done per company (f.e. to
match the companies color scheme) or for the system wide web design settings.
PSW comes with a browser detection mechanism. This allows you to make style exceptions for specific
browsers, browser versions and operation systems.
Images
To enhance your skin even more you might want to add custom images and icons. You can place
these images inside your skins folder and refer to them from within your style documents.
PrintShop Web Skinning Guide | 10
Web design parameters
By editing the web design settings of a company you can specify company specific colors, fonts and
logo. Using special functions a skin can retrieve these parameters and use them in the Style.php file.
The Edit Web Design page
PrintShop Web Skinning Guide | 11
The template file
The Template.php file contains HTML code with a few snippets of PHP. These PHP snippets control
the rendering of PSW function blocks on apage by page basis. Examples of functions blocks are: the
menu bar, sub menus, the user info bar, the main content area.
A sample PSW web page showing various function blocks
Function blocks
The design and positions of these blocks can be changed by altering the Style.php file and changing
the code and its position in Template.php. Typically function blocks are placed inside HTML <div>
tags. The following sections describe the main function blocks. Please note that the structure of the
Template.php will probably be different for each skin. The following code snippets are derived from the
default PSW skin.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title><? generateSystemName(); ?>: <? generateTitle(); ?></title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<? generateCSSIncludes(); ?>
<? generateJavaScriptIncludes(false); ?>
</head>
<body class="<? generatePageID(); ?>">
<div id="header"><h1>PrintShop Web</h1></div>
<? if(function_exists("generateUserInfo")) { ?>
<div id="userinfo">
<div>
<h3><? generateAdditionalInfo(); ?></h3>
<? generateUserInfo(); ?>
</div>
PrintShop Web Skinning Guide | 12
</div>
<? } ?>
<? if(function_exists("generateMenu")) { ?>
<div id="menu">
<div>
<? generateMenu(); ?>
</div>
</div>
<? } ?>
<? if(function_exists("generateCrumbs")) { ?>
<div id="crumbs">
<? generateCrumbs(); ?>
</div>
<? } ?>
<? if(function_exists("generateMessages")) { ?>
<div id="messages">
<? generateMessages(); ?>
</div>
<? } ?>
<div id="content">
<? if (getFormCount() > 0){ ?>
<? generateContent(); ?>
<? } ?>
</div>
<? if(function_exists("generateSubMenu")) { ?>
<div id="submenu">
<? generateSubMenu(); ?>
</div>
<? } ?>
<? if(function_exists("generateSubMenu1")) { ?>
<div id="submenu1">
<? generateSubMenu1(); ?>
</div>
<? } ?>
<? if(function_exists("generateSubMenu2")) { ?>
<div id="submenu2">
<? generateSubMenu2(); ?>
</div>
<? } ?>
<? if(function_exists("generateSearch")) { ?>
<div id="search">
<? generateSearch(); ?>
</div>
<? } ?>
<? if(function_exists("generatePreview")) { ?>
<div id="preview">
<? generatePreview(); ?>
</div>
<? } ?>
PrintShop Web Skinning Guide | 13
<? if(function_exists("generateSummary")) { ?>
<div id="summary">
<? generateSummary(); ?>
</div>
<? } ?>
<? if(function_exists("generateFooter")) { ?>
<div id="footer"><? generateFooter(); ?></div>
<? } ?>
</body>
</html>
As you can see the PHP snippets perform a function_exists check. You should not alter these checks
but you may add HTML tags and information inside or outside these checks. To meet your design you
will probably need to add additional <div> and/or <table> tags to change the positioning of the function
blocks.
Page title
The <title> tag is part of the <head> and contains the name of the web page. The contents of this tag
are shown in the browser title bar - at the very top of the window. The title bar shows the name of your
browser and the name of the page. When a visitor adds your page to their favorites or bookmarks, the
page title is the default name it will assign to the bookmark. Search engines use the page title as the
listing name for their results.
You can enter a custom title or use the predefined PHP functions to set the title dynamically. By default
the <title> tag will be populated with the systems name and the title of the current section/subsection.
These two values are separated by a colon as follows:
<title><? generateSystemName(); ?>: <? generateTitle(); ?></title>
The generateSystemName returns the value of the cSystemName string and depends on the selected
language. You can change the value for this string in the Edit Language page of the Settings section.
The generateTitle will return the name of the current PSW section.
CSS includes
This function retrieves the proper location of your skin and its accompanying CSS files. This PHP
function is required to dynamically load your CSS files. You should not remove this.
<? generateCSSIncludes(); ?>
Header
The information stated in the header div is used to display the main page header or title (not to be
confused with the browser window title). Using the Style.php you can replace the contents of this
element with the logo uploaded through the Edit Web Design page. It allows the skin to show a
company specific image or logo.
<div id="header"><h1>PrintShop Web</h1></div>
PrintShop Web Skinning Guide | 14
Loading...