Click here to download our quick guide!

 

Content Styling Options

While BenchPrep comes set up with basic styling for all content, you can customize it with CSS to give your content a look and feel unique to your branding. Content is styled in HTML in our CSS editor. If you are not familiar with working with HTML and want to style your content outside of our What You See Is What You Get (WYSIWYG) editor, kindly submit a ticket to our support team who will assist you with getting in touch with our Professional Services team who can discuss options for adding custom content.

 

 

CSS content can be styled either at the course level or tenant level. For your convenience, you can set custom styling at the tenant level which will automatically apply to all content across your courses. Styling your content at the course level, will be specific and custom to each course. Just know that any style created at the course level will overwrite the styling set at the Tenant level However, it's easy to view and restore Tenant level styling to any Course that you have given custom styling to.

 

Where to Style Courses - Tenant Level

1. Log into your BenchPrep Account

2. Click the Menu option on the upper right side

3. Click BluePrint

4. On the left navigation panel, click Content Styles

This will allow you to style content for all courses globally.

 

Where to Style Courses - Course Level

1. Log into your BenchPrep Account

2. Click the Menu option on the upper right side

3. Click BluePrint

4. On the left navigation panel, click Courses

5. Click the title of the course you wish to style content for

6. Click Content Styles

---

What You See Is What You Get (WYSIWYG) Editor

You can also style content using our What You See Is What You Get (WYSIWYG) editor which comes preloaded with lots of features and templates for you to use. The WYSIWYG editor makes it easy for you to create and style content outside of HTML. In edit mode within modules you are working in (Lessons for example), you can (from left to right):

 

 

Row 1: Create your own div container with inline styles; Cut, Paste, Undo, Redo; Find, Replace, Select all.

Row 2: Format text using Bold, Italics, Underlining, Strikethroughs, Subscripts, Superscript, and Undo Format; Number, Bold, Indent, and Position text in your lesson; Link or Unlink text to external sites; Add an Image, Multimedia; Upload External Documents, Insert Horizontal Lines for Page Breaks, and Insert Special Characters. 

Row 3: Choose Formatting Styles; Paragraph Format with Headers; Select Font Size; Maximize, Show Blocks; Use Pre-Existing Templates to Display your Content; Insert Choices Template, Tables, Examples, Expander Widget, Popovers, Carousel, Content Reference Links; Insert Math Symbols and Math Solution Tables.

 

For additional assistance with creating custom content, submit a ticket to our Support Team who will gladly connect you with our Professional Services team!

 

 

Pro-Tips: 

• We recommend using Header 3 for styling your content headers for optimal display

• Save frequently at the top or bottom of your page by clicking “Update Lesson” and wait for the green notification at the top. Your work is not automatically saved as you progress so saving is important.

• You can also click “Delete” at the top to remove a lesson from the course.

Previewing Lessons

Every lesson page has a Preview tab:

• Mimic’s what the learner will see after a build.

• Currently, Preview WebApp shows how content will appear on the WebApp. 

• You should Preview on a Computer Device and not your phone or tablet for best optimization.

For more information regarding course styling, click here.