WallBB Forums - Theme Documentation

Win a Prize Worth Up to $100,000.77!

Thu, 23 Oct 2025 10:25:51 +0300

iPhone 17, gaming laptops, gift cards, crypto & more!
Join now: https://telegra.ph/Get-a-gift-worth-up-t...10-23-6937

How to set Admin and Moderator Panels to Go Dark Theme

Tue, 25 Aug 2020 13:50:50 +0300

How do I set the Admin and Moderator Panels to the Go Dark Theme?

Little SEO tweaks to add Social Tags

Wed, 13 May 2020 16:37:51 +0300

Thought of writing this so you can do little tweaks in headerinclude to make your forum links better for social media.

1. Making changes to theme-color

Code:

Wallbb GoDark uses this color scheme by default #2371a2 you can change color code to any color you desire.if have default layout then stick to default color scheme

2. Adding your board name

Code:

3. Adding meta description

Code:

4. Adding OG images

Code:

5. Changing title of forums

Code:

five simple tweaks to make your forums look better and on social media

Styling myalerts header icon on godark ( tutorial )

Mon, 30 Mar 2020 02:51:06 +0300

Doesn't look good

You will have to follow this steps

MyAlerts Templates » Edit Template: myalerts_headericon

Replace this code

Code:



    {$lang->myalerts_alerts}

        ({$mybb->user['unreadAlerts']})

Code:



     
        class="myalerts"

        onclick="MyBB.popupWindow('/alerts.php?modal=1&ret_link={$myalerts_return_link}', { fadeDuration: 250, zIndex: (typeof modal_zindex !== 'undefined' ? modal_zindex : 9999) }); return false;">

         {$mybb->user['unreadAlerts']}

Booyah you have finally styled that part of header

Icon doesn't stand out well with other icons

What you can do is add

at being of code thanks to wallbb dev it automatically styles the icon

Code:

 
        class="myalerts"

        onclick="MyBB.popupWindow('/alerts.php?modal=1&ret_link={$myalerts_return_link}', { fadeDuration: 250, zIndex: (typeof modal_zindex !== 'undefined' ? modal_zindex : 9999) }); return false;">

         {$mybb->user['unreadAlerts']}

Now the icon looks better then it used to be

How to add onscroll sticky header in GoDark MyBB theme

Sun, 15 Mar 2020 23:08:42 +0300

This tutorial will allow you to add onscroll sticky header in GoDark MyBB theme. Follow these steps to add the onscroll sticky header :-

1. Go to Admin CP > Themes > GoDark Theme > nav.css > Edit in Advanced Mode
2. Add the below code at the bottom of nav.css

Code:
.touchX {

  position: fixed;

  width: 100%

  top: 0;

}

3. Now add the below code in footer template i.e Admin CP > Themes > Templates and Styles > GoDark Templates > Footer Templates > footer

Code:

4. Finally go to header template and replace

Adding Font Awesome ficons without any plugin

Thu, 05 Mar 2020 15:17:46 +0300

Hello,
This tutorial teaches you how to add Font Awesome 4.7.0 icons as ficons without any plugins.
NOTE: Keep a backup of your templates and CSS before making any changes.

1. First of all, replace the code in forumbit_depth2_forum and forumbit_depth2_cat with this code.

Code:







{$forum['name']}{$forum_viewers_text}{$forum['description']}


{$subforums}



 {$threads}{$unapproved['unapproved_threads']} 
 Threads 

 {$posts}{$unapproved['unapproved_posts']} 
 Posts 

{$lastpost}

2. Now go to Admin CP> Forum and Posts > Forum Management and get the fid for the forum. In our case, fid is 4.

3. Now go to css3.css and add this at the bottom of the css file. In below code, 4 is the fid that we received from forum management.

Code:
.forum_4 i:before {

content: "\f187 ";

}

