Question

CSS to remove button on a course page

  • 6 July 2023
  • 6 replies
  • 137 views
mdougy

I would like remove the button “enroll” and “syllabus” from a course page. (like the screenshot below)
Before the new course player, we used a CSS code to remove that but now it doesn’t work anymore. 
The course is an e-learning that we have adapted like a “window” of our training. 

The objective is to have a showcase of the learning plan by showing only the description of the course and that learners cannot enroll for it. (Because this is the manager who enrolls in our process)

 

Does anyone know what CSS code we should use?
Thank you in advance for your help, 

6 replies

thaldane
Rank
Userlevel 3

The tricky thing with custom CSS rules is that they are global, so it can be challenging to target only the precise elements you want to affect and not…

  1. Target too broadly and accidentally affect other elements.
  2. Target too narrowly with a rule that breaks if anything else on the page changes.

With that in mind, In order to write a CSS rule I’d need to know:

  • Do you want the CSS to only affect this specific course (this will be tricky)? Or is it okay if the CSS affects all courses?
  • Do you want the CSS to only affect specific viewers (this is substantially more difficult)? Or is it okay if it affects everyone who views the page?
  • If your goal is to prevent enrollment, would it be acceptable to “gray out” the button instead of hiding it? Or might this introduce confusion?
  • Do you want the CSS affecting the button to modify only the green Enroll button?
    • Should it also modify the “Moderated Enrollment” block?
    • The entire “Enrollment Options” block?
  • Do you want the CSS to always hide the Syllabus? Or only when it’s empty? Or only this specific course?

Thanks!

thaldane
Rank
Userlevel 3

One more thing. I see you have moderated enrollment (pending admin approval) set. What are the limitations to using the admin only setting?

 

mdougy

Thank you for your reply ! 

  • Do you want the CSS to only affect this specific course (this will be tricky)? Or is it okay if the CSS affects all courses? all courses in the catalog page
  • Do you want the CSS to only affect specific viewers (this is substantially more difficult)? Or is it okay if it affects everyone who views the page? i would like it affects everyone
  • If your goal is to prevent enrollment, would it be acceptable to “gray out” the button instead of hiding it? Or might this introduce confusion? to gray out is a good solution
  • Do you want the CSS affecting the button to modify only the green Enroll button? only the green Enroll button
    • Should it also modify the “Moderated Enrollment” block?
    • The entire “Enrollment Options” block?
  • Do you want the CSS to always hide the Syllabus? Or only when it’s empty? Or only this specific course? Only when it’ empty  for all courses
mdougy

One more thing. I see you have moderated enrollment (pending admin approval) set. What are the limitations to using the admin only setting?

 

I choose this one in order to avoid/limit enrollments from learners. 

mdougy

@thaldane would you have a solution? 😁

K
Rank
Userlevel 2

The tricky thing with custom CSS rules is that they are global, so it can be challenging to target only the precise elements you want to affect and not…

  1. Target too broadly and accidentally affect other elements.
  2. Target too narrowly with a rule that breaks if anything else on the page changes.

With that in mind, In order to write a CSS rule I’d need to know:

  • Do you want the CSS to only affect this specific course (this will be tricky)? Or is it okay if the CSS affects all courses?
  • Do you want the CSS to only affect specific viewers (this is substantially more difficult)? Or is it okay if it affects everyone who views the page?
  • If your goal is to prevent enrollment, would it be acceptable to “gray out” the button instead of hiding it? Or might this introduce confusion?
  • Do you want the CSS affecting the button to modify only the green Enroll button?
    • Should it also modify the “Moderated Enrollment” block?
    • The entire “Enrollment Options” block?
  • Do you want the CSS to always hide the Syllabus? Or only when it’s empty? Or only this specific course?

Thanks!

If you could help me @thaldane with CSS to hide only the syllabus for ALL of my courses on a global level, that would be FANTASTIC. I have been trying to figure this out for months.

Reply


Terms & ConditionsCookie settings