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.

Here we go,

Go to Template > Customize > Advanced > Add CSS (old interface: Dashboard > Design > Template Designer > Advanced > Add CSS).
~~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;}
```
- To align right
```
.PageList {text-align:right !important;}
.PageList li {display:inline !important; float:none !important;}
```
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;}
```
- To align right
```
.PageList {text-align:right !important;}
```
Check out the live preview in the lower pane.
Lastly, if you are happy with the way it looks, click the orange Apply To Blog button.
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 1 – 200 of 242 Newer› Newest»

▲ FARRAH ▲, March 1, 2010 at 5:59 PM: Hi Greenlava, how would we stylized this? Like the one in the sample images you provided above, where the background color of the tabs are blue and when you hover over it the color is white. Please show how to code the size and color of these navigational tabs using Blogger Pages.

Thank you,
Farrah @ DISTRIKMODE.COM
Anup, March 3, 2010 at 12:21 AM: This is coll with CSS ;) I think I have to use it...I have follow your blog too :)
Greenlava, March 3, 2010 at 8:28 AM: @DISTRIKMODE
Hover color is not white. The white color is for current page indicator. Anyway you can grab the code at the end of Highlighting current page tab in navigation bar.
Stella, March 4, 2010 at 11:01 PM: Hi GreenLava, I'm actually here to thank you for taking a look at my blog. I wrote in to google help, and, sure enough, I see you have dropped by to take a look. Everything is good now (for the moment at least). Thanks for your concern, Stella
Greenlava, March 5, 2010 at 12:04 AM: @Stella
You're welcome
Mrs. Tweet, March 7, 2010 at 6:51 AM: I tried implementing this code on my blog (airwife.blogspot.com) and it worked in preview, but when I refreshed after saving it didn't apply. I double checked to make sure it was in the HTML.

Also, do you have suggestions on how to make the pages list small caps, bolded, and the font larger? At some point I want to add a table that looks like tabs.
Greenlava, March 7, 2010 at 11:38 PM: @Mrs. Tweet
I don't see the code in your source code. Maybe you need to do it one more time.
To change to small-caps, bold and enlarge font:
.PageList li {display:inline !important; float:none !important; font-variant:small-caps;font-weight:bold; font-size:SIZE_HERE;}
To turn text into tabs refer to Highlighting current page tab in navigation bar, just copy and use the CSS code at the end of the article.
abeams, March 13, 2010 at 4:21 AM: I inserted the code where you instructed and it centered everything, but it also stacked everything. http://fitphoto2010.blogspot.com/
What did I do wrong?
Greenlava, March 13, 2010 at 10:25 PM: @Amelia
You did nothing wrong. Just need to change something. Change display:inline !important to display:inline-block !important.
Anonymous, March 14, 2010 at 2:24 AM: I don't understand what I need to insert into the code. You'll have to forgive me. I'm very new to all of this! But loving it all the same. I'm wanting to center align my horizontal tabs. Do I insert the .Pagelist part too? And both lines of it?
Greenlava, March 14, 2010 at 4:31 PM: @Carrie LeighAnna
You hover the code and click on the <> icon. A window containing the raw code will pop up. Right click and select all. Then paste the code before ]]>< /b:skin > line.
Marisa, April 21, 2010 at 5:15 AM: This is great! Just what I was looking for. Thanks.
Goodnews, April 23, 2010 at 12:41 PM: Thanks
Mariel, May 9, 2010 at 3:27 PM: thank you!!
Greenlava, May 9, 2010 at 6:12 PM: @Marisa@make*happy
@Goodnews
@h a u t e . m e s s

My pleasure. Don't forget to come back
About the FNJ, May 20, 2010 at 2:00 PM: I'm trying to move my tabs from the sidebar to the top of the page. When I do this, and my tabs are flush left they read fine, but when I add the code to center the tabs the top of them gets cut off. This could be due to my header, although why they're not cut off when flush left is a mystery. Any ideas? (www.FoodNewsJournal.com) Thank-you!
Greenlava, May 20, 2010 at 10:08 PM: @About the FNJ
I have to see it live to be able to find out what's wrong with it.
Anonymous, May 31, 2010 at 2:44 AM: I have tried this but it just puts everyhting in center vertically and not horizontally. I even tried to change to coding to "dispaly:inline-block !important" but still the same result
Greenlava, May 31, 2010 at 10:28 AM: @MUSE Atlanta
Looks like you had it fixed.
Julie DiMatteo, May 31, 2010 at 11:54 PM: I have tried this as well with inline-block, but my pagelist centers vertically (stacked). Any other suggestions?
Greenlava, June 1, 2010 at 5:23 PM: @Julie DiMatteo
Use this code:
.PageList {text-align:right !important;}
.PageList li {display:inline !important; float:none !important;}
.PageList li a {display:inline-block !important;}
Julie DiMatteo, June 1, 2010 at 10:14 PM: Awesome!!! Thank you so much - that worked! The only thing I changed was "right" to "center". I've been trying to fix that for days! Thank you again!
Eliza, June 16, 2010 at 1:59 AM: Arghhhh! I want to have the tabs centered, but instead with your fix, it is the tab section that is centered, with the line and all underlining the tabs. Do I have to widen the blog's body, add another tab so that there is no space off to the right?
http://therealeliza.blogspot.com
Greenlava, June 19, 2010 at 12:20 AM: @Eliza
Don't need to. Just add the whole code, and make sure you don't omit the dots in front:
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}
Tina, June 23, 2010 at 7:59 AM: Great! Easy to understand and put on page and it worked!
Sara, June 29, 2010 at 3:22 PM: Dear Green
I hv already copy & paste ur code just before the
]]>< /b:skin > line. But when i preview my blog, the pages still align to left
Greenlava, June 29, 2010 at 10:14 PM: @Sara
Care to share you blog URL so I can take a look?
Sara, July 1, 2010 at 10:55 AM: Dear Green.. thank you so much. I hv re-try to do the setting again this morning & it works. Mind to hv ur email so that i can invite u to my blog (private blog)
Greenlava, July 1, 2010 at 7:38 PM: @Sara
It's in my Blogger profile
Anima Vistas™ Fine Art Photography by Gary Robinson, July 2, 2010 at 4:56 AM: I tried this and it worked like the charm it is promised to be. Thanks so much for the assistance.
Darlene S., July 6, 2010 at 3:02 AM: Thanks so much for the tip for @Julie DiMatteo. This worked like a charm for me, all I did aside from that was change "right" to "center". :) Thanks a bunch! :)
Scuba, July 8, 2010 at 1:27 PM: I insert the code and my tabs are still shown aligned to the left,please help. stackreams.blogspot.com
Greenlava, July 9, 2010 at 5:40 AM: @Anima Vistas™ Fine Art Photography by Gary Robinson
You're welcome, and thanks for following.

