[For 1.8] Square theme

[eNvy]

How can I insert a page, linking to something, with an icon & button just like yours, can you please create a template code for me, I want it to be align with all other buttons e.g 'Index, Users, Search' etc.

Thanks.

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

Inside you gonna see something like

<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="YOUR LINK HERE"><i class="fa fa-ICON HERE fa-2x"></i><br />YOUR TITLE HERE</a></li>

Add a new <li> tag:

<li><a href="YOUR LINK HERE"><i class="fa fa-ICON HERE fa-2x"></i><br />YOUR TITLE HERE</a></li>

<a href="YOUR LINK HERE"> It's where you put the link to the custom page you want.

<i class=" fa fa-ICON HERE fa-2x"> It's the icon, you can search the collection here: http://fontawesome.io/icons/

YOUR TITLE HERE It's where you put your custom title of that link, in all the links you have a custom var, in this case, you can put the text directly without problems.

Finished, it's something like this (Ej. Portal link):

<li><a href="{$mybb->settings['bburl']}/portal.php"><i class="fa fa-home fa-2x"></i><br />Portal</a></li>

[Ferdaus]

Thanks, but how can I also make the header smaller and move up the announcement section, to make it look from this: http://gyazo.com/15a9a50c8f8e85f8f6d4f4801f0e2357

Like this:
http://gyazo.com/79004445730a2bae4e874d790a0218bd

How can I also change the colours of the whole theme, rather than Blue and this white/greyish, to a different colour like the screenshots I linked you?

Thanks.

[eNvy]

Square.css

Search this:

#header {
  	background: #005ea7;
  	height: 200px;
  	min-width: 1024px;
}

Modify the "height" property as you like it, something like 120px, I think it's fine.

#header {
  	background: #005ea7;
  	height: 120px;
  	min-width: 1024px;
}

To change the color of the entire theme, you need to search through the Square.css and Global.css, this are the classes you need to modify:

Global.css

a:link, a:visited
a:hover, a:active
.tcat
.trow_sticky
.trow_announcement
button, input.button
button:hover, input.button:hover
.popup_menu .popup_item:hover

Square.css

.catdesc
#header
.menu ul li a:link, .menu ul li a:visited
.menu ul li a:hover, .menu ul li a:active
#panel
.loginbutton a:link, .loginbutton a:visited
.loginbutton a:hover, .loginbutton a:active
.registerbutton a:link, .registerbutton a:visited
.registerbutton a:hover, .registerbutton a:active
.usermenu a:link, .usermenu a:visited
.usermenu a:hover, .usermenu a:active
.wrapper-dropdown-5
.wrapper-dropdown-5 .dropdown
.wrapper-dropdown-5:hover, .wrapper-dropdown-5:active
.wrapper-dropdown-5 .dropdown li:hover a
.admincp a:link, .admincp a:visited
.admincp a:hover
.modcp a:link, .modcp a:visited
.modcp a:hover
.breadcrumb
.breadcrumb .crust a.crumb, .breadcrumb .crust b.lastcrumb
.breadcrumb .crust .arrow
.breadcrumb .crust .arrow span
.breadcrumb .crust:hover a.crumb
.breadcrumb .crust:hover .arrow span
.scrolltotop
.scrolltotop:hover
.buttons
.buttons:hover
.clickedbuttons
.clickedbuttons:hover
.thead
.theadend
#footer
#copyright
#copyright a:link, #copyright a:visited
#copyright a:hover, #copyright a:active
.one p
.two ul li a:link, .two ul li a:visited
.two ul li a:hover, .two ul li a:active
.three ul li a:link, .three ul li a:visited
.three ul li a:hover, .three ul li a:active
::-webkit-scrollbar-track
::-webkit-scrollbar-thumb
::-webkit-scrollbar-thumb:hover
.pagination2 a:link, .pagination2 a:visited
.pagination2 a:hover, .pagination2 a:active
.bigbutton a:link, .bigbutton a:visited
.bigbutton a:hover, .bigbutton a:active
.closedbutton a:link, .closedbutton a:visited
.closedbutton a:hover, .closedbutton a:active
.pbbutton a:link, .pbbutton a:visited
.pbbutton a:hover, .pbbutton a:active
.pbredbutton a:link, .pbredbutton a:visited
.pbredbutton a:hover, .pbredbutton a:active
.minibutton a:link, .minibutton a:visited
.minibutton a:hover, .minibutton a:active
.welcometitle
input.loginbutton
input.loginbutton:hover

And that's all, I put all the custom classes with color (Text, Buttons, Backgrounds, Etc).

[Daniel Kng]

Hey eNvy, at first: Very awesome Theme! Thank you for that

I just have a little question. I want my own Logo, but it should have this nice animation. I tryed some things, but it does not work.
Thanks!

[eNvy]

Hey eNvy, at first: Very awesome Theme! Thank you for that

I just have a little question. I want my own Logo, but it should have this nice animation. I tryed some things, but it does not work.
Thanks!

You want the animation on your logo? Your logo have words inside?

The current Square logo it's only a font-awesome icon with the Square text, and the effect is made by css.

[Daniel Kng]

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

[Ferdaus]

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.

[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.

[JarimHosting]

After install this theme plugins not working , how I will fix it or active it ?

www.hostingboard.co.uk

[.m.]

^ you have to deactivate and reactivate each & every plugin so that plugins can add required codes to the new theme