Southern Listeners

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

Sunday, January 16, 2011

Blogger Pages Gadget No-Stretch

If you're using Awesome Inc template, you'll know what I'm talking about. The Pages Gadget menu stretches from left to right horizontally. Though this might be one of the distinctive features of the Awesome Inc template, it might seem out of place for some users. In this tutorial, I'm going to show you how you can quickly convert this stretching gadget to a decent one that adapts to the width of your main posting area.



If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -

If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close -  Edit HTML - Proceed - 

Find for /* Headings ----------------------------------------------- */ - Paste the following code directly above it (see the screenshot):
/*--Pages Gadget No-Stretch Starts--*/
.tabs-outer {
background: transparent !important;
}

.cap-top, .cap-bottom{
border: none !important;
}

.tabs-inner .widget li a{
border: none !important;
border-right: 1px solid $(tabs.border.color) !important;
}

#crosscol{
background: $(tabs.background.color) $(tabs.background.gradient);
border: 1px solid $(tabs.border.color) !important;
}
/*--Pages Gadget No-Stretch Ends--*/
The code in place (ending portion)


And that would be it. Have fun!

29 comments:

  1. @Pistilon: Looking good! And nice blog, keep it up mate.

    Cheers.

    ReplyDelete
  2. Thank you so much! This very issue has been driving me crazy.

    Come visit at http://lorriemccullers.blogspot.com

    ReplyDelete
  3. @Lorrie: Glad you find this post helpful. This is especially an issue for users that have third party background script installed. Glad you got this resolved. Looking good now.

    Regards.

    ReplyDelete
  4. hi,
    my link list is above header @left i want to move it below blog header if not possible i want to decrease the width of tabs n increase length b coz the link list is hifing my blog title slightly...can i be helped.
    please visit my blog
    www.shishir-pariyar.blogspot.com

    expecting ur kind responce..
    shisir

    ReplyDelete
  5. @शिशिर परियार: Yes you can be helped but I don't think I'll be able to help you in one reply. I'd have to get in touch with you, probably via emails. When you see this, kindly go to this page and leave the same question there. I will be in touch then.

    Cheers.

    ReplyDelete
  6. this was so helpful!!! was driving myself crazy trying to find a solution :-) thanks!

    ReplyDelete
  7. @carma: No problem at all. Happy to help. Cheers.

    ReplyDelete
  8. Every time I'm trying to figure out how to fix something on Blogger, my Google search always finds me at your site. Thanks so much for all the help!

    ReplyDelete
  9. @Kristin: I hope you were not wrong misled here. You're welcome, glad you find the tutorials helpful.

    Cheers and God bless.

    ReplyDelete
  10. Hello! Your blog has been very helpful.
    Could you please help me with removing the excess horizontal boarder, as well as created a transparent background as opposed to white?
    Thank you! Much appreciated.
    Amy
    (amyriding.com)

    ReplyDelete
    Replies
    1. Hi Amy,

      Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .tabs-cap-bottom, .tabs-cap-top{
      border: 0px !important;
      }
      .tabs-outer, .tabs .widget ul, .tabs .widget ul a, .fauxborder-left.tabs-fauxborder-left{
      background: transparent !important;
      }

      Regards
      Yoga..

      Delete
    2. You sir, are the best. Thank you.

      Delete
  11. I tested on "test" blog and it worked, see: http://templatetestingforanewbie.blogspot.com/

    Then I went to my "real" blog and it didn't, see: http://forkranawaywiththespoon.blogspot.com/

    Any tips would really help a total newbie out.

    Thanks!!!

    ReplyDelete
    Replies
    1. Hi Jackie,

      The gadget isn't stretching in your real blog either: http://img593.imageshack.us/img593/9818/20130317014416capture.png

      Have you got it sorted?

      Delete
  12. It looked the same to me. I wanted it to be lined up with the width of the content on either side. In other words, it ends on the right where the search button ends and lines up on the left where the post title starts. Does that make sense and is that do-able?
    Do you take paypal for your donations?

    Thanks so much for your help.

    Jackie

    ReplyDelete
    Replies
    1. Oh right that.. Here, use this personalised code instead. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .fauxborder-left.tabs-fauxborder-left{
      display: block !important;
      margin-left: auto !important;
      margin-right: auto !important;
      max-width: 93% !important;
      }

      Cheers :)

      Delete
  13. Thank you so much, truly appreciate your help. Made a donation ;-D.

    cheers to you too.

    Jackie

    ReplyDelete
    Replies
    1. Yeah! Thanks a lot Jackie! Means a lot! :D

      Delete
  14. hi,

    "Invalid variable declaration in page skin: Variable is used but not defined. Input: tabs.border.color"

    Am getting this error.. wat to do..?

    ReplyDelete
    Replies
    1. Hi,

      What exactly were you trying to do?

      Delete
  15. Hello,

    Please, can you help me, I get this note:

    "Invalid variable declaration in page skin: Variable is used but not defined. Input: bordercolor"

    I was just trying to change the font of my posts..

    Thanks!

    ReplyDelete
    Replies
    1. Editing anything within the Edit HTML page is gonna pretty much give you that error. I suggest to keep it within the 'Add CSS' box - you can make font changes there and you can avoid errors like these.

      Delete
  16. Hello Yoga Thanks so much for your help.
    can you plz help me out wid this :
    "Invalid variable declaration in page skin: Variable is used but not defined. Input: bordercolor"

    Trying to remove previously applied label -cloud-widget- in my Blog....want to add other effect for the same...But it doesnt allow me to Remove ..!!getting diz error

    i wud appreciate your help!!thanks

    ReplyDelete
  17. Any alternative way to Remove da effect for the same!!!thanks

    ReplyDelete
    Replies
    1. Hi Nazeeb,

      Looks like it is not related to the tutorial in this page. Let's bring this discussion to the forum:

      http://www.southernspeakers.net/p/ask-question.html

      Delete
    2. Hey, this has been driving me crazy so its awesome to finally get this done. One problem is that it screwed up the mobile version by getting rid of all the formatting. Is there a way to fix this?
      My Blog: http://games-and-geeks.blogspot.com/

      I know that this is an old post and blog but figured I would ask anyways.

      Delete
    3. Hey I couldn't find anything odd on your mobile page, or perhaps you've got this sorted?

      Delete

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