MyBB Community Forums

Want to replace the logo with a text written in html and a custom font using google fonts? Read below how.

Step 1: Switch logo with html text - Open "templates"-> "Header templates" -> "header".

Find

<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>

Replace with

<a href="{$mybb->settings['bburl']}/index.php" style="text-decoration: none"><span style="color:#optinalcolorcode; font-size: 24pt;">My Forum</span></a>

Step 2: Add a cool google font

1. Choose a font here: https://fonts.google.com
1.1. As example we take Bungee: https://fonts.google.com/specimen/Bungee

2. At the top right you "Select this font". Click on it.

[attachment=37993]

2.1. A window pops up

[attachment=37994]

2.2 Copy the embed code (api). On this font:

<link href="https://fonts.googleapis.com/css?family=Bungee" rel="stylesheet">

And paste it to the bottom of the "header" template.

2.3 Below the embed code, you see the css style code. Add it with a <div style to the logo text.

So in "header template"

Find

<div class="wrapper">

Right after it, add:

<div style="font-family: 'Bungee', cursive;">

And after the text logo html stuff we added from Step 1, close the div with:

</div>

---

Complete code:

<div style="font-family: 'Bungee', cursive;">
<a href="{$mybb->settings['bburl']}/index.php" style="text-decoration: none"><span style="color:#optinalcolorcode; font-size: 24pt;">My Forum</span></a></div>
					
<link href="https://fonts.googleapis.com/css?family=Bungee" rel="stylesheet">

Preview:

Thanks.., good tutorial....

I found that this way also works....

Edit: global.css

add:

.logo {
    padding: 30px 0;
    font-family: 'Squada One', cursive;	
}

.logo a {
    font-size: 45px;
    color: #0066A2;
}

.logo a:hover {
    color: #0F0F0F;
    text-decoration: none;
}

.logo a i {
    float: left;
    color: #0F0F0F;
    font-size: 45px; 
    padding-top: 5px;
    margin-top: -7px;
    margin-right: 10px;
    transition: all 0.4s ease 0s;
    font-family: FontAwesome;
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);	
}

.logo a:hover i {
    color: #0066A2;
} 

.icon-globe:before {
    content:"\f0ac";
}  

.icon-comments:before {
    content:"\f086";
}  

Edit: headerinclude


add:

<link href="http://fonts.googleapis.com/css?family=Squada+One" rel="stylesheet" type="text/css">
<!--<link href="https://fonts.googleapis.com/css?family=Bungee" rel="stylesheet" type="text/css">-->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

Adds a font-awesome icon along with the text logo

Edit: header

* add:

<div class="logo">
<a href="{$mybb->settings['bburl']}/index.php"><i class="icon-globe" aria-hidden="true"></i>MyBB 1.8.8</a>
</div>

* Looking like so for example:



Or You can easily change the icon like so for example:

* add:

<div class="logo">
<a href="{$mybb->settings['bburl']}/index.php"><i class="icon-comments" aria-hidden="true"></i>MyBB 1.8.8</a>
</div>

* Looking like so for example:

Very nice tutorial and i really want this.

Great tutorial thanks