I want my Learndash Sidebars back on Lesson Pages only

Support
#1

Hello!
I have used CSS to make my Learndash Single Course Pages all be no container so I can build them out with Cornerstone. It has been perfect! :slight_smile:

Originally when doing that CSS, I included for “Lesson” pages to do the same. This was what I needed but now that has changed for Lesson pages only.

I want to adjust the CSS to allow for the lesson pages to all have the sidebar by default. I am not building the lessons out with Cornerstone anymore. Just Course home pages.

Can you take a look at my CSS and see what I need to adjust to allow this??
I will include my login below and site.

Again, Course pages stay as is! Very important as they are all designed out.
It is just the Lesson Pages.

THANK YOU!
Noelle

#2

UPDATE READ :upside_down_face:

Ok, I am not thinking I am going to use the export feature that is in beta from Learndash now. So I am not sure I am going need this CSS or not. So can you please NOT make a change on the site, but instead just share it here?? That would be great. That way I can choose when I am sure next week.

THANK YOU!
I know this was like the most confusing post ever :stuck_out_tongue_winking_eye:
Please forgive! Have a wonderful weekend!
Noelle

#3

Hello There,

Thanks for writing in! I have logged in and every time I visit a lesson or courses page, I am only seeing this: http://prntscr.com/g4xm5i

How can I check the mentioned pages?

#4

Hey RueNel! I am so sorry! As if this thread was not confusing enough :grimacing: So sorry.
I have it set to bypass the landing page now.

**Sidenote, it looks like I will be able to use the migration feature so I am leaning towards for sure having my natural sidebar back and not be no container. Thank you so much!!! :black_heart:

#5

Hi Noelle,

Unfortunately, I am still seeing the same landing page: https://screencast-o-matic.com/watch/cbjQ2qlE4T

#6

Hello @Lely I just logged in using it on my iphone off of my wifi and could get to everything. Please try again. Thank you so much!

#7

Hi Noelle,

