XF 1.x Font Awesome Icon(s) into CategoryStrip

jonlar

Registered
Hello. I would like to add different Font Awesome Icon(s) to each CategoryStrip, after the Categories Title and the same Icon as a small one before the Title instead of the Block the Style is normally using

Bildschirmfoto 2017-03-23 um 17.59.09.png


As you can see the Font Awesome GamePad Icon is added to the Right with a opacity.
The next step now is to have the same Icon 2 more times to the left, each a bit smaller like O O O
The 0 stays for the GamePad Icon :)

To get the FA Icon displayed I needed to delete ".nodeList .categoryStrip .nodeTitle:before" within the Template "xb_style.css" out of this Code Part
Code:
.sidebar h3:before, .nodeList .categoryStrip .nodeTitle:before, .textWithCount span.text:before, html .container .xengallerySideBar .section h3:before,
.resourceListSidebar .secondaryContent h3:first-child:before {

otherwise i could not get the Icon displayed.

This is the Code i use to display the FA Icon.
For global i use this so i don´t need to add it to every Category Node Number (smaller the code a bit)
Code:
.nodeList .categoryStrip .nodeTitle::before {
position: absolute;
opacity: 0.05;
color: rgb(86, 50, 130)
}

And thats the Code i use for every CategoryStrip, since rotation, position is always a little different and because every category uses a different icon too
Code:
.nodeList .node_X .categoryStrip .nodeTitle::before {

font-family: FontAwesome;
content: "\f11b";
right: 50px;
top: -35px;
font-size: 80px;
transform: rotate(15deg);
}

The X in .node_X is for each Category Number.

In Short:
Each Category Strip has its own FA Icon. A small one before the Title (replacing with the Block) and the same Icon 3 Times, first bigger, then smaller to the left.

Hope that someone can help me with that. Thanks
 

Russ

Pixel Exit Staff
Here's what I'd do...

open: node_category_level_1

Find:

Code:
<div class="xbCategoryImage"></div>

Adjust to:

Code:
<div class="xbCategoryImage"><span></span></div>

Then your extra.css:

Code:
.xbCategoryImage:before, .xbCategoryImage:after, .xbCategoryImage span:after
{
   font-family: FontAwesome;
   content: "\f11b";
   right: 50px;
   top: -35px;
   font-size: 80px;
   transform: rotate(35deg);
   position: absolute;
   opacity: 0.05;
   color: rgb(86, 50, 130)
}
.XenBase .xbCategoryImage:after
{
   right: 125px;
   font-size: 60px;
   top: -15px;
}
.XenBase .xbCategoryImage span:after
{
   right: 200px;
   font-size: 40px;
   top: -2px;
}

Result would be:


Screenshot_1.png


Is that what you're after?
 

jonlar

Registered
Ahh ok...Thats much easier. So i can easily add it via TMS. Thanks a lot.
Do you also have an idea how i can change the little Block, before the Title, with the small Pad Image?

Edit: I´m using the Core Style
 
Last edited:

Russ

Pixel Exit Staff
They use this as their CSS:

Code:
.nodeList .categoryStrip .nodeTitle:before {
   border-left: 9px solid @xbColor1;
   content: "";
   display: inline-block;
   height: 15px;
   margin-right: 5px;
   line-height: 22px;
   position: relative;
   top: 2px;
   width: 0;
}

So you can override it by something like:

Code:
.XenBase .nodeList .categoryStrip .nodeTitle:before
{
   font-family: FontAwesome;
   content: "\f11b";
border-width: 0px;
   font-size: 80px;
   transform: rotate(35deg);
   opacity: 0.05;
   color: rgb(86, 50, 130)
height: auto;
}

You may need to adjust of course :)
 
Last edited:

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.