Ribbon effect has disappeared again

Hi @t2m,

So I took a look at that page and the HTML code for the ribbons is not present. That’s why the CSS I provided previously is not working.

This screenshot illustrates what I mean:
https://www.dropbox.com/s/fapud7zhdb8bo81/learndash-course-grid-ribbon-html-not-present.jpg?dl=0

That <div> should have something in it, but it’s blank.

Did you change any settings related to who has access to the course? Or install any membership plugins that might have changed course access? There’s something that is preventing the ribbon code from being displayed.

Oh, sorry for the link. Yes, the ribbon is not shown at all if the user is not logged in. So, let me show you the screenshots.

Following is the course grid with the plugin disabled:

And following is the course grid with the plugin enabled.

Seeing both the images it seems the css code is working fine but since cards showing courses are shifted left, the lower part of the ribbon is hidden. Perhaps this shift in the card started after one of the later updates (I’m not entirely sure though).

Would you be willing to create a login for me? I think I know what’s happening but it’s hard to say for sure without seeing the code.

You can send an email to [email protected].

Thanks.

Sorry for the delay, I have sent you the required login credentials.

Thanks!

This was resolved via email, but there was a small piece of code that was added to my initial response in order to bring the ribbons back. Please use this CSS code below:

/* Add the ribbons back */
div[id^="ld-course-list-content"] .ld-course-list-items.row .ld_course_grid,
div[id^="ld-course-list-content"] .ld_course_grid .thumbnail {
	overflow: visible;
}
div[id^="ld-course-list-content"] .thumbnail.course .ld_course_grid_price {
	top: 10px;
	left: -8px;
	border-radius: 0;
}
div[id^="ld-course-list-content"] .thumbnail.course .ld_course_grid_price:before {
	display: block;
	border: 4px solid transparent;
	border-top: 4px solid #348c34;
	border-right: 4px solid #348c34;
	content: "";
	position: absolute;
	left: 0;
	bottom: -8px;
}
div[id^="ld-course-list-content"] .ld-course-list-items .ld_course_grid {
	border-radius: 0;
}

• This reply was modified 6 years, 5 months ago by Escape Creative. Reason: added more specificity to override some theme/plugin styles

Thank you. It did the trick and nicely so.

Regards!