Style Sheet Reference Guide

Size: px

Start display at page:

Download "Style Sheet Reference Guide"

Chrystal Cross
5 years ago
Views:

1 Version 8 Style Sheet Reference Guide For Password Center Portals 2301 Armstrong St, Suite 2111, Livermore CA, Tel: Fax:

2 This publication applies to Imanami GroupID Version 8 and subsequent releases until otherwise indicated in new editions. Copyright Imanami Corporation Trademarks are the property of their respective owners.

3 Contents Chapter 1 - Introduction... 1 Files you need to know... 1 Page Layout for Password Center portals... 2 Class definitions... 4 Chapter 2 - General Customization of the Portal Frequent customizations tasks...10 Change the portal logo...10 Change the font style...11 Change the color of hyperlinks...11 Change the underline effect of hyperlinks with over line...12 Change the background of a section of a page...12 An example of a customized portal...14 Chapter 3 - Advanced Customization of the Portal Customizing third-party controls Change the background color of Users list rows Change the background color of alternate Users list rows Make tab titles bold Hyperlink states... 20

4 Chapter 1 - Introduction This document provides information on customizing GroupID Password Center User and Helpdesk portals. This customization is possible by tweaking some files (style sheet and images) that control the portals appearance. For complex design implementations, you must get an understanding of cascading style sheets (CSS). This document only discusses customizations specific to the typography, color scheme, and logo. However, it does serve as a reference guide for other elements that make up the user interfaces of the portals. Files you need to know Before getting started, make a backup of the following file and folder for each Password Center User and Helpdesk portal: Password Center User portal Site.css X:\Program Files\Imanami\GroupID 8.0\PasswordCenter\Inetpub\Portal Name\Web\Content Images folder X:\Program Files\Imanami\GroupID 8.0\PasswordCenter\Inetpub\Portal Name\Web\Content\Images Password Center Helpdesk portal Site.css X:\Program Files\Imanami\GroupID 8.0\PasswordCenter\Helpdesk\templates\Web\Content\Styles Images folder X:\Program Files\Imanami\GroupID 8.0\PasswordCenter\Helpdesk\templates\Web\Content\Images (Where X: represents the installation drive) Site.css is the file that contains the design settings for your Password Center portals. In addition to Site.css, there are image files that are used for making the gradient effects and other parts of the user interface. 1 Copyright Imanami Corporation 2017

5 Chapter 1 - Introduction Every Password Center portal has its own copy of Site.css and the image files. Hence, you can customize each corporate portal differently, depending on preferences and requirements. To customize a Password Center portal, you will be making changes directly to Site.css. Changes made to the code in the file take effect when you refresh the portal page in your web browser. No server restart or other similar action is required for your design changes to take place. Customizations discussed in this guide are specific to the Password Center User portal. Page Layout for Password Center portals This section will help you develop an understanding of the layout for a Password Center portal s page. You will also learn about the classes in Site.css that are associated with different sections of portal pages and are responsible for controlling their style and formatting. In the following figure, the different sections of a portal s page are labeled as A, B, C and so on. Table 1 gives a description of these labeled sections, the class associated and default style rules. Figure 1: Password Center portal interface Label Description Class Default Style Rules A Site Navigation.im-sitenavigation Font size Font style 2 Copyright Imanami Corporation 2017

6 Chapter 1 - Introduction Label Description Class Default Style Rules Background color Font color B Title bar.im-apptitle Section height Background color Background image C Toolbar.im-apptoolbar Font style Font size Background image Background color Section height D E Page Information Paragraph Header.im-pageinformation Font style Font color Font size Font weight Background image Section height.im-paragraphheader Border-bottom Border-collapse F Paragraph.im-paragraph Font style Font size Font color G Page Footer.im-pagefooter Width Height Background color H Application Footer.im-appfooter Section height Background image Font style Font color Font size Table 1: Description of page sections shown in Figure 1 3 Copyright Imanami Corporation 2017

