Section

dnkls

Hello world
I install Nodebb ferst time , its looks really really great and awsome .
Plz help me set section like this forum http://i.imgur.com/0PRRV6m.png , im seacrh all settings but cant find this option.

yariplus

nodebb-plugin-category-sections

dnkls

@yariplus said in Section:

nodebb-plugin-category-sections

I try it before i open this topic, and this plugin don't work with Persona themes, you can see issue about that on github wich you show me.
But as we see this example http://i.imgur.com/0PRRV6m.png use Persona themes and section work and look very nise and very useful.
Plz if some one know how make section like that http://i.imgur.com/0PRRV6m.png show me how

yariplus

@dnkls If you want exactly what's on that site, you can copy their css by just right clicking on it, and putting the css in your custom header section.

yariplus

If you want to use the plugin, replacing this line will fix it.

https://github.com/yariplus/nodebb-plugin-category-sections/commit/8f16a09fd497119cf3dd62b6116b4c396f09f1d9

zsbox10

no no no

dnkls

Not working((( im realy wont the same as in example http://i.imgur.com/0PRRV6m.png but cant find and how they add font awsome icon? Maybe this forum with custom Persona theme?

yariplus

It works.

There's no custom theme.They are just using plain old CSS. The CSS will work on any theme. Learn how the CSS works.

https://puu.sh/wBJpZ/fa2f9d9138.png

Here it is working on my forum.

https://puu.sh/wBJq4/a494fd370b.png

Alex Bro

@yariplus Bro may be you try post your css code below not just screen shot )

Alex Bro

@yariplus Can you add the text version of your css?

yariplus

@alex-bro

ul.categories [data-cid="1"]::before {
    content: "Money";
    background: #1e1f33 url(https://i.imgur.com/liB8eUb.png) no-repeat 10px center;
}

ul.categories [data-cid="3"]::before {
    content: "Blocks";
    background: #1e1f33 url(https://i.imgur.com/eSUaQuV.png) no-repeat 10px center;
}


ul.categories [data-cid="1"]::before, ul.categories [data-cid="3"]::before {
    color: #fff;
    display: block;
    position: relative;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    border-bottom: 1px #0c2b51 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;
}

Alex Bro

@yariplus said in Section:

ul.categories [data-cid="1"]::before {
content: "Money";
background: #1e1f33 url(https://i.imgur.com/liB8eUb.png) no-repeat 10px center;
}

ul.categories [data-cid="3"]::before {
content: "Blocks";
background: #1e1f33 url(https://i.imgur.com/eSUaQuV.png) no-repeat 10px center;
}

ul.categories [data-cid="1"]::before, ul.categories [data-cid="3"]::before {
color: #fff;
display: block;
position: relative;
height: 40px;
line-height: 40px;
font-size: 15px;
border-bottom: 1px #0c2b51 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;
}

Good! fnx