css customization guide

8/6/2019 CSS Customization Guide

1/65

CSS Customization Guide

PolySpot Enterprise Search

Version 1.0

Revision date: 06/2011


2/65

CSS Cus

m z

Guide 1 0 - 13 June 2011

yS

SAS 2010-2011

2

Table ofcontents

Introduction ................................ ................................ ................................ ................................ ....... 4

Intended Audience................................ ................................ ................................ ............................. 4

References ................................ ................................ ................................ ................................ ......... 5

Goals................................ ................................ ................................ ................................ .................. 6

Prerequisitesfor Reader ................................ ................................ ................................ ..................... 6

1 How to customize................................ ................................ ................................ ....................... 6

2 Customizing the home age ................................ ................................ ................................ ........ 6

2.1 Home Page Overview ................................ ................................ ................................ .......... 6

2.2 To changefont and text color ofhome page................................ ................................ ....... 7

2.3 To change background and font color oftop bar................................ ................................ . 7

2.4 To change Logo ofhome page................................ ................................ ............................. 7

2.5 To change welcomemessagefont color and size ................................ ................................ 7

2.6 To change background image ofhome page................................ ................................ ....... 8

2.7 To changeview links default, mouse hover and selected text color style............................. 8

2.8 To changeview links to tab design ................................ ................................ ...................... 9

2.9 To changecancel and search button image ofsearch box................................ ................. 10

2.10 To change background and font color offooter................................ ................................ . 10

2.11 To changefooter logo and copyright text ................................ ................................ .......... 11

2.12 To change URL Text Value and Link default / hover font color ................................ ........... 12

3 Basiccustomization ofresults page ................................ ................................ .......................... 14

3.1 Results page overview ................................ ................................ ................................ ...... 14

3.2 Customizing global font style ofresults page................................ ................................ ..... 15

3.3 Customizing the appearance ofview links on results page ................................ ................ 15

3.4 Customizing the top bar ofresults page ................................ ................................ ............ 17

3.5 Customizing thefooter ofresults page................................ ................................ .............. 18

3.6 Changing favicon for theentiresearch application ................................ ............................ 21

4 Advanced customizations ofresults page ................................ ................................ ................. 23

4.1 Overview ................................ ................................ ................................ .......................... 23

4.2 Changing the appearance ofadvanced search or other pop-ups................................ ........ 24

4.3 Customizefonts and coloursfor Help page help.css (to be added) ................................ . 28

4.4 Breadcrumbs Customization Section ................................ ................................ ................. 28

4.5 Changing the appearance ofwest region facet area ................................ .......................... 31


3/65

CSS Customization Guide1.0-13June2011

PolySpot SAS2010-2011

3

4.6 Changing the appearance oftop strip in centre region ................................ ...................... 42

4.7 Changing the appearance ofbottomstrip and pagination ofcentre region ....................... 47

4.8 Changing the appearance oftemplates................................ ................................ ............. 50


4/65



4

Introduction

The document explains the possible CSS customization for Home Page, Search Application and

Viewer.

Intended Audience

This document is intended for web designer/integrator, either a PolySpot employee or a partner.


5/65



5

References

Below specified files are referred from deployment directory

C

filesreferences Description

Home.css Stylesfor home page

PolySpot_Main.cssStylesfor Header, Facet region, Search result area, Popup and Footer

applied in the PolySpot Web Project.

PolySpot_Main_ie6.css Stylesspecific to Internet Explorer 6.

XTemplate.cssStyles related to templates used in the application. Stylefor Detail doc

list view, Mosaicview, List view and Grid view templates.

XTemplate_ie7.css Templatespecificstyles related to Internet Explorer 7.

DocumentViewer.css It containsstylesspecific to Document Viewer plug-in.

Highlight.css It containsstylesspecificfor the Highlighting used in Text Viewer.

TextViewer.css It containsstylesspecific to Text Viewer plug-in.

results.jspIt isentry point JSP used for GWT modules (Search area, Facet region,Search result). It also contains Top bar, Header and footer of

application.

home.jsp It contains Top bar, Header, Search area and footer ofhome page.

viewer.jspIt contains Top bar, Header, Detail panel, Document panel for the

viewer application

Custo i ationC files Description

CustomHome.css

To customize Home Page, copy & modify, as per your need, the

necessarystyleclassesfrom Home.css to CustomHome.css. It is

explained in detail with examples, in sections to follow.

CustomPolySpot_Main.css

To customize template design, copy & modify, as per your need, the

necessarystyleclassesfrom XTemplate.css to CustomXTemplate.css.It isexplained in detail with examples, in sections to follow.

CustomXTemplate.css

To customize document viewer page design, copy & modify, as per

your need, the necessarystyleclassesfrom DocumentViewer.css to

CustomDocumentViewer.css. It isexplained in detail with examples, in

sections to follow.

CustomDocumentViewer.css

To customize document viewer page design, copy & modify, as per

your need, the necessarystyleclassesfrom DocumentViewer.css to

CustomDocumentViewer.css. It isexplained in detail with examples, in

sections to follow.

CustomTextViewer.css

To customize text viewer page design, copy & modify, as per your

need, the necessarystyleclassesfrom TextViewer.css to

CustomTextViewer.css. It isexplained in detail with examples, in

sections to follow.

Note:

y Removing the CSSfilemaycause the application work improperly.y Thescreenshots used in document, might slightly differ from the product version the

customer is using.


6/65



6

Goals

Main purpose ofthe guide is to help user customize the application bymodifying the HTML page(s),

CSSstylesheets- adding, modifying or removing CSS Classes & attributes.

Through this guide, user will be able to manage the applications look and feel without re-building

the application.

PrerequisitesforReader

PolySpot should have been installed, ifnot refer to the installation documentation.

1 Howto custo i eA blank custom CSS is provided for different CSS used in the application. In order to customize

a specific area ofapplication, related specificstyleclassesshould be overridden in corresponding

custom CSS file. In these overridden style classes, required attributes can be modified to

achieve the required look & feel ofthe addressed area ofapplication.

Original CSSfilesshould not bemodified. All modificationsshould be done in Custom CSSfiles.

Sections below explain customization for different areas of application with appropriate

examples.

2 Custo i ingthe ho epage2.1 Ho

e Page Overview

Figure 2.1


7/65



7

2.2 To change font andtext colorofho ! e pageo Open CustomHome.cssfileo Overridebody class in CustomHome.csso Changefont-familyattributevalueo Changecolorattributevalueo

See below example

Default Custo " i # ed

body {

Margin:0;

padding:0;

font-family: Arial,

Helvetica,sans-serif

!important;

font-size: 100%;

color: #666666;

}

body {

margin:0;

padding:0;

font-family: Calibri;

font-size: 100%;

color: #453553;

}

2.3 To change background andfont coloroftop baro Open CustomHome.cssfileo Override .topbarclass in CustomHome.csso Changebackgroundattributevalueo Changecolorattributevalueo See below example

Default Custo $ i % ed

.topbar{

height: 20px;

background: #514F50;color: #FFFFFF;

padding-top: 5px;

}

.topbar{

height: 20px;

background: #1e73f3;color: #faf7c3;

padding-top: 5px;

}

2.4 To change Logoofho&

e page

o Open home.jspfileo Change new logo imagefile name in src attributeo See below example

Default

Custo( i ) ed

2.5 To change welco 0 e message font color andsi 1 eo Open CustomHome.cssfile


8/65



8

o Override .welcome-messageclass in CustomHome.csso Add colorattributevalueo Changefontsize attributevalueo See below example

Default Customi2

ed.welcome-message {

text-align: center;

font-size: 1.4em;

font-weight: bold;

}

.welcome-message {

text-align: center;

font-size: 1.6em;

font-weight: bold;

color:#99cc33;

}

2.6 To change backgroundimage ofhome pageo Open home.jspfileo Change new background imagefile name in src attributeo See below example

Default

Customi 3 ed

2.7 To change view linksdefault, mouse hover andselectedtext colorstyleo Open CustomHome.cssfileo Override below mentioned classes in CustomHome.css

.search-area-container.view-linksulli .search-area-container.view-linksulli:hover .search-area-container.view-links ul li.selected

o Add colorattributevalue. By default, view links tabs are inheriting text color fromglobal text color style applied on body.

o See below exampleView Links Default View Links DefaultCustomi

4ed

.search-area-container.view-

linksulli {height: 22px;

float: left;

margin-right: 15px;

padding-top: 8px;

list-style: none;

cursor:pointer;

font-size:0.9em;

}


linksulli {height: 22px;

float: left;

margin-right: 15px;

padding-top: 8px;

list-style: none;

cursor:pointer;

font-size:0.9em;

color:#0000ff;

}


9/65

CSS Custo 5 i 6 ation 7 uide 1.0 - 138

une 2011

PolySpot S

9

S 2010-2011

