MyBB Support

Make Forum Icons just like NBB

Submitted by John Dave B., , Thread ID: 18486

Thread Closed
John Dave B.
Junior Member
Level:
0
Reputation:
1
Posts:
83
Likes:
0
Credits:
16
19-02-2016, 11:43 AM
#1
Can someone give me a tutorial on how to make it just like NBB? Smile I wanted to apply this though to my incoming forum site. Smile

RE: Make Forum Icons just like NBB

linkzy
No pressure, no diamonds
Level:
0
Reputation:
181
Posts:
5.34K
Likes:
341
Credits:
54
19-02-2016, 11:53 AM
#2
Ficons

(After following the first part of the tutorial) Still in Templates, find Forum Bit Templates -> forumbit_depth2_forum (Do the same for forumbit_depth2_cat) and replace:


Code:
<div class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"><i class="fa fa-comments"></i></div>

With:

Code:
<div class="forum_status forum_{$lightbulb['folder']} ajax_mark_read ficons_{$forum['fid']}" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"><i class="fa fa-comments"></i></div>

Find the following in global.css:

Code:
.forum_status {
height: 50px;
width: 50px;
font-size: 30px;
text-align: center;
}

.forum_status i {
display: inline-block;
line-height: 50px;
}

.forum_on {
color: #0094d1;
}

.forum_off, .forum_offlock, .forum_offlink {
color: #333;
}

.forum_off i {
opacity: .4;
}

.forum_offlock i:before {
content: "\f023";
}

.forum_offlink i:before {
content: "\f0c1";
}

After it, add this:

Code:
.ficons_2 i:before {
content: "\f000";
}

.ficons_3 i:before {
content: "\f1ba";
}

.ficons_4 i:before {
content: "\f0f5";
}

.ficons_6 i:before {
content: "\f0e4";
}

.ficons_7 i:before {
content: "\f03e";
}

The only parts of this you'll want to change are the numbers and the icons (There's some info at the end of this post about that). To find the number of a forum, when editing one in Forum Management, just look in the address bar for &fid=, whatever number follows that is the number to use in the CSS selector.




Finding New Icons
If you're using Google Chrome you can go here http://fortawesome.github.io/Font-Awesome/icons/ and right click > inspect element. Then expand the <i> tag and click the ::before element, which should show the icon in the right sidebar.




Or just goto - http://community.mybb.com/thread-156711.html and see the ficons part
| A | v4hl| Addicted | Senpai | Sui | Sensei | H | fdigl |


RE: Make Forum Icons just like NBB

John Dave B.
Junior Member
Level:
0
Reputation:
1
Posts:
83
Likes:
0
Credits:
16
OP
19-02-2016, 12:21 PM
#3
19-02-2016, 11:53 AM
Quanity Wrote:
Ficons

(After following the first part of the tutorial) Still in Templates, find Forum Bit Templates -> forumbit_depth2_forum (Do the same for forumbit_depth2_cat) and replace:


Code:
<div class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"><i class="fa fa-comments"></i></div>

With:

Code:
<div class="forum_status forum_{$lightbulb['folder']} ajax_mark_read ficons_{$forum['fid']}" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"><i class="fa fa-comments"></i></div>

Find the following in global.css:

Code:
.forum_status {
height: 50px;
width: 50px;
font-size: 30px;
text-align: center;
}

.forum_status i {
display: inline-block;
line-height: 50px;
}

.forum_on {
color: #0094d1;
}

.forum_off, .forum_offlock, .forum_offlink {
color: #333;
}

.forum_off i {
opacity: .4;
}

.forum_offlock i:before {
content: "\f023";
}

.forum_offlink i:before {
content: "\f0c1";
}

After it, add this:

Code:
.ficons_2 i:before {
content: "\f000";
}

.ficons_3 i:before {
content: "\f1ba";
}

.ficons_4 i:before {
content: "\f0f5";
}

.ficons_6 i:before {
content: "\f0e4";
}

.ficons_7 i:before {
content: "\f03e";
}

The only parts of this you'll want to change are the numbers and the icons (There's some info at the end of this post about that). To find the number of a forum, when editing one in Forum Management, just look in the address bar for &fid=, whatever number follows that is the number to use in the CSS selector.




