AGN: Dubal Skins Design

Users Manual (v1.0)

Copyright 2004-Onwards Al Ghanem Net
No part of this publication may be reproduced, stored in a retrieval system, or transmitted in
any form or by any means, electronic, mechanical, recording or otherwise, without the prior
written permission of Al Ghanem Net.
Table of Contents













































Introduction

The HR and Shipping application follows the same pattern of working; in this manual we
cover only Shipping Application. Main Component of Shipping and HR Applications

The Shipping and HR Application Consist of three main components, Header, Left
Manus and middle content Area. The left and middle content area covered by class
leftbody and middlebody Repectively which is setting up left , right and top margin
of page.

Header:
The Header which viewable in Top frame, the frame size for this is 34,*, In
header there three icons System Guideline, Back.

Shipping Header:


Classes used in this portion

Class Description Sample Code
HeaderText This class is
representing menu text
FONT-WEIGHT: bolder;
FONT-SIZE: 10px;
COLOR: #ffffff;
FONT-STYLE: normal;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-
serif;
Top_Sys_Ico
(System
Guideline)
Icon #Top_Sys_Ico {
width:34px; height:34px; z-index:2;
padding:0px; BACKGROUND:
URL("../images/ico_sys.gif") 1 1 no-repeat;
}
Top_back_Ico
(Back)
Icon #Top_back_Ico {width:30px; height:30px; z-
index:2; padding:0px; BACKGROUND:
URL("../images/ico_back.gif") -2 -2 no-repeat; }
Top_close_Ico
(Close)
Icon #Top_close_Ico {width:26px; height:26px; z-
index:2; padding:0px; BACKGROUND:
URL(../images/ico_close.gif) -4 -4 no-repeat; }

Javascript used
Java Scipt Function Description
MM_openBrWindow Opening System Guideline page
history.back() Take the user on to previuse page
doClose() Closing Window






HR Admin Header:


Classes used in this Header

Class Description Sample Code
HeaderText This class is representing
menu text
FONT-WEIGHT: bolder;
FONT-SIZE: 10px;
COLOR: #ffffff;
FONT-STYLE: normal;
FONT-FAMILY: Verdana, Arial, Helvetica,
sans-serif;
Top_Sys_Ico
(System
Guideline)
Icon #Top_Sys_Ico {
width:34px; height:34px; z-index:2;
padding:0px; BACKGROUND:
URL("../images/ico_sys.gif") 1 1 no-repeat;
}
Top_back_Ico
(Back)
Icon #Top_back_Ico {
width:30px; height:30px; z-index:2;
padding:0px; BACKGROUND:
URL("../images/ico_back.gif") -2 -2 no-
repeat;
}
Top_close_Ico
(Close)
Icon #Top_close_Ico {
width:26px; height:26px; z-index:2;
padding:0px; BACKGROUND:
URL(../images/ico_close.gif) -4 -4 no-
repeat;
}

Javascript used

Java Script Function Description
MM_openBrWindow Opening System Guideline page
history.back() Take the user on to previuse page
doClose() Closing Window














Left Menus:

Left menus are shown in left frame, the size of this frame is 190,*. User can fold and
unfold this left menu area by clicking a gray left and right arrow icon. A javascript
showHideMenu() function is working on this icon, the function description can be view
in script.js file.



For the ease of user, user can view and collapse left panel, to see how it is working
follows the code and instructions in XP_Menu.js file.

Class Description Sample Code
Left_Arrow
(Show hide menu
Pannel)
When click on this icon
menu panel
automatically hide or
show, it helps the user
to utilize full screen
size
Left_Arrow IMG {background:
url("../images/left_aero.gif") 0 0 no-repeat; }

leftbg1 Formatting menu top
Heading Area
.leftbg1
{
BACKGROUND-IMAGE:
URL("../images/title_bg_hide.gif");
}
LeftMainLink
(Shipping Admin)
Represent menu text
heading appearing in
the pannel
#Top_back_Ico {width:30px; height:30px; z-
index:2; padding:0px; BACKGROUND:
URL("../images/ico_back.gif") -2 -2 no-repeat; }
submenutable Set the formatting of
menu table
FONT-WEIGHT: bolder;
FONT-SIZE: 11px;
FONT-COLOR: #7798C1;
FONT-STYLE: normal;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-
serif;
TEXT-DECORATION: none;
menuText Set the formatting of
menu item in the
pannel
FONT-WEIGHT: bolder;
FONT-SIZE: 11px;
COLOR: #7798C1;
FONT-STYLE: normal;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-
serif;
TEXT-DECORATION: none;
leftbg3 Formatting menu
pannel
leftbg4 Formatting menu
pannel

