MyBB Community Forums

(2015-04-08, 05:47 PM)Ferdaus Wrote: [ -> ]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>

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.

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

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!

(2015-04-09, 07:45 PM)Daniel Kng Wrote: [ -> ]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.

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

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.

(2015-04-10, 11:38 AM)Daniel Kng Wrote: [ -> ]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>

---

(2015-04-10, 03:32 PM)Ferdaus Wrote: [ -> ]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.

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

www.hostingboard.co.uk

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