[For 1.8] Square theme

[Sytarenne]

And lastly, is it possible to change the cube in the header?

You can use another icon from the FontAwesome Icon collection or you can simply remove that icon and use a little image (Or if you want, use a big image and remove the "Square" too).

Cheers.

Tried inserting a small image but it doesn't come up and it just removes the cube..

[eNvy]

And lastly, is it possible to change the cube in the header?

You can use another icon from the FontAwesome Icon collection or you can simply remove that icon and use a little image (Or if you want, use a big image and remove the "Square" too).

Cheers.

Tried inserting a small image but it doesn't come up and it just removes the cube..

You need to adjust the class of the logo in order to put an image, but you can always remove both (the cube and the text) and use only an image (A little image, if you put something too big you will break the size).

Cheers.

[Sytarenne]

Which code of inserting an image? I don't think I'm using the right code to insert one.

[eNvy]

Which code of inserting an image? I don't think I'm using the right code to insert one.

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

Search this code

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

Now change that code to this new code

<div class="logo"><img src="THE PATH OF YOUR IMAGE" alt="A SIMPLE DESCRIPTION OF YOUR LOGO"></div>

That's all. Replace the "src" and "alt" properties.

[mrkiller2010]

This user has been denied support.

I managed to make the squarebox clickable, but how could I make the Square text the logo, clickable? When I try to do it. The text dissapears and gets blue.

Here is how I did the image box:

<div class="logo"><div class="logo2"><a href="http://google.se/"><img src="http://test.png"></a></i></div>{$lang->xstyled_logo}</div>

[eNvy]

<div class="logo"><a href="http://google.se/"><div class="logo2"><img src="http://test.png"></div>{$lang->xstyled_logo}</a></div>

Try that.

[mrkiller2010]

This user has been denied support.

<div class="logo"><a href="http://google.se/"><div class="logo2"><img src="http://test.png"></div>{$lang->xstyled_logo}</a></div>

Try that.

It gets like this: 

And if I hover my mouse over it:

[eNvy]

It's ok, after that go to ACP > Templates & Styles > Styles > Square > and open Square.css

Put at the end of the file this:

.logo a:link, .logo a:visited {
text-decoration: none;
color: #fafafa;
opacity: 0.75;
transition: all 0.3s ease;
}

.logo a:hover, .logo a:active {
opacity: 1;
transition: all 0.3s ease;
}

Also, if you want to center your current image logo, search this class:

.logo2

And replace with this:

.logo2 {
    float: left;
    color: #FFFFFF;
    margin: 2px 10px 0 0;
    transition: all 0.5s ease;
}

[mrkiller2010]

This user has been denied support.

It's ok, after that go to ACP > Templates & Styles > Styles > Square > and open Square.css

Put at the end of the file this:

.logo a:link, .logo a:visited {
text-decoration: none;
color: #fafafa;
opacity: 0.75;
transition: all 0.3s ease;
}

.logo a:hover, .logo a:active {
opacity: 1;
transition: all 0.3s ease;
}

Also, if you want to center your current image logo, search this class:

.logo2

And replace with this:

.logo2 {
    float: left;
    color: #FFFFFF;
    margin: 2px 10px 0 0;
    transition: all 0.5s ease;
}

Thanks it works now, however the image wont rotate 360 now

[Teratos]

Hi, can anybody give me from the Header Template the complete header Code?

It looks like this way:

Is it possible to make the table bigger, that it fills the complete space?