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
LearnPress 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. 🙂

Comments

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

  1. Nice_Guypassingby Avatar
    Nice_Guypassingby

    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.

    1. Grg Ugene Avatar
      Grg Ugene

      Glad it help, thank you for the suggestion, have added style for the contained width too. Hope it helps to someone.

      1. Nice_Guypassingby Avatar
        Nice_Guypassingby

        Thanks! Works perfectly on my side.

  2. Kitka Avatar
    Kitka

    Thank you!!

  3. carla Avatar
    carla

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

    1. Grg Ugene Avatar
      Grg Ugene

      Glad to help you. Have a nice day.

  4. Senthil Avatar

    Thank you Grg,

    Your tips really worked for me.

    I have applied your fix on my site : https://developerpublish.com/academy/ and it worked really well.

    I had an issues with the scollbar not being visible which I did fix it by setting the overflow property on the content.

    1. Grg Ugene Avatar
      Grg Ugene

      Glad it helped to you. Regards.

Leave a Reply

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