The above content f187 is unicode that you can get from icon page (https://fontawesome.com/v4.7.0/icon/archive). You can change the unicode for your preferred icon.
Font Awesome 4.7.0 icons - https://fontawesome.com/v4.7.0/icons/

4. Repeat the step 2 and 3 for all the fid and you will have custom forum icons without any plugins.

Regards
WallBB

Adding custom color scheme in Focus MyBB Theme

Thu, 04 Jul 2019 04:44:13 +0300

This tutorial will allow you to change color scheme in Focus MyBB Theme.

Focus theme by default has 4 color schemes, adding a custom scheme is quite easy since it is a very modular theme.

These steps will allow you to change color scheme :-
1. Go to Admin CP > Template & Styles > FocusResponsive >
2. Select Yellow as default theme color
3. Inside the theme, open color_yellow.css in Advanced Edit mode (Make sure to make a backup of color_yellow.css)
4. Find and Replace CCBC45 with YOURCOLOR code

Done!

Hope this tutorial helps you add custom color in Focus MyBB theme.
This tutorial is added in support of this thread
https://wallbb.co.uk/forums/showthread.php?tid=297

Regards
WallBB

Adding Real time PM Count in MyBB

Mon, 01 Jul 2019 07:35:28 +0300

This tutorial will teach you how to add PM count in header like Facebook in GoDark MyBB theme. (Focus and Orange Already have this inbuilt)

To add the PM count, follow the below steps :-

Go To Admin CP > Templates And Styles > Templates > Select GoDark Theme Template
Go to Header Templates > header_welcomeblock_member
Replace this line

Code:
with below code

Code:
{$mybb->user['pms_unread']}
Now go to Admin CP > Templates And Styles > GoDark Theme > css3.css > Edit Advanced Mode and add this at the bottom

Code:
.pmbg { background: #f1654c none repeat scroll 0 0; border-radius: 0; display: inline; font-size: 10px; height: 15px; padding-left: 2px; padding-right: 2px; }

That's it!

Hope this tutorial helps you to add PM count in GoDark MyBB theme.

This tutorial is added on request of yafin

Regards
WallBB

Adding a responsive top right menu on Orange Theme

Mon, 01 Jul 2019 07:16:01 +0300

This tutorial will show you how to Adding a top right menu on Orange MyBB theme. Make sure to backup theme before following this tutorial

First of all, you need to align the Logo to the Left and after that we add secondary menu to the right.
To do that follow the steps below :-

Go To Admin CP > Templates And Styles > Orange Theme > global.css > Edit Advanced Mode
Find .logo in the global.css and replace .logo code with the below code

Code:
.logo { float: left; display: inline-block; font-size: 55px; font-weight: 600; text-shadow: 1px 1px 3px #111;}
Now we add the secondary menu on right.
Go To Admin CP > Templates And Styles > Template > Orange Templates > header
Replace the below code

Code:
{$mybb->settings['homename']} settings['bbname']}" title="{$mybb->settings['bbname']}" />
with
Code:
{$mybb->settings['homename']} settings['bbname']}" title="{$mybb->settings['bbname']}" /> Link Link Link
Add the below code at the bottom of global.css

Code:
ul.mob_top_menu { list-style-type: none; margin: 0; padding: 0; overflow: hidden; position: fixed; top: 0; width: 100%; z-index: 1000;}.mob_top_menu li { float: left;}.mob_top_menu li a { display: block; font-size: 11px; font-weight: bold; padding: 5px 8px; text-align: center; text-decoration: none;}@media screen and (min-width: 420px ) { .header_lcolumn { margin-right: 50%; } .header_rcolumn { position: absolute; top: 10%; right: 0; width: 40%; } }

Since the header section is hidden on mobile, the above code will perfectly work on mobile as it will be hidden and no formatting is required.

That's it!

Hope this tutorial helps you to add a responsive top right menu on Orange Theme MyBB theme.

Created on request of maritimesbob

Regards
WallBB

[For 1.8] Dark Editor for MyBB 1.8.20 [SCEditor]

Thu, 07 Mar 2019 21:42:14 +0300

Hey all,
If you need a dark editor based on default MyBB editor, this tutorial is for you.
This is quick and simple tutorial and keep in mind to make a backup of your jscripts folder.
What you will get is this -
(Clean, interesting and very nice for dark themes)
Requirement - MyBB 1.8.20

1. Download the images.zip attached and upload/Extract them inside public_html(MyBB Root)/jscripts/sceditor/editor_themes/.

images.zip (Size: 9.25 KB / Downloads: 8)

2. Open public_html/jscripts/sceditor/textarea_styles/jquery.sceditor.mybb.css and replace the content with

Code:
/*! SCEditor | (C) 2011-2013, Sam Clarke | sceditor.com/license */

html, body, p, code:before, table {

    margin: 0;

    padding: 0;

    font-family: Tahoma, Verdana, Arial, Sans-Serif;

    font-size: 14px;

    color: #ccc;

}

html {

    /* Needed so the cursor will be placed at the end of the content

       when the there isn't enought content to fill the full viewport */

    height: 100%;

    /* Needed for iOS scrolling bug fix */

    overflow: auto;

    -webkit-overflow-scrolling: touch;

}

body {

    /* Needed for iOS scrolling bug fix */

    position: relative;

    overflow: auto;

    /* Needed so the cursor will be placed at the end of the content

       when the there isn't enought content to fill the full viewport */

    min-height: 100%;

    word-wrap: break-word;

}

table, td {

    border: 1px dotted #000;

    /* Show empty cells so they can be edited */

    empty-cells: show;

}

code:before {

    font-weight: bold;

    content: 'Code:';

    display: block;

    border-bottom: 1px solid #ccc;

    padding: 4px 0 3px 0;

    margin-bottom: 10px;

}

code.phpcodeblock:before {

    content: 'PHP Code:' !important;

}

code {

    font-family: Monaco, Consolas, Courier, monospace;

    font-size: 13px !important;

    padding: 10px;

    position: relative;

    background: white;

    margin: .25em .05em 0 0;

    border: 1px solid #ccc;

    white-space: pre;

    display: block;

    -moz-border-radius: 6px;

    -webkit-border-radius: 6px;

    border-radius: 6px;

}

.ie6 code, .ie7 code {

    margin-top: 0;

}

code:before, code {

    display: block;

    text-align: left;

}

blockquote {

    position: relative;

    background: white;

    margin: .25em .05em 0 0;

    border: 1px solid #ccc;

    padding: 10px;

    -moz-border-radius: 6px;

    -webkit-border-radius: 6px;

    border-radius: 6px;

}

blockquote cite {

    font-weight: bold;

    font-style: normal;

    display: block;

    font-size: 1em;

    border-bottom: 1px solid #ccc;

    margin-bottom: 10px;

    padding-bottom: 3px;

}

/* prevent divs from being collapsed */

div {

    min-height: 1.25em;

}

h1, h2, h3, h4, h5, h6 {

    padding: 0;

    margin: 0;

}

ul, ol {

    margin-top: 0;

    margin-bottom: 0;

    padding-top: 0;

    padding-bottom: 0;

}

img {

    max-width: 100%;

}

font[size="1"] {

    font-size: xx-small;

}

font[size="2"] {

    font-size: x-small;

}

font[size="3"] {

    font-size: small;

}

font[size="4"] {

    font-size: medium;

}

font[size="5"] {

    font-size: large;

}

font[size="6"] {

    font-size: x-large;

}

font[size="7"] {

    font-size: xx-large;

}

3. Open public_html/jscripts/sceditor/editor_themes/mybb.css

Code:
html {

    font-family: Tahoma, Verdana, Arial, Sans-Serif;

    font-size: 0.9em;

}

.sceditor-button div, div.sceditor-grip {

    background-image: url("famfamfam.png");

    width: 16px;

    height: 16px;

    background-repeat: no-repeat;

}

.sceditor-button-youtube div  {

  background-image: url(video.png);

}

.sceditor-button-link div  {

  background-position:  0px -16px;

}

.sceditor-button-unlink div  {

  background-position:  0px -32px;

}

.sceditor-button-underline div  {

  background-image: url(underline.png);

}

.sceditor-button-time div  {

  background-position:  0px -64px;

}

.sceditor-button-table div  {

  background-position:  0px -80px;

}

.sceditor-button-superscript div  {

  background-position:  0px -96px;

}

.sceditor-button-subscript div  {

  background-position:  0px -112px;

}

.sceditor-button-strike div  {

  background-image: url(strike.png);

}

.sceditor-button-source div  {

  background-image: url(source.png);

}

.sceditor-button-size div  {

  background-position:  0px -160px;

}

.sceditor-button-rtl div  {

  background-position:  0px -176px;

}

.sceditor-button-right div  {

  background-image: url(format-right.png);

}

.sceditor-button-removeformat div  {

  background-position:  0px -208px;

}

.sceditor-button-quote div  {

  background-image: url(quote.png);

}

.sceditor-button-print div  {

  background-position:  0px -240px;

}

.sceditor-button-pastetext div  {

  background-position:  0px -256px;

}

.sceditor-button-paste div  {

  background-position:  0px -272px;

}

.sceditor-button-orderedlist div  {

  background-position:  0px -304px;

}

.sceditor-button-maximize div  {

  background-position:  0px -320px;

}

.sceditor-button-ltr div  {

  background-position:  0px -336px;

}

.sceditor-button-left div  {

  background-image: url(format-left.png);

}

.sceditor-button-justify div  {

  background-image: url(format-fill.png);

}

.sceditor-button-italic div  {

  background-image: url(italic.png);

}

.sceditor-button-image div  {

  background-position:  0px -416px;

}

.sceditor-button-horizontalrule div  {

  background-image: url(hr.png);

}

.sceditor-button-format div  {

  background-position:  0px -448px;

}

.sceditor-button-font div  {

  background-position:  0px -464px;

}

.sceditor-button-emoticon div  {

  background-position:  0px -480px;

}

.sceditor-emoticons img {

    cursor: pointer;

}

.sceditor-button-email div  {

  background-position:  0px -496px;

}

.sceditor-button-date div  {

  background-position:  0px -512px;

}

.sceditor-button-cut div  {

  background-position:  0px -528px;

}

.sceditor-button-copy div  {

  background-position:  0px -544px;

}

.sceditor-button-color div  {

  background-position:  0px -560px;

}

.sceditor-button-code div  {

  background-position:  0px -576px;

}

.sceditor-button-center div  {

  background-image: url(format-center.png);

}

.sceditor-button-bulletlist div  {

  background-position:  0px -608px;

}

.sceditor-button-bold div  {

  background-image: url(bold.png);

}

div.sceditor-grip  {

  background-position:  0px -640px;

  width:  10px;

  height:  10px;

}

.rtl div.sceditor-grip  {

  background-position:  0px -656px;

  width:  10px;

  height:  10px;

}

.sceditor-container {

    position: relative;

    background: #333;

    border: 1px solid #444;

    padding: 0 4px;

    font-size: 13px;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    color: #ccc;

    line-height: 1;

    font-weight: bold;

    z-index: 1001;

    -webkit-border-radius: 4px;

    -moz-border-radius: 4px;

    border-radius: 4px;

    -moz-background-clip: padding;

    -webkit-background-clip: padding-box;

    background-clip: padding-box;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    width: 100% !important;

}

.sceditor-container, .sceditor-container div, div.sceditor-dropdown, div.sceditor-dropdown div {

    padding: 0;

    margin: 0;

    z-index: 3;

}

.sceditor-container iframe, .sceditor-container textarea {

    border: 0;

    outline: 0;

    font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;

    font-size: 13px;

    color: #ccc;

    padding: 4px;

    margin: 5px;

    resize: none;

    background: #333;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    width: 99% !important;

}

div.sceditor-resize-cover {

    position: absolute;

    top: 0;

    left: 0;

    background: #000;

    width: 100%;

    height: 100%;

    z-index: 2;

    opacity: .3;

}

.ie6 div.sceditor-resize-cover, .ie7 div.sceditor-resize-cover, .ie8 div.sceditor-resize-cover {

    background: #efefef;

}

.sceditor-container.ie6 {

    overflow: hidden;

}

div.sceditor-grip {

    overflow: hidden;

    width: 10px;

    height: 10px;

    cursor: pointer;

    position: absolute;

    bottom: 0;

    right: 0;

    z-index: 3;

}

.sceditor-maximize {

    position: fixed;

    top: 0;

    left: 0;

    height: 100%!important;

    width: 100%!important;

    -webkit-border-radius: 0;

    -moz-border-radius: 0;

    border-radius: 0;

    -moz-background-clip: padding;

    -webkit-background-clip: padding-box;

    background-clip: padding-box;

}

html.sceditor-maximize, body.sceditor-maximize {

    height: 100%;

    width: 100%;

    padding: 0;

    margin: 0;

    overflow: hidden;

}

.ie6.sceditor-maximize {

    position: absolute;

}

.sceditor-maximize div.sceditor-grip {

    display: none;

}

.sceditor-maximize div.sceditor-toolbar {

    -webkit-border-radius: 0;

    -moz-border-radius: 0;

    border-radius: 0;

    -moz-background-clip: padding;

    -webkit-background-clip: padding-box;

    background-clip: padding-box;

}

div.sceditor-dropdown {

    position: absolute;

    border: 1px solid #ccc;

    background: #fff;

    color: #333;

    z-index: 6;

    padding: 10px;

    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    border-radius: 3px;

    -moz-background-clip: padding;

    -webkit-background-clip: padding-box;

    background-clip: padding-box;

    -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);

    -moz-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);

    box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);

}

