Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Saturday, December 11, 2010

Repositioning Blogger Title and Description

As per request from a blog reader (Leigh), here's a tutorial on how you can reposition your Blogger's title and description. This is a short and quick one.



Repositioning Blogger Title:

If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
.titlewrapper{
position: relative;
top: 10px;
left: 130px;
}
Changing the top-attribute's value will adjust the title's vertical position. Changing the left-attribute's value will adjust the title's horizontal position. And yes, you can use negative values, for example:
.titlewrapper{
position: relative;
top: -10px;
left: -30px;
}
To align your title to either left, right or center, you don't have to use the above code, as you can directly use the code below:
.titlewrapper{
text-align: center;
}
You can change the attribute value from 'center' to 'right', 'left' or 'justify'.

Repositioning Blogger Description:

If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog. 
.descriptionwrapper{
position: relative;
top: -60px;
left: 440px;
}

Similarly, to align your description, use the code below instead:
.descriptionwrapper{
text-align: center;
}
Easy right? Have fun!

67 comments:

  1. Hey YoboY

    I wanted to say thanks for the assistance with adding the image as background behind text. I was not able to reply on the blogger forums for some reason. If you wanna see the results here's the article I posted with your code:

    http://chatterboxdude.blogspot.com/2010/12/hey-have-you-heard-about-community.html

    Again. Thank you.

    ReplyDelete
  2. Chatterbox Chuck: Looking good. Glad it worked. You can do wonders with CSS.

    ReplyDelete
  3. Yes, that's what I was looking for! Many thanks!

    ReplyDelete
  4. Leigh: Happy to help, as always. Merry Christmas.

    ReplyDelete
  5. Thank you so much for your clear tutorials! I had almost given up on trying to 'fix' my blog when I came across someone on Blogger's site recommending YOUR site for clear tutorials. You explain things so clearly that I have been able to make changes without the aid of my teenagers! THAT is saying something! LOL! Thanks again for everything you do.

    ReplyDelete
  6. @Angela: I'm flattered, thanks :) I'm glad my posts have been helpful. Should you have a question for which you can't find the answer in this blog, feel free to contact me and I'll try my best to help you out. Cheers and God bless.

    ReplyDelete
  7. Hello! Is it possible to have the blogger header at the bottom of the page? if so do i simply alter the code to read "bottom" instead of "top"?

    ReplyDelete
    Replies
    1. Well, not easily possible. You'd have to dissect your HTML, cut out your header part, and put it at the bottom of your blog. That isn't easy coz there are lots of dependencies that you'd have to take care of.

      Delete
  8. Thank you SO much for the awesome tutorials! I have spent the entire day working with them to get my blog the way I want it. However, I can't seem to find anywhere on your site how to re-position the blog description in dynamic views. It's driving me crazy! Can you point me in the right direction?

    ReplyDelete
    Replies
    1. Hi Sondra,

      I might be able to. Where would you like to reposition it?

      Delete
    2. Thank you so much for your tutorial as they have been of great help. I too have a query similar to Sondra. I want to place the description right below the blog title, like this:
      Blog title-yada yada yada
      blog description- blah blah blah blah....blah
      What should i do???

      Delete
    3. Hi Sudhaa,

      It very much depends to the kind of template that you use in your blog. Can I have a look at your blog? What's your blog's address?

      Delete
    4. Thanks for the quick response Yoga. This is my blog
      http://shadesforduskywomen.blogspot.in/
      and thanks for looking in to it. One more query??!! IS there anyway i could add a side bar to the existing dynamic view???? So that i can put more pics/ads...stuff like that

      Delete
    5. Hi Sudhaa,

      Sorry for my late reply. So I've seen your blog, and your description is nowhere to be found. What am I missing?

      As for the sidebar, unfortunately, Dynamic View doesnt support one just yet.

      Cheers :)

      Delete
    6. I'm looking for my blog description as well. The gadget in which i have entered the blog description still contains the description.At times when the blog is loading i can see it and the blog appears without the changes i made to it like changing the color and position of the gadget and sticky header and things like that. It happens at random but goes to customised appearance when i load it again.

      Delete
    7. Took me awhile, but this should work. Let me know how it goes:

      #header .header-drawer.sticky, #header .header-drawer {
      top: 69px;
      }

      #header .header-bar{
      height: 100px;
      }

      #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
      top: 100px;
      }

      #header-container {
      height: 140px;
      }

      .viewitem-panel .viewitem-inner {
      top: 35px;
      padding-bottom: 55px !important;
      height: auto !important;
      }

      #header-container #header.header .header-bar span.title{
      height: 100px;
      }

      #header .header-bar .title h3{
      color: white !important;
      position: relative !important;
      top: -50px !important;
      }

      Cheers and God bless :)

      Delete
    8. Woohoo it works!!! You are awesome :)
      Thank you so much!!!

      Delete
  9. Hi,

    I'm not having any luck with these codes. Can you help me please? I want it centered. I would really appreciate it. Thanks

    http://www.mysecretromancebookreviews.com/

    ReplyDelete
    Replies
    1. Hi Taryn,

      I can't see your blog title/description at all.. This is what I'm seeing:

      Screenshot

      What am I missing?

      Delete
  10. thank you so much. very useful. I have done. Now one thing I need to do. Please can you teach me that How can I center labels on blogger?
    Thank you.

    ReplyDelete
    Replies
    1. Sure thing, but it depends on the kind of template that you're using. Let's have a look at your blog, what's your blog's address?

      Cheers..

      Delete
  11. I'm trying to center my blog description in the header also. I pasted the code in and nothing changed. Not sure what i'm doing wrong but would love it if you could help. Here's my blog: http://laurengrabelle.blogspot.com/

    Thanks.

    ReplyDelete
  12. Oh, no. I was the anonymous recent poster (a few hours ago) and playing around with the templates my blog changed horribly and i can't figure out how to get it back! Yikes! So what you will see in the link i sent is not what i want. I'll try to figure out how to get it back and then maybe you can help me. Thanks.

    ReplyDelete
    Replies
    1. Hi there..

      Send me a copy of your current template, and I'll see if I can edit it to make it look like your original template. To get a copy of your current template, go to Dashboard - Templates - Backup/Restore - Download - Full Template. Next, upload the .xml file that you've gotten to a file-sharing site, like rapidshare.com or something, so that I could download a copy of the template.

      Cheers.

      Delete
  13. Thank you very much! This is the only CSS worked for me. I have been searching for many days!

    Keep posting!

    ReplyDelete
  14. Just like you posted for the dynamic view description being centered... can we do the same for the Blogger TItle in Dynamic View??

    ReplyDelete
    Replies
    1. Sure thing. Here, try this:

      .header-bar .title{
      text-align: center !important;
      }

      Cheers :)

      Delete
  15. Exactly what I was looking for. Thanks for the help!!

    ReplyDelete
  16. Thank you thank you so much!!!! I had been literally breaking my head over the positioning of the Title and description! You are a saviour!! Bookmarking your page!!!

    <3

    ReplyDelete
  17. Hi and Big Thanks! "Southern Speakers" - cool name, by the way.

    ReplyDelete
    Replies
    1. Thanks Ela! :)

      We're from the southern part of Malaysia, hence the name :P

      Delete
  18. Thanks for the post, it really helped me.

    ReplyDelete
  19. Hi yoboy, I am having problems on my blog. How will I begin the css code to overwrite the default theme settings? It is something like this, https://www.dropbox.com/s/nq1zcb8di50q0vw/LIKE%20THIS.jpg I am just an entry-level web designer. Please help. Thanks

    ReplyDelete
    Replies
    1. Hi Anon,

      I'm not sure if I'm getting you right, but you should be able to find your CSS definition in your template, by accessing Dashboard - Template - Edit HTML.

      Cheers :)

      Delete
  20. Dynamic Views Description under the header only has a very limited number of characters. I read all your titles and you don't have anything for this. I can't use Dynamic Views because my Blog Description is long. Is there a solution? Thanks!

    ReplyDelete
    Replies
    1. Interesting.. I think this can be done. Can I have a look at your blog though, just to get an estimate on how long of a description we're talking about?

      Delete
    2. The address is below. It is not Dynamic Views now because of stated problem. I'm amazed that no one else has encountered this problem. In Dynamic Views my Blog Description would only be the first 4 - 5 words !!
      http://www.hound-dog-media.com/
      Thanks

      Delete
    3. Hi Jerry,

      Which one of the seven views were you primarily using (Classic, Magazine, etc..)?

      Delete
    4. I was only using Magazine. Did not try any of the others because they did not fit with my blog.

      Delete
    5. I've published a post on this. See if it helps:

      http://www.southernspeakers.net/2014/01/show-description-text-in-full-in.html

      Delete
  21. Yoga could you tell me how to put my blog description in 2 columns, aligned left, not centered? It's poetry (unless you work for a literary magazine and don't believe in magic).

    ReplyDelete
    Replies
    1. Hmmm.. Interesting.. I'll give it a try.. Could you point me to your blog? I wouldn't wanna start working on the wrong template to find the tweak isn't compatible with your blog, if you know what I mean.

      Delete
  22. sir my website is
    http://actresschillz.co.vu
    i want increase the header image size
    the menu bar comes in of my header image pls help me sir

    ReplyDelete
    Replies
    1. You're using a third party template. It is best to contact the maker of this template for any mods.

      Delete
  23. hi yoga, thank you so much for your great help.
    please i need to centralize my tabs text. how can i do it? i already centralized my blog title. thanks to you. my blog: http://bettymanousos-focus.blogspot.com
    thank you so much!

    ReplyDelete
    Replies
    1. This should do for now. You may have to re-adjust the percentage value in the future if your tab-width changes (you will know when it happens):

      .PageList ul{
      display: block !important;
      width: 69% !important;
      margin-left: auto !important;
      margin-right: auto !important;
      }

      Delete
  24. my picture in my header is coming out so big that it is cutting off the picture. how do i fix it?

    ReplyDelete
  25. Thank you very much! Thought I might give up on the description because I couldn't make it perfect and all others only gave alignment code. Thank you again, I mean it.

    ReplyDelete
  26. Hi Yoga! I am trying to align the blog title vertically in the middle. Here's the code I used from one of your posts:

    #header .header-drawer.sticky, #header .header-drawer {
    top: 134px;
    }
    #header .header-bar{
    height: 100px;
    }
    #header:hover .header-drawer, #header .header-drawer.open, .header-ssyby, body.viewitem-open #header .header-drawer {
    top: 100px;
    }
    #header-container {
    height: 145px;
    }
    .viewitem-panel .viewitem-inner {
    top: 100px;
    padding-bottom: 120px !important;
    height: auto !important;
    }

    The title aligns to the top of the page, and some part of the title is chipped off from the top. This is for a friend and she needs it to be centred, horizontally and vertically. Could you help, please?
    We're working on a test blog for now since she already has viewers on her "production" one. The address is http://ccftdraft.blogspot.in/

    ReplyDelete
    Replies
    1. Hello Ram,

      Have you got this sorted? Perhaps this can help:
      http://www.southernspeakers.net/2012/02/center-title-in-blogger-dynamic-view.html

      Delete
  27. Hi Yoga,

    I used this code...

    #header .header-bar .title {
    height: 100px;
    line-height: 100px;
    }

    Thank you! :)

    ReplyDelete
  28. thanks so much - really easy and perfect result :)

    ReplyDelete
  29. I can't believe that after HOURS of trying to change the font size and position of my blog description I found your website, AND SUCCEEDED! THANK YOU !!!!!!!!!
    I cannot for the life of me think why Blogger doesn't make this as easy as changing the title position and font.

    ReplyDelete
  30. Thank you, thank you!!!!!! I tried so many things which didn't work and there it is! Thank you so much for these great instructions :)

    ReplyDelete
  31. Hi, I've just changed the theme of my blog and now my blog description has been cut off because it's put it next to the blog title but I would like it underneath the title. I've been playing around with lots of different codes but nothing is working so could you take a look for me please?

    My blog is: http://justagirlwithacameraexploringtheworld.blogspot.co.uk

    I'd like the blog description ("Travelling it leaves you speechless.....") underneath the title (One girl, various cameras.......) if that's possible.
    Also is there any way to change the font sizes of blog title and description as I'd like to make the title bigger and the description a little smaller. Any help is greatly appreciated thank you :)

    ReplyDelete
    Replies
    1. Hi there,

      See if this is what you're looking for:

      http://www.southernspeakers.net/2014/10/description-below-title-in-blogger.html

      Cheers!

      Delete
  32. Hii Yoga,
    So nice, very useful events.

    ReplyDelete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.