1.8 squared theme banner addition

[ShaneR82]

Hi guys, 
I just checked out the new square theme for 1.8 and i really wanna add my sites banner, but its really different to any editing ive seen so far , has anyone successfully added a banner to this theme? 
Also , if possible can someone lead me into the right direction of adding a banner
thanks.

[eNvy]

Tell me, ¿where you want to put your banner?

[ShaneR82]

up the top,
see this image , with in the yellow border
http://i.imgur.com/Icj5gBj.png

[eNvy]

There's the menu and the logo, you can put a banner there but where are you going to put the menu?

[ShaneR82]

There's the menu and the logo, you can put a banner there but where are you going to put the menu?

Idealy, iwant my banner in the are highlighted within the yelllow border and the menu BELOW that , that is my intentions, so how do i do this ? I have tried putting a logo and banner but it doesnt show up , im confused please
enlighten me

and thanks for your help, and by the way , this theme is awesome and i really want to be able to do these edits as i want to use this theme.
Thanks.

[eNvy]

So, you want to put all in this way:

Banner
Logo Menu

Right?

[ShaneR82]

So, you want to put all in this way:

  Banner
Logo Menu

Right?

yes

[eNvy]

Ok, I assume viewing the image you know how to edit templates... so, lets do this!

HTML

Go to header template

You will see this:

<div id="header">
		<div class="wrapper">
          	<div class="logo"><div class="logo2"><i class="fa fa-cube fa-fw"></i></div> Square</div>
          	<div class="menu">
              	<ul>
                  	<li><a href="{$mybb->settings['bburl']}/index.php"><i class="fa fa-comments fa-2x"></i><br />Index</a></li>
                  	<li><a href="{$mybb->settings['bburl']}/search.php"><i class="fa fa-search fa-2x"></i><br />Search</a></li>
                  	<li><a href="{$mybb->settings['bburl']}/memberlist.php"><i class="fa fa-users fa-2x"></i><br />Members</a></li>
                  	<li><a href="{$mybb->settings['bburl']}/calendar.php"><i class="fa fa-calendar-o fa-2x"></i><br />Calendar</a></li>
                	<li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><i class="fa fa-question-circle fa-2x"></i><br />Help</a></li>
              	</ul>
          	</div>
		</div>
	</div>

Then, below the "wrapper", put this:

<div class="banner">Your banner</div>

"Your banner" is the image or the thing you want to display there.

CSS

Now, go to square.css

search the ID "Header" (#header)

#header {
  	background: #005ea7;
  	height: 200px;
}

You need to change the height, actually have a 200px, so, do a quick math with the 200px and the total height of your image or thing and put the result there (Example: 400px)

Now, go to the end of square.css and add this:

.banner {
  	margin: 0 auto;
  	padding: 10px 0;
}

That code simply add a 10px padding (10px space from the top) and the margin center the element in the header.

Now the only thing you need to do is put your image or ad inside the banner <div> tag and that's all!

[ShaneR82]

Ok, I assume viewing the image you know how to edit templates... so, lets do this!

HTML

Go to header template

You will see this:

<div id="header">
		<div class="wrapper">
          	<div class="logo"><div class="logo2"><i class="fa fa-cube fa-fw"></i></div> Square</div>
          	<div class="menu">
              	<ul>
                  	<li><a href="{$mybb->settings['bburl']}/index.php"><i class="fa fa-comments fa-2x"></i><br />Index</a></li>
                  	<li><a href="{$mybb->settings['bburl']}/search.php"><i class="fa fa-search fa-2x"></i><br />Search</a></li>
                  	<li><a href="{$mybb->settings['bburl']}/memberlist.php"><i class="fa fa-users fa-2x"></i><br />Members</a></li>
                  	<li><a href="{$mybb->settings['bburl']}/calendar.php"><i class="fa fa-calendar-o fa-2x"></i><br />Calendar</a></li>
                	<li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><i class="fa fa-question-circle fa-2x"></i><br />Help</a></li>
              	</ul>
          	</div>
		</div>
	</div>

Then, below the "wrapper", put this:

<div class="banner">Your banner</div>

"Your banner" is the image or the thing you want to display there.

CSS

Now, go to square.css

search the ID "Header" (#header)

#header {
  	background: #005ea7;
  	height: 200px;
}

You need to change the height, actually have a 200px, so, do a quick math with the 200px and the total height of your image or thing and put the result there (Example: 400px)

Now, go to the end of square.css and add this:

.banner {
  	margin: 0 auto;
  	padding: 10px 0;
}

That code simply add a 10px padding (10px space from the top) and the margin center the element in the header.

Now the only thing you need to do is put your image or ad inside the banner <div> tag and that's all!

ok ill try now , lets see how it goes, thanks for helping btw

[eNvy]

No problem, tell me if it works correctly.

Remember to check the height of the "Header" ID.