@Scuba
Where did you insert the code? I don't see it.
Scuba, July 11, 2010 at 3:25 PM: I reinserted the code, it should be in there now
Greenlava, July 11, 2010 at 4:04 PM: @Scuba
You inserted the code before the closing curly bracket of the existing code:

background: none;
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}
}

move the closing bracket back to where it belongs, like this:

background: none;
}
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}
Anonymous, July 23, 2010 at 4:28 AM: Thank you so much for your help!
Kelly @ turned UP to ELEVEN!, July 29, 2010 at 5:59 AM: After I finally figured out where to correctly place this code it worked out amazingly! Thank you for the resources!!! ox
Mollie, July 31, 2010 at 1:57 AM: I have tried copy and pasting the code in the above article and my tabs are still aligned on the left. I tried reading through everyone's comments to figure it out but still can't. Not sure what to do??

www.highstyleonasmallbudget.blogspot.com
Greenlava, July 31, 2010 at 2:11 AM: @Kelly @ Dare to be Domestic
You're welcome

@Mollie
Where did you paste the code? I can't see it anywhere (in source code)
Mollie, July 31, 2010 at 3:41 AM: I pasted it again. Right above the B:skin line
Greenlava, July 31, 2010 at 11:30 AM: @Mollie
You pasted it at a wrong place.
Should've pasted it above ]]>< /b:skin> (notice the slash?)

Use Ctrl+F and search for /b:skin.
Mollie, August 1, 2010 at 11:04 PM: Got it thanks so much!
Nancy, August 8, 2010 at 7:57 PM: I used this on my blog www.shematters.me. It works great with chrome but is aligning left in IE8 and Firefox.

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}
.PageList li a {display:inline-block !important;}
.PageList li a {margin-right: -4px !important;}

(I subscribe to your blog and use it a lot. Great stuff. Thanks so much!)
Greenlava, August 8, 2010 at 10:18 PM: @Nancy
It seems your newly added buttons interfere with the bar alignment (plus some other issues.
Go look for this code in your template:
#header-right {width:30%;display:inline-block;float:right;padding:10px;}
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}
.PageList li a {display:inline-block !important;}
.PageList li a {margin-right: -4px !important;}
}.body-fauxcolumn-outer div {

replace it with this:
#header-right {width:30%;display:inline-block;float:right;padding:10px;}
#header-right .widget {margin:0;}
.PageList {text-align:center !important;}
.PageList ul {overflow:visible !important;}
.PageList li {display:inline !important; float:none !important;}
.PageList li a {display:inline-block !important;}
.PageList li a {margin-right: -5px !important;}
.body-fauxcolumn-outer div {
Nancy, August 10, 2010 at 5:45 AM: Thank you! That seems to have fixed it.
M.Hill, August 18, 2010 at 10:07 PM: I couldnt find the :
]]>

However mine looks like this : , but it didnt work. What am I doing wrong ?
Greenlava, August 19, 2010 at 1:56 AM: @☼MistyHillPhotography☼
You use Template Designer right? You can use this methodto add the code:
Go to Design > Template Designer > Advanced > Add CSS and paste the code into the CSS editor.
Health is Wealth, August 23, 2010 at 7:58 AM: Hello,

I'm trying to add pages to my blog but they are vertical not horizontal and I've tried many of your codes and nothing is working. I'm new to all this as well, help please.
www.no-bonez.blogspot.com

Thanks,
Chelly
Greenlava, August 23, 2010 at 5:14 PM: @Health is Wealth
Have you tried replacing display:inline with display:inline-block?
Lizzzy, August 27, 2010 at 8:08 AM: Hi, thanks so much for all your fixes. I've got my page tabs centre aligned on chrome but on IE the tabs hang on the left and the text stacks vertically in the centre.
http://www.emcdowell-hook.net/
Any help appreciated! Thanks
Greenlava, August 27, 2010 at 10:50 AM: @Lizzzy
...and that's why people hate IE :)
I'm stumped on this one.
Template Designer came with a javascript that create the tabs' rounded corners in IE. That same javascript caused this problem. And I don't have a workaround for this.
The only way now is to center you tabs "manually" -using padding.
Replace the code you've added with this one:
.PageList ul {padding-left:360px !important;}
you need to change the value every time you add a tab.
Lizzzy, August 27, 2010 at 12:47 PM: Ok, cool. Well that's fixed for the meantime then. So when I add more pages I just play around with the 360px value to get them lined up nicely? Yeah I knew I didn't like IE as a browser but now there's a new level of dislike.
Thanks for your help :)
Ramesh, September 4, 2010 at 2:06 PM: Hi Greenlava

