colorvalue='#336666'/>
colorvalue='#663366'/>
colorPalette>
Branding
∙IliketocreatecustombrandingforcustomersIdemoto.Evenifwearedemoingourpre-builtapplicationsratherthanacustomdemo–itdoesn’ttaketoolongtomakeiteasyforourcustomertovisualizehowtheOracledashboardswilllookintheirenvironment.
∙Grabasamplelogoandscreenshotfromyourcustomers’website.IuseSnagIttograbthelogo.We’llusethescreenshottograbthecolors.Youwillprobablyneedsometypeofpaintshopprotypeofapplication.I’vebeenusingPSPforyears–andI’llbeusingthatinthisdemonstration.
∙
∙Isavethelogoasajgpintoaclientdirectoryonmypc.
∙IopenthescreenshotinPaintShopProtograbtheHTMLcolorsthatareusedonmycustomer’ssite.
∙IusethedroppertoolinPSPandhoveritoveracolor.
∙Then–Irightandleftclicktosetthecolorastheforegroundandbackgroundcolorsothatitappearsontherightsideofthescreen.
∙
∙Then–Icandouble-clickonthecolorontherighttoseetheHTMLcolorcodeforthatcolor.
∙
∙Irecordthat–andthenrepeatthisprocesstogettheothercolorsI’llneed.Typicallyyoucanuse2–4colors.
∙Green:
#4DA620
∙blue:
#0F59A6
∙Grey:
#CCCCCC
∙Red:
#FF0000
∙Createthecontainerstoholdourbranding.Allbrandingonourdemoimagesisstoredintwolocations:
C:
\OracleBI\oc4j_bi\j2ee\home\applications\analytics\analytics\res
C:
\OracleBI\web\app\res
∙Bydefault–allofourdashboardsusetheOraclebrandingwhichisstoredinthedirectorieslabeleds_oracle10.
∙Tocreatenewbranding–Icopythes_Oracle10directoryandrenameitsomethingrepresentativeofmycustomer.Inthisexample–I’llcallits_citrix.
∙BeforeIcopythedirectoriesIstopallservices,dothecopyandthenstarttheservices.
∙AtleastOraclePresentationServicesandtheOC4Jserviceswillneedtoberestarted.
∙Wewillmakechangesinthes_citrixdirectoryundertheoc4j_bipathuntilwelikethemall–thenwewillcopythemtotheotherdirectory.Itismybeliefthatweneedtos_directoryunderthe\webpathsothatthebrandingdirectoryisselectableunderEditDashboard.Otherwise–itseemsthatmostinformationonlyneedstobeintheoc4j_bipath.But-it’sbesttokeeptheminsync–especiallyifyouarehavingproblemsorexperiencingweirdness.
∙UsingtheLogoImage:
Makeonesmalllogothatwillbeabletobethetitlebarimageforindividualrequests.Makealargeimagethatwillbetheimageinthebanneratthetopofthepage.
∙Theexistingbannerimageisnamedbg_banner.jpgandisintheb_mozilla_4directory.Weneedtoemulatethatimage’ssizeandwidth.Thedefaultsettingsfortheimagearebelow.
∙
∙InPSP–I’llmakethesizeforthecitrixlogo48pxhigh–andletthewidthgotowhateverthecorrespondingaspectratiois.
i.Selectthecitrixlogo.
ii.SelectImage,Resize.
iii.
iv.Changetheheightto48,andthewidthchangesto202.
v.
vi.ClickOk.
vii.
∙Now–weneedtomakethewidthofitextendtotheedgeofthepage–or1600pxwide.InPSP–IuseCanvasSizetoaccomplishthis.
∙Againselectthelogo,thenselectImage,CanvasSize.
∙
∙Changethewidthto1600.
∙TurnoffCenterImageHorizontallyandOk.
∙
∙Noticethatmylogostillcentered.We’llhavetoplaywiththeImagePlacementsettingsintheChangeCanvasSizeboxtogetthelogotoappearontheleftlikeourOraclesample.
∙IputnumbersintheRightboxlikebelowandthenseewhatitlookslike.IfIdon’tlikeit–Iundoandputinanothernumber.Itdoesn’ttaketoolong–usuallyaminutetogettherightsetting.
∙
∙
∙Onceitlooksgood–saveitasbg_banner.jpg（andreplacetheoriginal）inyours_citrix/b_mozilla_4directory.Thencopythatimagetotheotherdirectorystructure–sowehavetherightimageinbothpaths.
∙Forthetitleimage–thesizeshouldbesomethingclosetothesizeoftheotherimagesthatexistinthes_citrix/Imagesdirectory.Thedefaultwidthandheightofatypicalimage55wideby35high.
∙Resizethebaselogowegottomakeitclose.Inthiscase–sinceourlogoisalotwiderthanthedefault–Imadeitonly30pxhigh–andletthecorrespondingwidthbedoneautomaticallybasedonaspect.
∙
∙Savethisimageinthes_citrix/imagesdirectoriesandnameitreport_logo.jpg（Namingcustomlogosastandardnameisabestpracticesothatyoucantakeastandarddashboardandeasilyreplaceitwithacustomdirectory–aslongasyourcustomlogoimagesarenamedthesame.）
∙Restarttheservices.Onceyouhaverestartedtheservices–youshouldseeyournewlynameds_directoryrepresentedunderEditDashboard/DashboardProperties.
∙SelectyournewlynameddashboardandthenSave.Youshouldseeyourbannerlogo–andwe’llmakesomeothercosmeticchangesaswell.Noticeallofourapplicationnamesdon’tappearbecausetheyareinwhitefont.We’llfixthat.
∙IchangedanotherdashboardtousetheCitrixbrandingsoyoucanseetheeffectofthereport_logo.jpgfilethatwecreated.Priortochangingthestylename–everythingthatcurrentlysaysCitrix–usedtosayOracle.
∙ChangingPagetabcolors.We’llworkonthesenextsothatwegetallofthePSPworkoutoftheway.Thesetabsarerepresentedintheb_mozilla_4directoryby4differentimagefiles
2.ActivePageTab:
bg_tab.gif,subtabr.gif
3.InactivePages:
bg_tab_dim.gif,subdimtabr.gif
4.OpentheseinPSP.exe
5.
6.ForCitrixOnline–we’llusetheirgreenfortheactivetabandtheirbluecolorforalloftheinactivetabs.IliketopasteascreenshotoftheirwebpageintoPSPsoIcanusethelittlecolorgrabbertooltosetmycolorseasily.Alternatively–youcanusetheHTMLcolorswefoundearlier.
7.Beforewechangecolors–you’lltypicallyneedtoincreasethecolordepthsettinginPSPto16millioncolors.SelectColorsfromthemenu,IncreaseColorDepth,16million.（Youneedtodothisonceperimage.）
8.Hoverthedroppertooloverthegreen,rightandleftclicktosetthecolorastheforegroundandbackgroundcolor.
9.Then–clickthefloodfilliconandclickinthebg_tab.gifimagetopaintitgreen.
10.
11.Noticetheshadedborderdidn’tgetpainted.Clickagainintheunpaintedareatosetthatcolor.（Fordemo’s–Idon’tworryaboutsettingshadingcolors.Youcanplayaroundwithalightergreenforthisareaifyouwanted.）
12.Painttheassociatedsubtabr.gifimageaswell.
13.
14.Savethesetwoimages.Ifyougetamessageaboutonlybeingabletosavein256colors–that’sok.Justsayyes.
15.Repeattheprocessforthesubtabimagesandmakethoseblue.
16.Copytheimagesyousavedintotheotherassociatedsub-directory.（Thisisapain–but,trytokeepthedirectoriesinsyncespeciallywithimages.）TheCSSstylesheetchanges–youcandointheOC4Jpath–getthemalldone–THENcopythemovertotheotherdirectory.
17.TogglebacktoyourOBIEEDashboardandrefreshthewebpagetoseethechanges.Ifyoudon’tseeyourchanges–trydeletinghistory,and/orbrowsercache.Ifthatdoesn’twork–restartPresentationservicesandtheOC4Jservice.
18.
∙ChangingApplication/Dashboardtextcolor.
∙OpenPortalBanner.cssintheC:
\OracleBI\oc4j_bi\j2ee\home\applications\analytics\analytics\res\s_citrix\b_mozilla_4directory.
∙
.CurrentPortal:
link,
.CurrentPortal:
visited,
.CurrentPortal:
hover
{
font-size:
8pt;
color:
#ffffff;
text-decoration:
none;
font-weight:
bold;
}
Findthefollowingsection:
∙Changethecolortoourgreencolorwhichis:
4DA620
.CurrentPortal:
link,
.CurrentPortal:
visited,
.CurrentPortal:
hover
{
font-size:
8pt;
color:
#4DA620;
text-decoration:
none;
font-weight:
bold;
}
∙Savethefileandrefreshthedashboardtoseeyourchanges.
∙
.PortalLink:
link{
font-size:
8pt;
color:
#0f59a6;
text-decoration:
none;
font-weight:
normal;
}
.PortalLink:
visited{
font-size:
8pt;
color:
#0f59a6;
text-decoration:
none;
font-weight:
normal;
}
.PortalLink:
hover{
font-size:
8pt;
color:
#ff0000;
font-weight:
normal;
text-decoration:
underline;
}
.PortalLink:
link{
font-size:
8pt;
color:
#ffffff;
te
升级会员 