FA+ Category Strip Icons?

[RobParker]

Is it possible to add icons to the start of the FA+ forum category strips like they're done on the pixelexit.com style?

(I've not downloaded FA+ yet, will start having a play with it tonight so sorry if this is really obvious either way!)

 

[Russ]

Is it possible to add icons to the start of the FA+ forum category strips like they're done on the pixelexit.com style?

View attachment 7213

(I've not downloaded FA+ yet, will start having a play with it tonight so sorry if this is really obvious either way!)

Ya simple CSS edit, are you wanting the background with the icons as well or just the custom icons?

 

[RobParker]

Similar to what you have here would be great.

(Is pixelexit.com running FA+ or a modified version of it? It looks similar but not identical so I wasn't sure)

 

[Russ]

So.. I'll need a little time to get our CSS properly running on XF2, for now, you can easily get the icons:

.block--category
{
    .categoryTextLeft:before
    {
            font-family: FontAwesome;
            font-weight: normal;
            text-align: center;
            margin-right: 5px;
    }
}
.block--category1 .categoryTextLeft:before { content: "\f015"; }
.block--category6 .categoryTextLeft:before { content: "\f1d2"; }
.block--category12 .categoryTextLeft:before { content: "\f0fb"; }
.block--category16 .categoryTextLeft:before { content: "\f14c"; }

Additionally, if you go to Style Properties -> Node/forum list and check: Node ID Helper (acp search: xbNodeIDHelper) it will show the category id numbers for only admins:

 

[RobParker]

Thanks!

No rush but would be cool to get the CSS when you've got it sorted

 

[RobParker]

If this could also work to style (give a background to) the Block Headers as well as the category strips that'd be cool too.

 

[RobParker]

I assume this could be done by for the block headers adding a background image here

but that doesn't seem to work.

 

[Russ]

It should work, what image call did you use?

 

[RobParker]

I tried just adding an image to the background -> image setting but that didn't do it.

This worked though (for the block header)

.block-header {
    background: #102334 url('images/pagebg.png') repeat left center !important;
}

The only thing I can't figure out is how to do a darker box behind the icon and do the little triangle to the right of it as in the image in the first post (and on here).

 

[Ruby]

So.. I'll need a little time to get our CSS properly running on XF2, for now, you can easily get the icons:

.block--category
{
    .categoryTextLeft:before
    {
            font-family: FontAwesome;
            font-weight: normal;
            text-align: center;
            margin-right: 5px;
    }
}
.block--category1 .categoryTextLeft:before { content: "\f015"; }
.block--category6 .categoryTextLeft:before { content: "\f1d2"; }
.block--category12 .categoryTextLeft:before { content: "\f0fb"; }
.block--category16 .categoryTextLeft:before { content: "\f14c"; }

Additionally, if you go to Style Properties -> Node/forum list and check: Node ID Helper (acp search: xbNodeIDHelper) it will show the category id numbers for only admins:

View attachment 7218

Russ do we add this code to Extra.Less in the templates?

 

[Steve]

Russ do we add this code to Extra.Less in the templates?

Yes

 

[Russ]

We've added an extra div into the category headers for the next update so the CSS will be a little easier Rob, I can provide it then.