Editing widget display

You can customize the following aspects of system or custom widgets for your homepages:

• Titlebar: text and font color.
• Titlebar background: fill type and color.
• Titlebar shadow effects: color, vertical size, and blur level.
• Titlebar border: style, color, and width.
• Widget shadow: color, vertical and horizontal size, shadow spread, and blur level.
• Widget border: style, color, and width.
• Widget shape: corner roundness or sharpness

Custom widgets provide additional options that enable you to create widgets that blend into the homepage background:

• Widget background: transparency.
• Widget padding: change the spacing around the content within the widget to blend more seamlessly into the background of the page.

A custom widget with a hidden titlebar, transparent background (with homepage background showing through), and rounded corners.

A custom widget with a gradient titlebar, titlebar dropshadow, large internal padding, and sharp corners. The page background is visible around the edges of the widget.

Access widget display settings

Do one of the following:

• On a homepage, click Style this widget from a widget menu.
• While editing a homepage, click on a widget in the Widgets area.
• If you want to customize the default display of a widget instead of its display on a specific homepage, access the widget from the Widgets tool. Click Customize [widget name] beside the widget you want to style.

Note  Widgets shared down from parent org units will retain the style from that level. Customizing a widget from the widget tool does not override the parent org style; instead it creates an additional override at the homepage level.

Edit widget display

To	Do this
Hide the titlebar	Clear the Display Titlebar check box
Prevent users from closing the widget on the homepage	Select the Prohibit minimizing widget check box
Set a custom title	Select the Custom radio button, and enter your text in the field
Change the font color of the title	Select a font color from the Color selector in the Titlebar area
Change the background of the titlebar	Select Gradient or Solid from the Fill Type drop-down list. Tip  A gradient fill type creates a three-dimensional look for your homepage. Select a color style: soft, light, or dark. These colors are set by your administrator. Or, select a custom color for your widget's titlebar background. Note  If you select a gradient fill type, two color selectors appear: the gradient's top color on the left, and bottom on the right.
Create a shadow effect on the titlebar	Select a font color from the Color selector in the Titlebar Shadow area Set a Vertical amount and a Blur level in the fields provided
Change the border on the titlebar	Clear the Display Border check box to remove the border Select a line type from the Border Style drop-down list Select a border color from the Color selector Select a border width from the Width drop-down list
Show the page background in a custom widget	Select the Transparent check box in the Widget Background area
Create a shadow effect on the widget	Select a shadow color from the Color selector Set the Vertical and Horizontal pixels, the Spread of the shadow, and the Blur level in the fields provided
Change the border of the widget	Clear the Display Border check box to remove the border Select a line type from the Border Style drop-down list Select a border color from the Color selector Select a border width from the Width drop-down list
Change the shape of the corners on the widget	Set a pixel value for each corner of the widget in the fields provided Tip  The higher the value, the more rounded the corners appear. The lower the value, the sharper the corners appear. The lowest value you can enter is 0.
Change the padding on custom widgets	Set a pixel value for each side of the widget in the fields provided

Note  To help you meet visual accessibility standards, there is a built-in WCAG (Web Content Accessibility Guideline) checker on the Widget Settings page. Be aware that if you choose a shade that does not meet these guidelines (for example, the contrast between the text color and the background color is too low), the check mark by WCAG AA will be replaced by a warning or error icon to alert you to possible accessibility issues.