MyBB Community Forums
Square Theme: reducing the height of header - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Extensions (https://community.mybb.com/forum-201.html)
+--- Forum: Themes (https://community.mybb.com/forum-103.html)
+---- Forum: Theme Support (https://community.mybb.com/forum-10.html)
+---- Thread: Square Theme: reducing the height of header (/thread-161659.html)

Square Theme: reducing the height of header - Mordicus - 2014-10-22

Hello,

How can I reduce the height of the large blue header at the top of the Square theme? I would like it to be twice shorter.

And second question: how to remove properly the Square and the logo text, to replace by my own tiny logo.

Many thanks and nice theme!

RE: Square Theme: reducing the height of header - eNvy - 2014-10-22

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 =)

RE: Square Theme: reducing the height of header - Mordicus - 2014-10-22

Hi eNvy!

At first sorry for not posting in the wrong place! (hope a moderator will be kind enough to move the thread to the right place)

Thanks for replying so fast. I am not familiar with CSS and those technical languages but with your explanations (and after a few trials et errors) I succeeded to reduce the height of the header and to add my logo. It's great now!

Many thanks for your kind help!
 

RE: Square Theme: reducing the height of header - eNvy - 2014-10-22

No problem, glad you can follow the steps and modify your theme =)

Greetings Wink

RE: Square Theme: reducing the height of header - Mordicus - 2014-10-23

Oh and just a small request/suggestion: the small round and grey icon at the beginning of each topic/subforum does not change when new messages are posted... Would it possible to make an update so it would change colour (ie dark blue) and easier to see in which part of the forum (or subforum) new messages have been posted?

Angel