I am able to see page content now.
Look for this custom CSS:

    width: 100% !important;
}
body.single .x-sidebar.right {
    display: none !important;
}```

Update to this:
```body.single:not(.single-sfwd-lessons) .x-main.left {
    width: 100% !important;
}
body.single:not(.single-sfwd-lessons) .x-sidebar.right {
    display: none !important;
}```

Hope this helps.
1 Like
#8

Yes! @Lely this did it! Thank you! :black_heart:

I have one more with this.

_There are some specific lessons that I need it to be the original, no container etc like the top code. _
Is there a way I can call out these specific lessons using their lesson id’s ?? So like an exception for certain lessons??

THANK YOU SO MUCH! :blush:

#9

Hi again,

You can do this with the post id’s for example you can make use of the code:

.postid-34100 .x-main.left, .postid-34400 .x-main.left{
    width: 100% !important;
}
.postid-34100 .x-sidebar.right, .postid-34400 .x-sidebar.right {
    display: none !important;
}

You can add more id’s in the code to make the posts full-width.

Hope this helps!

#10

Hello @Nabeel or @Lely :grinning:
Ok, this last CSS only takes away the sidebar on the specific Lesson. (leaving the gap where the sidebar would be) I need it to allow the specific lesson pages that I put the ID in for to be “No Container” just like my Course Pages are. (See very top post)

*You can also see the no container course in the first secure note. All of my courses are no container.

Thank you so much for your continued help!
Noelle

#11

Hi there,

Could you try this one?

.postid-34100 .x-main, .postid-34400 .x-main{
    width: 100% !important;
    float: none !important; 
}
.postid-34100 .x-sidebar, .postid-34400 .x-sidebar {
    display: none !important;
}

Make sure to add it right after other CSS, else, it will be overridden by the same CSS with !important.

Thanks!

1 Like
#12

Yes Yes Yes! Thank you This has worked and my other lessons and course pages are showing the way I want them to.

My question now is, in using this CSS:

I will be adding like 80+ .postid’s to it. This is a huge site with over 80 courses and growing and each have this one lesson as the beginning. Is putting this in CSS going to slow down the site drastically? I have never had to add so much of one piece of CSS like this with so many id’s to it. I have a child theme on site of course.

I also want to ask what is the difference between putting the CSS through the Customizer here:

In compared to adding it here:

I have actually never added any CSS to the last one on any of my sites. I always use a lot of CSS in customizing my client’s sites so I want to make sure it is as clean as possible.

THANK YOU so much! :grinning: :hugs:
Noelle

#13

Hi there,

It shouldn’t affect the performance that much, but it will increase the download size a bit. But you may try it this way, please add this code to your child theme’s functions.php

add_action('wp_head', 'x_my_post_custom_css',999);

function x_my_post_custom_css () {

$target_ids =  array( 34100, 34400 );
$current_id = get_the_ID();

if ( in_array( $current_id, $target_ids ) && is_singular() ) { ?>
<style>
.postid-<?php echo $current_id; ?> .x-main {
    width: 100% !important;
    float: none !important; 
}
.postid-<?php echo $current_id; ?> .x-sidebar {
    display: none !important;
}
</style>
<? php }

}

You only need to add the IDs in the array, and it will only load the CSS for that specific post and ID.

Thanks!

1 Like
#14

Thank you @iam RAD :grinning: I have not done this yet but I am going to!

#15

Glad we could help.

Cheers!

#16

Hello! May I ask how you were able to achieve this: “I have used CSS to make my Learndash Single Course Pages all be no container so I can build them out with Cornerstone.” ?

I am trying to do the same but do not know where/what to put.

Thanks!

#17

Hi @ayham,

Thanks for writing around! Can you please provide the page URL so we can take a look?

Thanks!

#18

Hi there,

What do you mean by no container? You mean no spaces on both side? But regardless, you can simply add your CSS in your global custom CSS ( X > Launch > Options and click the CSS icon ). And you should always add .single-sfwd-courses to your CSS to specifically target the course single page.

Example,

.single-sfwd-courses .x-container {
width: 100%;
max-width: 100%;
}

and more sample

.single-sfwd-courses h1 {
font-size: 50px;
}
.single-sfwd-courses .x-sidebar {
background: #ccc;
}
/* and so on */

I removed your credentials from the secure note and if you wish to continue our discussion then please open a new thread and add your credentials in your thread’s secure note :slight_smile:

Thanks!

1 Like
#19

@Rad Ok, thank you so much again! Now, because I have all my Learndash Lessons set to be “no container” I am not liking how vimeo videos are showing the black around them because they are not in a container. Unless I use the embed code through a shortcode. Which is crazy as there are literally 1000’s of videos I would need to do that to.

**SO! This is what I want to ask… The Lessons I talked to you above about using the CSS is working perfect as I was “those specific lessons to be no container” but is there a way that at the same time I am calling them out to do that, that they are actually the ONLY lessons that are no container??? In other words, all of the other lessons on site I want to be just regular content with sidebar right as the site is set to. That way the video embeds will show normal and not with big black sides.

**Instead of this, if there was CSS to add where all embed videos in learndash lessons appear in a container (like the shortcode does) that would be even MORE amazing.

***Note that ALL of my Courses Pages are set to be No Container and NEED them to stay that way.
Oh my, I know this might be super confusing. It is sooooooo close!!

I am also trying to add a video to show you in a secure note.
OH MY THANK YOU SO MUCH!!! :grinning:

#20

Hi There,

We can set maximum width on those videos.
See this screencast on how to do it: https://screencast-o-matic.com/watch/cb6llUIGan

.single-sfwd-lessons .entry-content iframe {
    max-width: 633px;
    border: 1px solid #ccc;
    padding: 9px;
}

For further style issues, feel free to use browser developer tools to inspect element and apply custom CSS.

Hope this helps.

1 Like