Skip to content

NodeBB Design help

Solved Customisation
  • Unfortunately I still have a few design problems where I need your help again 🙂

    li.row.clearfix.category-1, li.row.clearfix.category-2, li.row.clearfix.category-3, li.row.clearfix.category-4, li.row.clearfix.category-5, li.row.clearfix.category-6, li.row.clearfix.category-7, li.row.clearfix.category-8, li.row.clearfix.category-9, li.row.clearfix.category-10 {
        border: 1px solid;
        border-radius: 4px;
        margin-left: 10px;
        background: #ffffff;
        border-left: 5px solid #0088cc;
        margin-top: 10px;
    }
    

    You gave me the box design

    it would be possible to make the sub-categories like here in the photo

    Screen for my forum
    e3102e11-7d61-4f0a-a1d3-7cc3c6ed9958-image.png

    Image
    9d97fe41-b55c-4f3a-bfa5-a176c812f4f2-image.png

    Here is a line
    Kategorie

    Subcategorie

    The second design problem is my buttons

    05b57c62-e836-4602-94ff-a444d61fb2dd-image.png

  • @riekmedia Without modifying the template itself (which you could do with nodebb-plugin-customize), this is not going to be easy. The nearest I can get with pure CSS is the below

    b111dea3-6324-4059-b3b0-5a86ef8225aa-image.png

    Even then, the amount of CSS required to get this look is excessive

    .categories>li .content, .category>ul>li .content {
        padding: 10px 15px;
        border-right: 1px solid #0088cc;
    }
    .categories .description, .category .description, .subcategory .description {
        margin-bottom: 10px;
        margin-left: -15px !important;
    }
    .categories .category-children, .category .category-children, .subcategory .category-children {
        display: inline;
    }
    .categories>li .content, .category>ul>li .content {
        margin-bottom: -10px;
    }
    .description {
        margin-right: -16px;
    }
    .categories .category-children, .categories .description, .category .category-children, .category .description, .subcategory .category-children, .subcategory .description {
        line-height: 1.8;
    }
    
  • @phenomlab okay, the plugin is not working. is installed and no Menü point

    a10e311b-9342-4145-8cdf-ed42e8e6b202-image.png

    c54a40c8-1567-4c9e-871b-6c3c747beb72-image.png

    You helped me with the footer, unfortunately it doesn’t work as it should. As soon as I put a widget in the sidbar, it shreds the footer 😛

  • @riekmedia said in NodeBB Design help:

    okay, the plugin is not working. is installed and no Menü point

    Did you rebuild and restart ?

  • @riekmedia said in NodeBB Design help:

    As soon as I put a widget in the sidbar, it shreds the footer

    This sounds like the HTML is incorrect (in the sense that a DIV tag is missing or not properly closed). Can you confirm that the login you provided for your forum (for me) is still active ? I’ll need to login and take a look.

  • Hey @phenomlab , yes the login is still active. You can also register if you want and I’ll join the admin group. Regarding the design, I rebuilt the template as an html file over the weekend and then re-cleaned it. So that there are no Div errors. However, the forum generally has a problem with a div with the container. it says class=“row container”. Actually, this is without the row.

    usually it’s just class=“container” without row

    I can also send you the html template if you want to have a look at it before

  • @riekmedia said in NodeBB Design help:

    I can also send you the html template if you want to have a look at it before

    Thanks. Can you send the template ? Either here or via PM is fine.

  • @riekmedia I’ve applied some new CSS to your site. Can you reload the page and try again ?

    For the record, this is what I added

    #footer {
        background: #2d343e;
        border-top: 4px solid #2d343e;
        font-size: 0.9em;
        margin-top: 70px;
        padding: 80px 0 0;
        position: relative;
        clear: both;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        margin-left: -15px;
        margin-right: -338px;
    }
    

    The /categories page seems a bit messed up, so looking at that currently

    EDIT - issued some override CSS in the CATEGORIES widget

    <!--- CSS fix for overspill on /categories page - DO NOT DELETE -->
    <style>
    #footer {
        margin-right: -45px;
    }
    </style>
    

    That should resolve the /categories issue.

  • RiekMediaundefined RiekMedia has marked this topic as solved on

Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗

  • 5 Votes
    4 Posts
    481 Views

    @DownPW thanks. I forgot about that.

  • 1 Votes
    2 Posts
    611 Views

    @eveh Welcome board 🙂

    The code you are referring to is custom written as no such functionality exists under NodeBB. However, adding the functionality is relatively trivial. Below are the required steps

    Navigate to /admin/appearance/customise#custom-header Add the below code to your header, and save once completed <ol id="mainbanner" class="breadcrumb"><li id="addtext">Your Title Goes Here</li></ol> Navigate to /admin/appearance/customise#custom-js and add the below code, then save $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { // Initialise mainbanner ID, but hide it from view $('#mainbanner').hide(); var pathname = window.location.pathname; if (pathname === "/") { $("#addtext").text("Your Title"); $('#mainbanner').show(); } else {} // If we want to add a title to a sub page, uncomment the below and adjust accordingly //if (pathname === "/yourpath") { //$("#addtext").text("Your Title"); //$('#mainbanner').show(); //} }); }); Navigate to /admin/appearance/customise#custom-css and add the below CSS block .breadcrumb { right: 0; margin-right: auto; text-align: center; background: #0086c4; color: #ffffff; width: 100vw; position: relative; margin-left: -50vw; left: 50%; top: 50px; position: fixed; z-index: 1020; }

    Note, that you will need to adjust your CSS code to suit your own site / requirements.

  • Quote design CSS

    Solved Customisation
    15
    4 Votes
    15 Posts
    682 Views

    @DownPW yes, that does make sense actually. I forgot to mention the layout of Sudonix is custom so that would have an impact on the positioning.

    Good spot 🙂

  • 2 Votes
    7 Posts
    761 Views

    @phenomlab said in NodeBB changing color of the text:

    @marusaky This ought to to it

    a.permalink, a.permalink:active, a.permalink:focus, a.permalink:hover { color: #ffffff; }

    works great, thanks a lot

  • 0 Votes
    5 Posts
    778 Views

    @pwsincd hi. Just following up on this thread (I know it’s old) but was curious to understand if it’s still an issue or not ?

  • 4 Votes
    25 Posts
    2k Views

    Topic open
    https://sudonix.com/topic/207/nodebb-help-for-my-custom-css

  • 4 Votes
    5 Posts
    642 Views

    @phenomlab thanks 🙏

  • Display tweets in widget [NodeBB]

    Solved Customisation
    29
    4 Votes
    29 Posts
    2k Views

    @phenomlab brilliant, many thanks Mark 😁