CoursePress Pro: Remove Sidebar

I have tried different plugins and searched for custom CSS. I want to leave all other sidebar functions the way they are throughout the website and any custom code to hide sidebars has been site-wide. I ONLY need to hide the sidebars on the CoursePress "Pages." Thanks! I am brand new to the community and this is my first ticket. I have granted you access.

  • Adam Czajczyk

    Hello Brian,

    I hope you're well today and thank you for your question!

    I checked your site and this can be achieved with some additional CSS rules. However, our "CustomSidebars Pro" plugin should be just perfect for this scenario and it wouldn't require any custom CSS coding. Have you already checked it?

    I think it's worth giving a try. Take a look here please:

    https://premium.wpmudev.org/project/custom-sidebars-pro/

    Let me know please in case you'd need any further assistance on this!

    Best regards,
    Adam

  • Brian

    UPDATE: I created new PAGES and used the Shortcodes vs the "virtual pages." This allowed me to make each page Full Width if I did not use the Divi Builder. The problem is all the other "inner virtual pages" and the Unit Pages that all still have the sidebar. So it looks like I do need a CSS fix to make all the other CoursePress Pro pages full width with no sidebar. How should we go about that?

  • Dimitris

    Hello Brian,

    I hope you're doing really well and don't mind skipping in! :slight_smile:

    I have some CSS code that can convert your pages in full width:

    #main-content .container:before {
      background-color: transparent !important;
    }
    .et_right_sidebar #left-area {
      width: 100% !important;
      padding-right: 0 !important;
    }
    .et_right_sidebar #sidebar {
      display: none !important;
    }

    If you'll use this as is, it will transform all of your pages, so now we have to determine the specific ones that need this modification. The best way to go through is to inspect the body classes of these pages and get the appropriate body class.

    So, for the page in this screenshot, you should use the CSS code like:

    /* URL: /courses/how-to-use-wordpress-a-complete-up-to-date-easy-to-understand-video-guide/units/ */
    body.unit-courses/how-to-use-wordpress-a-complete-up-to-date-easy-to-understand-video-guide/units #main-content .container:before {
      background-color: transparent !important;
    }
    body.unit-courses/how-to-use-wordpress-a-complete-up-to-date-easy-to-understand-video-guide/units .et_right_sidebar #left-area {
      width: 100% !important;
      padding-right: 0 !important;
    }
    body.unit-courses/how-to-use-wordpress-a-complete-up-to-date-easy-to-understand-video-guide/units .et_right_sidebar #sidebar {
      display: none !important;
    }

    Hope that makes sense, feel free to post back here if more help is required! :slight_smile:

    Have a good one,
    Dimitris

  • Brian

    First of all THANK YOU for the awesome support. I am not regretting this investment.

    As for the code....Defining the individual pages did not work the "site-wide" code did and thats fine for now. The only problem I have now is the "Course Description" is somehow formatted wrong. You can se what I am talking about via the attached screen shot. On the right hand side youll see the Course Description text just floating on the side. I cleared my cache but its still there.
    Any ideas?

  • Dimitris

    Hey there Brian,

    I hope you're doing really well today! :slight_smile:

    The only problem I have now is the "Course Description" is somehow formatted wrong. You can se what I am talking about via the attached screen shot. On the right hand side youll see the Course Description text just floating on the side. I cleared my cache but its still there.

    As I inspected a single course page and realised that this label had nothing to do there, the "for" attribute was set for a "course_description" input that don't even exist. As I didn't manage to get how this is visible, I hide it with an additional CSS rule like
    body.single-course label[for="course_description"]
    in Divi's Custom CSS section. :wink:
    Please do inform me if this label is obligatory by any means.

    Kind regards,
    Dimitris