Hi Mordicus, before I answer:
Please, ask for support on the thread of Square here on MyBB... or, go to my own community and ask for support there.
It's more easy to me and you will get a response more fast =).
Now, directly to your questions:
Reducing the header height:
ACP > Templates & Styles > Styles > Square
Open Square.css and search this:
#header {
background: #005ea7;
height: 200px;
min-width: 1024px;
}
Now if you see, it says "height: 200px", change that size to 100px, like this:
#header {
background: #005ea7;
height: 100px;
min-width: 1024px;
}
Now, search and modify:
.logo {
float: left;
font-family: 'Exo 2', sans-serif;
font-size: 72px;
font-weight: 400;
color: #FFFFFF;
margin-top: 40px;
transition: all 0.5s ease;
}
Modified:
.logo {
margin-top: -8px;
}
.logo2 {
float: left;
color: #FFFFFF;
margin-top: 40px;
transition: all 0.5s ease;
}
Modified:
.logo2 {
margin-top: 20px;
}
.menu {
width: 492px;
float: right;
margin: 75px 0 0 0;
padding: 0;
text-align: right;
}
Modified:
.menu {
margin: 16px 0 0 0;
}
To remove the "Square text" and put your own logo, do this:
ACP > Templates & Styles > Templates > Square Templates > Header Templates
Open header template, search this:
<div class="logo"><div class="logo2"><i class="fa fa-cube fa-fw"></i></div> {$lang->xstyled_logo}</div>
Remove the <div class="logo2"> and the custom var; something like this:
<div class="logo"></div>
Now, inside that <div> put your own image/logo, like this:
<div class="logo"><img src="path to your own image" /></div>
And that's all =)