leftPannelDarkBG Seting dark background
of the menu pannel
BACKGROUND-COLOR: #7A91C6;
tableBg Setting background of
the whole area
#Top_close_Ico {width:26px; height:26px; z-
index:2; padding:0px; BACKGROUND:
URL(../images/ico_close.gif) -4 -4 no-repeat; }

Java Script Function Description
showHideMenu() Function use for make visible and invisible menu pannel



Page Header



Class Description Sample Code
tblHeadingBg1 Setting background
tblHeadingTD Setting table TD curve
area

mainHeading Formatting Heading text FONT-WEIGHT: bold;
FONT-SIZE: 13px;
COLOR: #0964b7;
FONT-FAMILY: Verdana, Helvetica, sans-serif;


Table formatting


Class Description Sample Code
TableFormat Format table with
border =1, you have to
give border=1 with the
class
BORDER-RIGHT: #9bbfee 1px solid;
BORDER-TOP: #9bbfee 1px solid;
BORDER-LEFT: #9bbfee 1px solid;
BORDER-BOTTOM: #9bbfee 1px solid;
BACKGROUND-COLOR: #e7edf6;
PADDING-LEFT: 4px;
PADDING-RIGHT: 4px;
BORDER-COLOR: #9bbfee;
border-collapse: collapse;
BORDER-WIDTH: 1px;
TableColText Setting column heading
tblHeadingBg2 Format table Heading
row




Page formatting



Class Description Sample Code
MiddleBody Format table with
border =1, you have to
give border=1 with the
class
BORDER-RIGHT: #9bbfee 1px solid;
BORDER-TOP: #9bbfee 1px solid;
BORDER-LEFT: #9bbfee 1px solid;
BORDER-BOTTOM: #9bbfee 1px solid;
BACKGROUND-COLOR: #e7edf6;
PADDING-LEFT: 4px;
PADDING-RIGHT: 4px;
BORDER-COLOR: #9bbfee;
border-collapse: collapse;
BORDER-WIDTH: 1px;
NormalText Set heading Text
HeadingText Format table Heading
row


Classes use for HTML form Objects

Object Name Class Effect
TextBox TextBox

CombBox LestStyle

Button Button

LIstBox LestStyle
Text Area TextBox

CheckBox CheckBox

Option Button CheckBox
Tables TableFormat

Table Headings TableColText

Table Column tblHeadingBg2

Page Body middleBody

Normal Text on
Page
normalText

Heading Text on
Page
HeadingText

Main Heading on
Page Top
mainHeading

Top Header Menu HeaderText

Left Menu Heading LeftMainLink

Left Menu Text menuText

Links Links




































Intranet Application

Intranet Header:


Search Box


Class Description
SignIn FONT-SIZE: 10px;
COLOR: #677DAC;
FONT-WEIGHT: bold;
FONT-FAMILY: Verdana, Arial;
TEXT-DECORATION: none;
SearchText FONT-SIZE: 12px;
COLOR: #FFFFFF; FONT-WEIGHT: normal;
FONT-FAMILY: Verdana, Arial, Trebuchet MS;
TEXT-DECORATION: none;
TextBox BORDER-RIGHT: #9bbfee 1px solid;
BORDER-TOP: #9bbfee 1px solid;
BORDER-LEFT: #9bbfee 1px solid;
BORDER-BOTTOM: #9bbfee 1px solid;
FONT-SIZE: 12px;
COLOR: #20407b;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
BACKGROUND-COLOR: #e7edf6;
Button BORDER-RIGHT: #9bbfee 2px solid;
BORDER-TOP: #9bbfee 2px solid;
BORDER-LEFT: #9bbfee 2px solid;
BORDER-BOTTOM: #9bbfee 2px solid;
FONT-SIZE: 11px;
FONT-WEIGHT: bold;
COLOR: #20407b;
FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
BACKGROUND-COLOR: #e7edf6;
Cursor : HAND;












List of icons



User can increase and decrease icons list each, each icon is specified by its own class.

