Share via

Surprise your users with an April Fool's Day OWA 2003 theme

  • Article

Customizing OWA themes is quite simple to do. Here's an example of a theme I just put together, I call it "MOOWA":

The fun part about this theme isn't so much the graphics as the sounds: included are a "mooooooooo" for the new mail sound as well as a cowbell[1] for the reminder sound.

For more information on customizing themes, here is a comprehensive article. But if you want quick steps on how to get the above one up and running, here they are:

  1. Log into OWA as a test user with IE. Go to the Options page and choose the "Silver" theme.
  2. Download the zip file and save it to your server. Unzip it.
  3. Copy reminder.wav and notify.wav to C:\Program Files\Exchsrvr\Exchweb\Img, or wherever Exchange is installed on your server. Make sure to make a copy of the existing ones first.
  4. Go to C:\Program Files\ExchSrvr\Exchweb\Themes
  5. Make a copy of the "2" folder and name it 2.original
  6. Copy the files from the zip into the "2" folder, overwriting the ones already there.
  7. Use notepad and open "OWAColors.css" in the "2" folder and make the following changes:
Explanation Before After
Puts the cowprint behind the list of messages .msgViewerCont, .msgViewerGroupCont{ background-color:white;} .msgViewerCont, .msgViewerGroupCont{ background-color:white; background-image:url(/exchweb/themes/2/logo.gif);}
Makes the bar above the message view black. .fldrTitleBar{ background-color:#706F90;} .fldrTitleBar{ background-color:#000000;}
Makes the background behind the MOOWA logo in the upper-left black. .nbTableMain{ background-color:#706F90;} .nbTableMain{ background-color:#000000;}
Makes sure that the column you're currently sorting on still shows the background image .vwSortCol{ background-color:#F5F5F6;} .vwSortCol{}

All that's left to do is Ctrl+Refresh IE while logged in as the test user from step 1 to make sure everything's kosher.

[1] While testing the theme, I demo'd the sounds for my husband. He said "Play that one again" about the reminder sound, which I did. Then he said "It needs more cowbell."

Comments

  • Anonymous
    January 01, 2003
    PingBack from https://blogs.technet.com:443/steve_lamb/archive/2006/06/15/436082.aspx
  • Anonymous
    January 01, 2003
    Today this list is longer, since I hadn't the time to post it last week. Sorry...

    Exchange on NAS:...
  • Anonymous
    January 01, 2003
    I just posted instructions on how to create this OWA theme on my blog:

    In addition to the...
  • Anonymous
    January 01, 2003
    I just posted instructions on how to create this OWA theme on my blog:

    In addition to the...
  • Anonymous
    April 02, 2006
    KC, will E12 too support OWA themes?
  • Anonymous
    April 25, 2006
    KC, I really like moowa but I am having trouble with the background and the sounds, I followed your instructions by renaming and repalcing the wav files in exchsrvrexchwebimg and I modified the css as detailed and I get the toolbar fine without moo notification on new mail and withouht the background, I did sway a little by creating a new key in themese for moowa along with my xbox theme and modified the css to include the path, any chance you can review mine to see whats up??? Thanks Rob Exchnage Fan!


    /* Moowa theme By Rob K /
    .dlgBody, .noteBody, .bdyOptions, .bdySpell, .bdyRules, .bdyFontEdit, .bdyDatePkr
    {
    background-color:#E8E8F0;
    }
    .mainBody
    {
    background-color:#706F90;
    }
    .msgViewer
    {
    background-color:white;
    }
    .msgViewerCont, .msgViewerGroupCont
    {
    background-color:white;
    background-image:url(/exchweb/themes/Moowa/logo.gif);
    }
    .msgHeader
    {
    background-color:transparent;
    }
    .previewHdr
    {
    background-color:transparent;
    }
    .recipWell
    {
    border-bottom-color:#A5ACB2;
    background-color:white;
    }
    .recipBox
    {
    background-color:white;
    }
    .ipFlat, .recipBox, .MSGBODY, .txtBody, .attachList
    {
    border-color:#A5ACB2;
    }
    .cbToolbar
    {
    background-image:url(/exchweb/themes/moowa/tool-bkgd.gif);
    border-bottom-color:#706F90;
    background-color:#C8C9DE;
    }
    .tbDivider
    {
    border-color:#8488A2;
    }
    .tbButton, .tbButtonDown, .tbButtonRaise
    {
    color:black;
    }
    .tbButtonDown
    {
    background-color:#FFD695;
    }
    .tbButtonDown:hover
    {
    color:white;
    background-color:#FF9D03;
    }
    .tbButtonRaise
    {
    background-color:#FFD695;
    }
    .cbSubmenuItem
    {
    color:black;
    border-color:#F6F6FA;
    }
    .fbButton
    {
    border-color:#F6F6FA;
    }
    .cbSubmenu
    {
    background-color:#F6F6FA;
    border-color:white;
    color:black;
    }
    .viewBody
    {
    background-color:white;
    }
    .tblMsgBody
    {
    background-color:white;
    border-color:#707292 #9A9CB2 #9A9CB2 #707292;
    }
    .txtBody
    {
    background-color:white;
    }
    .FORMATBAR
    {
    background-color:#C8C9DE;
    }
    .rnStatusBar
    {
    background-color:infobackground;
    color:infotext;
    }
    .rnProgressBar
    {
    background-color:#E8E8F0;
    color:black;
    }
    .rnSecBar
    {
    background-color:transparent;
    }
    .grpLEFT
    {
    border-left-color:white;
    }
    .grpRIGHT
    {
    border-right-color:white;
    }
    .grpTop
    {
    border-top-color:white;
    }
    .grpBottom
    {
    border-bottom-color:white;
    }
    .bdyView
    {
    background-color:#E8E8F0;
    }
    .tabselected
    {
    background-color:#E8E8F0;
    border-color:white;
    border-right-color:#9A9CB2;
    }
    .tabsunselected
    {
    background-color:#DBDBE9;
    border-color:#9A9CB2;
    border-bottom-color:white;
    border-top-color:white;
    }
    .tabsnone
    {
    border-bottom-color:white;
    }
    .tabBkgd
    {
    background-color:#C8C9DE;
    }
    .tabdiv
    {
    border-color:white #9A9CB2 #9A9CB2 white;
    background-color:#E8E8F0;
    }
    .apptTdDatePicker
    {
    border-top-color:#8488A2;
    border-bottom-color:#8488A2;
    }
    .fldrTitleBar
    {
    background-color:#000000;
    }
    .vwHdrTD, .vwHdr
    {
    border-color:white #9A9CB2 #9A9CB2 white;
    }
    .vwHdrSrtd
    {
    background-color:#9A9CB2;
    color:white;
    border-color:#707292 white white #707292;
    }
    .vwHdrTR, .vwHdr, .tblHdr
    {
    background-color:#E4E4EA;
    }
    .vwHdrBrdr1
    {
    background-color:#C8CAD6;
    }
    .vwHdrBrdr2
    {
    background-color:#9A9CB2;
    }
    .vwHdrBrdr3
    {
    background-color:#707292;
    }
    .tbButtonRaise,.tbButton A:hover, .tbButton:hover
    {
    background-color:#FFD695;
    }
    .cbSubmenuItem A:hover, .cbSubmenuItem:hover
    {
    background-color:#FFD695;
    }
    .attachList
    {
    background-color:white;
    }
    .divRcpResRIn
    {
    color: black;
    }
    .divRcpResROut
    {
    color:black;
    }
    .divRcpResCIn
    {
    color: black;
    }
    .divRcpResCOut
    {
    color:black;
    }
    .divRcpUnresRIn
    {
    color:red;
    }
    .divRcpUnresROut
    {
    COLOR:red;
    }
    .divRcpUnresCIn
    {
    color:red;
    }
    .divRcpUnresCOut
    {
    color:red;
    }
    .divRcpResC
    {
    color:black;
    }
    .divRcpUnresC
    {
    color:red;
    }
    .divContextMenu
    {
    background-color:#F6F6FA;
    }
    .divContextMenuItem
    {
       padding-top:3px;
       padding-bottom:3px;
       padding-left:10px;
       padding-right:10px;
       cursor:default;
       width:100%;
    }
    .divCtxtMenu
    {
    background-color:#F6F6FA;
    border-color:white #707292 #9A9CB2 white;
    }
    .purpleFlg
    {
    background-color:#A5587C;
    }
    .orangeFlg
    {
    background-color:#FF8C5A;
    }
    .greenFlg
    {
    background-color:#8BB467;
    }
    .yellowFlg
    {
    background-color:#FFC160;
    }
    .blueFlg
    {
    background-color:#5C83B4;
    }
    .redFlg
    {
    background-color:#CF5D60;
    }
    .completeFlg
    {
    background-color:#FFFFFF;
    }
    .noFlg
    {
    background-color:#EEEEEE;
    }
    .previewBody
    {
    background-color:white;
    border-color:#4D535D;
    }
    .vwTbl
    {
    background-color:#706F90;
    }
    .vwSortCol
    {
    }
    .vwPrvwTD
    {
    background-color:#EAEAF3;
    }
    .vwFldrTtl
    {
    color:#FFFFFF;
    }
    .vwName
    {
    color:#FFFFFF;
    }
    .vwItemSep
    {
    border-bottom-color:#DDDDDD;
    }
    .fldDisabled
    {
      background-color:transparent;
    }
    .THeader
    {
    background-color:#706F90;
    color:#FFFFFF;
    }
    .rulesTableContainer
    {
    BACKGROUND-COLOR:#FFFFFF;
    BORDER-LEFT-color:#9A9CB2;
    BORDER-RIGHT-color:#9A9CB2;
    }
    .rulesHeader
    {
    BACKGROUND-COLOR:#E4E4EA;
    BORDER-COLOR:white #9A9CB2 #9A9CB2 white;
    }
    .ruleNotSupported
    {
    COLOR:graytext;
    }
    .ruleBroken
    {
    COLOR:red;
    }
    .DLCertMissing
    {
    COLOR:gray;
    }
    .selRow
    {
    color:black;
    background-color:#B2B4BF;
    }
    .unselRow
    {
    color:black;
    background-color:transparent;
    }
    .shdwRow
    {
    background-color:#E4E4EA;
    color:black;
    }
    .fldset
    {
    color:#0046D5;
    }
    .ctxmnuBar
    {
    background-color:#C5C8D1;
    color:#F6F6FA;
    }
    .ctxmnuMnu
    {
    background-color:#FEDB90;
    color:black;
    }
    .srchBody
    {
    background-color:#E8E8F0;
    }
    .trSelItem
    {
    color:black;
    background-color:#B2B4BF;
    }
    .trUnselItem
    {
    color:black;
    background-color:transparent;
    }
    .nbLabel
    {
    background-color:#8488A2;
    background-image:url(/exchweb/themes/moowa/nb-bkgd.gif);
    }
    .nbLabel
    {
    border-color:#706F90;
    }
    .nbTglTD
    {
    border-color:#A7A5BF;
    background-image:url(/exchweb/themes/moowa/tool-bkgd.gif);
    background-color:#C8C9DE;
    }
    .nbTglQLTD
    {
    border-color:#A7A5BF;
    background-image:url(/exchweb/themes/moowa/nb-ql-tgl.gif);
    background-color:#C8C9DE;
    }
    .treeFolder, .nbTreeProgress
    {
    border-color:#B3B1C8;
    }
    .nbHref
    {
    color:black;
    }
    .nbHref:hover, .nbTglHref:hover, .aQL:hover, .aFU:hover
    {
    background-color:#FEDB90;
    background-image:url(/exchweb/themes/moowa/nb-sel-bkgd.gif);
    }
    .nbTableMain
    {
    background-color:#000000;
    }
    .nbDropMenu
    {
    background-color:#F6F6FA;
    border-color:white #707292 #9A9CB2 white;
    }
    .treeFolder, .nbTreeProgress
    {
    background-color:white;
    color:black;
    }
    .notification
    {
    background-color:#E8E8F0;
    }
    .fldName
    {
    color:black;
    }
    .fldUrdCt
    {
    color:blue;
    }
    .fldCntCt
    {
    color:green;
    }
    .dlgTree
    {
    background-color:white;
    border-color:#707292 white white #707292;
    }
    .galBody
    {
    background-color:#E8E8F0;
    }
    .rowselected
    {
    background-color:#B2B4BF;
    color:black;
    }
    .rowunselected
    {
    background-color:transparent;
    color:black;
    }
    .gallistheading
    {
    background-color:#E4E4EA;
    }
    .galInputArea
    {
    background-color:#E8E8F0;
    }
    .divgaltable
    {
    background-color:white;
    border-color:black;
    }
    .galButtons
    {
    background-color:#E8E8F0;
    }
    .gallBody
    {
    background-color:#E8E8F0;
    }
    .gallClsTable
    {
    background-color:#E8E8F0;
    }
    .gallClsTextField
    {
    background-color:#E8E8F0;
    }
    .enBody
    {
    background-color:#E8E8F0;
    }
    .enClsTable
    {
    background-color:#E8E8F0;
    }
    .rmndrBODY
    {
    background-color:#E8E8F0;
    }
    .rmndrWarning
    {
    background-color: palegoldenrod;
    }
    .rmndrICell
    {
    background-color:#E8E8F0;
    }
    .rmndrCol1hd
    {
    border-right-color:black;
    border-left-color:black;
    }
    .rmndrRowSel
    {
    background-Color:#B2B4BF;
    color:black;
    }
    .crdHeader
    {
    background-color:#E4E4EA;
    color:black;
    }
    .groupHdr
    {
    background-color:#E4E4EA;
    color:black;
    border-color:white #9A9CB2 #9A9CB2 white;
    }
    .ctxtMenu
    {
    background-color:#F6F6FA;
    color:#B2B4BF;
    border-color:white;
    }
    /     CTRL_CALENDAR.CSS /
    .cpMainTable
    {
    border-color:black;
    background-color:white;
    }
    .cpDayLettersCell
    {
    border-bottom-color:#B2B4BF;
    }
    .cpTopRow
    {
    background-color:#E4E4EA;
    color:black;
    }
    .cpTodaysDateCell
    {
    border-color:red;
    color:red;
    }
    .cpActiveDateCell,.cpInactiveDateCell
    {
    xborder-color:white;
    }
    .cpActiveDateCell
    {
    color:black;
    }
    .cpInactiveDateCell
    {
    color:lightgrey;
    }
    .cpSelectedDateCell
    {
    background-color:#E4E4EA;
    color:black;
    }
    .cpWeekNumberCell
    {
    border-right-color:#B2B4BF;
    }
    .cpKeyNavCell1
    {
    border-color:black;
    color:black;
    }
    /     CTRL_CALENDARVIEW.CSS */
    .divMins
    {
    border-color:green;
    }
    .dailyViewCell
    {
    background-color: #FFE3A5;
    color: black;
    }
    .calDateHeadingCell,.dailyAllDayCell
    {
    background-color:#E4E4EA;
    }
    .dailyAllDayCell
    {
    background-color:#706F90;
    }
    .dailyAllDayAppointment,.dailySelectedAllDayAppointment
    {
    background-color:#E4E4EA;
    border-color:black;
    }
    .dailySelectedAllDayAppointment
    {
    background-color:#B2B4BF;
    color:black;
    }
    .calDateHeadingText1,.calDateHeadingText2,.calDateHeadingText3,.calDateHeadingText4,.calDateHeadingText5,.calDateHeadingText6,.calDateHeadingText7
    {
    background-color:#E4E4EA;
    }
    .dailyContainer1,.dailyContainer2,.dailyContainer3,.dailyContainer4,.dailyContainer5,.dailyContainer6,.dailyContainer7
    {
    border-color:black;
    }
    .dailyAllDayContainer
    {
    background-color:#706F90;
    }
    .dailyBackgroundTable
    {
    background-color:#FFE3A5;
    border-color:#AAAAAA;
    }
    .dailyHoursCell
    {
    border-color:#AAAAAA;
    background-color:#E4E4EA;
    }
    .dailyMinsCell
    {
    border-color:#AAAAAA;
    background-color:#E4E4EA;
    }
    .dailyAppt
    {
    background-color:white;
    border-color:black;
    }
    .dailyApptCell
    {
    border-color:#AAAAAA;
    border-bottom-color:#AAAAAA;
    }
    .dailyCellWorking
    {
    background-color:#FFF3BD;
    }
    .dailyCellEven
    {
    border-bottom-color:#AAAAAA;
    }
    .colorBusy
    {
    background-color:#0000FF;
    }
    .colorFree
    {
    background-color:lightgrey;
    }
    .colorTentative
    {
    background-color:#99CCFF;
    }
    .colorOOF
    {
    background-color:#660066;
    }
    .dailyRow
    {
    background-color:#BCBDDA;
    }
    .weeklyMainTable
    {
    background-color:white;
    border-color:black;
    }
    .weeklyDateCell, .weeklyWeekendDateCell
    {
    border-color:black;
    }
    .weeklySelectedAppointment
    {
    background-color:#B2B4BF;
    color:black;
    }
    .weeklySelectedAlldayAppointment
    {
    background-color:#B2B4BF;
    color:black;
    }
    .weeklyAlldayAppointment
    {
    border-color:black;
    background-color:white;
    color:black;
    }
    .weeklyDateHeader, .weeklySelectedDateHeader
    {
    border-color:#DDDEED;
    background-color:#BCBDDA;
    color:black;
    }
    .weeklySelectedDateHeader
    {
    background-color:#B2B4BF;
    color:white;
    }
    .monthlyDateHeader, .monthlySelectedDateHeader
    {
    background-color:#BCBDDA;
    color:black;
    border-color:#DDDEED;
    }
    .monthlyNextPrevDateHeader
    {
    background-color:white;
    color:black;
    }
    .monthlySelectedDateHeader
    {
    background-color:#B2B4BF;
    color:white;
    }
    .monthlyDateBody, .monthlyNextPrevDateBody
    {
    background-color:white;
    }
    .monthlyNextPrevDateBody
    {
    background-color:#e0e0e0;
    }
    .monthlyDateCell, .monthlyWeekendDateCell
    {
    border-color:#DDDEED;
    width:100%;
    height:33%;
    }
    .monthlyWeekendDateCell
    {
    background-color:cyan;
    }
    .monthlyDayHeader
    {
    background-color:#BCBDDA;
    }
    .monthlyDayTitlesCell
    {
    background-color:#BCBDDA;
    border-color:black;
    }
    .monthlySelectedAppointment
    {
    background-color:#B2B4BF;
    color:black;
    }
    .monthlySelectedAlldayAppointment
    {
    background-color:#B2B4BF;
    color:black;
    }
    .monthlyAlldayAppointment
    {
    border-color:BLACK;
    background-color:white;
    }
    / * CTRL_FREEBUSY.CSS */
    .fb_behavior
    {
    background-color:transparent;
    }
    .fb_splitter_behavior
    {
    background-color:transparent;
    }
    .fbtime
    {
    background-color:#D5D6DF;
    }
    .tdUsrBkgd
    {
    background-color:#D5D6DF;
    }
    .fb_span_div
    {
    background-color:transparent;
    }
    .fb_color_div
    {
    background-color:lightyellow;
    }
    .fbtable
    {
    background-color:transparent;
    }
    .fbbodyLTR, .fbbodyRTL
    {
    background-color:transparent;
    border-color:white;
    }
    .row
    {
    border-bottom-color:lightgrey;
    }
    .recipBg, .dvAllAttend
    {
    background-color:#B4B5C4;
    }
    .tr
    {
    border-color:gray;
    background-color:transparent;
    }
    .recip
    {
    background-color:white;
    }
    .busy, .busyClr
    {
    background-color:darkblue;
    }
    .tent,.tentClr
    {
    background-color:lightblue;
    }
    .oof, .oofClr
    {
    background-color:purple;
    }
    .unknownClr
    {
    background-color:c0c0c0;
    }
    .colAM
    {
    background-color:#FFE3A5;
    }
    .colPM
    {
    background-color:#FFF3BD;
    }
    .hrdivbottom
    {
    background-color:white;
    }
    .tblSigWarning
    {
    border-top-color:#F8F17A;
    border-bottom-color:#F8F17A;
    }
    .tblSigInvalid
    {
    border-top-color:red;
    border-bottom-color:red;
    }
    .btnSig
    {
    border-color:#E8E8F0;
    }
    .btnSigPreview
    {
    border-color:white;
    }
    .btnEnc
    {
    border-color:#E8E8F0;
    }
    .btnEncPreview
    {
    border-color:white;
    }
    .btnSigHover
    {
    border-color:white #9A9CB2 #9A9CB2 white;
    }
    .btnSigDown
    {
    border-color:#9A9CB2 white white #9A9CB2;
    }
    .sigInfoInput
    {
    background-color:transparent;
    }
    .sigInfoTable
    {
    background-color:transparent;
    }

  • Anonymous
    April 25, 2006
    Rob, to troubleshoot this, start by isolating the individual changes. First revert to the default themes and just try replacing the WAV files - make sure that works. Then replace the upper-left-hand graphic in an existing theme (e.g. rename "2" to 2.original and do any edits there). Then do the CSS changes in an existing theme. Then once you know everything works, go onto adding a custom theme instead of replacing one of the defaults.
  • Anonymous
    June 10, 2006
    I have the same issue. I created the XBox theme, and some other custom ones I have made. When I found this article I had hoped to change the sounds and pop-up's for each individual theme, is this possable? Was this resolved?

    Thank you for showing me how to make sure that the column you're currently sorting on still shows the background image
  • Anonymous
    June 10, 2006
    Unfortunately no, the sounds are per-server in owa2k3.