First of all, Thanks for writing great posts on blogger new templates. I have used many of your articles to customize my blog. I have an issue with pagelist bar, it has gaps beween header and posts. Can you please help me fix that. Please check my blog http://www.netargument.com
Greenlava, September 4, 2010 at 4:59 PM: @Ramesh
You have 30px top and bottom margins for the content area. To undo the margins, paste this code in CSS:
.main-inner {padding:none !important;}
Ramesh, September 4, 2010 at 10:55 PM: I did that but unfortunately, it didn't make any impact.

Ramesh
Ramesh, September 4, 2010 at 11:26 PM: Once Again, it is me! I tried to fix it the way you suggested. However, it was fixed by playing with pages bar in elements area, where I had add gadget bar showing which was causing this gap, when add gadget bar disappeared above pages bar, gap too disappeared.
Greenlava, September 5, 2010 at 12:53 AM: @Ramesh
Oh I'm sorry, it should've read
.main-inner {padding:0 !important;}
Tina Butler, September 7, 2010 at 7:12 PM: I inserted both codes and added the block and it centers the page tabs but also stacks them. So i took out the code. It starts off centering the pages then they look stackable.
Tina Butler, September 8, 2010 at 4:34 AM: My tabs or pages still wont center. Here is my url
http://www.mommyskitchen.net/
Greenlava, September 8, 2010 at 1:05 PM: @Tina Butler
I've tested the a)center code on your blog. The tabs centered fine in Firefox, IE and Chrome.
Tina Butler, September 8, 2010 at 7:18 PM: Greenlava, I added the code and it looks centered as the page starts to load. Then when it is fully loaded the tabs stack and go to the left. They are no longer labeled. I left the code in place. I am using IE.
Tina Butler, September 8, 2010 at 9:30 PM: I left the code in place to center the pages and they still looked stacked with no words. I asked some folks on facebook to go to my site through IE and tell me what they see. They said they are seeing the boxes stacked to the left on top of each other. In firefox it looks fine.
Greenlava, September 8, 2010 at 9:53 PM: @Tina Butler
Your problem is similar to reply #51
To center it manually, try replacing the codes with this:
.PageList ul {padding-left:30px !important;}
Tina Butler, September 8, 2010 at 10:49 PM: Ok I deleted the two previous codes and added the {padding-left:30px !important;} code. It worked by my last tab was hanging veritcal

Med
i
a

All I could do was shorten a title on another tab to get the last tab to go across horizontal.
Anthony, September 12, 2010 at 3:36 AM: Does anyone know how to make it so the title of my page does NOT display on the page itself?
Greenlava, September 13, 2010 at 2:58 PM: @Anthony Fragola
Use conditional tag to isolate the page. Then apply display:none to hide the title.
Apply different layout/styling to static pages
in your case, use:
h3.post-title {display:none;}
Anonymous, September 14, 2010 at 11:45 PM: thank you for the simple explanation on how to center tabs!!
Greenlava, September 15, 2010 at 8:38 AM: @a little lovely
You're welcome. Hope you come again.
Rocio , September 21, 2010 at 12:49 AM: Hi, I've tried centering and changing the font size but there's no change. I've got another code in place for the posts title, can you take a look? www.rocioliew.blogspot.com Thanks.
Khairi Mohd, September 22, 2010 at 4:36 PM: I put on my blog, previously it is left aligned. when it is now centered, the left tab border is missing.

see my blog. http://www.kubakoya.com the 'home' tab does not have left border. help me. kong mei ar.
Greenlava, September 22, 2010 at 5:15 PM: You have a missing closing curly bracket in CSS:

.post h3 {
background:#000000;
margin:.25em 0 0;
padding:0 0 4px;
font-size:250%;
font-weight:normal;
line-height:1.4em;
color:#ea7070;
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#ea7070;
font-weight:normal;
}

after color:#ea7070;. You need to add it, like this:

.post h3 {
background:#000000;
margin:.25em 0 0;
padding:0 0 4px;
font-size:250%;
font-weight:normal;
line-height:1.4em;
color:#ea7070;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#ea7070;
font-weight:normal;
}
Greenlava, September 22, 2010 at 8:14 PM: @Khairi
Put the left border back on by adding this:
.tabs-inner .widget li:first-child a {border-left:1px solid #FFFFFF;}
Rocio , September 23, 2010 at 2:19 AM: Thank you so much, works perfectly! I appreciate your prompt reply=)
Khairi Mohd, September 23, 2010 at 9:04 AM: Thanks GL, your blog helps a lot.

Hey, I found out some of your readers got hard time to look for ]]> in their template and also misplace the widget.

Why not you just tell them to put the widget in the template designer --> advanced --> 'add CSS'

That is simpler. :)
Greenlava, September 23, 2010 at 10:11 AM: @Khairi
Thanks, I'll do that.
BTW Selamat Hari Raya :)
engineerstandpoint.blogspot.com, October 16, 2010 at 11:42 AM: Greenlava:

Please help fix my pagelist background it does not match with my header background, and have removed my multi level drop down menu and replaced it with pagelist static menu.