9

Vie@ Links

A

ouse HoveB

Vie@ Links

A

ouse HoveB

Customized


linksulli:hover{

color: #99CC33C

}


linksulli:hover{

color: #000000D

}

Vie

E

Links SelectedV

ie

E

Links Selected Customized


linksulli.selected{

background:

url(../images/searchTabActive

.gif)no-repeatbottom

centerF

color: #99CC33F

font-weight: boldF

padding-top:8pxF

height: 22pxF

}


linksulli.selected{

background:

url(../images/searchTabActive.gif

)no-repeatbottomcenterG

color: #000000G

font-weight: boldG

padding-top:8pxG

height: 22pxG

}

2H8 To chanI e vieP links to tab desiI n

FiQ u

R

e 2S

8

o Open Custo T Ho T e.cssU and ho T e.jspU V ileso To change view lin W s to tab design ta W e action as per below guide.


10/65



10

Change in Customhome.cssfile

Commentstyles between belowinstructionin Customhome.css

/* --------- COMMENT THIS TO REMOVE NEW VIEW LINK TAB STYLE START ------------ */

STYLES OF VIEW LINKS DESIGN

/*----------- COMMENT THIS TO REMOVE NEW VIEW LINK TAB STYLE END ------------- */

Uncommentstyles between belowinstructionin Customhome.css

/* --------- COMMENT THIS TO REMOVE OLD TAB STYLE START ------------ */

STYLES OF VIEW LINKS OLD TAB DESIGN

/*----------- COMMENT THIS TO REMOVE OLD TAB STYLE END ------------- */

Change in home.jspfile

Remove DIV element asper belowinstructionin home.jspfile

2.9 To change cancel andsearch buttonimage ofsearch boxo Open home.jspfileo Change new cancel and search button imagefile name in src attributeo See below example

Default

Customi X ed

2.10 To change background andfont coloroffooter o Open CustomHome.cssfile


11/65



11

o Override below mentioned classes in CustomHome.css .footer .footer.copyright

o Changecolorattributevalueo Changebackgroundcolor attributevalueo See below example

Default Customi ed

.footer{

bottom: 0;

width: 980px;

margin-left: 10px;

display: block;

font-size: 0.75em;

color: #FFFFFF;

height: 30px;

clear: both;

position:absolute;

}

.footer{

bottom: 0;

width: 980px;

margin-left: 10px;

display: block;

font-size: 0.75em;

color: #f5f5f5;

height: 30px;

clear: both;

position:absolute;

}

Default Customi a ed

.footer.copyright {

width: 100%;

background: #514F50;

height: 25px;

padding-top: 5px;

-moz-border-radius:

5px5px0px0px;

-webkit-border-radius:

5px5px0px0px;

}

.footer.copyright {

width: 100%;

background: #000000;

height: 25px;

padding-top: 5px;

-moz-border-radius: 5px5px

0px0px;

-webkit-border-radius: 5px

5px0px0px;

}

2.11 To change footer logo and copyrighttexto Open home.jspfileo Change new footer logo imagefile name in src attribute. Keep thesame background

color oflogo image as per footer background color or use transparent gif/png image

format.

o UpdateValue ofcopyright text in all searchapp_dynamic_messages_en.propertiesfiles with respective language

o See below example


12/65



12

Default

CustomicedFooter logo

CustomicedFooterCopyrightMessage

Update Valuesofcopyrighttextin all searchapp_dynamic_messages_en.propertiesfiles

withrespective language

copyrightMsg= \u00a92011My Company Name

2.12 To change URL TextValue and Link default/hoverfont color o Open customHome.cssfileo Override below mentioned classes in CustomHome.css

a.whiteLink:link,a.whiteLink:visited,a.whiteLink:active

a.whiteLink:hovero Changefontcolor attributevalueo Updatevalue ofcompany link text in all

searchapp_dynamic_messages_en.propertiesfiles with respective language

o See below example

Default Customid

eda.whiteLink:link,a.whiteLink

:visited,a.whiteLink:active

{

color: #FFFFFF;

outline: 0none;

text-decoration: none;

cursor:pointer;

}

a.whiteLink:link,a.whiteLink:visit

ed,a.whiteLink:active

{

color: #1E73F3;

outline: 0none;


cursor:pointer;

}


13/65



13

Default Customi e ed

a.whiteLink:hover{

color: #FFFFFF;

text-decoration:

underline;

}

a.whiteLink:hover{

color: #1E73F3;


}

Default

CustomigedFooter URL Link

Update Valuesofcompany link textin all searchapp_dynamic_messages_en.propertiesfiles


companyLink=www.MyCompanyWebsite.com


14/65



14

3 Basic customi h ationofresultspage3.1 Resultspage overview


15/65


16/65

CSS Custo i ation uide 1.0 - 13z

une 2011

PolySpot SAS 2010-2011

16

margin-right: 15px;

padding-top: 8px;

list-style: none;

cursor:pointer;

}

margin-right: 15px;

padding-top: 8px;

list-style: none;

cursor:pointer;

color:#0000ff;

}

Vie

{

Links|

ouse Hove}

V

ie

{

Links|

ouse Hove}

Customized


linksulli:hover{

color: #99CC33;

}


linksulli:hover{

color: #000000;

}

Vie~

Links Selected Vie~

Links Selected Customized


linksulli.selected{

background:

url(../images/searchTabActive

.gif)no-repeatbottom

center;

color: #99CC33;font-weight: bold;

padding-top:8px;

height: 22px;

}


linksulli.selected{

background:

url(../images/searchTabActive.g

if)no-repeatbottomcenter;

color: #000000;

font-weight: bold;padding-top:8px;

height: 22px;

}

3.3.2 To chan e vie links to tab desi n mouse hove

and selected text colo

Fi

ue 3

3

2

o Open Custo

PolySpot_

ain.css

ile

o Change view lin s to tab design ta e action as per below guide.Chan

e in CustomPolySpot_

ain.css

file

Comment styles bet

een belo

instuction in CustomPolySpot_

ain.css

/* --------- COMMENTTH S TO REMOVE NEW V EW L NK TAB STYLE START------------ */

STYLES OF V EW L NKS DES N

/*----------- COMMENTTH S TO REMOVE NEW V EW L NK TAB STYLE END------------- */

Uncomment styles bet een belo inst uction in CustomPolySpot_

ain.css

/* --------- COMMENTTHS TO REMOVE OLD TAB STYLE START ------------ */

STYLES OF VEW L

NKS OLD TAB DES

N


17/65



17

/*----------- COMMENT THIS TO REMOVE OLD TAB STYLE END ------------- */

3.4 Customi ingthe top barofresultspage

Figure 3.4

3.4.1 To change background,font color andfontsi e oftop baro Open CustomPolySpot_Main.cssfileo Override .topbarclass in CustomPolySpot_Main.csso Changebackgroundcolor, font colorandfont-size attributevalueo See below example

Default Customi ed

.topbar{

height: 20px;


color: #FFFFFF;

font-size: 1em;

padding-top: 5px;

}

.topbar{

height: 20px;

background: #1E73F3;

color: #faf7c3;

font-size: 0.9em;

padding-top: 5px;

}

3.4.2 To change default andhover link font color andtextdecorationoftop baro Open CustomPolySpot_Main.cssfileo Override below mentioned classes in CustomPolySpot_Main.css


a.whiteLink:hovero Changefont colorattributevalueo Changetext-decorationvalueo See below example

Default White Link Customi

ed White Link

a.whiteLink:link,a.whiteLink


{

color: #FFFFFF;

outline: 0none;


cursor:pointer;

}

a.whiteLink:link,a.whiteLink:vi

sited,a.whiteLink:active

{

color: #1E73F3;

outline: 0none;


cursor:pointer;

}

Default White Link Hover Customi

ed White Link Hover


18/65



18

a.whiteLink:hover{

color: #FFFFFF;

text-decoration:

underline;

}

a.whiteLink:hover{

color: #1E73F3;


}

3.4.3 To change home link iconimage oftop baro Open results.jspfileo Change new icon imagefile name in src attribute (Max of14x14 size)o See below example

Default

Customi ed

3.4.4 To change Logoofsearchresultpageo Open results.jspfileo Change new logo imagefile name in src attributeo See below example

Default

Customi

ed

3.5 Customi ingthe footerofresultspage

Figure 3.5

3.5.1 To change background andfont coloroffootero Open CustomPolySpot_Main.cssfileo Override below mentioned classes in CustomPolySpot_Main.css

.footer .footer.copyright

o Changefont colorattributevalueo Change background colorattributevalue


19/65



19

o See below example

Default Customi

ed.footer{

bottom: 0;

width: 980px;

margin-left: 10px;

display: block;

font-size: 0.75em;

color: #FFFFFF;

height: 30px;

clear: both;

position:absolute;

}