7 Chapter 1 - Introduction Class definitions Table 2 lists the definition for the classes given in Table 1. The class definition includes the complete code for the class, as given in Site.css, and provides a description for some of its rules. Rules that require an advance level of understanding of CSS are not included. Class Rule Description.im-sitenavigation font-size Sets the size of the font. This can be defined in absolute size, relative size, or percentage. font-size: 200%; font-size: 36pt; font-family color Used to declare a specific font to be used, or a generic font family, or both. font-family: Helvetica, sans-serif; font-family: Times New Roman ; Sets the background color of the element. background-color: white; background-color: #ffffff; Sets the text color of the element. color: teal; color: #000000;.im-apptitle height Used to set the height of the element. Negative values are not permitted. height: 50px; backgroundcolor backgroundcolor Sets the background color of the element. background-color: white; 4 Copyright Imanami Corporation 2017

8 Chapter 1 - Introduction Class Rule Description background-color: #ffffff; Sets an image to be the background pattern. In conjunction with the other background properties, may tile or repeat in one direction only. background-image: url(bg41.gif); Sets the repeat style for a background image. background-repeat: no-repeat;.im-apptoolbar font-family Used to declare a specific font to be used, or a generic font family, or both. font-family: Helvetica, sans-serif; font-family: Times New Roman ; font-size backgroundimage backgroundrepeat backgroundimage backgroundrepeat height Sets the size of the font. This can be defined in absolute size, relative size, or percentage. font-size: 200%; font-size: 36pt; Sets an image to be the background pattern. In conjunction with the other background properties, may tile or repeat in one direction only. background-image: url(bg41.gif); Sets the repeat style for a background image. background-repeat: no-repeat; Used to set the height of the element. Negative values are not permitted. 5 Copyright Imanami Corporation 2017

9 Chapter 1 - Introduction Class Rule Description height: 50px;.im-apptoolbar a,.im-apptoolbar a:hover,.im-apptoolbar a:visited,.im-apptoolbar a: visited:hover color font-family color font-size font-weight textdecoration.impageinformation backgroundimage Sets the text color of the element. color: teal; color: #000000; Sets certain effects to the text, such as underline and line-through. Combinations of the values are legal. text-decoration: underline; text-decoration: line-through; Used to declare a specific font to be used, or a generic font family, or both. font-family: Helvetica, sans-serif; font-family: Times New Roman ; Sets the text color of the element. color: teal; color: #000000; Sets the size of the font. This can be defined in absolute size, relative size, or percentage. font-size: 200%; font-size: 36pt; Sets the weight of a font, making it heavier or lighter. font-weight: 700; font-weight: bold; Sets an image to be the background pattern. In conjunction with the other 6 Copyright Imanami Corporation 2017

10 Chapter 1 - Introduction Class Rule Description background properties, may tile or repeat in one direction only. background-image: url(bg41.gif); height Sets the background color of the element. background-color: white; background-color: #ffffff; Sets the repeat style for a background image. background-repeat: no-repeat; Used to set the height of the element. Negative values are not permitted. height: 50px;.im-appfooter height Used to set the height of the element. Negative values are not permitted. height: 50px; backgroundcolor backgroundrepeat backgroundimage backgroundrepeat font-family Sets an image to be the background pattern. In conjunction with the other background properties, may tile or repeat in one direction only. background-image: url(bg41.gif); Sets the repeat style for a background image. background-repeat: no-repeat; Used to declare a specific font to be used, or a generic font family, or both. font-family: Helvetica, sans-serif; 7 Copyright Imanami Corporation 2017

11 Chapter 1 - Introduction Class Rule Description font-family: Times New Roman ; borderbottom.imparagraphheader a color font-size.imparagraphheader font-family font-size color Sets the text color of the element. color: teal; color: #000000; Sets the size of the font. This can be defined in absolute size, relative size, or percentage. font-size: 200%; font-size: 36pt; Shorthand property which defines the width, color, and style of the bottom border of an element. border-bottom: 1px solid black; border-bottom: 0.5in grooved green; Used to declare a specific font to be used, or a generic font family, or both. font-family: Helvetica, sans-serif; font-family: Times New Roman ; Sets the size of the font. This can be defined in absolute size, relative size, or percentage. font-size: 200%; font-size: 36pt; Sets the text color of the element. color: teal; color: #000000; 8 Copyright Imanami Corporation 2017

