FA+ Category Strip Icons?

RobParker

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

px.PNG


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

Russ

Pixel Exit Staff
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

Registered
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

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

Code:
.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:

Screenshot_1.png
 

RobParker

Registered
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

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

Screen Shot 2018-01-14 at 13.14.18.png


but that doesn't seem to work.
 

RobParker

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

This worked though (for the block header)

Code:
.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

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

Code:
.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?
 

Russ

Pixel Exit Staff
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.
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.