This Guide is for the legacy DesignPLUS sidebar (installed before July 2023). Visit the Current User Guide for information for newer installations or those who have upgraded.

Create and Apply Box Styles

Customize the Style Create and Apply Box Styles

The Box Styles tool allows you to create custom border styles for almost any element.

Interface

Box styles interface with text preview box styles interface with image preview

Apply To
Select the element you want to style as a box.
Saved Styles
Apply previously saved box style to the current element (only visible if saved styles exist).
Alignment
Left, center or right align your box.
Padding
Add padding to the current element and set the background color (works with Colors 2 Beta color picker).
Border Width
Adjust the width of the border for the box. Change the border color (works with Colors 2 Beta color picker).
Width
Change the width of the box in pixels or percentage.
Border Radius
Round the corners of your box.
Shadows
Choose from a variety of drop down shadows.
Clear Styles
Remove inline CSS and CSS classes from the current element.
Save Style
Save your custom style to easily apply to other elements.
Sample Text/Image preview
This area will update to show you a preview of your selected options.

Turning on the Box Styles Tool

 This is an Advanced level Design Tool

To turn this tool:

  1. Click the Design Tools Settings icon  in the Jump Menu
  2. Do one of the following:
    1. Choose  Advanced from the Select a Comfort Level area
    2. Manually turn on the Box Styles tool by clicking the switch below the tool name
  3. Close the Design Tools Settings

Building a Box Style

To create a styled box, follow these steps:

  1. Open the page for editing.
  2. Click Launch Design Tools.
  3. In the Design Tools menu, click Customize the Style.
  4. Click Current Element Style.
  5. Click the Box Styles tool to expand tool if needed.
  6. Place your cursor within the element you want to style.
  7. Use the Apply To controls if you want to target a parent element (hovering over buttons in the Apply To controls highlights that element in the content).
  8. Adjust the box style as desired.
  9. On the content page, click Save.