LDX Design

LearnDash Design & Tutorials

LearnDash Design & Tutorials

Design Upgrade Pro: LearnDash 3.0 Compatibility Is Here πŸŽ‰

As most of you know by now, LearnDash 3.0 was released on May 28, 2019. Several of you have asked how Design Upgrade Pro for LearnDash works with the new version.

This article will answer that question, provide an update for what we’re planning in the coming weeks & months, and lay out a timeline for when it’s all happening.

UPDATE: June 23, 2019
Design Upgrade Pro is now 100% compatible with the LearnDash 3.0 active template, including 20+ new options for focus mode, profile, tooltips & more.

Don’t worry, you can continue using all the old options with the Legacy template. Our plugin automatically detects the template you’re using, and provides different Customizer options for each πŸ™Œ.

We’re still working on videos & updating our product page, but rest assured, there are TONS of awesome features available right now for 3.0 πŸ˜€.

For the rest of this article, if I mention “3.0,” it is in relation to the “LearnDash 3.0” active template, NOT version 3.0 of the LearnDash plugin. You can safely update to version 3.0 of the LearnDash core plugin.

“Legacy” vs. “LearnDash 3.0” Active Template

  • If you’re upgrading from LearnDash 2.x, you will default to theΒ Legacy template. You can continue to use Design Upgrade just like you always have. You shouldn’t notice any difference on the front-end of your site.
  • If you’re brand new to LearnDash, and starting with version 3.0+, you’ll default to the LearnDash 3.0 template. Design Upgrade works with either template, so feel free to switch back & forth to find the design you like best.

Good News!

  • Design Upgrade Pro is now fully compatible with the LearnDash 3.0 template.
  • We will continue to support those who want to remain on theΒ Legacy template (for as long as LearnDash provides it as an option) πŸ‘Š.
  • Because LearnDash 3.0 adds several new features, there are more opportunities for improved design. We’ll be releasing new features somewhat steadily over the next several months.

Phase 1

Our first step is to port over as many existing styles from the Legacy template as we can to the 3.0 theme. Because the 3.0 design is structurally unique, and outputs some different content than the Legacy template, not all current features will be available in 3.0 (but we’ll maintain Legacy support so you can continue to use the plugin exactly as you are today, if Legacy is your jam).

The 3.0 template still supports…

  • all progress bar styles
  • most course grid styles (ribbon colors were excluded in 3.0)
  • most course navigation widget styles
  • most course content table styles (and a bunch of new ones 😍)
  • all button styles (we added hover styles in 3.0 πŸ‘)

The course content table options will look different for users of the 3.0 template. That’s because the entire layout has changed, and the same options just don’t apply. But we have added options to customize the course content table, and they’re even better than in LD2.

Phase 2

Phase 1 is complete, and there are already more options for the LD3 template than there were for Legacy. But we’ll continue to add new features over the coming months.

FEATURE REQUESTS
If you have specific feature requests for design customizations you’d like to see with the 3.0 template, please leave them in the comments.

Possible New Features for 3.0

  • Breadcrumbs: hide them globally (you can already do this on focus mode pages), change the bg color
  • Alerts: several color options for alerts, broken down by type (regular, warning/error, success/completion, etc.)
  • Profile: possibly adding 1-2 different layouts for the top section
  • Status Labels: possibly adding color options for status labels
  • Login/Registration: colors, shadows, sizing options

When?

Phase 1: Completed on June 23, 2019

Phase 2: New features will begin rolling out for the 3.0 template gradually, based on user feedback (so please comment below what you’d like to see).

Help

As always, I’m here to help. If you have any questions at all, don’t hesitate to ask. [email protected]

Thank You πŸ™‚

And a big thank you to all of those who have supported me so far by using and/or purchasing the plugin. The reaction was far better than I ever expected, and you have inspired me to continue innovating and building a better product. So thank you πŸ™.

I also greatly appreciate your patience. I know many of you were eager to get your hands dirty with those new 3.0 features. I would’ve loved to have all this ready for the launch on May 28th, but I pride myself on remarkable craftsmanship, so the wait time ensured I could produce the same quality of work you’ve come to expect.

I have done everything in my power to over-deliver πŸ‘Š.

FAQ

Will you continue to add new features to the Legacy template?
Probably not. The current feature set will remain, and we’ll continue to provide support if you have questions, but all future updates & features will be dedicated to the 3.0 template.

Design Upgrade for LearnDash 2.0 (Free) (Changelog)

A lot of work went into the free version of Design Upgrade for LearnDash 2.0, which brought about compatibility with the new “LearnDash 3.0” active template. We kept track of most of the noteworthy changes we made. It’s not 100% exhaustive, but if you don’t like surprises, you can read through this list to get an idea what will happen if you’re using the “LearnDash 3.0” template and upgrade to version 2.0 of our plugin.

If you’re still on LearnDash version 2.x, or using the “Legacy” template, you will not see any changes. Things will continue to work as they always have.

Global

  • Revert font sizes & line height to the theme’s default, instead of forcing 16px & 1.5em respectively.
  • Status Indicators: Remove letter spacing & adjust font size

