XF 2.0 Fontawesome icons on help page?

[Alien]

Hey,

I'd like to customize the help page, with fontawesome icons for each selection.

How would I go about this on 2.0?

Thank you!

 

[Steve F]

Do you want icons in the side navigation items? You can add font awesome to the page titles in the ACP, admin.php?help-pages/

 

[Alien]

I thought about that, but I know not all fields always handle html. I guess that will work just fine!

Thank you Steve!

Do you want icons in the side navigation items? You can add font awesome to the page titles in the ACP, admin.php?help-pages/

 

[Alien]

Do you want icons in the side navigation items? You can add font awesome to the page titles in the ACP, admin.php?help-pages/

I tested this out, and it will NOT allow you to edit Terms & Rules, Cookies, Smilies, Trophies, BBCodes, and others that come with XF 2. "Only a limited number of fields in this item can be edited".

 

[Russ]

I tested this out, and it will NOT allow you to edit Terms & Rules, Cookies, Smilies, Trophies, BBCodes, and others that come with XF 2. "Only a limited number of fields in this item can be edited".

Debug mode will let you edit them.

 

[Alien]

Debug mode will let you edit them.

The problem with using this method, is you get a bunch of ugly code in your browser tabs for the help page you are on. You also get icons both on the help nav menu, AND on the right side description listing of the main help index.

Not a ideal solution, was hoping to be able to make it look like XF 1 could be configured, editing the help wrapper template. Is there no other way?

Thanks!

 

[Russ]

The problem with using this method, is you get a bunch of ugly code in your browser tabs for the help page you are on. You also get icons both on the help nav menu, AND on the right side description listing of the main help index.

Not a ideal solution, was hoping to be able to make it look like XF 1 could be configured, editing the help wrapper template. Is there no other way?

Thanks!

Suppose you could edit help_wrapper, add this bit:

item-{$page.page_id}

in the 2 bottom spots:, and help-links class to the top box.



Then the CSS would look something like:

.help-links .blockLink
{
    &:before
    {
            content: "\f0e0";
            display: inline-block;
            font: normal normal normal 14px/1 FontAwesome;
            font-size: inherit;
            text-rendering: auto;
            margin-right: 5px;
    }
    &.item-smilies:before { content: "\f118"; }
    &.item-bb_codes:before { content: "\f040"; }
}

 

[Alien]

Suppose you could edit help_wrapper... <snip>

Ok I tested this code out, and it worked perfectly. Only downside, is that it ONLY has the icons appear on the help index. If you click any help selection, the icons vanish in the menu. So it would have to somehow carry over to each selection somehow and I have no idea how to do that.

 

[Russ]

Ok I tested this code out, and it worked perfectly. Only downside, is that it ONLY has the icons appear on the help index. If you click any help selection, the icons vanish in the menu. So it would have to somehow carry over to each selection somehow and I have no idea how to do that.

Edited my original post, should help.

 

[Alien]

Works PERFECTLY! You've gone above and beyond!

Thanks so much for the help, @Russ !

 

[Emre]

.help-links .blockLink
{
    &:before
    {
            content: "\f0e0";
            display: inline-block;
            font: normal normal normal 14px/1 FontAwesome;
            font-size: inherit;
            text-rendering: auto;
            margin-right: 5px;
    }
    &.item-smilies:before { content: "\f118"; }
    &.item-bb_codes:before { content: "\f040"; }
}

Are you sure this code works?

 

[Russ]

Are you sure this code works?

Are you sure it doesn't work?

 

[Emre]

@Russ , Absolutely. Code not working

 

[Russ]

@Russ , Absolutely. Code not working

Did you make the template edit? Add the 3 bits of html?

 

[Emre]

How?

 

[Russ]

How?

Read my post again, I feel the instructions are pretty clear. You need to edit a template and add CSS.

 

[Emre]

I am so sorry @Russ , I did not notice

 

[Alien]

It works swimmingly!

 

[Alien]

Just a follow-up note that with the recent update to XF 2.0.10.0, the help_wrapper has changed...

This still works, but you'll just need to change one of the items in the original instructions...

Add:

item-{$page.page_id}

...once, at the following location:

 

[Emre]

Just a follow-up note that with the recent update to XF 2.0.10.0, the help_wrapper has changed...
This still works, but you'll just need to change one of the items in the original instructions...
Add:

item-{$page.page_id}

...once, at the following location:

extra.less add;

.p-body-sideNavContent a[href*="/yardim/ifadeler"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f118" }
.p-body-sideNavContent a[href*="/yardim/bb-kodlar"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f121" }
.p-body-sideNavContent a[href*="/yardim/oduller"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f091" }
.p-body-sideNavContent a[href*="/yardim/cerezler"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f0c1" }
.p-body-sideNavContent a[href*="/yardim/kosullar"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f05a" }
.p-body-sideNavContent a[href*="/yardim/gizlilik"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f21b" }
.p-body-sideNavContent a[href*="/yardim/kaynak-kurallari"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f019" }
.p-body-sideNavContent a[href*="/yardim/kaynak-sartlari"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f0a1" }
.p-body-content .block-textHeader a[href*="/yardim/ifadeler"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f118" }
.p-body-content .block-textHeader a[href*="/yardim/bb-kodlar"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f121" }
.p-body-content .block-textHeader a[href*="/yardim/oduller"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f091" }
.p-body-content .block-textHeader a[href*="/yardim/cerezler"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f0c1" }
.p-body-content .block-textHeader a[href*="/yardim/kosullar"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f05a" }
.p-body-content .block-textHeader a[href*="/yardim/gizlilik"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f21b" }
.p-body-content .block-textHeader a[href*="/yardim/kaynak-kurallari"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f019" }
.p-body-content .block-textHeader a[href*="/yardim/kaynak-sartlari"]:before{ font-family: "FontAwesome"; padding-right: 5px; content: "\f0a1" }

Use;
/yardim/ifadeler - /your/url change

Demo;