New to the community? Start here

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.

Sun, 17 Jul 2016 17:34:22
  • Adam Czajczyk
    • Support Gorilla

    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://wpmudev.com/project/custom-sidebars-pro/

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

    Best regards,

    Adam

  • Brian
    • New Recruit

    Yes I did try that plugin. The problem is the CoursePress pages are not “Pages.” So I cant edit those pages to have no sidebar. I will try to make new pages for the courses and use the shortcode for the courses. Ill try that and reply.

  • Adam Czajczyk
    • Support Gorilla

    Hello Brian!

    Thanks for your replay. Let me know please once your done with your tests. In case you decided to go for CSS after all let me know also and also please point me to the pages (except “/courses” and its descendants of which I’m already aware) where you’d like to hide the sidebar and I’ll provide you with a pure CSS solution then.

    Best regards,

    Adam

  • Brian
    • New Recruit

    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 Kalliris
    • Support Team Lead

    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.

    [attachments are only viewable by logged-in members]

    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
    • New Recruit

    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 Kalliris
    • Support Team Lead

    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