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?
 

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

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.