Class Description
topLink FONT-SIZE: 9px;
COLOR: #FFFFFF; FONT-WEIGHT: bold;
FONT-FAMILY: Verdana, Arial, Trebuchet MS;
TEXT-DECORATION: none;
ICONBG .ICONBG {BACKGROUND-IMAGE:
URL("../images/IconBg.jpg");}
icoHome (Home) #icoHome {width:52px; height:33px; z-index:2;
padding:0px; background: url("../images/Home.jpg") 0 0
no-repeat;}
icoDept (Department) #icoDept {width:47px; height:35px; z-index:2;
padding:0px; background: url("../images/department.jpg")
0 0 no-repeat;}
icoUtil (Utility) #icoUtil {width:46px; height:35px; z-index:2; padding:0px;
background: url("../images/utilities.jpg") 0 0 no-repeat;}
icoView (View) #icoView {width:48px; height:35px; z-index:2;
padding:0px; background: url("../images/Views.jpg") 0 0
no-repeat;}
icoMyDubal (My Dubal) #icoMyDubal {width:41px; height:35px; z-index:2;
padding:0px; background: url("../images/MyDubal.jpg") 0 0
no-repeat;}
icoEmp (Employee Locator) #icoEmp {width:51px; height:35px; z-index:2; padding:0px;
background: url("../images/EmployeeLocator.jpg") 0 0 no-
repeat;}
topLink FONT-SIZE: 9px;
COLOR: #FFFFFF; FONT-WEIGHT: bold;
FONT-FAMILY: Verdana, Arial, Trebuchet MS;
TEXT-DECORATION: none;
ICONBG .ICONBG {BACKGROUND-IMAGE:
URL("../images/IconBg.jpg");}
icoHome (Home) #icoHome {width:52px; height:33px; z-index:2;
padding:0px; background: url("../images/Home.jpg") 0 0
no-repeat;}












Panels collapsing




When user click on down arrow, the panel automatically slides and show the options in
the panel, when user click on up arrow and the panel collapse automatically.

Class Description Sample Code
Links
Format the links on the
page.
FONT-SIZE: 10px;
COLOR: #20407B;
FONT-WEIGHT: normal;
FONT-FAMILY: Verdana, Arial, Trebuchet MS;
TEXT-DECORATION: none;
SmallBHeading
Format the heading of
panel
FONT-SIZE: 12px;
COLOR: #0964B7;
FONT-WEIGHT: bold;
FONT-FAMILY: Verdana, Arial, Trebuchet MS;
TEXT-DECORATION: none;
Readmore
Format the read more
text
FONT-SIZE: 9px;
COLOR: #FFFFFF; FONT-WEIGHT: normal;
FONT-FAMILY: Verdana, Arial, Trebuchet MS;
TEXT-DECORATION: none;















AP Calendar, Department and Utility List

This area is designed for the AP Calendar Application



This area designed for showing department list and utilities available for the employees
on the portal




Class Description Sample Code
SmallBHeading Setting background FONT-SIZE: 12px;
COLOR: #ACA93E;
FONT-WEIGHT: bold;
FONT-FAMILY: Verdana, Arial, Trebuchet MS;
TEXT-DECORATION: none;
lightbg Setting table TD curve
area
BACKGROUND-COLOR: #F7F4EC;




Hot Links
This area can be utilize for placing Hot links or links to other application running in the
organization.


Class Description Sample Code
TableFormat Formatting Table
normalText Formatting Fonts

Right Dropdawn Panel




Class Description Sample Code
SmallBHeading Setting background FONT-SIZE: 12px;
COLOR: #ACA93E;
FONT-WEIGHT: bold;
FONT-FAMILY: Verdana, Arial, Trebuchet MS;
TEXT-DECORATION: none;
Readmore Setting table TD curve
area
FONT-SIZE: 9px;
COLOR: #FFFFFF; FONT-WEIGHT: normal;
FONT-FAMILY: Verdana, Arial, Trebuchet MS;
TEXT-DECORATION: none;

Photo Gallery





Application Frame Structure

The shipping and HR application are using 3 frames, Top, Left and mainContent. The
structure of the frames as follows

<frameset rows="34,*" frameborder="NO" border="0" framespacing="0" cols="*" >
<frame name="topFrame" scrolling="NO" noresize src="TopFrame.htm" >
<frameset scrolling="NO" cols="190,*" frameborder="NO" border="0" framespacing="0" rows="*"
ID="masterMain">
<frame name="leftFrame" scrolling="no" noresize src="LeftFrame.htm">
<frame name="mainFrame" scrolling="YES" noresize src="welcome.htm">
</frameset>
</frameset>


Directory Structure

All the images and Text in all application are generated by Style.CSS Classes which is
located in the skins/<%color%> folder. All images are in folder named Images,
javascript file is in folder named Skins/<%color%>/Scripts, for using CSS file user has
to include css file in the application e.g.
<link href="skins/blue/style.css" rel="stylesheet" type="text/css">
For Javascript file;

<script language="JavaScript" src="Skins/blue/Script/XP_Menu.js" name="s1"></script>

How to change Skins

The current directory structure provide facility to change application skins for this
purpose user has to change images folder and skin file only or he can switch to
appropriate colors e.g.

<link href="skins/<%color%>/style.css" rel="stylesheet" type="text/css">
<script language="JavaScript" src="Skins/<%color%>blue/Script/XP_Menu.js" name="s1"></script>

Change or set the parameter to change <%color%> like blue, beige, gray etc.