http://engineerstandpoint.blogspot.com
Greenlava, October 16, 2010 at 2:54 PM: @AMalobago
Go to Design > Template Designer > Advanced > Add CSS and add this code in the custom CSS box:
#crosscol {background-color:#e79744;}
CantStopBaking, October 25, 2010 at 11:13 PM: Hi, the centering worked perfectly- thank you! Is there a way I can change the font to a custom font that I downloaded from kevinandamanda.com?
Greenlava, October 26, 2010 at 9:29 PM: @CantStopBaking
Have you read their tutorial on installing the font?
Anonymous, October 30, 2010 at 4:33 AM: Thanks for posting this! It's been a great help. http://everydaymamma.blogspot.com/
Krystal, November 19, 2010 at 11:43 PM: I did exactly how you said to... problem is it really screwed up the label cloud. It made it like move to the left and scrunch up really bad! Do you know how I can fix it? I would really appreciate it!!!!!

simplefourletterword.blogspot.com
Greenlava, November 20, 2010 at 1:20 AM: @Krystal
Looks fine from here
Kris Hannah, November 20, 2010 at 1:47 PM: Can this centering work for a drop down navigation? for the tabs widget? I haven't been able to find how to center it and I could really use some help. I am not exactly sure how to change it. Do you think you could help me? My blog is alltheproofineed.blogspot.com

Thanks you have great insight on here!!
Greenlava, November 21, 2010 at 1:06 AM: @Kristen
You mean the dropdown tabs (on hover)?
The only way that I can think of is by fixing the tabs width.
Find this CSS code:
#navbar li:hover li a, #navbar li.hover li a {
background-color: #85a34f; /*LIGHT-PINK*/
border-bottom: 0px solid #fff;
color: #ffffff; }

and replace it with this:
#navbar li:hover li a, #navbar li.hover li a {
background-color: #85a34f; /*LIGHT-PINK*/
border-bottom: 0px solid #fff;
color: #ffffff;
width:100px;
margin-right:0;}

I set the width to match the top tabs width. Margin-right is set to 0 to remove the blue color band on the right.
john and anne, November 28, 2010 at 11:55 AM: thanks for sharing this :)
Greenlava, November 28, 2010 at 12:55 PM: @john and anne
My pleasure. Stick around for more blogging tips.
Mikey Smith, December 20, 2010 at 12:55 AM: Hi - my problem is similar to post 51,

I've added the code and it still seems to stack to the left in IE, and when I add the manual padding to the left, it still stacks, but relative to the number of pixels. Blog below, hope you can help.

http://efye2011.blogspot.com
Greenlava, December 20, 2010 at 10:45 PM: @Mikey Smith
I see you've fix the problem :)
Krystal, December 22, 2010 at 3:42 AM: I am trying to center my tabs and fix the widths. On one computer it looks fine, but on another, the tabs are going down instead of across. What am I doing wrong?

I added this code to fix the widths and center it. I had to add the same code twice just to get it to center, but once I added in the width stuff, it really screwed it up and I have no clue what to do.

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;
}
background: none;
}
.PageList {text-align:center !important;}
.PageList li {display:inline-block !important; float:none !important;}
.PageList li a {margin: 0px -1px 0px -1px !important; padding: .6em .3em .6em .3em !important; width: 7.45em;}

I would appreciate any help you could give me!
Krystal, December 22, 2010 at 3:59 AM: Ok. I changed the code to see if I could fix what I messed up. this is the new codes I used to modify my centered tabs. Thank you for helping me!

.tabs-inner .widget li a {
margin: 0em -1px 1em -1px;
padding: .6em .3em .6em .3em;
width: 7.45em;
}
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;
}
background: none;
}
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}
Greenlava, December 25, 2010 at 1:23 AM: @Krystal
Try replacing the code above with this:
.tabs-inner .widget li a {
margin: 0em 0px 1em 0px;
padding: .6em .2em .6em .2em;
width: 7.25em;
}
.PageList {text-align:center !important;}
.PageList li {margin:0 3px !important;}
.post {
margin: 0em 0 2em.0em;
padding-bottom: 1em;
}
Cafe Groenhout, January 3, 2011 at 10:24 PM: Thank you for helping me center my page list! :)
Claudya, January 8, 2011 at 4:38 AM: Great css tips!!!!! Ty & xo from Brazil.
Noel Boyd, January 14, 2011 at 6:00 PM: Awesome stuff! I got my page widget aligned in under a minute. Great blog & thanks for the post!!! =)
Unknown, January 20, 2011 at 5:34 AM: This worked awesome. Thanks!
TahoeDan, January 23, 2011 at 8:35 AM: I am having a problem getting this to work. I want to center my page tabs and when i put the code into the css box nothing happens. and when I wapply nothing happens
Greenlava, January 23, 2011 at 9:24 AM: @Dan Sheehan
I've tested it on your blog and it worked.
Why don't you give it one more try.
TahoeDan, January 23, 2011 at 9:30 AM: I tried it again with no luck. :(

I pasted this into the css box and applied it:

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}
Greenlava, January 23, 2011 at 9:45 AM: @Dan Sheehan
Strange...
Okay try adding it direct into your template HTML -using the original method (the one I strikethroughed).
TahoeDan, January 23, 2011 at 9:50 AM: Right on! that worked. thanks alot.

One other thing....is there a way to make each tab a box or how would i change its font? if i enlarged the font would the tab enlarge also or would i have issues with tabs overlapping?

