MyBB Community Forums

MyBB Community Forums > Resources > Tutorials > Easy FontAwesome Buttons
Full Version: Easy FontAwesome Buttons
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

Eric

2014-10-21, 05:33 AM
A while back I set out to edit all posbit buttons with Font Awesome without having to go through editing each template. It worked, however the images were still loaded and pretty much defeated the purpose. Now that 1.8 uses background images set in CSS, this is a really simple task, here's how:

First we need to load Font Awesome, so navigate to your Ungrouped Templates > headerinclude template, and find this:

{$stylesheets}

Add this after:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">



Postbit Buttons

Then navigate to your global.css file and find this:

.postbit_buttons > a:link,
.postbit_buttons > a:hover,
.postbit_buttons > a:visited,
.postbit_buttons > a:active {
 display: inline-block;
 padding: 2px 5px;
 margin: 2px;
 font-size: 11px;
 background: #eee url(images/buttons_bg.png) repeat-x;
 border: 1px solid #ccc;
 color: #555;
}

.postbit_buttons > a:hover {
 border-color: #bbb;
}

.postbit_buttons a span {
 padding-left: 20px;
 display: inline-block;
 height: 16px;
 background-image: url(images/buttons_sprite.png);
 background-repeat: no-repeat;
}

.postbit_buttons a.postbit_find span {
 background-position: 0 0;
}

.postbit_buttons a.postbit_reputation_add span {
 background-position: 0 -20px;
}

.postbit_buttons a.postbit_email span {
 background-position: 0 -40px;
}

.postbit_buttons a.postbit_website span {
 background-position: 0 -60px;
}

.postbit_buttons a.postbit_pm span {
 background-position: 0 -80px;
}

.postbit_buttons a.postbit_quote span {
 background-position: 0 -100px;
}

.postbit_buttons a.postbit_multiquote span {
 background-position: 0 -120px;
}

.postbit_buttons a.postbit_multiquote_on span {
 background-position: 0 -140px;
}

.postbit_buttons a.postbit_edit span {
 background-position: 0 -160px;
}

.postbit_buttons a.postbit_qdelete span {
 background-position: 0 -180px;
}

.postbit_buttons a.postbit_qrestore span {
 background-position: 0 -200px;
}

.postbit_buttons a.postbit_report span {
 background-position: 0 -220px;
}

.postbit_buttons a.postbit_warn span {
 background-position: 0 -240px;
}

.postbit_buttons a.postbit_purgespammer span {
 background-position: 0 -540px;
}

.postbit_buttons a.postbit_reply_pm span {
 background-position: 0 -260px;
}

.postbit_buttons a.postbit_reply_all span {
 background-position: 0 -280px;
}

.postbit_buttons a.postbit_forward_pm span {
 background-position: 0 -300px;
}

.postbit_buttons a.postbit_delete_pm span {
 background-position: 0 -320px;
}

And replace it with:

.postbit_buttons > a:link,
.postbit_buttons > a:hover,
.postbit_buttons > a:visited,
.postbit_buttons > a:active {
 display: inline-block;
 padding: 2px 5px;
 margin: 2px;
 font-size: 11px;
 background: url("images/buttons_bg.png") repeat-x scroll 0% 0% #EEE;
    border: 1px solid #CCC;
 color: #555;
}

.postbit_buttons > a:hover {
 border-color: #bbb;
}

.postbit_buttons a span:before {
    content: "";
    display: inline-block;
    font-family: FontAwesome;
    font-weight: normal;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 5px;
    font-size: 12px;
}

.postbit_buttons a.postbit_find span:before {
 content: "\f002";
}

.postbit_buttons a.postbit_reputation_add span:before {
 content: "\f067";
}

.postbit_buttons a.postbit_email span:before {
 content: "\f0e0";
}

.postbit_buttons a.postbit_website span:before {
 content: "\f0ac";
}

.postbit_buttons a.postbit_pm span:before {
 content: "\f199";
}

.postbit_buttons a.postbit_quote span:before {
 content: "\f10e";
}

.postbit_buttons a.postbit_multiquote span:before {
 content: "\f055";
}

.postbit_buttons a.postbit_multiquote_on span:before {
 content: "\f056";
    color: #DB1304;
}

.postbit_buttons a.postbit_edit span:before {
 content: "\f044";
}

.postbit_buttons a.postbit_qdelete span:before {
 content: "\f00d";
}

.postbit_buttons a.postbit_qrestore span:before {
 content: "\f067";
}

.postbit_buttons a.postbit_report span:before {
 content: "\f0a1";
}

.postbit_buttons a.postbit_warn span:before {
 content: "\f0e3";
}

.postbit_buttons a.postbit_purgespammer span:before {
 content: "\f071";
}

.postbit_buttons a.postbit_reply_pm span:before {
 content: "\f112";
}

.postbit_buttons a.postbit_reply_all span:before {
 content: "\f122";
}

.postbit_buttons a.postbit_forward_pm span:before {
 content: "\f064";
}

.postbit_buttons a.postbit_delete_pm span:before {
 content: "\f00d";
}

