Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Panel
bgColor#FFF0B3

ID&D KB How-to

...

Guide

...

Working together to enhance teaching & learning. If you need additional assistance, please reach out to the ID&D team.

The Style editor helps you perform advanced editing of elements within your canvas page. You have the ability to adjust colors, borders, margins and many more items with the Style editor. You can also build, save, and edit your own unique Quick Styles, for ease of use in the future.

While the option to create and save custom styles was available previously, DesignPLUS adds the following features:

  • Ability to save styles for specific elements and as global styles

  • Color scheme suggestions

  • Updated WCAG 2.1 contrast checker

Please consider the following when choosing to use the Style Editor:

  • Styles that you create with the Style Editor are saved to you as a user. They will not be available to other users unless you share them. 

  • You can apply styles from the Style Editor to an entire tab panel; however, the tab panels are contained in a wrapper that will not allow for styles to expand past the border (such as box shadows).

...

  • If you'd like a tab panel to have a box shadow, you will need to apply 10px of padding to the tabs panel wrapper div as well.  This provides the space needed to make the shadow visible.

The video below reviews the wide variety of capabilities you have when using the Style Editor. The KB articles in this section will provide you step-by-step instructions on the use of these features.

Iframe
srchttps://play.vidyard.com/KA7c35kDAmCuWRkU1P1UeR.

...

html
width500
titleDesignPLUS: Style Editor
classvidyard_iframe
height280

Tip

Tip!

You can click on the images in this article to see them larger and with more detail.

Enabling the Advanced Toolsets

You can either choose to enable just the Style Editor or all advanced editing tools by following the steps below.

...

titleTip!

...

Warning

Note: This tool must be enabled before it can be accessed. 

  1. Launch the DesignPLUS Sidebar. (See our KB article: Accessing the Content Editor Sidebar

...

  1. for instructions)

...


    1. Click on the settings icon (3 dots) in the upper right corner

    2. Select the User Settings option

      select User.pngImage Added

  1. Scroll down to the section with the heading

...

  1. Enable all Advanced

...

width80%

...

  1. Tools

    1. To enable all advanced tools

...

    1. select the tick box at the top, or

...

    1. Enable individual tools by selecting the tick box in front of each item

      style2.pngImage Added

  1. Scroll back to the top of the sidebar

...


    1. The Advanced

...

    1. Tools icon will now appear in the tabs bar

    2. Close the User Settings by clicking on the “x”

      style3.pngImage Added

  1. Click on the Advanced Tools Icon.

...

  1. The Advanced Tools category will open. You will see the Style Editor icon available (plus any other advanced tools you have enabled).

...


  1. style4.pngImage Added

...

...

Child pages (Children Display)

...

depth

...

...

2
Panel
borderColor#8A0000
bgColor#FFDD80
titleColor#FFC420
borderWidth1
titleBGColor#8A0000
borderStylesolid
titleSummary of Steps
Expand
titleEnabling Advanced Tools
  1. Launch the DesignPLUS Sidebar. 
    1. Click on the settings icon (3 dots)
    2. Select the User Settings option
  2. Scroll down to the section with the heading “Enable all Advanced Tools”
    1. Select to enable all advanced tools by clicking the tick box at the top, or
    2. Select only the Style Editor
  3. Scroll back to the top of the sidebar
    1. The Advanced tools icon will now appear in the tabs bar
    2. Close the User Settings by clicking on the “x”
  4. Click on the Advanced Tools Icon. You will see the Style Editor icon available (plus any other advanced tools you have enabled).
pageDesignPLUS Tools for MyClasses

...

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.)

...