Operations Dashboard Look and Feel Customize Look Feel

Operations Dashboard Look and Feel

Customize Look & Feel

Index • Modify Text on default screen. • Text • Modify Header • • • HP logo Header Text Back ground Image Header Image Modify Page Layout Tabs • Selected Tabs • Unselected Tabs • Tab Border. • Modify Portlets • Portlet Header. 3

Welcome Screen Portal Header Page Layout Tabs Portlet Header 4

Portal screen 5

Modify Welcome screen • Create welcome screen and replace it with welcome. html at Location : <Ov. Install. Dir>non. OVdashboardjetspeed2. 1weba ppsovdportal-utilshtml 6

Modify Header • HP logo • Put the new image in folder <Ov. Install. Dir>/non. OV/dashboard/jetspeed/2. 1/webapps/jetspee d/decorations/layout/HPOVD-Default/images. • Search For ‘logo_hp_largemasthead_blue. gif’ in file <Ov. Install. Dir>non. OVdashboardjetspeed2. 1webappsjetspee ddecorationslayoutHPOVD-Defaultheader. vm • Replace logo_hp_largemasthead_blue. gif with the new logo name and change the width and height elements accordingly. • Header Text • Open the File <Ov. Install. Dir>non. OVdashboardjetspeed2. 1webappsjetspee ddecorationslayoutHPOVD-Defaultheader. vm • Search for ‘Operations Dashboard’. Change ‘Operations Dashboard’ to the desired name and refresh the page. 7

Cont. . • Modify Header Tool bar Strip • Open the file <Ov. Install. Dir>/non. OV/dashboard/jetspeed/2. 1/webapps/jetspee d/decorations/layout/HPOVD-Default/css/portal. css • Search for ‘toolsandlinks’ • This will point to fragment • . layout-hpov-default #toolsandlinks{ • background-color: #7591 ac; • voice-family: ""}""; • voice-family: inherit; • color: #fff; • font-size: x-small; • font-weight: bold; • padding: 2 px 8 px; • border-bottom: 2 px #003366 solid; • border-top: 2 px #c 9 c 9 c 9 solid; • border-right: 2 px #003366 solid; • } • 8

Cont. . In that element • Background color is #7591 ac; modify to the color desired • Border bottom is 2 px and color is #003366 modify it appropriately • Border top is 2 px and color is #c 9 c 9 c 9 modify it appropriately • Border right is 2 px and color is #003366 solid; modify it appropriately 9

Cont. . • Background Image • Background Color • Image on portal header is located at <Ov. Install. Dir>/non. OV/dashboard/jetspeed/2. 1/webapps/jetspeed/decorations/layout/HPOV D-Default/images • Image name is “main_top_image. jpg”. • Image is mapped with Header. vm. File can be found at location <Ov. Install. Dir>non. OVdashboardjetspeed2. 1webappsjetspeeddecorationslayoutHPOV D-Defaultheader. vm. . • Change of background can be achieved in 2 ways. 1. Modifying image name in vm fileputting new image 2. replace existing image. • Open the file <Ov. Install. Dir>/non. OV/dashboard/jetspeed/2. 1/webapps/jetspeed/decorations/layout/HPOV D-Default/css/portal. css − Css fragment is: : −. layout-hpov-default table. application. Masthead. Small, −. layout-hpov-default table. application. Masthead. Small td, −. layout-hpov-default table. application. Masthead. Large td { − background-color: #036; − } • #036 is background color modify it to desired Color. • #000 for black and #fff for white. 10

Modify Page Layout Tabs • Selected Tabs − Class Name : : Tab. Middle − Css fragments: : • . layout-hpov-default. ov. Tab. Style. Tab. Middle { • background-color: #ccc; • color: #333; • font-weight: bold; • padding: 2 px 5 px 6 px 5 px; • } − Background color is #ccc, modify it to desired color − Text color is #333, modify it to desired color. − #fff is white, #000 is black 11

Cont. . • Unselected Tabs − Class Name : : Tab. Middle. Low − Css fragments: : • • • . layout-hpov-default. ov. Tab. Style. Tab. Middle. Low { background-position: top right; background-repeat: no-repeat; border-bottom: 2 px solid white; color: white; padding: 2 px 5 px 4 px 5 px; }. layout-hpov-default. ov. Tab. Style. Tab. Middle. Low { background-color: # 7591 AC; background-image: url('. . /images/blue/tab_right. gif'); }. layout-hpov-default. ov. Tab. Style. Tab. Middle. Low a: link. Tab. Link, . ov. Tab. Style. Tab. Middle. Low a: visited. Tab. Link { • background-color: # 7591 AC; • } 12

Cont. . − Then Change the background image and color of Tab : : In fragment • . layout-hpov-default. ov. Tab. Style. Tab. Middle. Low { • background-color: # 7591 AC; • background-image: url('. . /images/blue/tab_right. gif'); • } − 7591 AC is background, modify it appropriately. − tab_right. gif is background image, to image replace Go to folder <OVInstall. Dir>non. OVdashboardjetspeed2. 1webappsjetspeedd ecorationslayoutHPOVD-Default/images/blue/tab_right. gif is the image which is the right side of the unselected tabs. − Then Change the background color of the text in the tab : : In the fragment • . layout-hpov-default. ov. Tab. Style. Tab. Middle. Low a: link. Tab. Link, . ov. Tab. Style. Tab. Middle. Low a: visited. Tab. Link { • background-color: # 7591 AC; • } − 7591 AC is background, modify it appropriately 13

Cont. . − Then change Text Color : : In fragment − Class name • . layout-hpov-default. ov. Tab. Style. Tab. Middle. Low { • background-position: top right; • background-repeat: no-repeat; • border-bottom: 2 px solid white; • color: white; • padding: 2 px 5 px 4 px 5 px; • } − Change the color: white to the color desired 14

Cont. . • Tab Border − Class Name : : ov. Tab. Style • . layout-hpov-default. ov. Tab. Style { • border-bottom: 6 px #ccc solid; • background-color: white; • } − To change color of the bottom border : : • 6 px is height of border • #ccc is color of border • Solid means opaque. − To change background tab color : : • Modify white to desired color 15

Modify Portlets • Change the background color of all portlets: : − Css file: : <Ov. Install. Dir>non. OVdashboardjetspeed2. 1webapps jetspeeddecorationslayoutHPOVDDefaultcssstyles. css • Individual Portlet Decorators: : − <OVInstall. Dir>non. OVdashboardjetspeed2. 1webapps jetspeeddecorationsportletHPOVDDefaultcssportal. css − <OVInstall. Dir>non. OVdashboardjetspeed2. 1webapps jetspeeddecorationsportletHPOVDDefaultcssstyles. css 16

Cont. . • To Change the portlet Heading Background color − Css file: : − <OVInstall. Dir>non. OVdashboardjetspeed2. 1webappsjetspeedd ecorationsportletHPOVD-Defaultcssstyles. css − Css fragment: : −. layout-hpov-default. PTitle −{ − padding-top: 2 px; − padding-bottom: 16 px; − padding-right: 2 px; − padding-left: 6 px; − border-left: 1 px solid #666; 17

Cont. . − border-right: 1 px solid #666666; border-top: 1 px solid #DDDDDD; border-bottom: 1 px solid #666666; − − color: #fff; − background-color: #666; − − −} • To modify portlet title modify CSS class appropriately 18

19