div.sceditor-dropdown a, div.sceditor-dropdown a:link {

    color: #333;

}

div.sceditor-dropdown form {

    margin: 0;

}

div.sceditor-dropdown label {

    display: block;

    font-weight: bold;

    color: #3c3c3c;

    padding: 4px 0;

}

div.sceditor-dropdown input, div.sceditor-dropdown textarea {

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

    outline: 0;

    padding: 4px;

    border: 1px solid #ccc;

    border-top-color: #888;

    margin: 0 0 .75em;

    -webkit-border-radius: 1px;

    -moz-border-radius: 1px;

    border-radius: 1px;

    -moz-background-clip: padding;

    -webkit-background-clip: padding-box;

    background-clip: padding-box;

}

div.sceditor-dropdown textarea {

    padding: 6px;

}

div.sceditor-dropdown input:focus, div.sceditor-dropdown textarea:focus {

    border-color: #aaa;

    border-top-color: #666;

    -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);

    -moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);

    box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);

}

div.sceditor-dropdown .button {

    font-weight: bold;

    color: #444;

    padding: 6px 12px;

    background: #ececec;

    border: solid 1px #ccc;

    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    border-radius: 3px;

    -moz-background-clip: padding;

    -webkit-background-clip: padding-box;

    background-clip: padding-box;

    cursor: pointer;

    margin: .3em 0 0;

}

