To customize the Universal Profile
1. Open webAdmin
2. Expand the Customization Center folder
3. Expand the Universal Profile folder
4. Select the Profiles option
5. From the CHOOSE CSS SELECTOR choose the element you wish to modify
6. Select the SAVE button to apply changes to the Universal Profile
* Note - if you want to disregard all changes, use the RESET button
CSS Summary:
Change Background Image
• #ProfileContainer, #LockCover - background color and image for Firefox and Chrome
* 6.1.1.0 Note - for IE 7 and IE 8 you will need to modify the Background Image property of the ".dj_ie body, .dj_ie #LockCover" selector.
If you have already made the .mobile body selector in 6.1.0.0 this property will still work as well for IE 7 and IE 8.
Additionally for IE 9 and above you will need to modify the Filter property of the “.ie_9_and_up #ProfileContainer, .ie_9_and_up #LockCover “ selector. The filter property will look like: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/wallpapers/globeinclouds.jpg',sizingMethod='scale')
To change the background image to hilltree.jpg the Filter property would become: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/wallpapers/hilltree.jpg',sizingMethod='scale')
* 6.1.0.0 Note - for IE you also have to add a new selector and a property
Add a new selector named ".mobile body"
Add field to the ".mobile body" selector for "Background Image"
Enter the path to the new image file
Click the "!" link to toggle the importance to on
* 6.0.9.0 Note - for IE you also have to add a new selector and a property
Add a new selector named ".mobile body"
Add field to the ".mobile body" selector for "Background"
Enter the path to the new image file
Click the "!" link to toggle the importance to on
Change Menu Bar
• .desktopIndicator - the font size and color of the menu text
• .desktopIndicatorContainer - background color and opacity of menu
• .desktopIndicatorRightScroller- background color and opacity of arrows
• .desktopIndicatorLeftScroller - background color and opacity of arrows
Change Icon Tiles
• .rotatein - speed of tile rotation when they appear on the Universal Profile desktop ( Webkit Animation Duration - Chrome and IE, Moz Animation Duration for Firefox, IE (cannot rotate)
• .rotateout2 - speed of tile rotation when they disappear on the Universal Profile desktop ( Webkit Animation Duration - Chrome and IE, Moz Animation Duration for Firefox, IE (cannot rotate)
• .tileBGNode - color and opacity of the icon tile
**To change the tile color for IE, customer will have to create a custom version of the background images (UniversalProfileTileBG.png and UniversalProfileTileBGHover.png).
**The issue is that IE is using an image for the tile background, while FF and chrome are using CSS. IE must use the image because it doesn't support rounded corners, transparency, and shadows properly. This is due, mostly to the fact that it runs in quirks mode.
• .hoverTile .tileBgNode - the opacity of the icon tiles on mouseover
• .tileTitle - the font and color of the text on the tile below the icon
Screen Text
• .homeCategory - home screen font and color of the vertical text
• .homeCategoryShadow - font and color of shadow for Internet Explorer
• .userName - font, color, and shadow of user ID in lower right-hand
• .userNameShadow - font and color of shadow for Internet Explorer
• .companyName - font, color, and shadow of Title in lower left-hand
• .companyNameShadow - font and color of shadow in Internet Explorer
Launcher Display
• .launchLogo - image displayed when launching application from a link
• .launchTitle - font and color of launch screen Title header text
Application Window
• .appTitleBar - background color, height, and opacity for application window top bar
• .appStatusBar - background color, height, and opacity for application window bottom bar
iPhone Specific Settings
• .phone .homeCategory - home screen font and color of the vertical text
• .phone .companyName - font, color, and shadow of Title in lower left-hand