.footer{

bottom: 0;

width: 980px;

margin-left: 10px;

display: block;

font-size: 0.75em;

color: #f5f5f5;

height: 30px;

clear: both;

position:absolute;

}

Default Customi

ed

.footer.copyright {

width: 100%;


height: 25px;

padding-top: 5px;

-moz-border-radius:

5px5px0px0px;


5px5px0px0px;

}

.footer.copyright {

width: 100%;


height: 25px;

padding-top: 5px;

-moz-border-radius: 5px

5px0px0px;


5px0px0px;

}

3.5.2 To change footer logo, copyrighttexto Open results.jspfileo Change new footer logo imagefile name in src attribute. Keep thesame background

color oflogo image as per footer background color or use transparent gif/png image

format.

o UpdateValues ofcopyright text in all searchapp_dynamic_messages_en.propertiesfiles with respective language

o See below exampleDefault


20/65



20

Customi edFooter logo

CustomiedFooterCopyrightMessage

Update Valuesofcopyrighttextin all searchapp_dynamic_messages_en.propertiesfiles


copyrightMsg= \u00a92011My Company Name

3.5.3 To change URL TextValue and Link default/hoverfont coloro Open customHome.cssfileo Override below mentioned classes in CustomHome.css


a.whiteLink:hovero Changefontcolor attributevalueo Updatevalue ofcompany link text in all

searchapp_dynamic_messages_en.propertiesfiles with respective language

o See below exampleDefault Customi

ed



{

color: #FFFFFF;

outline: 0none;


cursor:pointer;

}

a.whiteLink:link,a.whiteLink:visit

ed,a.whiteLink:active

{

color: #1E73F3;

outline: 0none;


cursor:pointer;

}

Default Customi ed

a.whiteLink:hover{

color: #FFFFFF;

text-decoration:

underline;

}

a.whiteLink:hover{

color: #1E73F3;


}

Default


21/65



21

CustomiedFooter URL Link

Update Valuesofcompany link textin all searchapp_dynamic_messages_en.propertiesfiles


companyLink=www.MyCompanyWebsite.com

3.5.4 To change default andhover link font color andtextdecorationoffootero Open CustomPolySpot_Main.cssfileo Override below mentioned classes in CustomPolySpot_Main.css


a.whiteLink:hovero Changefont colorattributevalueo Changetext-decoration attributevalueo See below example

Default White Link Customied White Link



{

color: #FFFFFF;

outline: 0none;


cursor:pointer;

}

a.whiteLink:link,a.whiteLink:vi

sited,a.whiteLink:active

{

color: #1E73F3;

outline: 0none;


cursor:pointer;

}

Default White Link Hover Customi ed White Link Hover

a.whiteLink:hover{

color: #FFFFFF;text-decoration:

underline;

}

a.whiteLink:hover{

color: #1E73F3;text-decoration: none;

}

3.6 Changingfaviconforthe entire search application


22/65

CSS Custo i ation uide 1.0 - 13

une 2011


22

Fi u

e 3.6

3.6.1 To chan e favicon icon on home and sea ch esult pa eo Open ho

e.jsp

, results.jsp

and error.jsp

ile

o Change new logo i

age icon

ile na

e in hre

attribute

o See below e a pleDefault

Customized


23/65



23

4 Advanced customi ationsofresultspage4.1 Overview

Figure 4.1


24/65



24

4.2 Changingthe appearance ofadvancedsearchorotherpop-ups

Figure 4.2.1,4.2.2,4.2.3

4.2.1 To change background and border colorofpopupo Open CustomPolySpot_Main.cssfileo Override.popup-windowclass in CustomPolySpot_Main.csso Changebackgroundcolor attributevalueo Changebordercolor attributevalueo See below example

Default Customi ed

.popup-window

{

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

background-color: #f0f0f0;

border: 1pxsolid#DDDDDD;

z-index: 3;

}

.popup-window

{

moz-border-radius: 5px;

-webkit-border-radius: 5px;

background-color: #b1b1b1;

border: 1pxsolid#595959;

z-index: 3;

}

4.2.2 To change header background color andtitle font colorofpopupo Open CustomPolySpot_Main.cssfileo Override below mentioned classes in CustomPolySpot_Main.css

.popup-window.popup-header .popup-window.popup-header.popup-title

o Changebackgroundcolor attributevalueo Add font colorattribute and valueo See below example


25/65



25

Default PopupHeader Customied PopupHeader

.popup-window.popup-header

{

height: 42px;

background-color: #ffffff;

-moz-border-radius: 5px5px0px0px;


5px0px0px;

cursor:pointer;

}

.popup-window.popup-header{

height: 42px;

background-color: #b1b1b1;

-moz-border-radius: 5px5px0px

0px;-webkit-border-radius: 5px5px

0px0px;

cursor:pointer;

}

Default Popup Title Customied Popup Title


.popup-title {

float: left;

padding-left: 15px;

margin-top: 10px;

font-size: 1.4em;

font-weight: bold;

}


.popup-title {

float: left;

padding-left: 15px;

margin-top: 10px;

font-size: 1.4em;

font-weight: bold;

color: #99cc33;

}

4.2.3 To change footerfont colorofpopupo Open CustomPolySpot_Main.cssfileo Override .utility-footerclass in CustomPolySpot_Main.csso Add font colorattribute and valueo See below example

Default Customi

ed

.utility-footer{

text-decoration: underline;

cursor:pointer;

font-weight: bold;

}

.utility-footer{

text-decoration: underline;

cursor:pointer;

font-weight: bold;

color: #99cc33;

}

4.2.4 To change managementtab text colorinpopup


26/65


une 2011


26

Fi u

e 4.2.4,4.2.5

o Open Custo PolySpot_Main.css ileo Override below

entioned classes in Custo

PolySpot_Main.css

.tab-panelulli .tab-panelulli.selected-tab .grid-table-headertddiv .grid-tablediv.search-name-small .grid-tablediv.search-name-large .under-line-text

o Add ont colo attribute and valueo See below e a ple

Default Tab Customized Tab

