How to make Category Sections?


  • GNU/Linux

    someone knows how to separate category as there https://cryptofr.com/

    Bitcoin line
    how to add a string between category


  • Admin

    @Dawid-Glomba Looks like they use custom CSS for those headers:

    0_1462627355479_Selection_033.png


  • GNU/Linux

    @julian Ok but I do not know how I can add a css.
    this my forum: http://crox.pl/
    and my css:
    body {
    background-color: #F4F4F4;

    }

    #content {
    background-color: white;
    border: 1px solid #EDEDED;
    border-radius: 5px;
    padding-top: 20px;
    }

    .categories-title{
    color: #000;
    }

    a {
    color: #165199;
    }

    how do I add this line as:
    ul.categories [data-cid="19"], ul.categories [data-cid="27"], ul.categories [data-cid="10"], ul.categories [data-cid="61"], ul.categories [data-cid="44"], ul.categories [data-cid="13"], ul.categories [data-cid="46"]


  • Admin

    You'll want to add it like it is defined at the right there.

    ul.categories [data-cid="19"], ul.categories [data-cid="27"], ul.categories [data-cid="10"], ul.categories [data-cid="61"], ul.categories [data-cid="44"], ul.categories [data-cid="13"], ul.categories [data-cid="46"] {
        background: red;
    }
    

    That site used the :before pseudo-element. You'll want to read more about them here


  • GNU/Linux



  • ah ah, yeah I've done a little hack to make it look like big sections :)

    you can use other images ^^

    Might be interesting to have sections included in Nodebb natively ? :D


  • Community Rep

    I would like to see it in core. It seems like a fairly common feature.


  • GNU/Linux

    ul.categories [data-cid="102"]:before {
        content: "Społeczność CroX";
        background: #007bff;
        color: #fff;
        display: block;
        position: relative;
        height: 40px;
        line-height: 40px;
        font-size: 15px;
        border-bottom: 1px #007bff solid;
        text-align: left;
        padding-left: 70px;
        font-style: normal;
        text-transform: uppercase;
        margin-bottom: 20px;
        font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
        border-radius: 5px;
        margin-left: 10px;
    }
    

    Edit: Added formatting -- @Julian


  • Admin

    @yariplus We had a plugin for it, but it broke fairly quickly :laughing:

    Given that it is just CSS, it could actually be done as a plugin, but again, that's more of a creative use of CSS, as opposed to full support...

    The trickiness comes from how people expect it to behave... are the category sections purely aesthetic? Are they actually categories? If the latter, can topics be made in the section categories?


  • GNU/Linux

    I like the classic look of such forum: P
    This css has errors attributes However, I hope you do not mind a job forum


  • Community Rep

    @julian I checked a couple different forum softwares, and all of them were purely cosmetic.

    A few of them had privileges settings that propagated to their children, but this was completely unnecessary and just a shortcut for assigning to each child.


Log in to reply
 

Looks like your connection to NodeBB was lost, please wait while we try to reconnect.