Design bugs in discussion and notification pages

Hi,

I'm having some design bugs with discussion and notification pages after enabling bullet list support to coursepress theme. (See here: https://premium.wpmudev.org/forums/topic/coursepress-theme-doesnt-render-bullt-lists-on-the-front-end)

As you can see in the screenshots bullets appearing on every where in these pages.

I've created some test notifications and discussions here: http://bit.ly/1cYPFPk

Support access is granted. How to solve this?

  • Predrag Dubajic
    • Support

    Hey @chathura,

    I was unable to replicate this on my installation as it seems that this CSS added by a custom CSS plugin or something similar.

    Can you try adding this CSS code to override list attributes for Discussion and Notification pages:

    .notification-archive-list li,
    .discussion-archive-list li {
    list-style: none;
    }

    Let us know if this works for you.

    Best regards,

    Predrag

  • chathura
    • HummingBird

    Thanks but it didn’t solved the problem fully. As I found out it strips out the ability to use bullets and numbered list in notifications. I’ve used following code to display bullet list because coursepress only renders numbered lists.

    ul {

    list-style: initial;

    margin: 0px 0px 1.5em 1.5em;

    }

    ul.units-archive-list,

    ul#submenu-main {

    margin: 0;

    }

    https://premium.wpmudev.org/forums/topic/coursepress-theme-doesnt-render-bullt-lists-on-the-front-end#post-885471

    There’s also a problem with question alignment. Normally the question should be horizontally aligned not vertically like in my case.

    I think it’s better if you can login to the course with the support access and see the problem for yourself.

  • Adam Czajczyk
    • Support Gorilla

    Hey,

    I haven’t made any changes to your testing site apart from adding two questions to the discussion and answering them – for testing purposes. I can see that you’ve already removed those. No other changes were made by me, either to the CSS nor to the plugins or other settings.

    As for the list issue. I’ve read your first post before I joined this conversation, just didn’t want to mess around your “live” site. Having said that, I gave it a second look – this time the site you’ve pointed me to. To get rid of those bullets on this page you’ll need below rules:

    .notification-archive-list > li {
    list-style:none;
    }
    .discussion-archive-list > li {
    list-style:none;
    }

    This should target only the top-level list elements, therefore leaving all the inside lists intact. Would you give it a try and let me know?

    Cheers,

    Adam

  • chathura
    • HummingBird

    Thanks Adam. Although I gave the URL where this problem exist in my very first post, you were at a wrong site that is not relevant to this discussion at all. I mean why would I bother about some trivial css thing in a testing site :slight_smile:

    That's why I was bit upset. I'm sorry, I know you were just trying to help. I appreciate it :slight_smile:

    1. Back to the problem, Yes it did remove those bullets in the front pages of the discussion page but when I go inside a question the answers still display bullets.

    2. As you may have seen in my testing site discussion question alignment is different. Is there a way to make them look normal as in testing site? (you may look for testing site to see the normal behavior)

    3. Can we align the notification bubble to left side so that it looks nice?

    Thanks again and have a great day :slight_smile:

  • Predrag Dubajic
    • Support

    Hey @chathura,

    I was also looking at your test site as first, I thought it would be best to look there so I don’t mess anything up on the live site.

    I now had another look at LMS sub site and added this CSS code:

    .discussion-archive-list .discussion-archive-single {
    width: 80%;
    }

    .discussion-archive-list .discussion-archive-single-meta {
    width: 10%;
    }

    .discussion-comments .comment-list > li {
    list-style: none;
    }

    .notification-archive-list .notification-archive-single-meta {
    width: 10%;
    }

    .notification-archive-list .notification-archive-single {
    width: 80%;
    margin-top: 20px;
    }

    Please check if everything is working after that.

    Best regards,

    Predrag

  • Predrag Dubajic
    • Support

    Hey @chathura,

    I have fixed issues shown on first and last screenshot but couldn’t figure out what is causing the scroll to show up, I tried anything I could think of so I’m going to flag our sls devs for another pair of eyes to have a look at this.

    Additional CSS that I added:

    @media screen and (max-width: 400px) {
    .discussion-archive-list .discussion-archive-single-meta {
    width: 16%;
    }
    .notification-archive-list .notification-archive-single-meta {
    width: 20%;
    }
    }

    Best regards,

    Predrag

  • Predrag Dubajic
    • Support

    It looks like you accidentally removed one of the brackets so the code was still applied to the 520px screens, I have added the missing bracket and added some more CSS to the 1025 media query so you can also check workbook now and it should all be good :slight_smile:

    This is new code for 1025 media query:

    @media screen and (max-width: 1025px) {
    .discussions {
    overflow-x: hidden;
    }

    span.workbook-course-progress {
    position: relative;
    clear: both;
    }

    .instructors-content {
    width: 100%;
    clear: both;
    }
    }

    Best regards,

    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.