thanks again.
Greenlava, January 23, 2011 at 9:58 AM: @Dan Sheehan
You want to read this: Template Designer: Change the style of pages tabs
Greenlava, January 23, 2011 at 10:01 AM: @Dan Sheehan
For font size, just add
.PageList li a {font-size:15px;}
replace 15px with your own.
TahoeDan, January 23, 2011 at 10:04 AM: Thanks!
O Retiro Restaurante e Adega Regional, January 25, 2011 at 7:09 AM: greenlava gostaria de centrar a guia abaixo do cabeçalho mas n sei como fazer, ja tentei mil e uma maneiras. podia me ajudar se faz favor ????
abraço

http://oretirorestaurante.blogspot.com/
Greenlava, January 25, 2011 at 3:21 PM: @O Retiro Restaurante e Adega Regional
I don't understand Portuguese, but Google Translator says you want to center the tabs.
Just go to Design > Edit HTML Template Designer > Advanced > Add CSS and add this code:
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}

It will work, I tested it on your blog.
meghan, February 1, 2011 at 3:15 AM: thanks so much! that was super easy!
Maynard Petras, MBA, February 10, 2011 at 12:08 PM: Hello...I tried the instruction many times and its not working for me..http://residencypropertysolutions.blogspot.com/
I used minima stretch template..Thanks!
Maynard Petras, MBA, February 10, 2011 at 12:11 PM: Thanks the first method worked! Super!
the whittakers, February 18, 2011 at 2:40 AM: Thank you for all of the tips! I am in Minima and would like to have a dotted line all the way across the screen under my page tabs (right now they are just floating up there & I don't know how to add border below).

Any tips would be appreciated! Thank you!
L'Adelaide, February 18, 2011 at 8:43 AM: WoW! That worked perfectly...thank you so much, you have a wonderful site and so very helpful for people like myself who know nothing about codes, computers, etc.

blessings...
Ashley, February 19, 2011 at 5:26 AM: Thank you so much!! I have been trying and trying to fix this and didn't find any advice anywhere that helped. Your post did it!! Thank you!!
Greenlava, February 19, 2011 at 8:52 PM: @Wedded Whittaker
Go to Design > Template Designer > Advanced > Add CSS and enter this code:
#crosscol-wrapper {border-bottom:1px dotted #666666;}
Press Enter key and observe the preview.
Anonymous, February 28, 2011 at 10:27 PM: Thanks VERY much for the code for centering pages. Blogger help didn't have it and you delivered. Peace.
Aisha Amjad, March 12, 2011 at 4:49 AM: thanx for this info it help me to align text.
Andrew, March 18, 2011 at 4:17 AM: This was exactly what I needed--boy was it hard to find!

http://kingcotton02.blogspot.com
Khrys, March 29, 2011 at 2:57 AM: I have been trying to get a Navagation Bar to work and have no idea what I am doing wrong: http://greenspoton.blogspot.com/

I am running Firefox and am trying to get the horizontal Navigation bar. I have placed the blogger "Pages" gadget underneath my header. I have a customized template for the blog. For some reason no matter what I do instead of a horizontal navigation bar I get a list version like it would be in a sidebar. The bar also runs into text I have on the page.

I appreciate any input, or even a better way to do this. Thank you for your time.
Greenlava, March 29, 2011 at 12:21 PM: @Khrys
You don't have styling code for the PageList gadget in your template.
I created one for you. Get it here on Facebook
Khrys, March 29, 2011 at 1:09 PM: That worked!!! Thank you so much for the help, I have been spending most of the day trying to figure out where I messed it up, I cannot thank you enough!
Anjelica, March 30, 2011 at 10:11 PM: You just rocked my day! Thank you so much for the tip!
Anjelica, March 30, 2011 at 10:35 PM: Um, Actually I have a problem now. I entered the code and everything looked fine. I checked my blog in firefox, safari, google chrome, and internet explorer. When I looked at in in IE it stacks the tabs in the center and the colored backgrounds of the tabs are stacked off to the left side. How can I fix this? Why does it do it in IE and not the other browsers?
Anjelica, March 30, 2011 at 10:58 PM: Me again. So I read some of the comments and basically tried different things until I had the same problem as comment 64. My last tab title dropped vertically. She shortened another tabs title, but I just played around with the code: .PageList ul {padding-left:360px !important;}
I kept changing the 360 until it slid my little tab's title back up where it belonged. It ended up being 183, for me personally. But anyways`, thanks for your help!
Lenasledgeblog.com, March 30, 2011 at 11:37 PM: Hi, Love your blog and I learned to center my page gadgets (author interviews, reviews, giveaways,etc), but I want them to look rounder and not so boxey or no boxes or edges at all would be great (just text) I like using the css layout advance route, it's easiest. And I want the font to be calligraffitti. Can you tell me how to do that?

my blog is lenasledge.blogspot.com

Thanks.
Greenlava, April 2, 2011 at 7:20 PM: @Lena Sledge
This tutorial explains how to customize page tabs.
Rocking Chairs for Nursery, April 24, 2011 at 9:13 AM: Another knowledge again with regards to modifying a blog site. Thanks for sharing, you're helping lots of blogger and that's a good value.
Greenlava, April 24, 2011 at 1:27 PM: @Rocking Chairs for Nursery
You're welcome.
Audrey, April 25, 2011 at 6:20 AM: Hi there!!!
Thanks for sharing this great post... unfortunatly I am STILL stuck. I tried to put the code in my CSS box but it did nothing, then I tried putting the code in the HTML box and it did not work either... Argh... I have spent more than 3 hours trying all possible ways... If you have a spare minute I would really appreciate if you had a little look...
www.sweetlittledays.com

THANK YOU!!!
Greenlava, April 25, 2011 at 2:58 PM: @Audrey
Your navigation bar is not a PageList, it's a HTML widget.
Replace the code you're using now with this:
#HTML1 {text-align:center !important;}
#HTML1 li {display:inline !important; float:none !important;}
Audrey, April 26, 2011 at 7:33 AM: YEAHHH!!! It worked!!! thank you so much for your quick reply... I am relieved!!!
Rabia Fathima, April 27, 2011 at 2:10 AM: Hi GreenLava

The styling just doesn't seem to be working on my blog (http://travellingwindmills.blogspot.com). Please have a look if possible and hope you can help me out...

Thanks!
Foo, April 27, 2011 at 4:22 PM: hey gree lava..
sorry ...
apakah kamu bisa menjelaskan kedalam bahasa indonesia ?
atau ..
apakah kamu punya blog lain yang menjelaskan dengan bahasa indonesia ??
Greenlava, April 28, 2011 at 10:14 AM: @Rabia Fathima
Look carefully at your CSS code. Find this:

/* add more styling declarations here */
}.scroller {overflow-x: hidden;}
.footer-inner {
padding-top: -70px;
#col-left {
width: 48%;
float: left;
}