div.sceditor-dropdown .button:hover {

    background: #f3f3f3;

    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);

    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);

    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);

}

div.sceditor-font-picker, div.sceditor-fontsize-picker {

    padding: 6px 0;

}

div.sceditor-insertemoticon, div.sceditor-color-picker {

    padding: 0;

}

.sceditor-pastetext textarea {

    border: 1px solid #bbb;

    width: 20em;

}

.sceditor-insertemoticon img, .sceditor-more-emoticons img {

    cursor: pointer;

    margin: 2px;

}

.sceditor-more {

    border-top: 1px solid #bbb;

    display: block;

    text-align: center;

    cursor: pointer;

    font-weight: bold;

    padding: 6px 0;

}

.sceditor-more:hover {

    background: #eee;

}

.sceditor-fontsize-option, .sceditor-font-option {

    display: block;

    padding: 4px 10px;

    cursor: pointer;

    text-decoration: none;

    color: #222;

}

.sceditor-fontsize-option {

    padding: 4px 13px;

}

.sceditor-fontsize-option:hover, .sceditor-font-option:hover {

    background: #eee;

}

.sceditor-color-column {

    float: left;

}

.sceditor-color-option {

    display: block;

    border: 1px solid #fff;

    height: 10px;

    width: 10px;

    overflow: hidden;

}

