- This topic has 14 replies, 2 voices, and was last updated 4 months, 3 weeks ago by
.
-
Posts
-
I’m having some issues with the LearnDash styling in general. It looks nothing like on the “Learn” demo.
I get that this is “a different” demo, but the setup/design should be similar especially when this is where the courses (LearnDash) are shown.
I do have the LearnDash premium bundle (all plugins including Course Grid), and I’ve tried different things, online forums – but I can’t make it work and it looks broken.
https://ibb.co/FY6gGPX – https://ibb.co/KynMpWP – https://ibb.co/NLNDDJK – https://ibb.co/27mPd9C – https://ibb.co/G52ZQmh
Hi Katrine,
Can you confirm me Grimlock for LearnDash is activated ?
If Grimlock plugin is well activated, could you please add the following code snippet to your website:
/** * FIX: Fix Buttons Style Issue In Courses */ body .learndash-wrapper .ld-breadcrumbs .ld-primary-background.ld-status{ background-color:rgba(0,0,0,0.1) !important } .ld-focus-main .learndash-wrapper .ld-tabs, .ld-focus-main .learndash-wrapper .ld-content-actions{ padding-left:1rem; padding-right:1rem; } .ld-focus-main .learndash-wrapper .ld-content-actions{ flex-direction:column; margin:0px; } .ld-focus-main .learndash-wrapper .ld-content-actions .ld-content-action{ padding: 0px 0px 0px 0px; margin:0px; } .ld-focus-main .learndash-wrapper .ld-content-actions .ld-content-action + .ld-content-action{ padding-top:0.5rem; } .ld-focus-main .learndash-wrapper .ld-content-action a{ margin-top:0.5rem !important; height:auto !important; } .ld-focus-main .learndash-wrapper .ld-content-action a, .ld-focus-main .learndash-wrapper .ld-content-action a span, .ld-focus-main .learndash-wrapper .ld-content-action input{ line-height:1.2em !important; font-family:var(--grimlock-button-font-family); font-size:var(--grimlock-button-font-size); font-weight:500; letter-spacing:var(--grimlock-button-letter-spacing); } .ld-focus-main .learndash-wrapper .ld-content-action input{ padding-right:2rem !important; } .learndash-wrapper .ld-button:not(.ld-button-reverse):not(.learndash-link-previous-incomplete):not(.ld-button-transparent), .learndash .ld-content-actions .ld-course-step-back:hover{ color:var(--grimlock-button-primary-color) !important; } .learndash-wrapper .ld-status:not([class*="complete"]):not([class*="warning"]):not([class*="warning"]):not([class*="waiting"]){ color:var(--grimlock-button-primary-color) !important; } @media (min-width: 568px){ .ld-focus-main .learndash-wrapper .ld-content-actions{ flex-direction:row; justify-content:space-between; } .learndash .ld-content-actions > .ld-content-action{ flex:none !important; } }To add this code snippet to your site, we recommend that you paste it to the Custom CSS panel of your WordPress Customizer. Just go to your dashboard and navigate to “Appearance > Customize > Additional CSS”.
Pasting your code snippet there should do the trick for you.This issue will be solved in the next update of Grimlock for LearnDash. We’ll be back to you when this update is released. 🙂
Also, it’s important to remember that we share snippet only to solve issues with our theme. Any further request for CSS snippets will have to be part of a defect that needs to be fixed urgently. No snippets will be shared otherwise.
If you want to go further with the customization of your website, we advise that you require customization work.
Regards,
Hello
I can confirm that I’ve got Grimlock for LearnDash (Version 1.0.11) installed and active.
I use WPCode Snippets since it makes it easier for me to get the overview of different styles added into the site.
However, the CSS provided did not solve the issue – still the same.
I took the liberty to separate the issues :
- Issue 1 : Did you used Course Grid block ? On which page did you add this block ?
- issue 2 : I don’t understand the issue. On the demo, you can see more informatio because the course has been started. Or Am I missing something ?
- Issue 3.1 : These space are related to the max width you set in LearnDash settings. Please go to Dashboard > LearnDash LMS > Settings > General and set the Focus Mode Content Width.
- Issue 3.2 : This issue should be solved with the snippet I send you in my last reply. When I added the snippet to your customizer, all was fixed. Can you please try again ?
Let me know if I’m missing something. 🙂
Hello again
Issue 1 : Did you used Course Grid block ? On which page did you add this block ?
Yes. 🙂 – I’m using the courses page and I’m also using the LearnDash Course Grid too – still looks different (also from customizer).
https://www.***.com/courses/
Issue 2 : I don’t understand the issue. On the demo, you can see more informatio because the course has been started. Or Am I missing something ?
The course I’m having on my site is a demo imported from LearnDash itself upon installation which contains a lot of topics, quizzes etc in order to test it out.
I also started this course to test it out, but in general the CSS and styling is off/missing and the grid itself dosen’t look like in the Cera “Learn” Demo (which is what I’m after).
I would like the course grid to look like this one: https://ibb.co/gDJgRT3 and also the course single pages to look like this: https://ibb.co/r7L5VND 🙂Issue 3.1 : These space are related to the max width you set in LearnDash settings. Please go to Dashboard > LearnDash LMS > Settings > General and set the Focus Mode Content Width.
I did just try and change to different settings within this, but nothing really happened?Issue 3.2 : This issue should be solved with the snippet I send you in my last reply. When I added the snippet to your customizer, all was fixed. Can you please try again ?
I can confirm that your CSS snippet worked on this issue. there still is some wierd space in the top with “Next Topic”. I thought this CSS would fix the grid, so no wonder I couldn’t make it work.. lol 🙂 https://ibb.co/yBYspTf and https://ibb.co/XSV73bX
Anything new on this? 🙂
Thank you for this detailed feedback, please allow me some time to investigate. 🙂
Issue 1
The design has indeed been updated by LearnDash. To use the previous design, you can use this CSS snippet :
/** * FEATURE : Use Previous Design for Course Grid */ .learndash-course-grid .grid .post .content { position:relative; } .learndash-course-grid .grid .post .content .learndash-wrapper{ position:absolute; top:0px; left:0px; width:100%; transform:translate(0px,-100%); } .learndash-course-grid .items-wrapper .grid-2 .thumbnail .arrow{ display:none; } .learndash-course-grid .items-wrapper .grid-2 .ribbon{ display:block; left:0px; right:auto; border-radius:0px var(--grimlock-button-border-radius) var(--grimlock-button-border-radius) 0px; text-transform:uppercase; font-size:0.8rem; letter-spacing:1px; padding:0.3rem 0.5rem; background-color:var(--grimlock-button-primary-background-color); color:var(--grimlock-button-primary-color); text-shadow:none; box-shadow:var(--grimlock-archive-post-box-shadow-x-offset) var(--grimlock-archive-post-box-shadow-y-offset) var(--grimlock-archive-post-box-shadow-blur-radius) var(--grimlock-archive-post-box-shadow-spread-radius) var(--grimlock-archive-post-box-shadow-color); } .learndash-course-grid .items-wrapper .grid-2 .thumbnail img{ height:30vh; } .learndash-course-grid .items-wrapper .grid-2 .ribbon.enrolled{ background-color:var(--grimlock-button-secondary-background-color); color:var(--grimlock-button-secondary-color); } .learndash-course-grid .grid .post .content .learndash-wrapper .ld-progress{ margin:0px; display:flex; flex-direction:column-reverse; align-items:flex-end; } .learndash-course-grid .grid .post .content .learndash-wrapper .ld-progress .ld-progress-bar{ margin:0px; border-radius:0px; } .ld-progress-heading{ background-color:var(--grimlock-archive-post-background-color); margin:0px !important; padding:0.4rem 0.5rem; } .learndash-course-grid .grid .post .content .learndash-wrapper .ld-progress .ld-progress-steps{ display:none; } .learndash-course-grid .items-wrapper .grid-2 .content .button{ margin-top:1rem; }To add this code snippet to your site, we recommend that you paste it to the Custom CSS panel of your WordPress Customizer. Just go to your dashboard and navigate to “Appearance > Customize > Additional CSS”.
Pasting your code snippet there should do the trick for you.Also, it’s important to remember that we share snippet only to solve issues with our theme. Any further request for CSS snippets will have to be part of a defect that needs to be fixed urgently. No snippets will be shared otherwise.
If you want to go further with the customization of your website, we advise that you require customization work.
We’ll be back to you for the other issues.
Regards,
Issue 2
I took a look, but the course page looks the same. The look depends on the content of your course. In our demo, we did not fill the material section. This is why you have a Material tab on your course.
Issue 3
I check, but I could change the width. Please find the attached screenshots. Did you empty your cache ?
Concerning the space, I can’t reproduce this. 🤔
Hello 🙂
I’m a bit late to the game today, but now I’m here! 😀
Issue 1: Thank you so much for the CSS snippet, that worked (for the most part). I’m still missing the labels that says “Free/Paid” (Course categories?) – also tried adding a fast course from a youtube playlist and noticed that they’re different sizes. I would like them to stay the same height always. https://ibb.co/f85xqRw
Issue 2: Forgot to mention this too, I played around with the setup yesterday on the course page and found the solution to the design, so this is all good. 🙂
Issue 3: I did try swith between full width and the “Default 960px” – did clear both cache and cookies in browser and server side – nothing. hmm….. 😀
Thanks! 🙂
Hi Katrine,
- I updated the snippet. 🙂
- Great to read that!
- Is it possible you’re in a small screen, so you don’t see the width difference ? As you can see on my screenshots, it’s working. 🤔
Best,
1. Thanks for the new snippet! – I now got the labels on the courses, so that is super cool – they’re still different heights though? 🙂
3. I’m on my desktop working, so can’t imagine that screen to be too small.. Anyways dosen’t seem to be anything I need in the future and I would not consider this an issue. 🙂
Oups, we will say that it’s friday… 😂
Snippet updated Katrine! 🙂
No worries, lol – I know the feeling! .. 😀
It works now – thank you! 🙂
Great! 🙂
You must be logged in to reply to this topic.