there is a missing closing bracket just after padding-top: -70px;.
The correct code will be like this:

/* add more styling declarations here */
}.scroller {overflow-x: hidden;}
.footer-inner {
padding-top: -70px;}
#col-left {
width: 48%;
float: left;
}

fix that and your tabs will be centered.
Rabia Fathima, April 28, 2011 at 2:40 PM: Oh! sorry I ended up troubling you because of my sloppiness ... Thank you so much GreenLava !
Greenlava, April 29, 2011 at 9:52 AM: @call me ' Foo
You can translate this tutorial to Indonesian. Click the Indonesian flag in "Translate This Page" widget on the sidebar.
Anonymous, May 5, 2011 at 2:36 AM: its completely not working for us... http://awakepastmidnightblog.blogspot.com/

did everything you said and out links our still aligned to the left.... HELP ME PLEASE!

:-(
Anonymous, May 6, 2011 at 3:15 AM: Hi Greenlava, great blog!

This code
#PageList1 {text-align:center !important;}
#PageList1 li {display:inline-block !important; float:none !important;}
seems to be working for my Awesome template but it creates an ugly little gap among tabs, any idea on how I can remove that gap?

Also, I got your floating social media sharing button and it works too, I wonder if it's possible to have it floating at a distance/margin from the edge of the template as it would look better with Awesome?

Many thanks!

Gio
Luciano, May 6, 2011 at 3:28 AM: OK sorry I finally read the customising instructions and sorted the social button distance

Gio
Greenlava, May 7, 2011 at 5:24 PM: @apmblog
Yours is a LinkList (not PageList).
You need to replace "PageList" with "LinkList", like this:
.LinkList {text-align:center !important;}
.LinkList li {display:inline !important; float:none !important;}
Cheryl Ann, May 12, 2011 at 11:01 PM: Hi - worked perfectly, thanks so much. I was looking for a non-invasive way to modify my template and this is truly the very best way. THANKS!! www.thehappychick.com
Tim Webster, May 21, 2011 at 1:11 PM: Ok, if youre having problems with centering your tabs. Do the following...

Copy either code, linklist or pagelist and replace the ".LinkList" "PageList" with "Tabs", and wahhlahh!

Do the same with the other codes above.

Enjoy.
Unknown, May 21, 2011 at 7:35 PM: Hello, people, I need some help. I was create a few static pages, but when I enter the text and other content in any of that pages and save it, content just doesn't show. Empty page. I don't know what to do :-(
rammikin {creative}, May 29, 2011 at 8:15 PM: I am trying to align my gadget navigation bar with the Add CSS: #HTML1 {text-align:center !important;}
#HTML1 li {display:inline-block !important; float:none !important;}, but it is still stacking the pages, with the borders on the left-hand side.
Please help :(
www.rammikin.blogspot.com
square kitchen, June 3, 2011 at 12:02 AM: i am only learning html. your hint worked out perfectly at the first time. thanks
Faye Foster, June 7, 2011 at 1:08 AM: Any chance you could help me sort this out on my blog? Can't get the pages central... :(
Faye Foster, June 7, 2011 at 1:55 AM: Still having problems... probably something stupid... fayefoster.blogspot.com
Greenlava, June 7, 2011 at 1:38 PM: @Faye Foster
I see you've sorted it out, yay!
mulino di bayda, June 17, 2011 at 9:00 PM: hi! i'm finishing to create my blog but i have a little problem with the inner spacing of the pagelist: in fact it seems to large and i want to make it tighten.
is it possible?

this is my blog so i show you how it seems.

mulinobayda.blogspot.com

thank you a lot in advance. emilio
Greenlava, June 18, 2011 at 11:48 PM: @mulino di bayda
You can find the answer in Template Designer: Change the style / appearance of page tabs.
Savanna , June 19, 2011 at 12:59 AM: How do you do this with the label list?
Greenlava, June 19, 2011 at 2:51 AM: @Savanna
In your case, try this:
#Label1 .widget-content {text-align:center !important;}
Savanna , June 19, 2011 at 5:30 AM: Thank you so much GreenLava I have been trying to figure this out for like 4 days. It was killing me!
cheap essays, July 5, 2011 at 2:59 PM: Your style is so unique compared to many other people thank you for sharing the info i found the details very helpful.
Ez, July 11, 2011 at 10:33 PM: i tried using the codes but i still get the stacking prob. i did chg display:inline to display:inline-block but it's still a no-no. even used the code below. pls help. t-breakz.blogspot.com

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}
.PageList li a {display:inline-block !important;}
ez, July 11, 2011 at 10:48 PM: ok i think i got it figured out...its ie...so i gotta manually center it...thks!

p/s:i got the answer by reading each comment ;)
Jacqueline, July 22, 2011 at 11:22 PM: I've been trying to center-align my PageList for hours before googling for solution. Thank you so much, Greenlava! You're a gem! It worked like a charm. The only snag is there are breaks in the horizontal lines between each tab. What should I do to rectify that? Any help would be much appreciated. My blog's url @ http://jacqsbloggertips.blogspot.com/
Thanks again.
videokan, July 24, 2011 at 3:55 PM: hello sir..
thanks for the info..
i tried but no luck.
could you pleaseee help..?

i had replace in both ways. CSS n HTML
change to LinkList also
but still..
videokan.blogspot.com
Rattus, July 26, 2011 at 3:54 PM: thanks man i was going mad figuring out how to centralize the pages tab horizontally...
Greenlava, July 26, 2011 at 11:52 PM: @videokan
There is an error in your CSS.
Go to Design > Edit HTML and find this:

.widget h2.date-header {
text-align:center;.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}

replace it with this:

.widget h2.date-header {text-align:center;}
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}
Greenlava, July 27, 2011 at 1:24 AM: @Jacqueline
To remove the gaps, try adding this snippet:

.PageList li a {margin-right:-3px !important;}
videokan, July 27, 2011 at 2:16 PM: Ohhhhh
yesssss...!!!!
you really make my day GL..

thanks a lot..!!
finally.
thanks for the respond..!
Taylor, July 30, 2011 at 8:41 AM: i see you helping so many people out! i cant figure out what is wrong. I have tried to center my tabs in the CSS and the HTML but it's not working. any recommendations? i cant find some of the things to change in the HTML.
www.polishedanduntucked.com

anything helps! thanks so much!
Greenlava, July 31, 2011 at 6:53 PM: @Taylor
The centering doesn't work due to two things:
1. Your tabs are actually made of HTML gadget.
2. There is an unclosed curly bracket before the code you added.

Here's what to do:
1. Go to Design > Edit HTML and find this code:
.content-outer, .content-fauxcolumn-outer, .region-inner {
max-width: 1200px !important;
.LinkList {text-align:center !important;}
.LinkList li {display:inline !important; float:none !important;}

2. Replace that with this:
.content-outer, .content-fauxcolumn-outer, .region-inner {
max-width: 1200px !important;
}
#HTML2 {text-align:center !important;}
#HTML2 li {display:inline !important; float:none !important;}
Jacqueline, July 31, 2011 at 11:21 PM: Thank you so much for further help in solving my problem, Greenlava! It's perfected now by just changing the value in your code to -3.5px. You've made my day... thanks again and God bless you for your generosity!
Allyson Nielsen, August 2, 2011 at 3:56 AM: Thanks so much for your CSS codes! So far they've been the one things that work for me. :)
Tayrrana (Tay), August 11, 2011 at 1:01 AM: Hi, I've been trying to find a way to move my pages to the center. I copied and pasted the code you provided on my css and it did not work it just brings all the gadgets that are on the left side to the center. Help me please? I'm really new on this designing a blogg stuff! Thanks
Greenlava, August 11, 2011 at 4:04 PM: @Tayrrana (Ty)
Make sure you copy and paste the whole code:
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}
Manisha Kumar, September 9, 2011 at 7:58 PM: Simply awesome!

Thaaanks :)
Melanie, September 16, 2011 at 11:34 AM: HI...First off...thanks for the PageList CCS code...worked like a charm on my page labels.

However, I'm wanting to center my post labels as well, but can't get it to do it. here is my blog: mmfarlife.blogspot.com

I'm wanting to center the General, Home, Food etc labels. I used the Labels gadget to create this but can't find a CCS code to center them. Thanks.
backpack, September 16, 2011 at 7:08 PM: This is great information..
Greenlava, September 17, 2011 at 2:23 PM: @Melanie
Just add the Labels widget ID to the existing selectors, like this:
.PageList, #Label1 {text-align:center !important;}
.PageList li, #Label1 li {display:inline !important; float:none !important;}
Undeclared Identifier, September 19, 2011 at 9:10 PM: I aligned my page list according to the code you have given but when I click on any of pages there is visible a gap between the one which is selected and the next one. It doesn't look good. Can you help me with this? I would be really thankful. My blog is recurseit . blogspot . com
Melanie, September 19, 2011 at 10:09 PM: THANK YOU SO MUCH! You are a genius! I tried for hours to get it to work and just didn't know the "code word"! Truly, thank you so much!
Greenlava, September 20, 2011 at 10:27 AM: @Undeclared Identifier
I'm not sure where the gap comes from...but you can cancel it out by adding a negative RIGHT margin to the PageList li element:
.PageList li {margin-right: -8px !important;}
Undeclared Identifier, September 20, 2011 at 3:58 PM: Thank you so much it worked
Mar., September 29, 2011 at 2:29 AM: Thank you!!!!!!!!!!!!!!!!!!1
FarmVille Legends, October 1, 2011 at 3:07 PM: Cool, Gonna Try this :)
ANNA, October 8, 2011 at 2:42 PM: this works! thank you very much. :)
F, October 10, 2011 at 10:38 PM: Thanks so much for this. Worked like a charm.
Camille, October 20, 2011 at 11:28 AM: Hi, I have tried everything. Can you help? http://sixsistersstuff.blogspot.com/
Thanks, Elena
Cheryl Hoffman, October 21, 2011 at 4:45 AM: Thanks so much for posting this!! It worked. :)
Greenlava, October 21, 2011 at 8:34 PM: @Camille
Your navigation bar (below the header) is not a PageList, it's a Labels widget.
To make the code works, replace .PageList with #Label1, like this:

