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 💗

  • Heading text on NodeBB forum

    Solved Customisation
    27
    1 Votes
    27 Posts
    2k Views

    @mventures I’ve not done anything here.

  • NodeBB Theme/Skin Switcher

    Solved Customisation
    38
    7 Votes
    38 Posts
    2k Views

    @Teemberland great spot ! You should create a PR for that so they can include it in the official repository.

    Just be aware that any subsequent releases will overwrite your fix without the PR.

  • 3 Votes
    11 Posts
    703 Views

    @cagatay no problems

  • 1 Votes
    2 Posts
    608 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.

  • 5 Votes
    9 Posts
    925 Views

    is there any way to see whose reputation is changed by this plugin?

  • 3 Votes
    12 Posts
    980 Views

    @cagatay you’ll need to define this in the body tag (or another element if you want greater or more granular targets) - for example

    body { font-family: "Poppins"; font-size: 16px; }

    Essentially, you use the font-size CSS directive.

  • 0 Votes
    7 Posts
    724 Views

    @downpw ooops. Forgot that. Thanks for adding.

  • CSS Help on my Flarum

    Solved Customisation
    5
    2 Votes
    5 Posts
    429 Views

    @mike-jones Yes, you’ll typically see this type of behaviour if there is another style that has higher priority in the sense that yours will be overridden. Using !important will override the higher preference, but should be used sparingly rather than everywhere.