Skip to content
English
Customer portal
Submit a request
  • There are no suggestions because the search field is empty.

Logo Best Practices

How do I edit the logo to be the right size in Masthead?

How do I edit the logo to be the right size in Masthead? My logo is too large for the masthead. My logo or icon is off center in the Masthead. What is an acceptable size for logos on the home and application page of the LMS. Can I edit the logo in CSS editor to be the right size for viewing?

 

Masthead

Home page logo:

  • Upload at any size
  • Can control sizing through CSS on home page

Application logo:

  • Icon - optimal size to avoid cropping: 38 x 30 pixels
  • Logo - optimal size to avoid cropping: 105 x 30
  • Alternatively, upload only logo at 200 x 80 pixels

Home Page Updates (requires knowledge of CSS and HTML)

Changing banner image:

  • Image needs to be hosted somewhere

○    Use the image upload tool on the home page editor

○Ask Joe/Brian to upload image to portal (I’ve not found a way to this from the admin) and provide path

○    Ask client to upload image on their server and provide path

○Upload image to our WP Engine server (where our marketing websites are hosted) and copy path

  • Recommended image size: 1600 x 100 pixels
  • From admin, navigate to Interface & Layout > Home Page
  • In the top left of the editor, click the “Source” button to toggle to the source code view
  • Scroll down until you find the commented line labeled “Banner”
  • Find the following class:

○  .home-banner#banner-img1

○    You’ll see the image path is set here. Swap it out for the updated image path

(wherever it was uploaded to in the first step)

○    Repeat this step for classes .home-banner#banner-img2 and

home-banner#banner-img3 to change other images in the slider

Dashboard (requires knowledge of CSS and HTML)

Updating Widget Header Color:

  • From the admin, navigate to Interface & Layout > CSS Editor
  • On the left-hand side, select the “DashboardWidgetContainer.css” file
  • In the left editor, select all and delete
  • Copy and paste the following code in:

.WidgetHeader {

background:#096394;

}

  • Replace the HEX code with your desired color
  • If the background color you chose is light, you may need to change the widget header text color to black to improve readability. Place in the following code:

.WidgetHeader p { color:black; }