Thanks for sharing this @elamast!

Hi ​@elamast 

Can you please let me know how I can hide the “Add to Cart” buttons on the individual courses in a Learning Plan? When users click on the Learning Plan, I want them to only be able to purchase the whole Learning Plan and not the individual courses. Thank you 

The preferred way would be this setting under “Catalogs and e-commerce” that gives you the choices to allow/disallow individual course purchases:

Alternatively, this CSS will get rid of every button on that page (but may affect other pages, so please test):

dcb-ui-button-outlined.lrn-widget-learning-plan-content-secondary-button.dcb-ui-button-outlined-sm.dcb-ui-button.ui-button.dcb-ui-button-outlined.ui-button-outlined.ng-star-inserted {

    visibility: hidden !important;

}

​@elamast Thank you so much! That is very helpful. :)

Do you by any chance know how to remove the “Apply Coupon” button (preferably the whole “Coupon Code” section) from the Payment Page? 

This should do the trick for hiding coupons:

.coupon-holder {

    visibility: hidden !important;

}

​@elamast You’re amazing! Thank you so much. That was extremely helpful. 

​@elamast I hope it’s okay that I ask one more question. 

I know how to change the image of the kneeling person to a different image using the code below.

What would the code look like for changing the image below?  What would it look like to completely remove the image? 

Thank you so much! 

Dominika 
 

​@elamast I hope it’s okay that I ask one more question. 

I know how to change the image of the kneeling person to a different image using the code below.

 

 

What would the code look like for changing the image below?  What would it look like to completely remove the image? 

Thank you so much! 

Dominika 
 

Hi Dominika,

I don’t mind at all. To save me a bit of time, where are you in the system when you see that page?

​@elamast It shows in the “Task List” Widget. I guess the picture displays when the user doesn’t have any “In Progress” courses / tasks. 

This will hide the image:

.blank-slate-image > img {

    visibility: hidden;

}

These two together will replace the image with a cat:

.blank-slate-image > img {

    visibility: hidden;

}

.blank-slate-image {

    background: url(https://pics.clipartpng.com/Cat_PNG_Clip_Art-2690.png) no-repeat center;

    background-size: contain;

}

​@elamast Thank you so much. I successfully hid the image. Is there a way to hide the “Well done!” “Whoops..there’s nothing here” “Looks like there’s nothing for you to do in this area right now” “Nothing is happening here right now. Take a well-deserved break” writing? 

I know I can change it in the Localization Tool, but I don’t really want anything written there. Is there a way to hide it? 

You have been extremely helpful. I appreciate you so much. 

It depends a bit on what you want to accomplish.  This hides the “blankslate” box entirely:

blankslate {visibility: hidden;}

Notice there’s no “.” before “blankslate” in this one.

This hides the blankslate title (the “Well done!” part):

.blank-slate-title {visibility: hidden;}

This hides the blankslate subtitle (the part below the “Well done!” part:

.blank-slate-subtitle {visibility: hidden;}

You may or may not need to put !important after the word hidden in these, depending on what else is going on in your pages. Example:

.blank-slate-subtitle {visibility: hidden !important;}

​@elamast Thank you so much. It worked for the “Task List” widget. 

I would like to also do the same thing to the “Courses and learning plans” widget.

How would the codes to remove the writing and remove/change image be different from the ones that you provided above?

(In addition to the “My Task” widget I mentioned before, I’m also trying to have a separate widget that shows only completed courses (“My Completed Courses”) and another one that shows all the courses a user has purchased (“My Active Courses”).

I appreciate your patience with me and all your help. Thank you.

I’ll do what I can to figure this out, but in the meantime it would probably be helpful for me to explain for everyone how to find the CSS selectors and apply styling to them.  Here’s a very short set of directions:

If you’re using Chrome, CTRL-SHIFT-I will put you into the developer tools screen.

In the upper left corner of the screen that opens, there’s something that looks like a dashed box with an arrow.  Click it.

Move your cursor over the item you want to change and click on it.  You should see the HTML code for that part of the screen is also highlighted in the Elements tab of the developer tools.  (You can also click on html code and it should highlight the right part of the screen you want to change).

Over on the right side of the developer tools panel is the styles area. If you have a part of the screen selected and then click the “+” (just to the right of the :hov and .cls buttons), Chrome will add a new blank CSS rule to the pane that uses that item’s current tags/styles. You can type in that area to narrow down the selectors you need and the rules to apply.  A lot of what I do with CSS is trial and error, so don’t be afraid to try things.  If you put in a rule that messes things up, just refresh the page and you can try again.

Hope that helps in the meantime.

In the Courses and Learning Plans widget, this hides the entire “blank slate” image and words underneath (when there’s nothing to display):

.ui-blank-slate {

    visibility: hidden;

}

This is how you can swap out just the image:

:is(.ui-illustration.ui-illustration-size-md, .ui-illustration.ui-illustration-size-lg) {

    background: url("https://YOURURLHERE.png") no-repeat center !important;

    background-size: contain !important;

}

This hides the title:

.ui-blank-slate-title {

    visibility: hidden;

}

This hides the text below the title (notice that it’s different because they didn’t label this as a subtitle):

divtclass='ui-typography-body'] {

    visibility: hidden;

}

Thank you so much. That is very helpful. Thank you also for explaining how to find the CSS selectors and applying styling to them.