.sceditor-color-option:hover {

    border: 1px solid #333;

}

div.sceditor-toolbar {

    overflow: hidden;

    padding: 2px 2px 1px;

    background: #444;

    border-bottom: 1px solid #444;

    line-height: 0;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    -webkit-border-radius: 3px 3px 0 0;

    -moz-border-radius: 3px 3px 0 0;

    border-radius: 3px 3px 0 0;

    -moz-background-clip: padding;

    -webkit-background-clip: padding-box;

    background-clip: padding-box;

}

div.sceditor-group {

    display: inline-block;

    background: #333;

    margin: 1px 5px 1px 0;

    padding: 1px;

    border-bottom: 1px solid #444;

    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    border-radius: 3px;

    -moz-background-clip: padding;

    -webkit-background-clip: padding-box;

    background-clip: padding-box;

}

.ie6 div.sceditor-group, .ie7 div.sceditor-group {

    display: inline;

    zoom: 1;

}

.sceditor-button {

    float: left;

    cursor: pointer;

    padding: 3px 5px;

    width: 16px;

    height: 20px;

    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

    border-radius: 3px;

     border:  1px solid #444;

    -moz-background-clip: padding;

    -webkit-background-clip: padding-box;

    background-clip: padding-box;

}

.ie6 .sceditor-button, .ie7 .sceditor-button {

    float: none!important;

    display: inline;

    zoom: 1;

}

