MyBB Community Forums

Full Version: forcing header banner image to resize with forum when screen resolution is changed.
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Pages: 1 2 3
Idea, use Bootstrap.

Download bootstrap, upload it with ftp to your server.
In headerinclude add (at the top, where the other stands, you can't miss it)

<link rel="stylesheet" href="{$mybb->asset_url}/bootstrap/css/bootstrap.min.css" />
<script src="{$mybb->asset_url}/bootstrap/js/bootstrap.min.js"></script>
Remember to set the right location, if you have given the folder with the bootstrap another name. 

Go to Header tamplate
Find
<div id="logo">

If you want to use the whole width, add this above <div id="logo">
<div class="container-fluid">
And remember to close it with a </div> (just before <div id="content">

If you want the logo to scale after the screen size, add img-responsive in the a class. Just like the examle under, the reson I have set it in a block, is to center the image.

<div id="logo">
					<a href="{$mybb->settings['bburl']}/portal.php"><img src="{$theme['logo']}" class="center-block img-responsive" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>
			</div>
		</div>

And now when you have bootstrap, you can easy add and change things in the forum
(2015-06-16, 12:40 PM)travbacon Wrote: [ -> ]Anyone else have an idea on this please?

Go to the header template.

In the header template, search this:

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

In this section:

<img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" />

Add a new class named "mylogo", like this:

<img class="mylogo" src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" />

Then, go to the global.css, and at the end of the last code, create a new class with the name of "mylogo", like this:

.mylogo {
    width: 100%;
{

That's all you need.
(2015-06-18, 04:54 PM)eNvy Wrote: [ -> ]
(2015-06-16, 12:40 PM)travbacon Wrote: [ -> ]Anyone else have an idea on this please?

Go to the header template.

In the header template, search this:

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

In this section:

<img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" />

Add a new class named "mylogo", like this:

<img class="mylogo" src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" />

Then, go to the global.css, and at the end of the last code, create a new class with the name of "mylogo", like this:

.mylogo {
    width: 100%;
{

That's all you need.

That worked wonders. Thank you. Clear and concise and works.
Pages: 1 2 3