.tab-panelulli {

display: block;

float: left;

border-top: 1px#c1c1c1

solid;

border-left: 1px#c1c1c1

solid;

border-right: 1px#c1c1c1

solid;

border-bottom: 1px#c1c1c1solid;

padding: 7px10px7px10px;


background:

url("../images/gridTabBg.gif

")repeat-x;

height: 16px;

width: auto;

text-align: center;

.tab-panelulli {

display: block;

float: left;

border-top: 1px#c1c1c1solid;

border-left: 1px#c1c1c1solid;

border-right: 1px#c1c1c1

solid;

border-bottom: 1px#c1c1c1

solid;

padding: 7px10px7px10px;text-decoration: none;

background:

url("../images/gridTabBg.gif")

repeat-x;

height: 16px;

width: auto;

text-align: center;

cursor:pointer;

margin-right: -1px;


27/65



27

cursor:pointer;

margin-right: -1px;

margin-bottom: -1px;

}

margin-bottom: -1px;

color: #99cc33;

}

Default Tab Selected Customi

ed Tab Selected

.tab-panelulli.selected-

tab {

background:

url("../images/gridTabBgActi

ve.gif")repeat-x;

cursor:pointer;

border-bottom: solid1px

#ffffff;

}

.tab-panelulli.selected-tab {

background:

url("../images/gridTabBgActive.

gif")repeat-x;

cursor:pointer;

border-bottom: solid1px

#ffffff;

color: #000000;

}

DefaultGridColumnHeader Customi edGridColumnHeader

.grid-table-headertddiv {

font-weight: bold;

}

.grid-table-headertddiv {

font-weight: bold;

color: #595959;

}

Default Search Name Customi

ed Search Name

.grid-tablediv.search-name-

small {

color: #99CC33;

cursor:pointer;

padding-left: 5px;

font-weight: bold;

width: 280px;

overflow: hidden;

white-space: nowrap;

text-overflow:

ellipsis;

-o-text-overflow:ellipsis;

}


small {

color: #595959;

cursor:pointer;

padding-left: 5px;

font-weight: bold;

width: 280px;

overflow: hidden;


text-overflow: ellipsis;

-o-text-overflow:

ellipsis;}


large {

color: #99CC33;

cursor:pointer;

padding-left: 5px;

font-weight: bold;

width: 400px;

overflow: hidden;


text-overflow:

ellipsis;


}


large {

color: #595959;

cursor:pointer;

padding-left: 5px;

font-weight: bold;

width: 400px;

overflow: hidden;



-o-text-overflow:

ellipsis;}

Default Action Links Customi

ed Action Links

.under-line-text {

text-decoration:

underline;

cursor:pointer;

.under-line-text {


cursor:pointer;

padding-right: 5px;


28/65



28

padding-right: 5px;

float: left;

}

float: left;

color: #99cc33;

}

4.2.5 To change managementpanel footer message font colorinpopupo Open CustomPolySpot_Main.cssfileo Override below mentioned classes in CustomPolySpot_Main.css

.grid-table-message .panel-footer-no .panel-footer-text

o Add font colorattribute and valueo See below example

DefaultCommon Customi edCommon

.grid-table-message {

font-weight: bold;

padding-top: 5px;

}

.grid-table-message {

font-weight: bold;

padding-top: 5px;

color: #99cc33;}

DefaultCount Customi edCount

.panel-footer-no {

font-size: 14px;

float: left;

}

.panel-footer-no {

font-size: 14px;

float: left;

color: #000000;

}

Default Text Customi ed Text

.panel-footer-text {

float: left;

padding-left: 5px;}

.panel-footer-text {

float: left;

padding-left: 5px;color: #99cc33;

}

4.3 Customi e fonts and coloursforHelppage help.css(to be added)

4.4 BreadcrumbsCustomi ation Section

Figure 4.4


29/65



29

4.4.1 To change top/ bottom border and background colorofbreadcrumb areao Override.breadcrumbclass in CustomPolySpot_Main.csso Changebordercolorattributevalueo Add backgroundcolorattributevalueo See below example

Default Customied

.breadcrumb {

border-bottom: 1px

solid#DDDDDD;

border-top: 1pxsolid

#DDDDDD;

float: left;

width: 100%;

min-width: 990px;

}

.breadcrumb {

border-bottom: 1pxsolid

#99cc33;


#99cc33;

float: left;

width: 100%;

min-width: 990px;

background-color: #

f5f5f5;

}

4.4.2 To change font color andtextdecorationofdefaultfilterindicationtexto Override.default-filter.textclass in CustomPolySpot_Main.csso Changecolorattributevalueo Changetext-decoration attributevalueo See below example

Default Customi ed

.default-filter.text {

cursor:pointer;

padding-left: 5px;float: left;

color: #FF4800;

white-space: nowrap

!important;

text-decoration:

underline;

}

.default-filter.text {

cursor:pointer;

padding-left: 5px;float: left;

color: #99cc33;

white-space: nowrap

!important;


}

4.4.3 To change font coloroffiltername fordefault and mouse overstatuso Open CustomPolySpot_Main.cssfileo Override below mentioned classes in CustomPolySpot_Main.css

.breadcrumb.wrapper.filters.filter-name .breadcrumb.wrapper.filters.filter-name-hover .breadcrumb.wrapper.filters.filter-name.colon-

separator

o Add font color attribute and valueo See below example


30/65



30

DefaultFilter Name Customi edFilter Name

.breadcrumb.wrapper

.filters.filter-name {

padding-left: 3px;

font-weight: bold;

float: left;

}

.breadcrumb.wrapper.filters

.filter-name {

padding-left: 3px;

font-weight: bold;

float: left;

color: #000000;}

DefaultFilter Name Mouse Over Customi

edFilter Name Mouse Over

.breadcrumb.wrapper

.filters.filter-name-hover

{

cursor:pointer;

text-decoration: line-

through;

}


.filter-name-hover{

cursor:pointer;


through;

color: #99cc33;

}

DefaultFilterColon Separator Customi

edFilterColon Separator

.breadcrumb.wrapper

.filters.filter-name

.colon-separator{

padding-left: 2px;

padding-right: 2px;

font-weight: bold;

}


.filter-name.colon-separator{

padding-left: 2px;

padding-right: 2px;

font-weight: bold;

color: #000000;

}

4.4.4 To change font coloroffilter value fordefault and mouse overstatuso Open CustomPolySpot_Main.cssfileo Override below mentioned classes in CustomPolySpot_Main.css

.breadcrumb.wrapper.filters.filter-value .breadcrumb.wrapper.filters.filter-value-hover

o Add font color attribute and valueo See below example

DefaultFilterValue Customi edFilterValue

.breadcrumb.wrapper

.filters.filter-value {

font-weight: normal;

padding-left: 5px;

float: left;

}


.filter-value {

font-weight: normal;

padding-left: 5px;

float: left;

color: #000000;}

DefaultFilterValue Mouse Over Customi edFilterValue Mouse Over

.breadcrumb.wrapper

.filters.filter-value-hover

{

cursor:pointer;



.filter-value-hover{

cursor:pointer;


through;


31/65



31

through;

}

color: #99cc33;

}

4.4.5 To change font colorofplus,or, andseparatorsinfilterso Open CustomPolySpot_Main.cssfileo Override below mentioned classes in CustomPolySpot_Main.css

.breadcrumb.wrapper.filters.plus-separator .breadcrumb.wrapper.filters.or-separator .breadcrumb.wrapper.filters.and-separator

o Changefont colorattribute and valueo See below example

Default Plus Separator Customi ed Plus Separator

.breadcrumb.wrapper

.filters.plus-separator{

color: #FF4800;

font-weight: bold;

float: left;

width: 10px;

text-align: center;

}


.plus-separator{

color: #99cc33;

font-weight: bold;

float: left;

width: 10px;

text-align: center;

}

Default Or Separator Customi ed Or Separator

.breadcrumb.wrapper

.filters.or-separator{padding-left: 3px;

padding-right: 3px;

color: #99cc33;

font-weight: bold;

float: left;

}


.or-separator{padding-left: 3px;

padding-right: 3px;

color: #ff4800;

font-weight: bold;

float: left;

}

Default And Separator Customied And Separator

.breadcrumb.wrapper

.filters.and-separator{

padding-left: 3px;

padding-right: 3px;

color: #99cc33;font-weight: bold;

float: left;

}


.and-separator{

padding-left: 3px;

padding-right: 3px;

color: #99cc33;font-weight: bold;

float: left;

}

4.5 Changingthe appearance ofwestregionfacet area4.5.1 To change background color andtext colorofweststrip

o Open CustomPolySpot_Main.cssfile


32/65


une 2011


32

o Override below entioned classes in Custo PolySpot_Main.css .west-strip .west-strip.title

o Change bac ground colo attribute valueo Changefont-size attribute valueo Add ont colo attribute and valueo See below e a ple

Fi

ue 4.5.1

Default Customized

.west-strip {

background-color:

#F9F9F9;

height: 18px;

font-weight: bold;

padding-top: 10px;

padding-bottom: 7px;

border: 1pxsolid

#DDDDDD;

border-bottom: 0px;

width: 100%;

-moz-border-radius:

5px5px0px0px;

-webkit-border-radius:5px5px0px0px;

}

.west-strip {

background-color: #

e9f3d5;

height: 18px;

font-weight: bold;

padding-top: 10px;


border: 1pxsolid

#DDDDDD;

border-bottom: 0px;

width: 100%;


5px0px0px;


}

Default Customized

.west-strip.title {

padding-left: 10px;

float: left;

font-size: 1.2em;

}

.west-strip.title {

padding-left: 10px;

float: left;

font-size: 1.4em;

color: #99cc33;

}

4.5.2To chan

e back

ound colo

and text colo

of facet heade

o Open Custo PolySpot_Main.css ileo Override below


PolySpot_Main.css

.AHW-container.AHW-header .AHW-container.AHW-title

o Changebackgroundand colorattribute valueo See below e a ple


33/65


une 2011


33

Fi

ue 4.5.2

Default Customized

.AHW-container.AHW-header{

height: 35px;

background-color:

#F9F9F9;


#DDDDDD;


#DDDDDD;cursor:pointer;

}

.AHW-container.AHW-header{

height: 35px;

background-color: # e9f3d5;


#DDDDDD;


#DDDDDD;

cursor:pointer;}

Default Customized

.AHW-container.AHW-title {

padding-left: 5px;

margin-top: 10px;

font-weight: bold;

float: left;

}


padding-left: 5px;

margin-top: 10px;

font-weight: bold;

float: left;

color: #99cc33;

}

4.5.3To chan

e sub facet heade

back

ound colo

, title text colo

and bottom dotted bo

de

o Open Custo PolySpot_Main.css ileo Override below entioned classes in Custo PolySpot_Main.css

.facet-sub-header .AHW-container.AHW-title

o Add backgroundcolor attribute and valueo Change dotted border color value


34/65


une 2011


34

o Add ont colorattribute and value to sub acet header te t color (This will changetitle te

t color

or

acet header and sub

acet headers both)

o See below e a ple

Fi

u!e 4.5.3

Default Customized

.facet-sub-header{

height: 30px;

cursor:pointer;

border-bottom: 1px

dotted#DDDDDD;

} border-top: 1pxsolid

#DDDDDD;

cursor:pointer;

}

.facet-sub-header{

height: 30px;

cursor:pointer;

border-bottom: 1pxdotted

#ff4800;

} border-top: 1pxsolid

#DDDDDD;

cursor:pointer;

background-color: # e9f3d5;

}

Default Customized


padding-left: 5px;

margin-top: 10px;

font-weight: bold;

float: left;}


padding-left: 5px;

margin-top: 10px;

font-weight: bold;

float: left;color: #99cc33;

}

4.5.4 To chan" e font colo # fo # selected list item oflist facet & hie # a # chical faceto Open Custo $ PolySpot_Main.css% & ile and override style class & or & acet list selectedo Override below ' entioned classes in Custo ' PolySpot_Main.css(

.AHW-content.facet-list-item-selected .AHW-content.xpath-select


35/65

CSS Custo ) i 0 ation 1 uide 1.0 - 132