#Label1 li {text-align:center !important;}
#Label1 li {display:inline !important; float:none !important;}
Karen, November 23, 2011 at 8:07 AM: Thank you for your helpful tutorials! I'm a new blogger, trying to get my blog set up. And CSS just doesn't work for me! I don't know why, can you please help! Thanks!
Greenlava, November 23, 2011 at 7:12 PM: @Karen
What's your blog URL?
Karen, November 23, 2011 at 11:57 PM: it is poniesandchones.blogspot.com

please don't laugh! it looks pretty bad right now, lol
Karen, November 24, 2011 at 12:13 AM: What I am wanting to do is align my header in the center, align the tabs bar in the center and add more space between tabs. Thanks again!
Greenlava, November 24, 2011 at 12:58 PM: @Karen
Your tabs are a LinkList (not PagesList), that's why the code doesn't work.
Anyway the snippet below will center and add more gap between the tabs:
#LinkList1 {text-align:center !important;}
#LinkList1 li {display:inline !important; float:none !important;}
#LinkList1 li a {margin-right:20px;}

replace 20px with bigger value for bigger gaps.

To center the header, follow this tutorial.
mrlo.com, November 25, 2011 at 6:46 PM: Good information. Thanks.
penny, November 28, 2011 at 12:15 AM: Greenlave, Thanks for all the code info, your patience and kindness. You have taught me a lot, I love being able to change my blog the way I want it.
Pam
Kiss Kiss Kpop Reviews, December 3, 2011 at 11:07 PM: This was really useful. Thank you! I used it on my blog.
Lucia, December 20, 2011 at 3:02 AM: Thank you so much!! Perfect. :)
zooey, January 6, 2012 at 7:02 PM: I changed PageList into LinkList (because I have Linklist under the headline)and it worked!!!!!!

Thanks!!!! :)
Brittaney, January 10, 2012 at 9:30 AM: I have tried and tried and tried and just can't seem to get it work. Do you have any suggestions?

brittaneydevane.blogspot.com
Greenlava, January 10, 2012 at 2:11 PM: @Brittaney Devane
Find this line of code in your CSS, there are a couple of errors in it:
.sidebar h2 {font-family: 'Droid Sans', serif;h2.post-title {font-family: Cantarell, Sans=Serif;
}

Replace it with this:
.sidebar h2 {font-family: 'Droid Sans', serif;}
h2.post-title {font-family: Cantarell, Sans-serif;
}
Trishka, January 23, 2012 at 4:20 AM: Hi, i've tried EVERYTHING..and still doesn't work :( !
What's wrong ???:(
www.trishka-blog.com
Greenlava, January 23, 2012 at 8:53 PM: @Trishka
There's an error in your template CSS. Can you spot it?
h3.post-title {text-align: center;}
h2 {text-align: center ; font-family:"Century Ghotic" ; serif ; font-variant: small-caps ; letter-spacing: 7px ).h2{
color: #A8A8A8;
font-family: Century Gothic , sans-serif;
font-weight: normal;
font-variant: small-caps;}

Hint: It's right after "letter-spacing: 7px".
MAHEDI, February 2, 2012 at 2:48 AM: this is really good
Always Maylee, February 4, 2012 at 8:26 AM: I recently created a blog and am having some trouble centering my tabs. I used your code and it looks great in firefox, but in IE, it's all messed up. The tabs are appearing stacked vertically on top of each other. I tried fixing it after reading through your comments, but when I did, the text in the last tab is coming going into the other line. Can you help?

www.alwaysmaylee.blogspot.com
Anne, February 9, 2012 at 3:30 AM: I thought it worked because it did in my browser (firefox), but it IE it keeps stack on top of each other? Even though I tried the replacement you suggested?
Can you help??
Anne Sofie, February 13, 2012 at 4:02 PM: Hi. Have tried it all, and it still doesn't work in Explorer, they are still stacked.
Please help?
It is fine in firefox, safari, and chrome.

http://annesofie-s.blogspot.com/
Greenlava, February 13, 2012 at 7:32 PM: @Yi-chia, Anne and Anne Sofie
In your cases you need to center it manually.
Start by replacing the code above with this snippet:
.PageList ul {padding-left:300px !important;}

and then keep increasing/decreasing the (300px) value to slide the tabs to the right/left of the bar. Stop when the tabs are centered.
mazwanj, February 18, 2012 at 1:53 PM: hi.i try add to css.but it not work. maybe bcause my page in html.
i've try #161.but still not work.help please :)

«Oldest ‹Older 1 – 200 of 242 Newer› Newest»

Comments on this post are closed.

How to align Pages/PageList gadget

a. For horizontal tabs type PageList

b. For sidebar links type PageList

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

Top Blogger Widgets

Recent Posts

Categories

Archives