Previous / Next

How To Set Single Borders on BorderContainer

Create a BorderContainer with no gutters

  1. Drag a BorderContainer onto a blank canvas.
  2. In the Border Container Dialog, select Headline, Top, Left, Center.
  3. Set a light background color on top and left panes (so you can see them after turning off gutters).
  4. Turn the splitter off on top and left panes (Splitter is in the Widget Specific section).
  5. On the BorderContainer, turn gutters off (gutters is in the Widget Specific section).
  6. Note: all borders will now be gone on BorderContainer.

Setting the outer border

  1. Go to Outline palette and select BorderContainer
  2. In Properties palette go to Border section and select show: props
  3. Click the ">" icon to the far right of border-width:
  4. Set Apply to: element.style
  5. Set width to 1px.
  6. Close Apply-to window.
  7. Click the ">" icon to the far right of border-style:
  8. Set Apply to: element.style
  9. Set style to "solid".
  10. Close Apply-to window.
  11. Click the ">" icon to the far right of border-color:
  12. Set Apply-to: element.style.
  13. Click on border-color to open ColorPicker. The color will default to #b5bcc7.
  14. Click off the Color Picker to set the color and close it.

Setting the inner borders

  1. Set the bottom border on the header pane:
  2. Select the top content pane
  3. Under Borders select show: side
  4. Verify Apply-to: element.style
  5. Set border-bottom: 1px solid #b5bcc7

Set the right-side border on the left pane

  1. Select the side content pane
  2. Under Borders select show: side
  3. Verify Apply-to: element.style
  4. Set border-right: 1px solid #b5bcc7
  5. Remove the background color from the top and side panes.
  6. Preview in browser.

Previous / Next