12 Chapter 1 - Introduction Class Rule Description textdecoration.imparagraphheader a,.imparagraphheader a:hover,.imparagraphheader a:visited,.imparagraphheader a:visited:hover color textdecoration Sets certain effects to the text, such as underline and line-through. Combinations of the values are legal. text-decoration: underline; text-decoration: line-through; Sets the text color of the element. color: teal; color: #000000; Sets certain effects to the text, such as underline and line-through. Combinations of the values are legal. text-decoration: underline; text-decoration: line-through;.im-paragraph color Sets the text color of the element. color: teal; color: #000000; font-size font-family Sets the size of the font. This can be defined in absolute size, relative size, or percentage. font-size: 200%; font-size: 36pt; Used to declare a specific font to be used, or a generic font family, or both. font-family: Helvetica, sans-serif; font-family: Times New Roman ; Table 2: Class Definition 9 Copyright Imanami Corporation 2017

Chapter 2 - General Customization of the Portal GroupID Password Center portal lets you bring your colors and fonts, and tailor it just the way you want it.

13 Chapter 2 - General Customization of the Portal GroupID Password Center portal lets you bring your colors and fonts, and tailor it just the way you want it. The information in this chapter relates to Site.css that controls most, but not all, elements of a Password Center portal s user interface. Frequent customizations tasks You can add your logo, bring in your colors, and customize the complete look and feel of your portal interface. The most frequent customization tasks are discussed here: Change the portal logo Change the font style Change the color of hyperlinks for different sections of a page Change the underline effect of hyperlinks with over line Change the background for a page section Change the portal logo The image file to replace the default logo should have the following specifications: File Format: PNG Dimensions (Width x Height): 200x66 pixels To change the default portal logo: 1. Go to the location: X:\Program Files\Imanami\GroupID 8.0\PasswordCenter\Inetpub\Portal Name\Web\Content\images\Layout 2. Rename AppTitle.png to AppTitle.png.bk, or any suitable name. 10 Copyright Imanami Corporation 2017

14 Chapter 2 - General Customization of the Portal 3. Copy your new logo file to this location and rename it to AppTitle. Change the font style To change the font of your portal: 1. Go to the location: X:\Program Files\Imanami\GroupID 8.0\PasswordCenter\Inetpub\Portal Name\Web\Content. 2. Open the Site.css file in Notepad or any other text editor. 3. Search font-family using the Find option of the editor. 4. Replace the given values for all instances of font-family with the name of your required font. font-family: Arial; Enclose the font name within double quotes ( ) if it contains spaces. font-family: Times New Roman ; 5. Save the file and test your changes. If you do not have the font you are using, the font will be viewed as the default font. Change the color of hyperlinks The hyperlinks on the portal pages have different states and different style rules. These states are given in Appendix A. Except for the toolbar, you can customize the color of each hyperlink. Every section of the page has a different definition in Site.css for its hyperlinks. Use Figure 1 and Table 1 to identify the section and class associated with it. To change the color of hyperlinks in the title bar section: 1. Go to the location: X:\Program Files\Imanami\GroupID 8.0\PasswordCnter\Inetpub\Portal Name\Web\Content 2. Open the Site.css file in Notepad or any other text editor. 3. Search for.im-apptoolbar a using the Find option of the editor. 11 Copyright Imanami Corporation 2017

15 Chapter 2 - General Customization of the Portal 4. Replace the default value of color to your required color name or its hexadecimal code. color: blue; Or color: #0000ff; 5. Change the color rule for the other states of the anchor element for the.imapptoolbar class; these will include.im-apptoolbar a:hover,.im-apptoolbar a:visited,.im-apptoolbar a:visited:hover. 6. Save the file and test your changes. Change the underline effect of hyperlinks with over line Assuming that you want to do this for the title bar section: 1. Go to the location: X:\Program Files\Imanami\GroupID 8.0\PasswordCenter\Inetpub\Portal Name\Web\Content 2. Open the Site.css file in Notepad or any other text editor. 3. Search for.im-apptoolbar a:hover using the Find option of the editor. 4. For text-decoration, change the value from underline to overline. text-decoration: overline; 5. Next, search for.im-apptoolbar a:visited:hover and repeat the change made in the previous step. 6. Save the file and test your changes. Change the background of a section of a page Backgrounds can be applied either as an image or as a color. The sections of the page, such as the title bar and page information, use a single image file to produce the gradient effect. Sections with a solid background, like footer, use a color for setting their background. 12 Copyright Imanami Corporation 2017

