Adjusting Colors, Borders, and Display Spacing

In some cases, you might want to create a whole different look for a specific page, adding some visually appealing design or color.

In this article we will provide step by step instructions about:

• Editing with the Style Editor

• Changing / Adding Background Colors

• Changing Text Colors

• Adding Borders

• Adjusting Margins, Spacing, and Alignment

In this example, we will start with a fairly plain layout such as seen in the image below.

Open

Original Page

With the changes made to background colors, borders and spacing, our page now looks like this!

Open

Modified Page

Editing with the Style Editor

To complete the changes described in this page you will be using the Style Editor which is one of the Advanced Tools. Before beginning make sure you have enabled the Style Editor (see KB article Advanced Styling and Design Techniques) .

1. First open your page in Edit mode and open the Sidebar.
   
   

   1. Select Advanced Tools using the icon at the top of the Sidebar
      
      

   2. Select the Style Editor
      
      

Back to Menu

Changing/Adding Background Colors

After you have selected your element following the steps above, you can change the color of the background for that element.

1. To change the color of an element on a page, place your cursor on the page where you want the color added, and open the Style Editor:
   
   

   1. Scroll down and open the Colors panel
      
      

   2. Select the Background Color icon from the bar at the top of the Colors panel (first icon)
      
      

   3. The current background color of the element will display below the item
      
      

   4. Open the Basic Colors panel if it is not open
      
      

   5. Select a new color from the Basic Colors, or
      
      

   6. Open the Color Picker and select a color you want
      
      

Back to Menu

Changing Text Colors

In some cases, after changing the background color of the content block heading, the text does not contrast well and is difficult to read. You can change the color of text to make sure it is accessible.

1. To change the color of text using the Style Editor, first select the text you will be changing:
   
   

   1. Place your cursor in the field of the element you want to change (in this case the content block header)
      
      

   2. Select the appropriate element from the item list at the top of the Style Editor
      
      

   3. Highlight the text you want to change
      
      

Back to Menu

Adding Borders

Adding borders around a content block can draw attention to it.

1. To add a border using the Style Editor:
   
   

   1. Place your cursor in the content block you want to add a border around
      
      

   2. Select the appropriate element from the item list at the top of the Style Editor – make sure it is for the entire block
      
      

   3. Scroll down and open the Border and Background panel
      
      

       

Back to Menu

Adjusting Margins, Spacing and Alignment

Sometimes when you add background colors or borders to a content block, the text runs right up to the edge, making it more difficult to read. You can adjust the margins of an item – in other words the space around the item on the page, the padding – the space inside the edges of the item, and the Alignment of items within the item.

1. To make these modifications, using the Style Editor:
   
   

   1. Place your cursor in the content block. Select the appropriate element from the item list at the top of the Style Editor - make sure it is the entire block
      
      

   2. Scroll down to the Spacing and Alignment panel
      
      

   3. To set the margin (space between item and edges of page), you can either set them all equally with a preset (Small, Medium, or Large) or set each margin individually by selecting the cross icon
      
      

   4. To set the padding within the area (space between edges of item and the content), you can also select from a preset (Small, Medium, or Large), or set each edge individually
      
      

   5. You can determine how the items are aligned, floating items to the left, center or right.
      
      

Related articles

Visit the DesignPLUS Training Series Tutorials for more videos. For more step-by-step guides, visit the DesignPLUS User Guide. (These links will overwrite this page.)