[For 1.8] Square theme

[eNvy]

I just have a .png file, which should have this animation. It is called "Logo.png"

ACP > Templates & Styles > Templates > Square Templates > Header templates and open header template

Inside, search this:

<div class="logo"><div class="logo2"><i class="fa fa-cube fa-fw"></i></div> {$lang->xstyled_logo}</div>

Replace this:

<i class="fa fa-cube fa-fw"></i>

With this:

<img src="PATH TO YOUR CUSTOM IMAGE" alt="TITLE OF YOUR CUSTOM IMAGE" />

The finish line is something like this (Take this as an example):

<div class="logo"><div class="logo2"><img src="images/square/myownlogo.png" alt="MyBB Community" /></div> {$lang->xstyled_logo}</div>

---

Everything (the icons) moves out of align in that way, can I also have the CSS for the original Copyright, I messed mine up, so I had to re-code a box around it making it look pretty ugly.

http://gyazo.com/779867e4709825d0ee14dbf14396d9bc

How do I merge this into the header, and turn it into the same color?
http://gyazo.com/d267529d4d291801272c0d18ac3a9bfa

Thanks.

ACP > Templates & Styles > Styles > Open Square.css

Search this:

.menu {
  width: 492px;
  float: right;
  margin: 75px 0 0 0;
  padding: 0;
  text-align: right;
}

Replace the margin of that element to your liking:

.menu {
  width: 492px;
  float: right;
  margin: 15px 0 0 0; /* Change the margin to adjust the space between the menu and the top */
  padding: 0;
  text-align: right;
}

To merge the elements it's kind complicated, you need to move things from one template to another and change a lot of code, it's better if you just change the color and put the same of the header, that gives you the same effect.