Focus Mode

  • Focus Mode: Sidebar Tray: Adjusted spacing throughout
  • Focus Mode: Sidebar Tray: Larger clickable areas for lessons & topics
  • Focus Mode: Sidebar Tray: Reduced the overall vertical space that items occupy
  • Focus Mode: Sidebar Tray: Added hover effect to lessons & topics
  • Focus Mode: Sidebar Tray: Flip arrow based on collapsed or open status
  • Focus Mode: Sidebar Tray: Improve legibility of collapse arrow
  • Focus Mode: Sidebar Tray: Added shadow on mobile
  • Focus Mode: Sidebar Tray: Added bottom border to course title
  • Focus Mode: Sidebar Tray: Remove icon next to course title
  • Focus Mode: Sidebar Tray: Remove border when sidebar is collapsed
  • Focus Mode: Sidebar Tray: Added background color to section headings
  • Focus Mode: Sidebar Tray: Made the final quiz function like the lessons
  • Focus Mode: Avatar/Menu: Rounded corners on menu to match course content lists
  • Focus Mode: Avatar/Menu: Added drop shadow to menu
  • Focus Mode: Avatar/Menu: Removed opacity on hover; added highlight
  • Focus Mode: Avatar/Menu: Adjusted padding on items; added min-width
  • Focus Mode: Avatar/Menu: Removed bold from menu items
  • Focus Mode: Avatar/Menu: Added dividers between menu items
  • Focus Mode: Avatar/Menu: Capitalized user’s name
  • Focus Mode: Avatar/Menu: Added hover effect on avatar
  • Focus Mode: Top Bar: Improved Prev/Next navigation buttons; added hover effect
  • Focus Mode: Top Bar: Improved hover effect for Mark Complete button
  • Focus Mode: Logo: Reduced vertical padding so the logo image is displayed larger
  • Focus Mode: Increased font size of “Back to Course” link

Profile

  • Profile: Search: Improved font sizes & styles
  • Profile: Search: Improved <input> field styles
  • Profile: Course List: Removed extra space below “Course Progress” area
  • Profile: Course List: Removed “Course Progress” label; % & steps moved to the left
  • Profile: Course List: Adjusted spacing around assignment & quiz lists

Login & Registration Modal

  • Login/Registration: Added border-radius to input fields
  • Login/Registration: Changed font sizes & colors to theme defaults
  • Registration: Fixed up input fields & spacing as best I can

Assignments

  • Assignments: Added red hover color on delete icon
  • Assignments: Removed bold from uploaded assignment title
  • Assignments: Increased length of “status” column so status fits on one line
  • Assignments: Upload: Adjusted padding for filename to allow for more characters
  • Assignments: Upload: Several font adjustments

Breadcrumbs

  • Breadcrumbs: Removed bold font weight
  • Breadcrumbs: Increased font size
  • Breadcrumbs: Mobile: Remove 100% width of status indicator

Tooltips

  • Tooltips: Styles: removed bolding, adjusted border & font size
  • Tooltips: Added a slide-up effect

Pagination

  • Pagination: Styles: Removed bolding, adjusted font size
  • Pagination: UX: Larger clickable area for prev/next arrows
  • Pagination: Center align all instances
  • Pagination: Make width consistent across all instances, and expandable to account for infinite number combinations

Progress Bar Widget

  • Progress Bar: Increased font size
  • Progress Bar: Moved stats to the left

Course Status Area

  • Course Status: Not Enrolled: Mobile: Reduced spacing

Course Content

  • Course Content: Increase font size in a few spots
  • Course Content: Mobile: Improved styles (reduced spacing, full-width clickable areas)
  • Course Content: Remove unnecessary bolding & capitalization (% complete)
  • Course Content: Added background color on hover (topics)
  • Course Content: Reduce size of grey footer area when there’s nothing in it
  • Course Content: Removed extra space above/below assignment file uploads
  • Tabs: Added hover color

Widget: User Status

  • Adjusted spacing & font sizes

Course Grid

  • Course Grid: Improved spacing throughout
  • Course Grid: Updated some text colors to inherit theme styles
  • Course Grid: Standardized border style & radius throughout
  • Course Grid: Standardized buttons to match LD3 buttons
  • Course Grid: Bolded course titles
  • Course Grid: Faded short description text color
  • Course Grid: Removed spacing/margin from empty <p> tags
  • Course Grid: Equal height columns
  • Course Grid: Buttons & progress bar aligned at bottom of grid items

Uncanny LearnDash Toolkit

  • Resume Button: Inherits default LearnDash button styling

Previous

How to Prevent Students from Sharing Login Information

