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 💗

Related Topics
  • Whitespace fixes in Nodebb

    Solved Customisation
    18
    7 Votes
    18 Posts
    1k Views

    @Panda Just circling back here with something of an update (which I think you’ll like). I’ve completely restructured the ranking system. There are now less ranks, with a higher point threshold to reach them.

    More importantly, if you reload the site, you’ll notice that the ranks are now icons.

    I also removed the “Author” badge, and made this a single icon, which (to me) looks much better.

  • who is read NodeBB

    Customisation
    6
    0 Votes
    6 Posts
    632 Views

    @cagatay You should ask in the NodeBB forums. Perhaps reference this post

    https://discuss.flarum.org/d/23066-who-read

  • Changing Background on NodeBB

    Solved Customisation
    4
    0 Votes
    4 Posts
    628 Views

    @cagatay You’d target the body tag and use the below line of CSS

    background: url(/assets/customcss/backgrounds/default/default.png) no-repeat center center fixed;

    Obviously, you need to change the path to suit where your image is being stored.

    More info around the background property can be found here

    https://www.w3schools.com/cssref/css3_pr_background.php

  • NodeBB inline videoplayer

    Solved Customisation
    12
    3 Votes
    12 Posts
    903 Views

    @phenomlab
    YAY! It works
    Thanks so much

  • [NodeBB] greeting message

    Solved Customisation
    2
    3 Votes
    2 Posts
    628 Views

    @pwsincd welcome to sudonix, and thanks for the comments. What your looking for is here

    https://sudonix.com/topic/195/nodebb-welcome-message/3?_=1648295651358

  • Social icon (Nodebb)

    Solved Customisation
    7
    0 Votes
    7 Posts
    1k Views

    @phenomlab said in Social icon (Nodebb):

    @jac I just tested my theory around using the OG image, and according to the Twitter card validator, it works fine

    73e805e1-997b-41bf-9259-51c5052ca8fc-image.png

    fixed 🙂

  • CSS Help on my Flarum

    Solved Customisation
    5
    2 Votes
    5 Posts
    553 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.

  • Customising NodeBB

    Locked Customisation
    3
    0 Votes
    3 Posts
    742 Views

    Closing this thread as a duplicate of https://sudonix.com/topic/12/nodebb-customisation