And that easy all your postbit buttons should now use Font Awesome. ^.^

[attachment=32821]


Other Buttons

Still in global.css, find:

a.button:link,
a.button:hover,
a.button:visited,
a.button:active {
 background: #0f0f0f url(images/tcat.png) repeat-x;
 color: #fff;
 display: inline-block;
 padding: 4px 8px;
 margin: 2px 2px 6px 2px;
 border: 1px solid #000;
 font-size: 14px;
}

a.button.small_button {
 font-size: 13px;
 margin: 0;
 padding: 3px 6px;
}

a.button span {
 padding-left: 20px;
 display: inline-block;
 background-image: url(images/buttons_sprite.png);
 background-repeat: no-repeat;
}

a.button.new_thread_button span {
 background-position: 0 -340px;
}

a.button.new_reply_button span {
 background-position: 0 -360px;
}

a.button.closed_button span {
 background-position: 0 -380px;
}

a.button.rate_user_button span {
 background-position: 0 -400px;
}

a.button.add_buddy_button span {
 background-position: 0 -440px;
}

a.button.remove_buddy_button span {
 background-position: 0 -480px;
}

a.button.add_ignore_button span {
 background-position: 0 -460px;
}

a.button.remove_ignore_button span {
 background-position: 0 -500px;
}

a.button.report_user_button span {
 background-position: 0 -520px;
}

Replace that with:

a.button:link,
a.button:hover,
a.button:visited,
a.button:active {
 background: #0f0f0f url(images/tcat.png) repeat-x;
 color: #fff;
 display: inline-block;
 padding: 4px 8px;
 margin: 2px 2px 6px 2px;
 border: 1px solid #000;
 font-size: 14px;
}

a.button.small_button {
 font-size: 13px;
 margin: 0;
 padding: 3px 6px;
}

a.button span:before {
    content: "";
    display: inline-block;
    font-family: FontAwesome;
    font-weight: normal;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 5px;
}

a.button.new_thread_button span:before {
 content: "\f086";
}

a.button.new_reply_button span:before {
 content: "\f075";
}

a.button.closed_button span:before {
 content: "\f00d";
}

a.button.rate_user_button span:before {
 content: "\f123";
}

a.button.add_buddy_button span:before {
 content: "\f007";
}

a.button.remove_buddy_button span:before {
 content: "\f00d";
}

a.button.add_ignore_button span:before {
 content: "\f1f6";
}

a.button.remove_ignore_button span:before {
 content: "\f0f3";
}

a.button.report_user_button span:before {
 content: "\f0a1";
}

[attachment=32825]

Vanz

2014-10-21, 06:26 AM
Nice work. Thank you.

But IMHO, it's bad  when modders here use the word REPLACE, especially when instructing to modify an entire template/class.

Because, what if  the person already had that template/class modded for another MOD ?
then the NEW codes would delete the ADDED MOD code.

I would* prefer instructions to the effect of:

ADD this AFTER THIS

or

ADD this BEFORE this.

* when I see instructions like "And replace it with", myself open the original code and  the NEW code and use a FILE/LINE  COMPARE utility to see WHATS being changed

Sometimes NEW codes are just  2 to 3 lines ADDED.

I learned to do that after I had customize group background color on a forum, and installed another mod that instructed to replace everything ( in a template that I forgot I had inserted new codes ) and that template affected the group background color modifications.

Eric

2014-10-21, 06:29 AM
(2014-10-21, 06:26 AM)Vanz Wrote: [ -> ]Nice work

But IMO it's bad  when modders here use the word REPLACE, especially when it involves an entire template or class

because, what if  the person already had that template/class modded for another MOD ?
then the NEW codes would delete the ADDED MOD code.

I would prefer instructions to the effect of:


ADD this AFTER THIS

or

ADD this BEFORE this.

* when I see instructions like "And replace it with", myself open the original code and  the NEW code and use a FILE/LINE  COMPARE utility to see WHATS being changed

Sometimes NEW codes are just  2 to 3 lines ADDED.

I learned to do that after I had customize group background color on a forum, and installed another mod that instructed to replace everything ( in a template that I forgot I had inserted new codes ) and that template affected the group background color modifications.

If someone has modified the classes, making this change won't break any functionality. Adding that CSS after the original CSS would likely make it look worse than replacing it if there were changes made to the original. Toungue

iAndrew

2014-10-21, 10:57 AM
Nice! saves alot of time going through the templates adding them one by one

Eric

2014-10-21, 09:04 PM
(2014-10-21, 10:57 AM)iAndrew Wrote: [ -> ]Nice! saves alot of time going through the templates adding them one by one

Yeah it's very tedious editing all those templates, especially when it's not necessary.

I've updated the first post with the rest of the buttons. Smile

jaydee9296

2016-02-22, 02:35 AM
Is there also a tutorial in editing the buttons in SCEditor in MyBB?

DiegoPino

2021-03-30, 11:28 PM
Amazing... Thank Yo so much  Big Grin

+1. 
MyBB Community Forums > Resources > Tutorials > Easy FontAwesome Buttons