Manualshelf

7.0

Manuals Brands Objectif Lune Manuals Applications PrintShop Mail Web
1 2 3 4 5 6 7 8 9 10
Table Of Contents
PrintShop Mail Web
Skinning Guide

Summary of content (63 pages)

  • PAGE 16

    The template file - HMTL Outline <? generateSystemName(); ?>: <? generateTitle(); ?> 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 PSM Web section. 3.1.2 CSS includes This function retrieves the proper location of your skin and its accompanying CSS files.

  • PAGE 17

    The template file - HMTL Outline Bread crumbs in action 3.1.7 Messages The generateMessages inserts the main headline and descriptive text for each page. The login page showing a headline and descriptive text 3.1.8 Content The generateContent function renders the main area. It holds the overview information, forms, buttons and the main process functionality of the PSW system.

  • PAGE 18

    The template file - HMTL Outline A part of the company section showing the Company sub menu 3.1.10 Search Many overview pages have a search option. The generateSearch functions renders this block depending on the section the contents of this block can change. 3.1.11 Summary The summary is a special block in the Order Manager that shows summary information regarding the orders in a specific order folder. 3.1.12 Preview The generatePreview function renders the sidebar items that hold preview information.

  • PAGE 19

    4 Styling The style files hold the styling parameters for your skin. It defines the fonts, colors, borders, backgrounds, width and height specifications of the user interface elements. This section contains answers to the following questions: • What are tags, IDs and classes? (Page 16) • What is the basic CSS syntax? (Page 16) • How do I create styling exceptions for a specific browser and browser version? (Page 18) Objectif Lune Inc.

  • PAGE 20

    4.1 Key Concepts To apply styling to HTML elements, you should understand the following key concepts: • Tags, IDs and classes (Page 16) • CSS Syntax (Page 16) 4.1.1 Tags, IDs and classes Each element on the page is rendered using standard HTML tags or by using

    and tags that have a unique identifier and/or a class. IDs are used when there is only one occurrence on a page, classes are used when there are one or more occurrences on a page.

  • PAGE 21

    Styling - Key Concepts a:hover, a:visited, a:link{ color: black; outline-style: none; } With the class selector you can define different styles for the same type of element. The class selector is defined using a point. .totalprice { font-weight: bold; } You can also define styles for HTML elements using the id selector. The id selector is defined as a # followed by the id.

  • PAGE 22

    4.2 Style organization The styles that come with PSM Web are organized using the following structure: • Global styles (Page 18) (generic interface elements) • Page specific styles (Page 19) (exceptions) • Browser exceptions (Page 19) The contents of skin folder 4.2.1 Global styles The style.php file and the style-element-.php files hold the style definitions that apply to all pages in the system. At the beginning of the file the skin_customization.

  • PAGE 23

    Styling - Style organization ... // Page Specific Items 4.2.2 Page specific styles Each page comes with a body tag that has a unique class (there can only be one body tag in a HTML page). This class set on the tag allows you to create page specific exceptions. In the skins supplied with PSM Web the page specific styles are stored in the style-pagespecific.php file. This file is included at the end of the style.php file.

  • PAGE 24

    Styling - Style organization Browser names The browser names use the following abbreviations: • ie = Internet Explorer • moz = Mozilla • saf = Safari Operating systems The operations system names use the following abbreviations: • • • • nt = Windows XP nt = Windows 2003 Server nt = Windows NT mac = Mac OS X Note: Exceptions made for FireFox are stored in a moz exception file.

  • PAGE 25

    4.3 Header The information stated in the header div is used to display the main page header or title. This is the place to show a system wide logo or the logo of your customer. The default skin showing the PSM Web logo as the header image 4.3.1 Replacing content The HTML snippet below shows the header div containing a

    tag. Using the Style.php you can replace its contents by a logo uploaded in the Edit Web Design page. This allows the system to show a company specific image or logo.

  • PAGE 26

    4.4 User information The User Info block displays the name of the logged on user, an option that lets the user edit his or her personal information and the Log off option. The Edit User Info is optional and depends on the users role. In the default the user User Info block is dark blue and placed just above the Menu bar In the default skin the User Info bar is placed just above the Menu bar. Using styling parameters the two seem to be surrounded by border.

  • PAGE 27

    Styling - User information

    Below you'll see a variant of the User Info bar. In this case the orientation is placed vertical and a custom string was added. A variant of the User Info bar showing additional information. 4.4.

  • PAGE 28

    4.5 Menu bar The Menu bar provides access to the main sections of PSM Web. Like the User Info bar the items of the Menu bar are created using HTML lists, which means that you can change its orientation by altering the CSS file. In the default skin the Menu bar is placed directly beneath the User Info bar 4.5.1 Styling the menu items The Menu bar is generated using HTML lists, within the list items hyperlinks ( tags) are used to define the target when the user clicks the item.

  • PAGE 29

    Styling - Menu bar #menu a { /* background-color: ; */ background: #D9E1E5 url('images/nav_bg.gif'); border-right: 1px solid #AFBEC7; color: #456; display: block; float: left; text-decoration: none; font-weight: bold; font-family: sans-serif; font-size: 1em; line-height: 25px; padding: 0 10px; } #menu li.selected a { /* background-color:

  • PAGE 30

    Styling - Menu bar #menu li { display: inline; border-width: 1px 1px 0 1px; border-color: #666666; border-style: solid; padding: 5px; l line-height: 2em; margin-right: 3px; margin-left: 0; background-image: url("images/btn-bg.gif"); background-repeat: repeat-x; } 4.5.3 Styling the selected menu item PSM Web will add an additional class to the selected menu item. This allows the style for the selected menu item to change to make it stand out.

  • PAGE 31

    4.6 Background The tag has two attributes to specify backgrounds. The background can be a color and/or an image. These attributes can be added directly in the Template.php file (bgcolor and background) or to the Style.php file. 4.6.1 Adding a background image Background-images can be used in most HTML elements - not just for the whole page (body) and can be used for simple but effective results, such as rounded corners. Example: body { background-image: url("images/main-bg.

  • PAGE 32

    4.7 Overview tables Overview pages show tabular data (for example the Companies, Users and Publication Types pages). An overview table is build using the table tag and follows the regular HTML

    tag structure.

  • PAGE 33

    Styling - Overview tables

    • The content is enclosed by a
    element. Each page contains a
    tag, which is used to catch information entered by the user or to perform an action when the user clicks a button. The tag has two main components: the actual table and the toolbar/buttons to perform specific actions. A page will only contain a single overview table. 4.7.

  • PAGE 34

    Styling - Overview tables #tableOverview tr.level0:hover, #tableOverview tr.level1:hover, #tableOverview tr.record:hover { background-color: #E6E6FF; } 4.7.5 Buttons The buttons below the overview table are created using the tag with a class formButton. The buttons have a unique id allowing you the specify the style per button. The buttons are enclosed by a

    tag with a class of toolbar. Objectif Lune Inc.

  • PAGE 35

    4.8 Edit forms A form is an area that can contain form fields. Form fields are objects that allow the visitor to enter information - for example text boxes, drop-down menus or radio buttons. When the visitor clicks a submit or save button, the content of the form is sent to PSM Web. The Edit User Info form The following sample shows a stripped down source code of an edit form. Like the overview pages all elements are surrounded by a content

    tag. The first child of this tag is the tag.

  • PAGE 36

    Styling - Edit forms id="fcPersonCodeField" class="formField"/> The

    tag is used to process the information entered by the user. The contents of the tag are captured by a
    with a unique id. 4.8.1 Form head The first content element is the form header. In the default skin the information in this tag is used to visually group the elements in the form. .

  • PAGE 37

    Styling - Edit forms

      Password is a required field!
    The warningLabel is used as spacer to make sure that the warning icon and message align with the field of the accompanying form line. The warningIcon holds the actual warning message which is stored in a separate tag.

  • PAGE 38

    4.9 Sub menus Several sections have one or multiple sub menus. Sub menus are used to navigate to sub sections of that specific section. Sub menus have their own classes and styles. The sub menu of the Settings section Like the Main menu and the User Info block the sub menus are created using HTML lists (

      tag and
    • tags).

    • PAGE 39

      Styling - Sub menus } #submenu li.level1{ padding-left: 1em; } #submenu .selected{ font-weight: bold; } 4.9.1 Multiple sub menus The Template.php file allows pages to have multiple sub menus. The source code of such a page has a unique id for each sub menu. In the style documents these IDs are grouped by separating each selector with a comma: #submenu li.level0, #submenu1 li.level0, #submenu2 li.level0{ } #submenu li.level1, #submenu1 li.level1, #submenu2 li.level1{ padding-left: 1.5em; } #submenu .

    • PAGE 40

      5 Special variables In this section we list the special variables you can use in the Template.php and Style.php files. Objectif Lune Inc.

    • PAGE 41

      5.1 Variables for template files The functions in this section can be used in templates files (e.g. Template.php). 5.1.1 generateString The generateString function retrieves a language string based on the supplied parameter. It is used to insert language dependent text. /* Renders to following text */ PrintShop Web Custom strings can be added to the language strings. A string is made up of a name and a value, which are seperated by the = symbol.

    • PAGE 42

      5.2 Variables for style files The PSM Web style files (e.g. Style.php) are regular CSS files. Its a PHP file that renders a CSS file. By including the skin_customization.php line at the beginning of your Style.php file the values entered in the Edit Web Design pages can be used in your style. Once included special PHP functions can be used to retrieve style information that is entered in the Edit Web Design page of the companies in PSM Web.

    • PAGE 43

      Special variables - Variables for style files #tableOverview .subhead td { background-color: ; border-width: 0 1px 0 0; border-color: #FFFFFF; } 5.2.2 generateSkinContrastColorHighLight The generateSkinContrastColorHighLight function retrieves the skins contrast color set in the Edit Web Design page. A parameter can be supplied to change the tint of the color. Fractional values are used, where 0.0 will be black, 1.

    • PAGE 44

      Special variables - Variables for style files 5.2.5 generateSkinHeaderColorHighLight The generateSkinHeaderColorHighLight function retrieves the skins header color set in the Edit Web Design page. A parameter llows the tint of the color to be changed. Fractional values are used, where 0.0 will be black, 1.0 the original color and higher values will result in a lighter tint of this color.

    • PAGE 45

      Special variables - Variables for style files 5.2.9 generateSkinMainColorHighLight The generateSkinMainColorHighLight function retrieves the skins main color set in the Edit Web Design page. The parameter of this functions lets you change the tint of the color. Fractional values are used, where 0.0 will be black, 1.0 the original color and higher values will result in a lighter tint of the main color. Below an example on how this color can be set using this function.

    • PAGE 46

      6 Creating page exceptions The Template.php file contains the main outline of the PSM Web web site, it contains HTM code with a few snippets of PHP. It is invoked for each page request and outputs the final page contents. The skinning engine lets you create templates for pages (page exceptions). This method can be used to add information and/or custom functionalities to a specific page. The Welcome page showing a banner image and custom side menus. Objectif Lune Inc.

    • PAGE 47

      6.1 Creating a page specific template file To create a page specific template file you should create a copy of the main template.php file in the directory of your skin. Then, you need to rename to the file to template-.php. The ID of the page should match the name of the class name of the body-element of that page (view the HTML source of the page in your browser or use webdevelopment plug-in like Firebug for Fire Fox). Use the class name of the body element in the template name ().

    • PAGE 48

      6.2 Modifying a page specific template file The duplicated template file contains various function blocks that render the final output. The position of these blocks combined with the style files define the presentation of the web site. By inserting HTML and PHP code you can add functions and information to the page. In some cases you might want to remove unwanted elements from the template, be very careful when experimenting with this at it might lead to a non working skin.

    • PAGE 49

      Creating page exceptions - Modifying a page specific template file A custom welcome page. As the web site is created in PHP custom statements could be added based (for example based on the logged on user). With a little help of Javascript (jQuery) you could create an image rotator to show images as slide show. The following code creates a very simple image rotator. Note that we added display:none to the second banner in order to initially hide the image.

    • PAGE 50

      7 DOM manipulation using jQuery jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. With the introduction of PrintShop Mail Web 2.x the jQuery library is part of the PSM Web installation. Information about jQuery can be found at: http://www.jquery.com The following sections describe the jQuery basics and give you helpful tips about how to use jQuery in PSM Web. Objectif Lune Inc.

    • PAGE 51

      7.1 Launching code on Document Ready jQuery has a simple statement that checks the document and waits until it's ready to be manipulated, known as the ready event. Inside the ready event you can add the code that you want to run right when the page is loaded. You can add this Javascript code in the head section of the template.php file or create an external Javascript file.

    • PAGE 52

      7.2 Populating fields with computed values The following sample populates a user input field of a PSM document with the current date (New Document section). First a string is created (toDay) with the current date. The last line in the code retrieves the input field based on the fields label (Today:) and populates the input field with the computed date string. Removing elements is not without risk and should be tested carefully (especially save actions). Objectif Lune Inc.

    • PAGE 54

      7.4 Adding information to the DOM The following snippet adds an HTML snippet to the DOM. An comment line is added to the web form of the User Input fields page.