une 2011


35

o Add colorattribute and valueo Changebackgroundcolor attribute valueo See below e3 a 4 ple

Fi5

u6e 4.5.4

Default Customized

.AHW-content.facet-list-

item-selected{

height: 20px;width: 100%;

height: 100%;

float: left;

font-weight: bold;

}

.AHW-content.facet-list-item-

selected{

height: 20px;width: 100%;

height: 100%;

float: left;

font-weight: bold;

color: #000000;

}

Default Customized

.AHW-content.xpath-select {

background-color:

#EFF4E4;

}

.AHW-content.xpath-select {

background-color:

#f8f8f8;

}

4.5.5 To chan7 e default text colo 8 , hove 8 text colo 8 and selected text colo 8 of facet list valueo Open Custo 9 PolySpot_Main.css@ A ileo Override below B entioned classes in Custo B PolySpot_Main.cssC

.AHW-content.facet-list-itemulli.label .AHW-content.facet-list-itemulli.label-hover

o Add colorattribute value in style as per below eD aE

ple. By deF

ault,F

acet list labels

are inheriting teD

t colorF

roE

global teD

t color style applied onbody.


36/65

CSS Custo G i H ation I uide 1.0 - 13P

une 2011


36

o See below eQ a R ple

FiS

uTe 4.5.5

Default Customized


itemulli.label {

padding-left: 5px;

overflow: hidden;


text-overflow:

ellipsis;


}

.AHW-content.facet-list-item

ulli.label {

padding-left: 5px;

overflow: hidden;



-o-text-overflow:

ellipsis;color: #000000;

}

Default Customized


itemulli.label-hover{

padding-left: 5px;

text-decoration:

underline;

color: #99cc33;

overflow: hidden;

text-overflow:

ellipsis;


}


ulli.label-hover{

padding-left: 5px;

text-decoration:

underline;

color: #000000;

overflow: hidden;



}

4.5.6 To chanU e default text colo V , hove V text colo V and selected text colo V of facet list counto Open Custo W PolySpot_Main.cssX Y ileo Override below


PolySpot_Main.css

a

.AHW-content.facet-list-itemulli.count


37/65

CSS Custo b i c ation d uide 1.0 - 13e

une 2011


37

.AHW-content.facet-list-itemulli.count-hovero Change colorattribute valueo See below ef a g ple

Fih

ui

e 4.5.6

Default Customized


itemulli.count {

padding-left: 2px;

padding-right: 2px;

color: #99cc33;}


ulli.count {

padding-left: 2px;

padding-right: 2px;

color: #000000;}

Default Customized


itemulli.count-hover{

padding-left: 2px;

padding-right: 2px;

text-decoration:

underline;

color: #99cc33;

}


ulli.count-hover{

padding-left: 2px;

padding-right: 2px;

text-decoration:

underline;

color: #000000;

}

4.5.7 To chanp

e text coloq

ofr

oq

e/Less linko Open Custo s PolySpot_Main.csst u ileo Override belowMore/Less lin v class in Custo w PolySpot_Main.cssx o Change colorattribute valueo See below ey a ple


38/65


une 2011


38

Fi

ue 4.5.7

Default Customized


itemulli.more {

color: #99cc33;

text-decoration:

underline;

padding-left: 5px;

}


ulli.more {

color: #ff4800;

text-decoration:

underline;

padding-left: 5px;

}

4.5.8 To chan e back ound and bo de colo of hie a chical facet popupo Open Custo PolySpot_Main.css ileo Override below ention classes in Custo PolySpot_Main.css

.hfacet-popup .hfacet-level

o Changebackgroundand bordercolor attribute valueo See below e a ple


39/65


une 2011


39

Fi

ue 4.5.8

Default Customized

.hfacet-popup {

overflow: auto

!important;

background-color:

white;

-moz-border-radius:

5px5px5px5px;


5px5px5px5px;

-moz-box-shadow: 5px

5px5px#DDDDDD;

-webkit-box-shadow:5px5px5px#DDDDDD;

box-shadow: 5px5px

5px#DDDDDD;

border: 1pxsolid

#DDDDDD;

z-index: 2;

} padding-left: 5px;

}

.hfacet-popup {

overflow: auto

!important;

background-color:

#EFF4E4;


5px5px5px;


5px5px5px5px;

-moz-box-shadow: 5px5px

5px#DDDDDD;

-webkit-box-shadow: 5px5px5px#DDDDDD;

box-shadow: 5px5px5px

#DDDDDD;

border: 1pxsolid

#99cc33;

z-index: 2;

} padding-left: 5px;

}

Default Customized

.hfacet-level {

width: 270px

!important;

height: 157px;overflow: auto;

margin: 2px;

outline: 0;

border: 1pxsolid

#DDDDDD;

float: left;

}

.hfacet-level {

width: 270px!important;

height: 157px;

overflow: auto;margin: 2px;

outline: 0;

border: 1pxsolid

#EFF4E4;

float: left;

background-color:

#FFFFFF;

}


40/65


une 2011


40

4.5.9 To chanj e count ba k display oflij ht and da k k j k ay colo k o Open Custo l PolySpot_Main.cssm n ileo Override below o ention classes in Custo o PolySpot_Main.css

.count-bar-base-left .count-bar-base-middle .count-bar-base-right .count-bar-left .count-bar-middle .count-bar-right

o Changebackgroundi age attribute value. Keep co

on color

or respective i

ages o

count bar base and count bar

both.

Images should be o IF ormat and with transparency.o Add ont colorattribute and valueo See below e ample

Fi

u

e 4.5.9

Default Count Ba

Base Left Customized Count Ba

Base Left