16 Chapter 2 - General Customization of the Portal To change the background color The following instructions show how to set a solid background color for the Page Information section: 1. Go to the location: X:\Program Files\Imanami\GroupID 8.0\PasswordCenter\Inetpub\Portal Name\Web\Content 2. Open the Site.css file in Notepad or any other text editor. 3. Search for.im-pageinformation using the Find option of the editor. 4. Comment the complete line for the rule background-image by enclosing it within (/* */) delimiters. /*background-image: url( "../images/layout/pagetitlebackground.jpg" );*/ 5. In the next line, add the following script: background-color: #cccccc; 6. Save the file and test your changes. To change the background image The following instructions show how to change the background image for the Title bar section: 1. The first thing you need is the image to create the new background pattern. Your image must have the following specification: File Format: GIF Dimensions (Width x Height): 8x81 pixels 2. Go to the location: X:\Program Files\Imanami\GroupID 8.0\PasswordCener\Inetpub\Portal Name\Web\Content\images\Layout 3. Rename AppTitleBackground.gif to AppTitleBackground.gif.bk, or anything else suitable. 13 Copyright Imanami Corporation 2017

The snapshot looks as follows with the new background image of title bar section: Figure 2: Portal with

17 Chapter 2 - General Customization of the Portal 4. Copy the new image file to this location and rename it to AppTitleBackground.gif. The snapshot looks as follows with the new background image of title bar section: Figure 2: Portal with customized background of title bar section An example of a customized portal The following figure shows the style and look of a customized portal: Figure 3: A customized portal 14 Copyright Imanami Corporation 2017