16 Comments

  1. Ferry

    No special wishes at the moment. Only want to say its great to see your hard and good work. Looking forward for your updates. Thanks Dave!

  2. Where to start πŸ™‚

    There are some amazing things with Focus mode but also some really basic mistakes that I would love to see resolved.

    First is the in progress / complete tab in the lesson / topic section which is a pill (Would love control over that to remove radius etc) but also colour as it looks like a button / but it’s not.

    Would like to inset the left menu toggle to inset into the menu rather than have it “poking” out and also have the ability to target it with some simple colour options

    The ability to change the colour of the background of the menu

    The ability to change all the font settings in the left menu

    The ability to add content areas to the left menu (shortcode would work)

    Edit the button radius / font / colour on the previous next in the footer.

    Better button on mobile footer maybe 50 / 50 across the div

    Ability to add items to the menu top left

    Click on user profile to access a popup / page (option would be great) with ld_profile – or at the very least, add a class to that so we can target it in elementor

    Some sort of access to all courses – seems difficult to navigate back once in a course.

    Ability to target / control lesson table / course table / topics etc at the level your plugin does but for LD3

    To go a step further – the ability to style MEJS audio and video players πŸ™‚

    • This is fantastic feedback, Steve. EXACTLY what I was looking for. Many of these things will be in my 3.0 version in some way, but let me also address a few specifically:

      • Fonts: I’ll need to see just how much LD is messing with fonts. I like to take the approach that a theme should determine font families & sizes. So if LD forces anything, I like to use “inherit” to set it back to what your theme is doing. I’m hesitant to add direct font manipulation for LD elements because I think people often abuse it, and the design & performance takes a hit for it.
      • MEJS: Great suggestion. Probably won’t be part of my plugin, but as soon as I get these updates finished, I have plans to build an LD-specific theme. That theme will include styling for EVERYTHING, including MEJS.
      • Adding Content: In keeping with the plugins main focus (and name), I’m not sure if I’ll add many content options. I’m trying to keep it design-focused. But again, the theme I have planned will address some of your menu feedback, and will include various layouts that include already existing LD content.

      Thanks again for your time in writing these up πŸ‘.

  3. Reece

    Just came to plus +1 everything Steve mentioned. Wish I could be more helpful but he literally nailed it.

  4. Neil Atwood

    Hey Dave,
    Thanks for all your work on this.
    I +1 to Steve’s list and really anything you can add to reign in LD3’s aggressive takeover of the theme/Elementor’s CSS.
    I really like the 3.0 theme (or template as it called in 3.0.1), but changing the accent colour stomps all over the theme’s accent (and other) colour choices.

    looking forward to the update!

    • I hear ya, Neil. Thanks for taking the time to comment.

      I assure you I’ll employ every bit of CSS Wizardry that I can πŸ‘.

  5. As mentioned on FB: change the checkmarks in the course content overview? That it’s possible to add my own images for the checkmarks?

    • Thanks Krista. I agree this would be a nice feature to have. Just to set expectations, this will probably come in a second round of feature additions, not the initial one.

      There is a bit more to consider when putting icons in the hands of users, so I’m putting careful consideration into it before I release anything in the wild. But you’re not alone in this request, and I do plan to provide it at some point.

  6. Gaizka

    Hi.

    After updating to this new release, text went very small and I can’t change the size through my theme settings. I’m using Ocean WP.

    With the inspector I’m looking that the font size is taken with the following class:

    .ld-course-list-items .ld_course_grid .caption .entry-title {
    font-weight: 600;
    font-size: 1.125rem;
    }

    • Hi Gaizka — Yikes. Yes, I see that the font size is really small. OceanWP implements their font size in a different way than most other themes. I see quite a few areas that I overlooked in terms of how OceanWP renders font sizes. I’ll be reworking some styles and releasing an update early next week to fix all of them.

      In the meantime, if you need a quick fix for this one area, you can add that line of CSS to your custom CSS, and just change “rem” to “em”. That should fix it for now, but like I said, this will be addressed in an update soon.

  7. Justin Sung

    Hows it looking for release date, Dave?

    • Hey Justin — Thanks for checking in and holding me accountable. I’m really pushing for this Friday, the 21st. I’m about 80% sure I’ll have it ready by then. If not, it should be good to go by Monday. I do apologize I couldn’t get it to you guys sooner, but I’m hopeful & confident you’ll love all the new features, and appreciate all the work that went into it πŸ™‚

  8. Thanks for all of your hard work, Dave. For me, the feedback will come on features after I play around with the new settings. I know that you are open to feedback and always respond in a positive way. I also know you’ve been working on the quiz styling plugin. Will this be something released in the near future?

    • Hi Anthony. Thanks for the acknowledgement. I look forward to your feedback, as it has been really helpful in the past πŸ™‚.

      As for the quiz plugin, I know I’ve been teasing it for a little while now, and it still isn’t released. That is because of the Design Upgrade Pro plugin. 1) I want to make sure the two are compatible with each other, and there’s some CSS considerations that need to be made to ensure that. 2) I want to take care of my existing customers first, who are patiently waiting for the update to Design Upgrade.

      All the code is actually complete for the quiz plugin’s functionality. I just need to add in some code for licensing, and create a landing page for it on my website. This is my first order of business as soon as I release the update to Design Upgrade Pro (which should happen this weekend). So… 12-15 days would be a good estimate.

Leave a Reply

Your email address will not be published. Required fields are marked *

Powered by WordPress & Theme by Anders Norén