Need help? Check out our Support site, then


Chnage Header Area

  1. ishitaunblogged
    Member

    Hi! Can I use the entire page width as the header area rather than 610px? Currently I am using the Inuit theme.

    Thanks in advance.
    Regards

    The blog I need help with is ishitaunblogged.com.

  2. Sure. Here's one way to add a header the full width of the container in the Inuit Types theme:

    .container {
    background: url(http://ishitaunblogged.files.wordpress.com/2011/10/logowhite1.jpg) no-repeat;
    padding-top: 170px;
    }

    Replace the image URL with one that you upload to your media library. Adjust padding-top until it fits well with your image.

  3. ishitaunblogged
    Member

    Wow it works! Right now I haven't saved though - but I have seen the preview.

    Can I also link this header image to the URL to my home page? I believe if you delete the blog title - your blog doesn't come in the search engines. Is that true?

    Can I do something about it? Like If somebody types in Travel + Culinary Blog - Mine should come in the top searches?

    All your suggestions have been of sooooooooo much of help. I dont knwo a thing abt HTML or CSS coding and I am really grateful to you.

    Warmest regards
    Ishita

  4. Can the same be done in Retro-fitted? Thanks

  5. The full width header I mean...

  6. @fluzie, it's best to keep questions about separate themes in their own threads, like this: http://en.forums.wordpress.com/topic/retro-fitted-help-with-header-needed-please-please-please?replies=5

  7. Can I also link this header image to the URL to my home page?

    To make the background header image you added to Inuit Types using CSS clickable, add this to a text widget:

    <h1 class="headerlink><a href="http://ishitaunblogged.com/">ishitaunblogged</a></h1>

    Add this to your Appearance → Custom Design → CSS page:

    .container {
    position: relative;
    }
    
    .headerlink a {
    display: block;
    position: absolute;
    top: 0;
    width: 930px;
    height: 172px;
    text-indent: -9999px;
    }

    Then look in your page source code and find the ID for the text widget you added (each one gets its own ID number when it is created). It should be something like "text-14". Add the following to your Appearance → Custom Design → CSS page except replace "#text-14" with your text widget ID number.

    #text-14 {
    background: none;
    }
  8. ishitaunblogged
    Member

    Thanks so much. But where do I use this text widget? in a Page?

    Sorry I have no idea about coding etc...
    Regards
    Ishita

  9. ishitaunblogged
    Member

    Okay - now I did all these 0 the text id is 13. My entire CSS code looks like this - but still the header image doesnt link to the home page-

    .container {
    background:url('http://ishitaunblogged.files.wordpress.com/2012/03/ishitaunbloggedlogo.jpg') no-repeat;
    padding-top:170px;
    }

    .entry img,.entry a img {
    border:none;
    padding:0;
    margin:0 0 1px;
    }

    .attachment-it-thumbnail {
    background:none;
    border:none;
    }

    .attachment-it-thumbnail,.entry img {
    background:none;
    border:none;
    }

    .wp-caption {
    background:none;
    }

    img.fl {
    background:none;
    border:none;
    margin:0;
    padding:5px;
    }

    a:link {
    color:light grey;
    background-color:transparent;
    text-decoration:none;
    }

    a:hover {
    color:red;
    background-color:#def;
    text-decoration:underline;
    }
    .container {
    position: relative;
    }

    .headerlink a {
    display: block;
    position: absolute;
    top: 0;
    width: 930px;
    height: 172px;
    text-indent: -9999px;
    }
    #text-13 {
    background: none;
    }

  10. Thanks so much. But where do I use this text widget? in a Page?

    Text widgets appear in the sidebar. See http://en.support.wordpress.com/widgets/text-widget/ for more information and a tutorial about how they work.

  11. Okay - now I did all these 0 the text id is 13. My entire CSS code looks like this - but still the header image doesnt link to the home page

    The CSS in your latest example needs all of the pieces including the link from the text widget with the "headerlink" HTML code in it. Try adding the text widget as mentioned above and then reply back here if you're still having trouble after that.

Topic Closed

This topic has been closed to new replies.

About this Topic