18 Chapter 2 - General Customization of the Portal Following is a listing of the classes modified in Site.css to achieve the results shown in the above figure. The lines in this color indicate the lines of code that you need to modify, add or remove from the file. Class names are given in bold for clarity. table.im-apptitle { height: 80px; background-color: #d5e7fd; /* Original image replaced in the source directory with a custom one. File Type: GIF Width: 8 pixels Height: 81 pixels */ background-image: url("../images/layout/apptitlebackground.gif"); background-repeat: repeat-x; } td.im-apptoolbar { font-family: Tahoma; color: #ffffff; /* Line added to set text color */ font-size: 9pt; /* The following line is commented out to hide the background image. A solid color will be used in place. */ /*background-image: url( "../images/layout/apptoolbarbackground.jpg" );*/ background-color: #ad4848; /* Line added to set background color */ background-repeat: repeat-x; height: 26px; }.im-apptoolbar a{ color: #ffffff; /* Set text color to white */ text-decoration: none; }.im-apptoolbar a:hover{ color: #ffffff; /* Set text color to white */ text-decoration: underline; }.im-apptoolbar a:visited{ color: #ffffff; /* Set text color to white */ text-decoration: none; }.im-apptoolbar a:visited:hover{ color: #ffffff; /* Set text color to white */ text-decoration: underline; } 15 Copyright Imanami Corporation 2017

19 Chapter 2 - General Customization of the Portal td.im-pageinformation{ font-family: Tahoma; color: #494871; font-size: 18px; font-weight: bold; /*Following line is commented to hide the background image. It will be replaced by a color.*/ /*background-image: url( "../images/layout/pagetitlebackground.jpg" );*/ background-color: #cccccc; /* background color set to a shade of gray. */ background-repeat: repeat-x; height: 26px; } table.im-pagefooter { width: 100%; height: 17px; background-color: #ff8c00; /* background color set to a shade of orange. */ }.im-paragraphheader TD { */ font-weight: bold; /* Line added to bold the header text background-color: #bbd8ff; /* Line added to set background color */ border-bottom: 1px solid #0000CC; /* Changed color to a shade of blue for the bottom border */ } border-collapse: collapse;.im-paragraphheader a { } font-family: Tahoma,Arial,Helvetica,sans-serif; font-size: 12pt; color: #003399; /* Set color to a shade of blue */ text-decoration: none; 16 Copyright Imanami Corporation 2017

20 Chapter 3 - Advanced Customization of the Portal Some elements of the Passwords Center portal s user interface are made up of advanced controls. The Navigation bar, Toolbar and Tree View are examples of such controls. These controls are designed for reusability and are encapsulated. For this reason, their source files are located in a different directory, which is, X:\Program Files\Imanami\GroupID 8.0\PasswordCenter\Inetpub\Portal Name\Web\Content (X represents the installation drive). Customizing third-party controls This section briefly covers some of the advanced controls. It gives you a short description of the controls and the location of their.css files. File Name Image Folder Description telerik.common.css None Controls the appearance of common elements that are shared by all third party controls. telerik.office2007.css Office2007 Applies the Microsoft Office 2007 theme to all third party controls. Table 3: CSS and Image file locations The most frequently used customization tasks are: Changing the background color of Users list rows Changing the background color of alternate Users list rows Making tab titles bold 17 Copyright Imanami Corporation 2017

21 Chapter 3 - Advanced Customization of the Portal Change the background color of Users list rows The following instructions show how to set the background color of rows to a shade of orange. Replace the value of background-color with the code or name of your desired color. 1. Go to the location: X:\Program Files\Imanami\GroupID 8.0\PasswordCenter\Inetpub\Portal Name\Web\Content 2. Open the telerik.office2007.css file in Notepad or any other text editor. 3. Use the Find feature of the editor to search for.t-header,.t-grid-header. 4. Add the following code before it as a separate line:.t-grid tbody{background-color:#ffcc99;}.t-grid tbody{background-color:#ffcc99;}.t-header,.t-grid-header {... } 5. Save the file and test your changes. Change the background color of alternate Users list rows 1. Go to the location: X:\Program Files\Imanami\GroupID 8.0\PasswordCenter\Inetpub\Portal Name\Web\Content 2. Open the telerik.office2007.css file in Notepad or any other text editor. 3. Use the Find feature of the editor to search for.t-alt. 4. Change the value of the background-color rule to your required color. background-color: #ffff99; 5. Save the file and test your changes. 18 Copyright Imanami Corporation 2017

22 Chapter 3 - Advanced Customization of the Portal Make tab titles bold 1. Go to the location: X:\Program Files\Imanami\GroupID 8.0\PasswordCenter\Inetpub\Portal Name\Web\Content 2. Open the telerik.common.css file in Notepad or any other text editor. 3. Use the Find feature of the editor to search for.t-tabstrip.t-tabstrip-items. 4. Add the following code before it as a separate line:.t-item{font-weight: bold;}.t-item{font-weight: bold;}.t-tabstrip.t-tabstrip-items { padding: 0.3em; } 5. Save the file and test your changes. 19 Copyright Imanami Corporation 2017

23 Hyperlink states The HTML standard recognizes four different states of hyperlinks: 1. Link, the normal, un-clicked state of a hyperlink. 2. Active, a hyperlink state when it has been clicked and is currently being fetched by the browser. 3. Visited, a hyperlink to a page that has been visited recently. 4. Hover, a hyperlink under the mouse pointer. Browsers normally assign different colors to each hyperlink state. You can override these colors and even control the complete link style using style sheets. 20 Copyright Imanami Corporation 2017

Imanami Resources Support: Blog: Knowledgebase: Get a demo: http://imanami.com/support/contact-support/ http://imanami.com/blog/ http://kb.imanami.com/default.

24 Imanami Resources Support: Blog: Knowledgebase: Get a demo: Armstrong St, Suite 2111, Livermore CA, Tel: Fax:

Style Sheet Reference Guide

Version 8 Style Sheet Reference Guide For Self-Service Portal 2301 Armstrong St, Suite 2111, Livermore CA, 94551 Tel: 925.371.3000 Fax: 925.371.3001 http://www.imanami.com This publication applies to Imanami