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

  • 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;
    }
    
  • @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 😛

  • @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 ?

  • @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:

    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

  • 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.

  • 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 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
    2
    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
    737 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
    723 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] greeting message

    Solved Customisation
    2
    1
    3 Votes
    2 Posts
    705 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
  • [NODEBB] Stats

    Unsolved Customisation
    20
    1
    2 Votes
    20 Posts
    2k Views
    @phenomlab said in [NODEBB] Stats: @jac or I land up fixing it I wouldn’t put it past you
  • [NodeBB] username cards

    Solved Customisation
    8
    5 Votes
    8 Posts
    1k Views
    @phenomlab Aha…nice to know. As always thank you for the reply and information.
  • How to set a signature in NodeBB?

    Solved Customisation
    4
    2 Votes
    4 Posts
    888 Views
    @phenomlab said in How to set a signature in NodeBB?: @jac No issues at all with copying. This is set using the signature for the user you are posting as. In the case of Hostrisk, it’s set like the below [image: 1633427929198-7bf04183-f6e8-4d72-b0eb-c9a05c9cd24b-image.png] You can set the signature by using https://domain.com/user/theuser/edit Mamy thanks Mark, I’ll set this up later .
  • Customising NodeBB

    Locked Customisation
    3
    0 Votes
    3 Posts
    932 Views
    Closing this thread as a duplicate of https://sudonix.com/topic/12/nodebb-customisation