Finding New Icons
If you're using Google Chrome you can go here http://fortawesome.github.io/Font-Awesome/icons/ and right click > inspect element. Then expand the <i> tag and click the ::before element, which should show the icon in the right sidebar.




Or just goto - http://community.mybb.com/thread-156711.html and see the ficons part

Well I've tried this using the Square theme but it fails me to work :(

RE: Make Forum Icons just like NBB

Stoic
Fortis Fortuna Adiuvat
Level:
0
Reputation:
38
Posts:
273
Likes:
51
Credits:
119
19-02-2016, 01:24 PM
#4
A little more explanation on what/how it isn't working would be a good start. What steps have you done and have you made sure you have followed the instructions?
Without nipples, breasts would be pointless.

RE: Make Forum Icons just like NBB

John Dave B.
Junior Member
Level:
0
Reputation:
1
Posts:
83
Likes:
0
Credits:
16
OP
19-02-2016, 02:06 PM
This post was last modified: 20-02-2016, 09:21 AM by John Dave B.
#5
19-02-2016, 01:24 PM
Stoic Wrote:
A little more explanation on what/how it isn't working would be a good start. What steps have you done and have you made sure you have followed the instructions?

I forgot how I did it but I gotta try it again. I'll reup this thread as soon as there will be issues about it.

Additional question. How about the forum status though? Will that work too?

Okay! Now I got the tutorial but the question is how do I change my forum icons using ficons? Like is it on the css?

RE: Make Forum Icons just like NBB

John Dave B.
Junior Member
Level:
0
Reputation:
1
Posts:
83
Likes:
0
Credits:
16
OP
26-02-2016, 02:29 AM
#6
Just wanted to re-up this post tho. Because I'm having problems to my forum. I have followed the instructions given but it gave me an output of this. :( hope someone will help me with it. :(

http://i.imgur.com/y35i8Ke.png

RE: Make Forum Icons just like NBB

Stoic
Fortis Fortuna Adiuvat
Level:
0
Reputation:
38
Posts:
273
Likes:
51
Credits:
119
26-02-2016, 02:42 AM
#7
What exactly is your issue? Icons are appearing as your screenshot shows.
And if you want, I could have a look at your forum. Just pm me to avoid getting in trouble (forum advertising).
Without nipples, breasts would be pointless.

RE: Make Forum Icons just like NBB

Aoki
retired
Level:
83
Reputation:
348
Posts:
7.89K
Likes:
2.3K
Credits:
1.7K
26-02-2016, 02:50 AM
#8
26-02-2016, 02:29 AM
JohnDaveB. Wrote:
Just wanted to re-up this post tho. Because I'm having problems to my forum. I have followed the instructions given but it gave me an output of this. :( hope someone will help me with it. :(

http://i.imgur.com/y35i8Ke.png

Remove the old forum status css code from your global.css file. You didn't follow the instructions of the tutorial correctly.

RE: Make Forum Icons just like NBB

John Dave B.
Junior Member
Level:
0
Reputation:
1
Posts:
83
Likes:
0
Credits:
16
OP
26-02-2016, 02:59 AM
#9
26-02-2016, 02:50 AM
Aoki Wrote:
26-02-2016, 02:29 AM
JohnDaveB. Wrote:
Just wanted to re-up this post tho. Because I'm having problems to my forum. I have followed the instructions given but it gave me an output of this. :( hope someone will help me with it. :(

http://i.imgur.com/y35i8Ke.png

Remove the old forum status css code from your global.css file. You didn't follow the instructions of the tutorial correctly.

Oh wait! :v It's working fine now :v Maybe it is because of the browser cache :o I dunno wth is going on with it tho.

RE: Make Forum Icons just like NBB

Stoic
Fortis Fortuna Adiuvat
Level:
0
Reputation:
38
Posts:
273
Likes:
51
Credits:
119
26-02-2016, 03:07 AM
This post was last modified: 26-02-2016, 03:14 AM by Stoic
#10
26-02-2016, 02:59 AM
John Dave B. Wrote:
Oh wait! :v It's working fine now :v Maybe it is because of the browser cache :o I dunno wth is going on with it tho.
Quick tip: When you're make changes to your site/forum be sure to do a hard refresh (ctrl + f5) so that you're sure that the changes will take effect immediately.
Without nipples, breasts would be pointless.

Users browsing this thread: 1 Guest(s)