How to align Pages/PageList gadget

by Greenlava

A Pages (a.k.a PageList) gadget is simply a set of links to your (static) Pages. You can opt to add Pages gadget once a static page is published.

Pages gadget is left aligned by default. To align it in the center or on the right (of your horizontal bar or sidebar), you just need to add a small CSS code snippet.

pagelist left

Here we go,

  1. Go to Template > Customize > Advanced > Add CSS (old interface: Dashboard > Design > Template Designer > Advanced > Add CSS).
  2. Look for ]]></b:skin> line in your HTML code and add the following code right before the line.

    Paste one of the following snippets in the CSS editor, and press Enter key.


    a. For horizontal tabs type PageList

    • To center 
      .PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}
      pagelist center
    • To align right 
      .PageList {text-align:right !important;}
.PageList li {display:inline !important; float:none !important;}
      pagelist right

    If the tabs stack on each other after you added the code, try replacing display:inline with display:inline-block.


    b. For sidebar links type PageList

    • To center  
      .PageList {text-align:center !important;}
      sidebar pagelist center
    • To align right   
      .PageList {text-align:right !important;}
      sidebar pagelist right
  3. Check out the live preview in the lower pane.
  4. Lastly, if you are happy with the way it looks, click the orange Apply To Blog button.
  5. That's it. Enjoy!

 

Before you leave:

  • Do you find this article useful? Share it via Retweet, Share and Stumble buttons.
  • Any suggestion, question or comment? Please post it in the comments below.

242 comments to "How to align Pages/PageList gadget"

«Oldest ‹Older 201 – 242 of 242 Newer› Newest»
Greenlava,  February 20, 2012 at 3:53 PM    

@Mjv1
You have a missing closing curly bracket in CSS. Look here:

#mbtnav li li a:hover, #mbtnavli li a:active {
background: #ffffff;
color: #000;
display: block;
margin: 0;
padding: 12px 12px 12px 12px;
text-decoration: none;
}.header-outer {
margin-left:28px;.header-outer {
margin-left:20px;
}.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}

The bolded line should've been like this:
margin-left:28px;} .header-outer {

Matt,  February 21, 2012 at 4:01 PM    

You are amazing! Thanks this was so helpful. I had spent hours online trying to figure out a solution and none of it worked. Once I came across your site and applied this fix it worked instantly! Thank you.

Efira Nazri,  February 23, 2012 at 9:47 AM    

Thanks. it works on my blog. !!

love it !

mazwanj,  February 28, 2012 at 10:34 PM    

thanks for reply.well i still dont have idea to allign the page.
huhu.

Shan @ Design Gal,  February 29, 2012 at 1:21 PM    

Your site has been so helpful! I wondered if you could help me with something...
I'm trying to make my page list look like this...
http://i297.photobucket.com/albums/mm240/shans_design/Picture-1.png
Any tips? Thank you!

Shan @ Design Gal,  February 29, 2012 at 1:22 PM    

Also, do you know how to add the little facebook & twitter links like the ones in the picture I sent in my last comment?

Shan @ Design Gal,  February 29, 2012 at 1:24 PM    

this is what i have so far...}
.PageList {text-align:left !important;}
.PageList li {display:stack !important; float:none!important; padding-top:10px;}
.PageList li a {padding:-left:15px; padding-right:15px;}
.PageList li a {background:#8FD8D8;}
.PageList li a {
font-family:Century Gothic;
font-size:150%;
font-weight:normal;
font-style:normal;
color:$pagetitlecolor;

Anonymous,  March 1, 2012 at 2:25 AM    

YOU. ARE. AWESOME!!!!!!!!!!!!!!

Greenlava,  March 1, 2012 at 2:58 AM    

@Mjv1
I see a number of mistakes in your template. Too specific and too long to explain it here. Email me and I'll get back to you.

Greenlava,  March 1, 2012 at 3:09 AM    

@Shan @ Design Gal
Try this:
.PageList {text-align:left !important;}
.PageList li {padding:left:0px; float:none!important; padding-top:10px;}
.PageList li a {display: block; padding: 5px 15px; background:#8FD8D8;}
.PageList li a {
font-family:Century Gothic;
font-size:150%;
font-weight:normal;
font-style:normal;
color:$pagetitlecolor;

Greenlava,  March 1, 2012 at 3:18 AM    

@Shan @ Design Gal
For the buttons -use this code for each button:
[a href="PUT_LINK_URL_HERE"][img src="PUT_IMAGE_URL_HERE" style="border-width: 0px; float: left; margin: 2px;"][/a]

Shan @ Design Gal,  March 1, 2012 at 10:34 AM    

OMG- you are amazing! Seriously, I love you like a fat kid loves cake! Thanks for your help and for these awesome tutorials! I was surprised to see your response so quickly. You can definitely count on a donation and a reader for life!
P.S. Do you offer online courses? I'd be interested if you do!

Shan @ Design Gal,  March 1, 2012 at 10:49 AM    

one last question (and a bit nit picky- i appologize) but is there a way to align the left side of the page list with where the profile & other sidebar items start? thanks again!

Greenlava,  March 1, 2012 at 4:22 PM    

@Shan @ Design Gal
Oops there's a mistake:
padding:left:0px;

should've been:
padding-left:0px;

p.s. No I do not offer online courses. Interesting idea though :)

Monika,  March 11, 2012 at 11:23 PM    

Thank you so much! It works wonderful :-)

Rachel Melton,  March 26, 2012 at 10:54 PM    

I tried this and when I had 4 pages, they were centered. However, I got rid of one page, leaving me with three, and they're not centered. Can you help me?

www.ruggedindependence.blogspot.com

Rachel Melton,  March 26, 2012 at 10:56 PM    

Never mind my last comment!!! I read above a little and centered them manually. Thanks for your great site!

The Stillness in Moving,  April 5, 2012 at 2:50 AM    

That was a piece of cake. Some sites give such long discussions, and your worked in a cinch. Thanks a lot. :)

pretty things and potty mouths,  April 26, 2012 at 2:41 AM    

Hi There!

I am also having the issue where my blogger tabs line up perfectly horizontal in chrome, safari. But when I pull it up with Internet Explorer, they are stacked on top of eachother on the left side of the screen. Is there anyone who could help me with this? I would really appreciate it!

Amanda

amandachristinecowley@gmail.com

http://prettythingsandpottymouths.blogspot.ca/

jazzofthufeil,  May 12, 2012 at 5:35 PM    

Hi, would you please tell me how to horizontally center align my "Google Search" widget (instead of Page Title Widget)...that I put it right above the Page Title Bar?

Thank You verymuch in advance :)

