Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #19188

    Hey,

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

    So how do i instert that?

    Best Regards Autoplius

    #102586

    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

    #102587

    Hello,

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

    Regards, autoplius

    #102588

    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

    #102589

    screenshotfrom201301081.png

    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!

    #102590

    +

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

    #102591

    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

    #102592

    Hello again,

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

    Regards

    Autoplius :)

    #102593

    Hey!

    Yes exactly :)

    Best regards,

    Peter

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Change the header to custom banner with logo!’ is closed to new replies.