UI.X 1.5.22.0

[Dad.]

I'm thinking of adding Font Awesome icons next to node and category titles.

On the same line and next to the title. E.g. " ICON Node Title"

Please does anyone know whats an easy and effective way to go about doing this?

Thanks!

We built this in.

Go to Style Properties > UI.X Forum Nodes > Category Strip icons (turn that on).

Then, go to your EXTRA.css or proprietary CSS file and add this CSS in:

.nodeList .node.category.node_1 .categoryStrip .nodeTitle:before {content: '\f02d';}

Where the part in red is the node id of the category. And the part in blue is the character code of the font you want. For example, the character codes for FontAwesome can be found on their cheatsheet. Make sure you only use the part after the x and before the ;. It starts with an 'f' and ends in a number, in other words.

 

[BassMan]

We built this in.

Great, didn't know that

 

[Dad.]

Your Way works too but with the method above you can use unique icons per node. Thanks for your help though.

 

[FredC]

Is it known the fixed sidebar overlaps the custom footer?

 

[Dad.]

Is it known the fixed sidebar overlaps the custom footer?
View attachment 79058

Yes, we have it fixed. Will be releasing a fix in the next few days.

 

[FredC]

Oh wow i just discovered the new Mobile navigation. (cant wait to get styling that) Sweet!!!!!!!!

 

[sinful]

We built this in.

Go to Style Properties > UI.X Forum Nodes > Category Strip icons (turn that on).

Then, go to your EXTRA.css or proprietary CSS file and add this CSS in:

.nodeList .node.category.node_1 .categoryStrip .nodeTitle:before {content: '\f02d';}

Where the part in red is the node id of the category. And the part in blue is the character code of the font you want. For example, the character codes for FontAwesome can be found on their cheatsheet. Make sure you only use the part after the x and before the ;. It starts with an 'f' and ends in a number, in other words.

Thanks so much for this!! and @BassMan thanks for ur help too!!

How about for forum nodes? this edit seems to be for category only

 

[rdn]

Thanks so much for this!! and @BassMan thanks for ur help too!!

How about for forum nodes? this edit seems to be for category only

I hope they will implement this as an option next release

 

[rdn]

We built this in.

Go to Style Properties > UI.X Forum Nodes > Category Strip icons (turn that on).

Then, go to your EXTRA.css or proprietary CSS file and add this CSS in:

.nodeList .node.category.node_1 .categoryStrip .nodeTitle:before {content: '\f02d';}

Where the part in red is the node id of the category. And the part in blue is the character code of the font you want. For example, the character codes for FontAwesome can be found on their cheatsheet. Make sure you only use the part after the x and before the ;. It starts with an 'f' and ends in a number, in other words.

Why did you use the old version? Where v4 is already out and supported: http://fortawesome.github.io/Font-Awesome/cheatsheet/

 

[BassMan]

Thanks so much for this!! and @BassMan thanks for ur help too!!

How about for forum nodes? this edit seems to be for category only

I hope they will implement this as an option next release

New add-on released to do that: http://xenforo.com/community/resources/*******-custom-node-style.3445/

 

[rdn]

I know it can be done with just css
As long as I can avoid/minimize my addon, I will

 

[BassMan]

As long as I can avoid/minimize my addon, I will

Yes, I'm in decreasing add-on mood too

*btw: wow, like those new fetaures in XF 1.4 How easy to quote now!

 

[2TonWaffle]

It's on uix_quickScripts_head template.

Be any issue in removing it? Strange in that it only appears when upgrading the previous version style but, does not show when doing a new, fresh install.

 

[Dad.]

I hope they will implement this as an option next release

This is built already in the current version as well. I posted about it in the release notes.

Why did you use the old version? Where v4 is already out and supported: http://fortawesome.github.io/Font-Awesome/cheatsheet/

We are using 4.1.0 in the current version so not sure what you mean.

New add-on released to do that: http://xenforo.com/community/resources/*******-custom-node-style.3445/

Like I said, we have this built. Check the setting on in UI.X Forum Nodes > Node Stats as Icons.

Be any issue in removing it? Strange in that it only appears when upgrading the previous version style but, does not show when doing a new, fresh install.

Whats the issue here exactly?

 

[rdn]

This is built already in the current version as well. I posted about it in the release notes.

I mean how can we implement custom icon per forum node?
Like implementing custom icon for category.

We are using 4.1.0 in the current version so not sure what you mean.

In your link here: http://xenforo.com/community/threads/ui-x-paid.57944/page-106#post-800723
You linked the old cheatsheet: http://fortawesome.github.io/Font-Awesome/3.2.1/cheatsheet/

 

[Dad.]

I mean how can we implement custom icon per forum node?
Like implementing custom icon for category.

Ah, same process really. Just instead of .category you can just remove that part. Ill post up something in the documentation.

In you link here: http://xenforo.com/community/threads/ui-x-paid.57944/page-106#post-800723
You linked the old cheatsheet: http://fortawesome.github.io/Font-Awesome/3.2.1/cheatsheet/

Ah. Thats just Google's first result, but yeah you can use whatever version is installed. UI.X by default currently is 4.1.0.

 

[rdn]

Ah, same process really. Just instead of .category you can just remove that part.

So something like:

.nodeList .node.category.node_1 .nodeTitle:before {content: '\f02d';}

But I only want some of the forum nodes to have icon and fall back others not declared to use the default one
How?

 

[2TonWaffle]

Whats the issue here exactly?

Only shows on an upgraded style not a fresh install.

 

[2TonWaffle]

Now stuck in trying to figure out in how only a few nodes are sticking to the previous images and not reflecting the changes I've made to have new images show.

.nodeList .node_14 .categoryForumNodeInfo {
    background: url("styles/uix/TLW_Hub.png") no-repeat scroll !important;
}
 
.nodeList .node_14 .primaryContent {
    background: url("styles/uix/TLW_Hub.png") no-repeat scroll !important;
}

Using the above in the extra.css




Update: Figured in what was causing this issue. Some reason the extra.css had become bloated with copies of itself (over 30k characters) which was causing the old edits to over take the new. Went in and removed the extra copies within and everything is back to normal. Still have the js issue at the top of the page.

 

[Dakis]

Is there a way to put background images left and right of the forum (in a fixed width of course) that are also clickable? I want to try and use it as a "skin" offering to potential advertisers.