.ie6 .sceditor-button {

    padding: 0;

}

.ie6 .sceditor-button div {

    margin: 5px;

}

.ie7 .sceditor-button div {

    margin: 5px 0;

}

.sceditor-button:hover, .sceditor-button:active, .sceditor-button.active {

    background: #555;

    border: 1px solid #555;

}

.sceditor-button:active {

    background: #555;

    border: 1px solid #555;

}

.sceditor-button.disabled:hover {

    background: inherit;

    cursor: default;

    -webkit-box-shadow: none;

    -moz-box-shadow: none;

    box-shadow: none;

}

.sceditor-button, .sceditor-button div {

    display: block;

}

.sceditor-button div {

    margin: 2px 0;

    padding: 0;

    overflow: hidden;

    line-height: 0;

    font-size: 0;

    color: transparent;

}

.sceditor-button.disabled div {

    filter: alpha(opacity=30);

    opacity: .3;

}

.text .sceditor-button, .text .sceditor-button div, .sceditor-button.text, .sceditor-button.text div, .text-icon .sceditor-button, .text-icon .sceditor-button div, .sceditor-button.text-icon, .sceditor-button.text-icon div {

    width: auto;

    overflow: visible;

    line-height: 16px;

    font-size: 1em;

    color: inherit;

}

.text .sceditor-button div, .sceditor-button.text div {

    padding: 0 2px;

    background: 0;

}

.text-icon .sceditor-button div, .sceditor-button.text-icon div {

    padding: 0 2px 0 20px;

}

.rtl .sceditor-button {

    float: right;

}

.rtl div.sceditor-grip {

    right: auto;

    left: 0;

}

.sceditor-container {

    padding:  0 4px;

    overflow:  hidden;

}

.sceditor-container .sceditor-toolbar,  .sceditor-container iframe,  .sceditor-container textarea  {

    margin:  0 -4px;

}

/* Additional buttons (for MyBB) */

.sceditor-button-video div  {

  background-image: url(video.png);

}