.count-bar-base-left {

float: left;

width: 9px;

height: 15px;

background:

url("../images/facetListView

/leftroundlight.gif")no-

repeat;

cursor:pointer;

}

.count-bar-base-left {

float: left;

width: 9px;

height: 15px;

background:

url("../images/facetListView/ne

wleftroundlight.gif")no-

repeat;

cursor:pointer;

}

Default Count Ba z Base { iddle Customized Count Ba z Base { iddle

.count-bar-base-middle {

float: left;

width: 85%;

height: 15px;

vertical-align:

middle;

background:

.count-bar-base-middle {

float: left;

width: 85%;

height: 15px;

vertical-align: middle;

background:

url("../images/facetListView/ne


41/65



41


/centerlight.gif") ;

}

wcenterlight.gif");

}

DefaultCountBarBase Right Customi|edCountBarBase Right

.count-bar-base-right {

float: left;

width: 9px;

height: 15px;

background:


/rightroundlight.gif") no-

repeat;

cursor:pointer;

}

.count-bar-base-right {

float: left;

width: 9px;

height: 15px;

background:

url("../images/facetListView/ ne

wrightroundlight.gif") no-

repeat;

cursor:pointer;

}

DefaultCountBar Left Customi } edCountBar Left

.count-bar-left {

float: left;

width: 9px;

height: 15px;cursor:pointer;

background:


/leftrounddark.gif") no-

repeat;

}

.count-bar-left {

float: left;

width: 9px;

height: 15px;cursor:pointer;

background:


wleftrounddark.gif") no-repeat;

}

DefaultCountBarMiddle Customi ~ edCountBarMiddle

.count-bar-middle {

background:


/centerdark.gif")repeat

scroll 00transparent;

float: left;height: 15px;

overflow: hidden;

text-align: right;

width: 100%;

}

.count-bar-middle {

background:


wcenterdark.gif")repeatscroll

00transparent;

float: left;height: 15px;

overflow: hidden;

text-align: right;

width: 100%;

color: #ffffff;

}

DefaultCountBarRight Customi edCountBarRight

.count-bar-right {

float: left;

width: 100%;

height: 15px;

background:

url("../images/facetListView/rightrounddark.gif") no-

repeat;

}

.count-bar-right {

float: left;

width: 100%;

height: 15px;

background:

url("../images/facetListView/ newrightrounddark.gif") no-

repeat;

}

4.5.10 To change resources(ex: icons)to be usedinfacetwidgetso Nice to have imagesize of16x16 ofresources icons.o GIF format preferable with transparency.


42/65

CSS Customi ation uide 1.0 - 13

une 2011


42

o Images can be added at the same location with e isting ones to be used rom WT.o See below image source path

Resou

ce path fo

file fo

mat icon ima e fo

template

y src= resources/ui/default/ima es/facet/_lan ua e/Ima eName. if y src=

r

esour

ces/ui/default/ima

es/facet/_u

r

l_sh/1/ Ima

eName.

if

y src= resources/ui/default/ima es/facet/_url_sh/2/ Ima eName. if y src=

resources/ui/default/ima es/facet/pj_format/ Ima eName. if

Fi

ure 4.5.10

4.6 Chan in the appearance of top strip in centre re ion

Fi

ure 4.6.1 to 4.6.6


43/65



43

4.6.1 To change background and border coloroftopstripo Open CustomPolySpot_Main.cssfileo Override.center-top-stripclass in CustomPolySpot_Main.csso Changebackgroundand bordercolor attributevalueo See below example

Default Customied

.center-top-strip {

width: 100%;

height: 35px;

background-color:

#F9F9F9;

border: 1pxsolid

#DDDDDD;


5px0px0px;


}

.center-top-strip {

width: 100%;

height: 35px;

background-color: #

f5f5f5;

border: 1pxsolid

#595959;


5px0px0px;


}

4.6.2 To change font colorofresultsnumber andtexto Open CustomPolySpot_Main.cssfileo Override.center-top-strip .leftclass in CustomPolySpot_Main.csso Changecolorattributevalueo See below example

Default Top Strip Left Customi ed Top Strip Left

.center-top-strip.left {

float: left;

font-weight: bold;

padding-left: 10px;

padding-top: 7px;

width: 20%;

color: #FF4800;

}

.center-top-strip.left {

float: left;

font-weight: bold;

padding-left: 10px;

padding-top: 7px;

width: 20%;

color: #99cc33;

}

4.6.3 To applyseparate font colorofresultsnumber andtexto Open CustomPolySpot_Main.cssfileo Override below mention classes in CustomPolySpot_Main.css

.center-top-strip.left.result-count .center-top-strip.left.result-text

o Add colorattribute and valueo See below example


44/65



44

DefaultResultsCount Customi edResultsCount

.center-top-strip.left

.result-count {

float: left;

padding-top: 3px;

}


.result-count {

float: left;

padding-top: 3px;

color: #000000;

}

DefaultResults Text Customi edResults Text


.result-text {

float: left;

margin-left: 5px;

margin-right: 5px;

padding-top: 3px;

}


.result-text {

float: left;

margin-left: 5px;

margin-right: 5px;

padding-top: 3px;

color: #ff4800;

}

4.6.4To change defaultfont colorofsort by label

o Open CustomPolySpot_Main.cssfileo Override.center-top-strip .right.sortby-labelclass in CustomPolySpot_Main.csso Add colorattribute and valueo See below example

Default SortBy Customi ed SortBy

.center-top-strip.right

.sortby-label {

font-weight: bold;

padding-top: 4px;

float: left;

}

.center-top-strip.right

.sortby-label {

font-weight: bold;

padding-top: 4px;

float: left;

color: #ff4800;

}

4.6.5 To change default andhoverfont coloroflist menudisplayo Open CustomPolySpot_Main.cssfileo Override below mention classes in CustomPolySpot_Main.css

.list-menu-display-item .list-menu-display-hover .list-menu-display-selected

o Add / Changecolorattribute and valueo See below example

Default ListMenu Display Customi ed ListMenu Display

.list-menu-display-item {

float: left;

cursor:pointer;

padding: 4px;


}

.list-menu-display-item {

float: left;

cursor:pointer;

padding: 4px;


color: #000000;

}


45/65



45

Default ListMenu DisplayHover Customi ed ListMenu DisplayHover

.list-menu-display-hover{

float: left;

cursor:pointer;

padding: 4px;


color: #99cc33;text-decoration:

underline;

}

.list-menu-display-hover{

float: left;

cursor:pointer;

padding: 4px;


color: #ff4800;text-decoration:

underline;

}

Default ListMenu Display Selected Customied ListMenu Display Selected

.list-menu-display-selected

{

font-weight: bold;

float: left;

padding: 4px;


}

.list-menu-display-selected {

font-weight: bold;

float: left;

padding: 4px;


color: #ff4800;

}

4.6.6 To change background, border andtext colorofdisplaymenupopupo Open CustomPolySpot_Main.cssfileo Override below mention classes in CustomPolySpot_Main.css

.list-menu-popup .list-menu-item-holder .list-menu-item .list-menu-item-hover

o Add / Changecolor, backgroundcolor and bordercolor attributevalueso See below example

Default Popup Customi

ed Popup

.list-menu-popup {


5px5px5px;


5px5px5px5px;

border: 1pxsolid

#DDDDDD;

background-color:

#FFFFFF;

display: inline;

min-width: 60px;

z-index: 2;

}

.list-menu-popup {


5px5px5px;


5px5px5px;

border: 1pxsolid#99cc33;

background-color: #f5f5f5;

display: inline;

min-width: 60px;

z-index: 2;

}

Default ListMenuHolder Customied ListMenuHolder

.list-menu-item-holder{

color: #666666

!important;

}

.list-menu-item-holder {

color: #595959!important;

}

Default ListMenuItem Customi ed ListMenuItem


46/65


une 2011


46

.list-menu-item{

cursor:pointer;

padding: 5px;

}

.list-menu-item{

cursor:pointer;

padding: 5px;


}

Default List

enu Item Hover Customized List

enu Item Hover

.list-menu-item-hover{

color: #666666

!important;

background: #E9F3D5

!important;

cursor:pointer;

padding: 5px;

}

.list-menu-item-hover{

color: #ff4800!important;

background: #f5f5f5

!important;

cursor:pointer;

padding: 5px;

}

4.6.7 To chan e display mode button ima eo Override all new images at resource location. Keep the same ile type and ile name

or the im

age.o See below image resource path

Fi

ure 4.6.7

Resource path for ima

es

y src=resources/ui/default/ima es/idcarddetail.pn "

y src="resources/ui/default/ima es/idcarddetail_selected.pn "y src="resources/ui/default/ima es/mosaic.pn "y src="resources/ui/default/ima es/mosaic_selected.pn "y src="resources/ui/default/ima es/idcard.pn "y src="resources/ui/default/ima es/idcard_selected.pn "y src="resources/ui/default/ima es/ rid. if"y src="resources/ui/default/ima es/ rid_selected. if"

4.6.8 To chan e visibility top strip and pa inationo Open CustomPolySpot_Main.css ileo Override .center-top-strip.leftclass in CustomPolySpot_Main.css o Change colorattribute valueo Changedisplayattribute value none to hide and blockto show the top paginationo See below e ample


47/65


une 2011


47

Fi

ure 4.6.8

Default Top Strip & Pa

ination Status Customized Top Strip & Pa

ination

Status

.top-pager-strip {

width: 100%;


border-top: 0px;

height: 40px;

background-color:

#F9F9F9;

float: left;

display: block;

}

.top-pager-strip {

width: 100%;


border-top: 0px;

height: 40px;

background-color:

#f5f5f5;

float: left;

display: none;

}

4.7 Chan in the appearance ofbottom strip and pa ination of centre re ion

Fi

ure 4.7.1,4.7.2

4.7.1 To chan e back round and border color ofbottom stripo Open CustomPolySpot_Main.css ileo Override.centre-bottom-stripclassin CustomPolySpot_Main.css o Add backgroundand bordercolor attribute valueso See below e ample

Default Customized

.center-bottom-strip {

width: 100%;

height: 50px;

border: 1pxsolid

#DDDDDD;

float: left;


0px5px5px;


0px0px5px5px;

}

.center-bottom-strip {

width: 100%;

height: 50px;


float: left;


0px5px5px;


0px5px5px;

background-color: #EFF4E4;


}

4.7.2 To chan e back round,border& color of default, hover, selected and disabled pa e linko Open CustomPolySpot_Main.css ileo Override below mention classes in CustomPolySpot_Main.css

.pagera


48/65



48

.pagera:hover .pagera.current div.ellipsis

o Add / Changecolor, background color and border colorattributevalueso See below example

Default Paging Link Customi ed Paging Link

.pagera {

float: left;

padding: 2px6px;

margin-left: 2px;

margin-right: 2px;


background: #ffffff;

border: solid1px

#dddddd;

color: #666666

!important;


-webkit-border-radius:5px;

outline: none;

}

.pagera {

float: left;

padding: 2px6px;

margin-left: 2px;

margin-right: 2px;


background: #EFF4E4;

border: solid1px#

EFF4E4;




5px;outline: none;

}

Default Paging Link Hover Customi ed Paging Link Hover

.pagera:hover{

background: #eaeaea;

outline: none;

}

.pagera:hover{


outline: none;

}

Default Paging Link Current/ Disable Customied Paging Link Current/ Disable

.pagera.current {

background: #eaeaea;color: #bbbbbb

!important;

cursor: default;

outline: none;

}

.pagera.current {

background: #f5f5f5;color: #bbbbbb!important;

cursor: default;

outline: none;

}

Default Static Paging Ellipsis Customi

ed Static Paging Ellipsis

div.ellipsis {

float: left;

padding: 2px2px;


font-weight: bold;

}

div.ellipsis {

float: left;

padding: 2px2px;


font-weight: bold;

color: #595959;

}

4.7.3 To change default and background colorofmosaic andotherresult modesonhovero Open CustomPolySpot_Main.cssfileo Override below mention classes in CustomPolySpot_Main.css

.search-result .search-result-hover .search-result-mosaic-hover


49/65


une 2011


49

o Add / Change bac ground color attribute valueso See below e ample

Fi

ure 4.7.3 DetailDoc Template

Fi

ure 4.7.3

osaic Template

Fi

ure 4.7.3 Simple List Template

Fi ure 4.7.3

Grid Vie


50/65



50

Default Customied

.search-result {

z-index: 1;

background-color:

#FFFFFF;

border-bottom: 1pxsolid#dddddd;

float: left;

width: 100%;

}

.search-result {

z-index: 1;

background-color:

#f5f5f5;

border-bottom: 1pxsolid#666666;

float: left;

width: 100%;

}

Default Customi ed

.search-result-hover{

overflow: visible

!important;

z-index: 2;

background-color:

#E9F3D5;

border-bottom: 1px

solid#dddddd;float: left;

width: 100%;

}

.search-result-hover{

overflow: visible

!important;

z-index: 2;

background-color:

#E9F3D5;

border-bottom: 1px

solid#666666;float: left;

width: 100%;

}

Default Customi

ed

.search-result-mosaic-hover

{

z-index: 2;

background-color:

#E9F3D5;

border-bottom: 1px

solid#dddddd;

float: left;

width: 100%;

}

.search-result-mosaic-hover {

z-index: 2;

background-color:

#E9F3D5;

border-bottom: 1px

solid#666666;

float: left;

width: 100%;

}

4.8 Changingthe appearance oftemplates4.8.1 To change font colorofhighlightedsearchterm insummary,detailed list, mosaic, list and

grid

o Open CustomXTemplate.cssfileo Override below mention classes in CustomXTemplate.css

.detail-doc-titleb,.doc-list-titleb

.mosaic-video-labelb,.mosaic-email-nameb .grid-title-columnb

o Changecolorattributevalueo See below example


51/65



51

Figure 4.8.1

Default Detail ViewHighlighted Term Customi ed Detail ViewHighlighted

Term

.detail-doc-titleb,.doc-

list-titleb {

color:#ff4800;}

.detail-doc-titleb,.doc-

list-titleb {

color:#00ff00;}

DefaultMosaic ViewHighlighted

Term

CustomiedMosaic ViewHighlighted

Term

.mosaic-video-labelb,

.mosaic-email-nameb {

color: #FF4800;

}

.mosaic-video-labelb,

.mosaic-email-nameb {

color: #00ff00;

}

DefaultGridViewHighlighted Term Customi edGridViewHighlighted

Term

.grid-title-columnb {

color: #FF4800;}

.grid-title-columnb {

color: #00ff00;}

Default SummaryHighlighted Term Customi ed SummaryHighlighted

Term

.summaryb {

color: #FF4800;

}

.summaryb {

color: #ff0000;

}


52/65


une 2011


52

4.8.2 To chan e back round and border color of thumbnailbox of detailed list and mosaico Open CustomXTemplate.css ileo Override below mention classes in CustomXTemplate.css

.detail-doc-view.detail-doc-thumb .mosaic-video-cell,.mosaic-email-cell

o Changebackgroundand bordercolor attribute valueso See below e ample

Fi

ure 4.8.2

Default DetailList Thumbnail Box Customized DetailList Thumbnail Box

.detail-doc-view.detail-

doc-thumb {float: left;

background:#ffffff;

border:solid1px

#bfbfbf;

width: 134px;

margin-left:5px;

margin-right:5px;

text-align: center;

margin-top: 10px;

}

.detail-doc-view.detail-doc-

thumb {float: left;

background:#f5f5f5;

border:solid1px#666666;

width: 134px;

margin-left:5px;

margin-right:5px;

text-align: center;

margin-top: 10px;

}

Default

osaic Thumbnail Box Customized

osaic Thumbnail Box

.mosaic-video-cell,.mosaic-

email-cell{

width: 200px;

text-align: center;

vertical-align:

middle;

padding: 10px;

background-color:

#f5f5f5;

border: 1pxsolid

#bfbfbf;

.mosaic-video-cell,.mosaic-

email-cell{

width: 200px;

text-align: center;

vertical-align: middle;

padding: 10px;

background-color:

#ffffff;

border: 1pxsolid

#dddddd;

cursor:pointer;


53/65



53

cursor:pointer;

}

}

4.8.3 To change font color andtextdecorationofdetailed list, mosaic and listtitleso Open CustomXTemplate.cssfileo Override below mention classes in CustomXTemplate.css

.detail-doc-titlea .mosaic-video-labela,.mosaic-video-labela:hover,

.mosaic-video-labela:visited

o Changefont colorand text-decoration attributevalueso See below example

Figure 4.8.3,4.8.4

Default Detail Doc List& Doc List Title Customi ed Detail Doc List& Doc List

Title

.detail-doc-titlea {

font-weight: bold;

text-decoration:

underline;

color: #99cc33;

}

.detail-doc-titlea {

font-weight: bold;


color: #ff4800;

}

DefaultMosaic Title Customi edMosaic Title

.mosaic-video-label

a,.mosaic-video-label

a:hover,.mosaic-video-label

a:visited{

color : #99cc33;

text-decoration:

.mosaic-video-label

a,.mosaic-video-label

a:hover,.mosaic-video-label

a:visited{

color : #ff4800;



54/65



54

underline;

font-weight: bold;

}

font-weight: bold;

}

4.8.4 To change title font color andtextdecorationofgridtitleo Open PolySpot_MainTemplate.cssfileo Override.grid-title-column class in PolySpot_MainTemplate.csso Changefont colorand text-decoration attributevalueso See below example

DefaultGrid Title Customi

edGrid Title

.grid-title-column {

cursor:pointer;

color: #99CC33;

font-weight: bold;

text-decoration:

underline;

overflow: hidden;white-space: nowrap;

text-overflow:

ellipsis;

-o-text-overflow:

ellipsis;

width: 100%;

padding-top: 6px;

padding-left: 5px;

}

.grid-title-column {

cursor:pointer;

color: #ff4800;

font-weight: bold;


overflow: hidden;

white-space: nowrap;text-overflow:

ellipsis;

-o-text-overflow:

ellipsis;

width: 100%;

padding-top: 6px;

padding-left: 5px;

}

4.8.5 To change defaultimage fordetailed list and mosaic modeswhennoimage foundo Override new image at resource location. Keep thesamefile type and file namefor

the image.

o See below image resource path

Figure 4.8.5


55/65



55

Resource pathfordefaultthumbnail image fortemplate

y src="resources/ui/default/images/formatIcon/noImage.gifResource pathfordefaultthumbnail image indisplaypreviewpopup

y src="resources/ui/default/images/preview/noImage.gif4.8.6 To change file formaticonimage intemplates

o Override new image at resource location. Keep thesamefile type and file nameforthe image.

o See below image resource path

Figure 4.8.6

Resource pathforfile formaticonimage fortemplate

y src="resources/ui/default/images/formatIcon/fileName.gif

4.8.7 To change font colorofgrid view columnheadertexto Open CustomPolySpot_Main.cssfileo Override below mention classes in CustomPolySpot_Main.css

.sortable-column .non-sortable-column

o Add font colorattributevalueo See below example


56/65


une 2011


56

Fi

ure 4.8.7,4.8.8

Default Sortable Column Header Customized Sortable Column Header

.sortable-column {

float: left;

width: 100%;

height: 34px;

cursor:pointer;

}

.sortable-column {

float: left;

width: 100%;

height: 34px;

cursor:pointer;

color: #000000;

}

Default Non Sortable Column Header Customized Non Sortable Column

Header

.non-sortable-column {float: left;

width: 100%;

height: 34px;

}

.non-sortable-column {float: left;

width: 100%;

height: 34px;

color: #000000;

}

4.8.8 To chan e rid vie default ro , alternate ro and selected ro o Open CustomPolySpot_Main.css ileo Override below mention classes in CustomPolySpot_Main.css

.grid-view-row .grid-view-alt-row .grid-view-selected-row

o Changebackgroundcolor attribute valueso See below e ample

Default Grid Vie Ro

Customized Grid Vie Ro

.grid-view-row{


border-bottom: solid

.grid-view-row{

background: #f5f5f5;

border-bottom: solid


57/65


une 2011


57

1px#dddddd;

z-index: 1;

}

1px#dddddd;

z-index: 1;

}

Default Grid Vie

Alternate Ro

Customized Grid Vie

Alternate Ro

.grid-view-alt-row{

background-color:#f2f2f2;

z-index: 1;

}

.grid-view-alt-row{

background-color:#ffffff;

z-index: 1;

}

Default Grid Vie

Selected Ro

Customized Grid Vie

Selected Ro

.grid-view-selected-row{

background-color:

#e9f3d5;

z-index: 2;

}

.grid-view-selected-row{

background-color:

#f8f8f8;

z-index: 2;

}

4.8.9 To chan

e font color

hen no results are foundo Open CustomPolySpot_Main.css ileo Override below mention classes in CustomPolySpot_Main.css

.no-results .query-panel .no-results .query .no-results.suggestions

o Add colorattribute and valueso See below e ample

Fi

ure 4.8.9

Default Query

essa e Customized Query

essa e

.no-results.query-panel {

width: 100%;

}

.no-results.query-panel {

width: 100%;

color:#99cc33;

}

Default Search Term Customized Search Term

.no-results.query{

padding-left: 5px;

padding-right: 5px;

font-weight: bold;

}

.no-results.query{

padding-left: 5px;

padding-right: 5px;

font-weight: bold;

color:#ff4800;

}


58/65

CSS Customi ation

uide 1.0 - 13

une 2011


58

Default Su estionsTitle Customized Su

estionsTitle

.no-results.suggestions {

font-weight: bold;

padding-top: 10px;


width: 100%;

clear:both;}

.no-results.suggestions {

font-weight: bold;

padding-top: 10px;


width: 100%;

clear:both;color:#000000;

}

4.8.10 To chan e font color for Did you mean? title and su estiono Open CustomPolySpot_Main.css ileo Override below mention classes in CustomPolySpot_Main.css

.suggestion-title .suggestion

o Add / Change colorattribute and valueso See below e ample

Fi

ure 4.8.10

Default Su

estion Title Customized Su

estion Title

.suggestion-title {

font-weight: bold;

padding-left: 4px;

float: left;

padding-top: 9px;

}

.suggestion-title {

font-weight: bold;

padding-left: 4px;

float: left;

padding-top: 9px;

color: #000000;

}

Default Su

estion Customized Su

estion

.suggestion {

color: #FF4800;

cursor:pointer;

font-weight: bold;

padding-left: 5px;

text-decoration:

underline;

.suggestion {

color: #99cc33;

cursor:pointer;

font-weight: bold;

padding-left: 5px;

text-decoration:

underline;


59/65


une 2011


59

float: left;

padding-top: 9px;

}

float: left;

padding-top: 9px;

}

4.8.11 To chan e font color and border color of action button

Fi

ure 4.8.11,4.8.12,4.8.13,4.8.14

o Open CustomPolySpot_Main.css ileo Override .action-button class in CustomPolySpot_Main.css o Add colorattribute and valueo Changebordercolor attribute valueo See below e ample

Default Customized

.action-button {

position: absolute;

height: 18px;padding-right: 20px;

padding-left: 5px;

padding-top: 2px;

float: left;

border: solid1px

#bfbfbf;



5px;

cursor:pointer;

z-index: 3;

}

.action-button {

position: absolute;

height: 18px;padding-right: 20px;

padding-left: 5px;

padding-top: 2px;

float: left;

border: solid1px

#595959;



5px;

cursor:pointer;

z-index: 3;

color: #000000;

}

4.8.12 To chan e back round colorand border color of action roll over menuo Open CustomPolySpot_Main.css! " ileo Override .roll-over-menu class in CustomPolySpot_Main.css# o Changebackgroundcolor attribute valueo Changebordercolor attribute valueo See below e$ ample


60/65



60

Default Customi%ed

.roll-over-menu {

z-index: 4;

position: absolute;




4px#CCCCCC;

-webkit-box-shadow: 4px

4px4px#CCCCCC;

width: 135px;

height: auto;

background-color:

#F9F9F9;

border: 1pxsolid

#BFBFBF;

float: left;

padding: 5px10px;

}

.roll-over-menu {

z-index: 4;

position: absolute;




4px#CCCCCC;

-webkit-box-shadow: 4px

4px4px#CCCCCC;

width: 135px;

height: auto;

background-color: #

E9F3D5;

border: 1pxsolid

#99cc33;

float: left;

padding: 5px10px;

}

4.8.13 To change default&hoverfont color,textdecoration anddivider colorofroll over linkso Open CustomPolySpot_Main.cssfileo Override below mention classes in CustomPolySpot_Main.css

.rowa .rowa:hover .roll-over-menu.row-divider

o Changecolorattributevalueo Changetext-decoration attributevalueo Changebordercolor attributevalueo See below example

DefaultRoll OverMenu Link Customi&

edRoll OverMenu Link

.rowa {



cursor:pointer;

color: #666666;

padding-top: 4px;

}

.rowa {



cursor:pointer;

color: #000000;

padding-top: 4px;

}

DefaultRoll OverMenu Link Hover Customi ' edRoll OverMenu Link Hover

.rowa:hover{color: #666666;

cursor:pointer;

text-decoration:

underline;

padding-top: 4px;

}

.rowa:hover{color: #000000;

cursor:pointer;


padding-top: 4px;

}

DefaultRoll OverMenu Divider Customi ( edRoll OverMenu Divider


61/65



61

.roll-over-menu.row-divider{

border-top: solid1px

#dddddd;

}

.roll-over-menu.row-divider{

border-top: solid1px

#595959;

}

4.8.14To change iconimagesofroll over menu links

o Override new image at resource location. Keep thesamefile type, filesize and filenamefor the image.

o See below image resource pathResource pathforfile formaticonimage fortemplate

y src="resources/ui/default/images/rollOverMenu/viewDocument-rollOver.gify src="resources/ui/default/images/rollOverMenu/displayPreview.gify src="resources/ui/default/images/rollOverMenu/openDocument.gif

4.8.15 To change appearance ofpreview background,title font color and menuoptionso Open CustomPolySpot_Main.cssfileo Override below mention classes in CustomPolySpot_Main.css

.card-preview-title .mosaic-preview-title .card-jspPanel .mosaic-preview-body .preview-action-button .preview-action-button-hover

o Changefont color, bordercolor and backgroundcolor attributevalueso

See below example


62/65

CSS Customi ) ation 0 uide 1.0 - 131

une 2011


62

Fi2

ure 4.8.15,4.8.16

Default DetailList Previe3

Title Customized DetailList Previe3

Title

.card-preview-title {

color: #99cc33;

font-weight: bold;

overflow: hidden;

text-overflow:

ellipsis;

-o-text-overflow:

ellipsis;


font-size: 1.5em;

float: left;

width: 480px;

padding-left: 5px;

padding-top: 10px;

}

.card-preview-title {

color: #ff4800;

font-weight: bold;

overflow: hidden;


-o-text-overflow: ellipsis;


font-size: 1.5em;

float: left;

width: 480px;

padding-left: 5px;

padding-top: 10px;

}

Default 4 osaic Previe5

Title Customized 4 osaic Previe5

Title

.mosaic-preview-title {

color: #99cc33;

font-weight: bold;

.mosaic-preview-title {

color: #ff4800;

font-weight: bold;


63/65



63

overflow: hidden;

text-overflow:

ellipsis;

-o-text-overflow:

ellipsis;

font-size: 1.5em;

float: left;

white-space: nowrap;}

overflow: hidden;


-o-text-overflow: ellipsis;

font-size: 1.5em;

float: left;


}

Default PreviewBackground Customi 6 ed PreviewBackground

.card-jspPanel {


clear: both;

padding: 15px;

text-align: center;

}

.card-jspPanel {

background: #dddddd;

clear: both;

padding: 15px;

text-align: center;

}

DefaultMosaic PreviewBackground Customi7

edMosaic PreviewBackground

.mosaic-preview-body{

clear: both;padding: 16px;

background-color:

#989898;

text-align: center;

}

.mosaic-preview-body{

clear: both;padding: 16px;

background-color: #dddddd;

text-align: center;

}

Default Preview ActionButton Customi 8 ed Preview ActionButton

.preview-action-button {

float: left;


padding-top: 8px;

width: 162px;

border: 1pxsolid

#DDDDDD;background:

url("../images/rollOverMenu/

previewButtonBg.gif") ;

cursor:pointer;

}

.preview-action-button {

float: left;


padding-top: 8px;

width: 162px;


background:url("../images/rollOverMenu/previe

wButtonBg.gif");

cursor:pointer;

}

Default Preview ActionButtonHover Customi 9 ed Preview ActionButtonHover

.preview-action-button-hover

{

float: left;


padding-top: 8p

css customization guide

Documents