LearnPress Lesson Template Changes : Part 2

This is the new and updated version of my article here: LearnPress Lesson Template Changes

I got to admit, it is quite simpler in terms of files than before.
Turns out it is now possible to edit with only CSS and make our Header and Footer show in current implementation of LearnPress plugin.

WordPress Version : 5.7.2
Theme Twenty Twenty-One : 1.3
LeranPress Version : 4.0.7

Quick Start

Here, is the fast answer you need and keep on moving.

/*Learn Press Lesson Template Design Changes*/
html {
    overflow: visible !important;
}

#popup-course {
    position: relative !important;
    flex-wrap: wrap;
}

#popup-course > div {
    position: relative;
    flex-basis: 100%;
}

#popup-course #popup-header {
    position: absolute !important;
}

#popup-course #popup-content {
    flex-basis: calc(100% - 475px) !important;
}

#popup-course #popup-footer {
    position: absolute !important;
}

Contain the width

Now if the lesson content area is full width, and you want it contained, like the header and footer, we need to do more. Not necessarily important, but could be helpful to someone.

Lets contain the main section

main#main {
    max-width: var(--responsive--alignwide-width); // this is the max-width you want your container to be e.g.1170px
    margin: 0 auto;
    border: 1px solid;
}

Lets make the curriculum sidebar smaller around 300px.

#popup-course #popup-sidebar {
    flex: 0 0 300px !important;
}
#popup-course #popup-sidebar .course-curriculum {
    width: 300px !important;
}

After that compensate the “300px” width to lesson’s header, footer, toggle collapse arrow

#popup-course #popup-header,
#popup-course #popup-footer,
#popup-course #sidebar-toggle {
    left: 300px !important;
}

And finally adjust toggled case

body.lp-sidebar-toggle__close #popup-course #popup-sidebar {
    flex: 0 0 0 !important;
}

body.lp-sidebar-toggle__close #popup-course>#sidebar-toggle,
body.lp-sidebar-toggle__close #popup-course #popup-header,
body.lp-sidebar-toggle__close #popup-course #popup-footer {
    left: 0 !important;
}

P.S. For responsive, you’re on your own. 🙂

6 responses to “LearnPress Lesson Template Changes : Part 2”

  1. Nice_Guypassingby says:

    Woww, thank you so much, you rock!

    I’ve downloaded LearnPress a few days ago and I’m baffled by how poor the documentation online is, especially when it’s about customization!

    It seems like many are using this plugin, but so often Google remains silent when we try to fix something. You truly are an oasis in the middle of the desert.

    It didn’t *perfectly* fit on my side, as the left menu with all the lessons won’t fit to the size of the page. On the opposite, the page will adapt itself to the size of the menu. So if there are a lot of lessons (just like in the model Learnpress propose), the page will be super long.

    I will try to find out how to fix this in the following days and post the answer here.

    Thanks again.

  2. Kitka says:

    Thank you!!

  3. carla says:

    Thank you so much! this worked on my site too!

Leave a Reply

Your email address will not be published. Required fields are marked *