Overview of using the Power Style Editor
Here is a high level overview of how to use the Power Style Editor section that is included with plaYEAH! PowerUp.
A custom page will be used to allow you to preview and save your design before making it live. On this page we are simulating what you would see inside the course player
You will use the Power Style Editor section inside of Site Builder to setup either a default style or course specific styles
The Power Style Editor will automatically generate a snippet of code that you will copy and paste into Site Footer Code
Getting to Know the Power Style Editor UI
Settings Area: The settings area to the left are essentially Site Builder setting groups that you should already be familiar with. Except these are specific settings for the Power Style Editor. Each settings group controls specific settings for areas that are on the course player preview section
Preview Section: The player preview section is just a preview. It is not a working course player. The "hamburger" menu does not function nor does the expand and collapse sections for the chapters and lessons. This is intended to simulate what the course player will look like if you paste the settings into the Site Footer section as described below.
Depending on your browser size, you may not see the "side" bar that you would normally see (and what is typically styled). To see the sidebar in preview, be sure to click the full screen icon at the top of the page:
Power Style Navbar: This contains a links back to the training videos and documentation for more detail. It also has the Copy Code button that you will use later.
Settings Reference
Style applies to
This settings group determine if the style you are setting and previewing is for all courses or a specific set of courses.
Applies to: This determines if the settings and preview applies to all courses or a specific list of courses
Course IDs: this is where you will be pasting course ids (when using course specific settings as explained later)
Product ID Helper: this provides quick reference to course ids (when using course specific settings as explained later)
Logo & Branding
This settings group controls what branding defaults are used in the preview. It also is good when you want to have fine grain control over padding and background color surrounding the logo
Branding Color & Logo image: This is just used for the preview window, set this to match what you have set for the actual course player. It is meant to be an "aid" in seeing how the actual course will look like from the preview window.
Logo Area: Change the background color behind the logo, padding around the logo, both or completely hide this section.
Logo Padding: Increases the default padding around the logo so it can fit better.
Logo BG Color: When used with Logo Area = Custom Color, Custtom Color & Padding - it will over-ride the default color (brand)
Branding: this whill show or hide the Thinkific branding at the bottom of the sidebar
Page Background
The page background settings group controls the area behind the sidebar menu and also behind the content area. It does not control the background of the content area. For that you can find that in the Content Background section
Type: controls what type of background the style will use
Default: Will use the standard player settings
Custom Color: Will use a solid color from the Color 1 setting
Custom Gradient: Will use a gradient (going from color 2 on top down to color 1 on bottom (like you see on the screenshot on this page)
Custom Image: Will use the image you upload as the background
Color 1 / Color 2 - Used on Custom color or Custom Gradient as described above.
Image: This will "fill" the background size. It is suggested to pick something subtle so the text is viewable on top of it. 1600x900 is a good size.
Sidemenu Top
This is for the area that sits above the chapters and lessons section
Course name
Default - will keep default settings
Custom Color or Font - will use a custom color (always) and font only if the font section is not empty and the font embed has been included in the Custom Fonts settings
Course color: used when using Custom Color or Font selection.
Font Family Course name - this will change the font being used for the course name section (as long as the Custom Color r Font setting is being used.
Progress Bar: Helpful when you are using a "course" for a "non-course" - ex: you have downloads or resources and don't want to confuse people by showing a "progress bar"
Custom Color: Will use the progress bar color instead of the default on
Hide: Will remove the progress bar area
Search
Custom Color - will use a custom color for the background. This is useful when switching the page background
Hide - will hide the search area