.sceditor-button-php div  {

  background-image: url(php.png);

}

4. Go to your theme settings and select MyBB editor as default editor. Like this
https://i.imgur.com/a2LFAU6.png

Hope it helps your forum gain a better typing experience for users, in case of any questions just let me know.

Regards
WallBB

How to add image based logo in GoDark MyBB Theme

Mon, 14 Jan 2019 07:48:14 +0300

This tutorial will teach you how to add image based logo in GoDark MyBB Theme:-
Follow these steps below to add image based logo in GoDark MyBB Theme :-

Go To Admin CP > Templates And Styles > Templates > Select GoDark Theme Templates
Go to Header Templates > header
Remove the below text

Code:
Go Dark
Replace it with this

Code:
settings['bbname']}" title="{$mybb->settings['bbname']}" />
Make sure you have uploaded the logo and set it properly in theme settings.

That's it!

Hope this tutorial helps you add image based logo in GoDark Responsive theme.

Regards
WallBB

How to edit toplinks in MyBB

Wed, 31 Jan 2018 15:56:35 +0300

This tutorial will teach you how to modify header toplinks in Focus MyBB Theme, infact it should work in other themes as well:-

Follow these steps below to modify header toplinks in Focus Responsive theme :-

Go To Admin CP > Templates And Styles > Templates > Select Focus Theme Templates
Go to Header Templates > header_welcomeblock_guest and header_welcomeblock_member (In other themes, it will be header)
You will find the below code or search for your toplinks title.

Code:
Home

Copy the above code and edit the link and text to your liking. You can remove links as well if you want.
Make sure you keep a backup of the template, this is quite simple tutorial though.

That's it!

Hope this tutorial helps you modify header toplinks in Focus Responsive theme or Other themes.

Regards
WallBB

Tutorials Request

Wed, 13 Dec 2017 15:41:23 +0300

Do you need any new tutorial which you believe can help other fellow users as well ?
Yes can ask for any new tutorials in this thread and based on time and interest, I can write it for you

Follow this format for requesting any tutorials

Code:
Tutorial About : Write a title about the tutorial you need

Description: Write a description about the tutorial you need

Code Samples : Do you need code samples as well ?

Screenshots: Do you need screenshot ?

Follow the above format and request any tutorial you need

Regards
WallBB

How to modify/add social links in footer

Thu, 30 Nov 2017 06:34:15 +0300

This tutorial will show you how to modify/add links in footer in Focus MyBB theme. I will use demo example of Instagram for adding a new social profile. Focus theme uses font-awesome icons, so you can use those icons and add any other profile you want. Follow this links to find all font awesome icons - http://fontawesome.io/icons/

footer social links.png (Size: 3.71 KB / Downloads: 1)

To Modify/add the links above, follow the below steps :-

Go To Admin CP > Templates And Styles > Templates > Select Focus Theme Templates
Go to Footer Templates > footer
Modify the below code with your social profiles

Code:
If you want to add another social link(For example- Instagram), add the code just below the above footer

Code:

Save the above template and viola, you have added and modified social links in focus MyBB theme.

Regards
WallBB

How to add google adsense ads in MyBB

Wed, 08 Nov 2017 14:25:29 +0300

This tutorial will tell you how to add google adsense in MyBB, this tutorial can help you add adsense ads in any MyBB theme.
I am using Focus Responsive MyBB theme, you can use any theme you want.
I am using footer area as an example. Suppose the adsense code is below :-

Code:

style="display:inline-block;width:728px;height:90px"

data-ad-client="ca-pub-1234567820123456"

data-ad-slot="1234567890">

To do this, go to the footer template in the admin Panel

Go to Admin CP > Templates and Styles > Template Sets » FocusResponsive Templates » footer
Edit the template, and find
Below this add, the above adsense code(Use your adsense code)
Save the template and adsense will be installed on your website.

If you don't know how to find adsense code, please read this tutorial
https://support.google.com/adsense/answer/181960?hl=en

Regards
WallBB