MyBB Community Forums

Letter from the Editor

Hey All,

So I’m new to MyBB. Personally I am not using the software, but I like to tinker with open source software.

With that said I took a likely to Emerald theme and thought I share my customization of it using the latest MyBB.

Kind Regards,

TheKodester (aka Kody)

Tutorial

Part 1: Templates

Let’s start with updating the html/code of four template pages.

1) Login into you admin interface
2) Click on 'Templates & Style' tab (top bar)
3) Click on 'Templates' (side bar)
4) Click on 'Emerald Templates' (centre of page)

Header Templates

header (adds your site name and moto)

1) Click on 'header'

2) Change:

<i class="far fa-gem"></i> Emerald

To (example, use your site name (icons are found at https://fontawesome.com)):

<i class="fas fa-dice-d20"></i> RPG Fansite

3) Change:

<span id="hb_desc">Welcome to our board <i class="far fa-smile"></i></span>

To (example, use your site moto):

<span id="hb_desc">Start Your Journey <i class="fas fa-scroll"></i></span>

4) Click on 'Save and Return to Listing'

header_welcomeback_member (fixes default avatar)

1) Click on 'header_welcomeback_member'

2) Change:

<img src="{$mybb->user['avatar']}" style=“…”>

To:

<img id="hdr_avatar" src="{$mybb->user['avatar']}" style=“…”>

2) Change:

<script>
var connected = 1;
</script>

To:

<script>
var connected = 1;
$(document).ready(function() {
if ( $( '#hdr_avatar' ).attr( 'src' ) === '' ) {
$( '#hdr_avatar' ).attr( 'src', "images/default_avatar.png" );
}
});
</script>

4) Click on 'Save and Return to Listing'

Member Templates

member_login (fixes login issue)

1) Click on 'member_login'

2) Modify the # with your url or remove the entire line if not need (‘<a href="#">…</a>):

<a href="#"><i style="margin-top: 6px;" class="fab fa-youtube”></i></a>
<a href="#"><i style="margin-top: 6px;" class="fab fa-facebook-f”></i></a>
<a href="#"><i style="margin-top: 6px;" class="fab fa-twitter”></i></a>
<a href="#"><i style="margin-top: 6px;" class="fab fa-linkedin”></i></a>
<a href="#"><i style="margin-top: 6px;" class="fab fa-github"></i></a>

4) Click on 'Save and Return to Listing'

Footer Templates

footer (update or remove social media links)

1) Click on 'header'

2) Add the follow code above '</form>':

<input name="my_post_key" type="hidden" value="{$mybb->post_code}" />

4) Click on 'Save and Return to Listing’

Part 2: Style Modification

In this part where changing the css style and we'll be adding some images.

1) Login into you admin interface
2) Click on 'Templates & Style' tab (top bar)
3) Click on 'Themes' (side bar)
4) Click on 'Emerald' (centre of page)

Adding Stylesheet

1) Click on 'Add Stylesheet' (under top bar)
2) Type 'style_mod.css' as the file name
3) Make sure it set as 'Globally'
4) Click on 'Write my own content'
5) Paste the following code:

/*
* Global Helpers
*/

fieldset {
  border: none;
}

a:hover, a:active, a:visited, a:link {
  color: #9d0a0e;
  text-decoration-color: #6c757d; /* supported by most browsers */
}

a.button:link, a.button:visited, a.button:active,
button, input.button, .scrollToDown, .scrollToTop {
  background: #6c757d;
}

button:hover, input.button:hover, a.button:hover, .scrollToDown:hover, .scrollToTop:hover {
  background: #9d0a0e;
}

/*
* Icons
*/

.forum_off, .forum_offlock, .forum_offlink,
.usercp_nav_item:before,
.modcp_nav_item:before,
.thread_status.dot_folder:before,
.thread_status.dot_hotfolder:before,
.thread_status.dot_hotlockfolder:before,
.thread_status.dot_lockfolder:before,
.thread_status.dot_newfolder:before,
.thread_status.dot_newhotfolder:before,
.thread_status.dot_newhotlockfolder:before,
.thread_status.dot_newlockfolder:before,
.thread_status.folder:before,
.thread_status.hotfolder:before,
.thread_status.hotlockfolder:before,
.thread_status.lockfolder:before,
.thread_status.newfolder:before,
.thread_status.newhotfolder:before,
.thread_status.newhotlockfolder:before,
.thread_status.newlockfolder:before {
  color: #9d0a0e;
}

/*
* Global Background and Menu/Header/Navigation Borders + Colors
*/

body, #container, #content, .haut {
  background: url('../../../images/emerald/paper-bg.jpg') 0 0 repeat #f9f7ec;
  background-size: auto !important;
}

.haut, #header_block {
  border-bottom: 2px solid #9d0a0e;
}

#logo, .hb_title {
  font-family: "Georgia", serif;
}

#logo {
  color: #9d0a0e;
}

#menu-deroulant li:hover {
  background: rgba(108, 117, 125, 0.19);
  color: #9d0a0e;
  border-bottom: none;
}

#home_bit, .active, .navigation {
  color: #9d0a0e;
}

#home_bit:hover, .active {
  opacity: 0.8;
}

/*
* Tables
*/

.thead {
  background: #242424;
  color: #fff;
  border-bottom: 1px solid #000;
}

.tcat {
  background: #9d0a0e;
}

.trow1 a, .trow2 a {
  color: #000;
}

/*
* Who's Online/Footer
*/

.wo_title {
  color: #9d0a0e;
}

.footer-distributed {
  background: #242424;
  border-top: 3px solid #9d0a0e;
}

.footer-distributed .footer-icons a:hover .fa-facebook-f {
  color: #2A5EF6;
}

Once you add this you can play around with the colors.

Colors:
#6c757d - Medium Grey - Used for Buttons
#9d0a0e - Dark Red - Text, Icons, Buttons (when hovering), and Borders
#242424 - Dark Grey - Table Header and Footer

Adding Images

For adding images we’ll need access to the images folder on your server.

1) Add all the following images too ‘images/emerald/':
hb.png - secondary header (under menu)
collapse.png & collapse_collapsed.png - user/mod control panel sidebar toggle icons
paper-bg.jpg - creates a paper textured background

Video Demonstrations

Video for Admin Tools: https://youtu.be/h3oMbMf5t60

Video of New Look: https://youtu.be/NVX6k9Gr4-Q

Screenshots:

[attachment=42034]
[attachment=42035]

Finished!

Wowzer…that was a lot, but where done