Custom Pages --> Fun With CSS

  • 7 January 2022
  • 11 replies
  • 1147 views

Userlevel 7
Badge +5

We are about a month into our onboarding now so I am having a fair amount of fun tinkering around with some custom pages and thought I would share as others have here. While this is not yet our final product, I think it will do a nice job of providing a look at what is possible. What you see below is with a single HTML/WYSIWYG Widget

Some features:

  1. We’ve hidden the native header and footer.
  2. A space for an “Announcement Banner”
  3. Both Docebo internal and external links along the left
  4. Embedded YouTube
  5. A place for longer messages or articles
  6. General information panels on the right side
  7. Custom footers

 

gstager 2 years ago

For the CSS - I leveraged the power of the w3.css library to do the heavy lifting which comes at the right cost (FREE) and is well documented and relatively simple to work with. I did throw in a little of my own to clean up some conflicts but it wasn’t too bad.

You can look into it here →  https://www.w3schools.com/w3css/default.asp  ← if you are not already familiar with it.  **Is it OK to share that…?** Sorry if that violates something.

I then tweaked the peaches out of one of their templates  (Social Media Template)  →  https://www.w3schools.com/w3css/w3css_templates.asp

It started out as a  “I wonder how well this would work - experiment” and turned into something that I thought looked pretty decent. At least - I thought it was good enough to share with the marketing/design team as an example of what could be done - they will end up making the ultimate decisions on how they want to lay things out.

View original

11 replies

Userlevel 7
Badge +7

Hi @gstager looks great...can you share the code you used?

Userlevel 7
Badge +5

For the CSS - I leveraged the power of the w3.css library to do the heavy lifting which comes at the right cost (FREE) and is well documented and relatively simple to work with. I did throw in a little of my own to clean up some conflicts but it wasn’t too bad.

You can look into it here →  https://www.w3schools.com/w3css/default.asp  ← if you are not already familiar with it.  **Is it OK to share that…?** Sorry if that violates something.

I then tweaked the peaches out of one of their templates  (Social Media Template)  →  https://www.w3schools.com/w3css/w3css_templates.asp

It started out as a  “I wonder how well this would work - experiment” and turned into something that I thought looked pretty decent. At least - I thought it was good enough to share with the marketing/design team as an example of what could be done - they will end up making the ultimate decisions on how they want to lay things out.

Looks great! What does the ‘New To The Portal?’ button take you to?

Userlevel 7
Badge +5

Looks great! What does the ‘New To The Portal?’ button take you to?

 

New to the Portal?  would be a new page where they can find information about how to navigate, how to enroll in a course, where to find help, FAQs, etc.

Think of it as a tour or an orientation.

Userlevel 7
Badge +3

Very nice! Are you doing these locally or in the site wide CSS setup for the most part? Wondering how you are handling having it so customized with mobile app if you are not using locally?

Userlevel 7
Badge +5

@Bfarkas - CSS was placed in the Branding and Look area and then using an HTML/WYSIWYG widget in the Manage Pages area made the page.

Userlevel 7
Badge +3

@Bfarkas - CSS was placed in the Branding and Look area and then using an HTML/WYSIWYG widget in the Manage Pages area made the page.

That’s what I thought, so none of it really goes through to the mobile app experience then correct? So you essentially have two different user expereinces?

Userlevel 7
Badge +5

@Bfarkas - our learners are primarily desktop-based - we would potentially look at doing a custom mobile app in the future if there is enough demand.

Until then, we will be recommending tablet or larger.

That being said - the above example is not our final branded look but something I put together to show our marketing team some things that are possible with CSS.

I told them to tell me how they want it to look and I will take care of making it look that way.
They’re still working on some design components.

Userlevel 7
Badge +3

Gotcha, makes sense, was wondering if you had come up with a better workaround I hadn’t come across yet to deal with. Nice job!

Userlevel 4
Badge

@gstager I have CSS on my “do learn” list (which is too long!) your links are really helpful. Now I just need to find the time! I’m jumping in!

Userlevel 7
Badge +5

@gstager I have CSS on my “do learn” list (which is too long!) your links are really helpful. Now I just need to find the time! I’m jumping in!

Thanks - glad you find them helpful.

I think learning some CSS is worth the time.
It opens doors...

Reply