Change the header to custom banner with logo! « Support Forum | Kriesi.at

Support Forum » Abundance

Change the header to custom banner with logo!

9 posts from 3 voices

Started 5 months ago by autoplius
Latest reply from Dude
This topic is not a support question

Tags:

autoplius
Member

Hey,

I will change a header so i can use my custom logo/banner. It should look like that

So how do i instert that?

Best Regards Autoplius

Posted 5 months ago #
Devin
Moderator
Hi Autoplius,

I think the easiest route would be to first hide the main header background. Then, add a background image to the header and position it. Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
```
#header .container {
    visibility: hidden;
}
#header {
    background-image: url("http://www.yoursite.com/yourimageurl.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
}
```
Reference: http://www.w3schools.com/cssref/pr_background-image.asp and http://www.w3schools.com/cssref/pr_background-position.asp

Then you just change the url to that of your banner and position it as needed.

Regards,

Devin
Posted 5 months ago #
autoplius
Member

Hello,

Could you take a look http://www.autoplius.dk hmm it doesnt really fit in.. original header is stil visible.

Regards, autoplius

Posted 5 months ago #
Devin
Moderator
You need to make the banner image taller. Otherwise nothing is visible that I can see unless you mean the sub menu which you can remove by adding the following to your Quick CSS or custom.css file:
```
.sub_menu {
display: none;
}
```
Additionally, you could shrink the header container a bit by modifying the css to be:
```
#top #header .container {
visibility: hidden;
height: 157px;
}
```
Regards,

Devin
Posted 5 months ago #
autoplius
Member

Thank you, for helping me it works ;) But, i need a couple things more.

1) I need social buttons back on this.
2)Search tabel back.
3)Grey areas in sides should be not visible so i can have a texture background. I think it will see much better without these grey areas in sides.

Regards, Autoplius! P.s your support is really impressing!

Posted 5 months ago #
autoplius
Member

+

4) If I use scroll up and down in my page, my banner hides under front page. http://www.autoplius.dk

Posted 5 months ago #

Devin
Moderator

You can just remove the background-attachment declaration so that the image isn't fixed. Also add background-color:transparent to the #header css so that the background color is overwritten.

So:

#header {
background-image: url("http://www.autoplius.dk/wp-content/uploads/2013/01/Autoplius_2.png");
background-repeat: no-repeat;
background-position: center top;
background-color: transparent;
}
#top .logo {
visibility: hidden;
}
#top #header .container {
height: 158px;
}
#top .logo {
    visibility: hidden;
}
#header #searchform {
    top: 38px;
}
#top .social_bookmarks {
    top: 46px;
}

That would be your new total custom.css. Then just keep adding/editing the css as needed to get the layout finished and pixel perfect as you want it.

Regards,

Devin

Posted 5 months ago #

autoplius
Member

Hello again,

Amazing, so i just need to add this right into custom.css which is found in my Abudance theme folder??

Regards

Autoplius :)

Posted 5 months ago #
Dude
Dude

Hey!

Yes exactly :)

Best regards,
Peter

Posted 5 months ago #