CLP Shortcode in WPBakery Posts looks terrible

[timlarner]

Hi. I created a learning path and added the shortcode for it to a separate post using WPBakery, hoping it would look like the video example. Unfortunately for me using the shortcode in a separate post it looks like this. If I click on the Learning Page link itself from within the actual pathway I created (without using a shortcode) it looks ok. How can I get the shortcode version in my post to look like the other versions?

[Diana]

@timlarner, Yes, you are right. The shortcode is not showing the CLP steps styling properly. We will fix this in our coming update. But for now, use this custom CSS as a quick fix Go to wp-admin > Appearance > Customize > Custom CSS ul.wplms_clp_stats { position: relative; top: -5px; float: right; } .wplms_clp_stats li { float: left; padding: 8px 10px 5px; }   .wplms_clp_stats li.active, .wplms_clp_stats li:hover{ color: #FFF; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .wplms_clp_steps { position: relative; counter-reset: section; } .wplms_clp_step { list-style: none; position: relative; display: inline-block; padding-bottom: 20px; margin-left: 90px; width: calc(100% - 90px); }   .wplms_clp_steps:before { content: ''; position: absolute; left: 30px; top: 15px; border-left: 2px dashed #eee; width: 1px; height: 100%; display: block; } .wplms_clp_step:before { counter-increment: section; content: counter(section); position: absolute; left: -75px; margin-top: -30px; padding: 5px 10px; top: 50%; background: #fff; border: 1px solid #eee; width: 30px; font-weight: 600; height: 30px; display: block; border-radius: 50%; } .wplms_clp_step_image { height: 160px; overflow: hidden; border-radius: 5px; position: relative; } .wplms_clp_step_text { padding: 15px 15px 15px 0; } .wplms_clp_step_title { margin: 0; font-size: 18px; font-weight: 600; } .wplms_clp_step_description { text-align: justify; } .wplms_clp_step_points { float: right; font-size: 16px; color: rgba(36, 171, 13, 0.8); }

[timlarner]

Thank you for the code. It looks much better thank you. However I noticed that the little graph symbol (see below) at the top doesn't select, or link to anything when I try to click it.

[Diana]

@timlarner, Yes, because the code is not written in the shortcode to do something on the click

[Author]

Posts