Greenlava,  May 13, 2012 at 11:26 PM    

@jazzofthufeil
Get your widget ID, and then add this in your CSS:
#WidgetID {margin-left: auto; margin-right: auto;}

cards game,  May 25, 2012 at 10:11 PM    

you have done a great work.Thanks for sharing this.

Lynn,  May 26, 2012 at 7:00 PM    

Thank you! So easy!

bibliophile21,  June 4, 2012 at 5:51 AM    

Thank you! Such a simple fix and so easy to do, my favorite kind of tweak :)

Dconfrst,  June 20, 2012 at 8:59 PM    

Greetings! I would like to thank you for a very well defined instruction that surely answered my questions and provide not only a solution but the end to the quest for blogger tutorial!
Keep up the goodwork and appreciate all the help!
Works perfectly on my blog.

Anonymous,  July 14, 2012 at 2:37 AM    

Thank you so much for this!

Anonymous,  July 18, 2012 at 3:38 AM    

this is soo much help thankyou thankyou!!!!

Kim Nguyen,  July 20, 2012 at 2:52 PM    

Sorry for the lame question because I'm still new to this blog layout editing! I followed all the directions to get to the CSS editor part... but once I get there, the field to edit it is blank. Am I missing a step?

Greenlava,  July 22, 2012 at 12:54 PM    

@Kiiiim
It's supposed to be blank. Now copy the appropriate code and paste it in there.

Unknown,  August 6, 2012 at 7:56 PM    

Thanks very much for this! Saved me a lot of time :)

Becky,  October 24, 2012 at 7:08 AM    

Oh my God.. Thank you soooo much! I have been trying to center my tabs for hours and just couldn't do it- I kept entering the css code only to have all my tabs stack up on top of one another. wierd and very very frustrating. I just wanted to show my massive appreciation

Random Forevers,  November 26, 2012 at 12:57 PM    

i used the code but can't get it to center... what am i doing wrong???

Danica Matienzo,  November 26, 2012 at 4:05 PM    

thanks for this!!! :)

Kawaiikkuma,  December 27, 2012 at 5:38 PM    

Hi,
my page was centered until i removed a picture's border
after i removed picture's border, the page tabs no longer centered and when i try to re-apply the code several times, it' did not work out like before :(

any idea what did i do wrong? please please help me!

www.kawaiikkuma.com

Greenlava,  December 29, 2012 at 3:53 AM    

@Kawaiikkuma
Yes you did, here:
post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}

there is a dot missing in front of "post-body img", it should be ".post-body img".

Anonymous,  January 30, 2013 at 2:40 PM    

Hii,Iam 10 days old blogger and find your blog as the holybook for blogger users.
My blog-awesome inc template with a HEADER on top,1 SIDEBAR on left and 1 on right(this branches into 2below) and finally i have my footer in the add gadget box on the bottom( i removed the original footer).
I see in your blog that everything looks like one page from header to footer.So, can you guide me how to stretch sidebar and post backgrounds till page footer.(on my blog i see everything as separate boxes :) )

Carolyn at Moose Mouse Creations,  February 2, 2013 at 1:28 PM    

wow! Thanks so much!

Greenlava,  February 6, 2013 at 9:28 PM    

@Anonymous
Have you tried Simple and Ethereal templates?
You can also try our custom template: Simply faster Blogger template.

Grace,  March 31, 2013 at 10:30 PM    

it didn't work. :( please help me.

Kadi,  April 16, 2013 at 9:48 PM    

Most useful! Thank you!

Kat,  April 29, 2013 at 1:11 PM    

Thank you! so helpful!

vidio lucu,  June 23, 2013 at 9:15 AM    

thanks for shared his article, in accordance with the code that I'm looking to construct my website

«Oldest ‹Older 201 – 242 of 242 Newer› Newest»

Comments on this post are closed.