ProProfs

ProProfs Knowledge Base is a Learning Management System (LMS) that is used to allow employees to learn more about the company, its systems, and its processes.

Cost

As of December 2023, ProProfs cost $240 a year for 100 pages in the knowledge base, but it also requires a minimum of 200 pages, making the lowest possible annual cost $480. There is also a free version which contains 90% of the features of the paid version.

Example Usage

In Fall 2023, my team Hackstreet Boys used ProProfs as the software to help our client onboard new employees faster while also allowing more experienced employees to have a centralized resource to reference on how to use the client's systems and how to perform certain jobs. We did this by storing onboarding documentation on the software and also creating templates the client could use to create documents on how to perform certain jobs.

Fixing potential buggy Mobile Vidoes

During our development on ProProfs, we ran into some bugs with the mobile site. The CSS and HTML were usable, but severely outdated. When viewed in portrait mode on Mobile, many videos would be massive instead of fitting the screen instead. In order to fix this issue, I had to add some CSS code to create a class that can then be applied to Iframe videos on the site. After this, the videos fit well on mobile in portrait and landscape mode.

I will include a quick code breakdown and then the steps I took to solve it ON PROPROFS.

Steps on ProProfs:

1. Go to https://handyband.helpdocsonline.com/login and login.
2. Click on Settings on the nav bar.
3. Click on “Page Footer.”
4. Here you can see the HTML code on the left and the CSS code on the right. Make sure “Advanced” is clicked!
5. Edit the code to fit your needs. If you are looking for the code that makes videos responsive on mobile, you may find it below.
6. Make sure you hit “save and done!”

CSS CODE

@media(max-width:767px) {

    .responsive-iframe {

        position: relative !important;

        height: 50vw !important;

    }

}

@media(max-width:480px) {

    .hiq-t .hb-textblock-description {

        padding: 2rem !important;

    }

    span.hb-category-title {

        height: auto !important;

        line-height: normal !important;

    }

    .hiq-t .hb-catTextCard {

        min-width: 93% !important;

    }

    .hiq-t .hb-hero-section {

        padding: 1rem !important;

        background-size: contain !important;

    }

}

Code Breakdown

@media (max-width: 767px) {

 .responsive-iframe {

 position: relative !important;

 height: 50vw !important;

 }

}

These styles apply when the viewport width is 767 pixels or less.

.responsive-iframe: Elements with this class will have a relative position and a height of 50% of the viewport width (50vw). The use of !important suggests an intention to override any existing styles.

@media (max-width: 480px) {

 .hiq-t .hb-textblock-description {

 padding: 2rem !important;

 }

 span.hb-category-title {

 height: auto !important;

 line-height: normal !important;

 }

 .hiq-t .hb-catTextCard {

 min-width: 93% !important;

 }

 .hiq-t .hb-hero-section {

 padding: 1rem !important;

 background-size: contain !important;

 }

}

These styles apply when the viewport width is 480 pixels or less.

.hiq-t .hb-textblock-description: Elements with this class will have a padding of 2rem.

span.hb-category-title: Spans with this class will have their height set to auto and line-height to normal.

.hiq-t .hb-catTextCard: Elements with this class will have a minimum width of 93%.

.hiq-t .hb-hero-section: Elements with this class will have a padding of 1rem and a background size set to contain. The !important is used to override any existing styles.

Enabling and Customizing a Single Sign On Log-In Screen

When you log into ProProfs for the first time, you will notice that each website does not have its own login screen. This puts privacy at risk because in theory this means that anyone can access your knowledge base if they just use Google to sign in. To combat this, it’s imperative to enable and customize the SSO feature that comes with ProProfs.

1. Log into ProProfs
2. Navigate to the settings tab
3. Scroll down and click on Login Screen

This will take you to the login page custom editor. Make sure that enable custom login is turned on. From here you can edit the theme, the URL, the form, the buttons, the background, add a logo, and match branding. Depending on your specific security measures, you also have the option to turn off the Google login under the login button tab. For ideas on how to style your login page, here’s how we styled ours: