Template Designer: Change the style / appearance of page tabs

So you want to change the appearance of your horizontal Pages gadget tabs, but not sure where to start? Well, you came to the right place. This article will show you how to change layout, colors, fonts etc.

(If you want to style only a single tab, read this post: Styling individual page tabs on Blogger)

Some elements can be styled in Advanced menu while others require addition of custom CSS code snippets.

pages gadget default

 

Elements no.1 to no.3 can be styled by going into Template > Customize > Advanced (old interface: Design > Template Designer > Advanced) menu and selecting the corresponding submenu.

 

1. Tabs text (font, size, color etc.)

Select Tabs Text submenu to change font color or size, to bold or to italicize. You can also set the color of selected tab here.

pagelist font change

 

2. Bar background color

Select Tabs Background submenu and choose your preferred color from Background Color chart (the left chart).

tab and bar background color change

 

3. Selected tab background color

Still in Tabs Background submenu. Choose a color from Selected Color chart (the middle chart).

selected tab background color change

 

To style the following elements (no.4 to 8) you must add custom CSS code snippet to your template. Copy and paste the code and replace the values with your own. Use combination of codes to come up with your desired look.

The codes should work in most templates -Simple, Picture Window, Awesome Inc. and Watermark. They are only applicable to  Pages gadget which is positioned under the header. Please leave us a comment if you find a code that doesn’t work on your particular template.

 

4. Tab width

.tabs-inner .PageList li a {padding-left:10px; padding-right:10px;}

change tab width

Increase left and right padding values to widen the tabs.

 

5. Tab borders

.tabs-inner .PageList li a {border:1px solid grey;}

pages gadget add border

To remove existing borders, change the line width from 1px to 0px.

 

6. Tab background color

.tabs-inner .PageList li a {background:#FFB733;}

change tab background  1

 

7. Gaps between tabs

.tabs-inner .PageList li a {margin-right:10px;}

pagelist margin added

Increase the margin value to widen the gaps.

 

8. Remove the bar (not the tabs)

This code will remove the bar, but will leave the tabs intact.

.tabs-cap-top, .tabs-cap-bottom, .tabs-outer, .PageList, .PageList ul, .PageList .widget-content {border:none !important; background:none !important; -moz-box-shadow:none !important; -webkit-box-shadow:none !important; box-shadow:none !important;}
.tabs-inner .section {border:none !important;}

pagelist remove bar

 

9. Align the bar

Read How to align Pages/PageList gadget.

 

Enjoy!

176 comments to "Template Designer: Change the style / appearance of page tabs"

Anup@Hack Tutors July 22, 2010 at 10:11 AM    

Nice work Greenlava. Looking cool navigation bars. I will try this on my test blog :)

~Blabberina~ July 23, 2010 at 5:17 PM    

waa,lots of tips yaa..luckily my blog templates already got navigation bar..

OnTheRoadToSuccess July 24, 2010 at 7:02 PM    

Thanks for this piece. I've been struggling to customize my tab border, for ages now. Your codes work like MAGIC!

Greenlava July 24, 2010 at 10:23 PM    

@~Blabberina~
Thanks for dropping by :)

@OnTheRoadToSuccess
I'm glad it helps.
Subscribe to get updates sent to your email.

Anonymous,  July 25, 2010 at 5:07 AM    

these tutorials are excellent. but I have a question.

I have a centered pages tab. I want to keep the background but I don't want the background to extend all the way out to the edges of the page. I only want the pages tab's background to extend to the width of the blog itself. how can I change the width of the background to keep it from extending out past my blog?

Greenlava July 25, 2010 at 1:53 PM    

@Anonymous
Which template are you using?

Anonymous,  July 26, 2010 at 2:58 PM    

Awesome inc by Tina Chen. I glanced at the other styles for the template and all of them have tabs that extend all the way across the page, so I'm not sure if it can be changed. what do you think?

Also, completely unrelated, but that theme's search box widget isn't working for me.

Greenlava July 26, 2010 at 4:11 PM    

@Anonymous
Try this code:
.tabs-cap-top, .tabs-cap-bottom, .tabs-outer {border:none !important; background:none !important;}
.PageList {background:#ccc;}

Anonymous,  July 26, 2010 at 11:25 PM    

The code worked! Thank you so much!

One more question: This is not as important to me, but is there any way to make the corners of the (now shortened) tabs bar rounded?

Greenlava July 27, 2010 at 1:23 PM    

@Anonymous
Add this:
.PageList {-moz-border-radius:5px;}
.PageList li:first-child a {-moz-border-radius-bottomleft:5px !important;-moz-border-radius-topleft:5px}

Anonymous,  July 28, 2010 at 2:21 AM    

It worked! Thank you so much!

e-kath August 10, 2010 at 1:53 AM    

Your list of modifications is useful! So glad I found it!I have no HTML bacground. Despite that and with COBOL background from long ago, I did enjoy trial and error successes last night with changes to appearance of the tab bar in the Awesome by Chen template.

What I'm looking for today, the search of which brought me here, is how to code so that Tab Titles are stacked vs. horizontal to conserve horizontal space for more tabs.
For instance, this:
BULLETIN
BOARD
not this:
BULLETIN BOARD

Can you help? You think it's too much for a novice at this?

Thanks in any event, e-kath

Greenlava August 10, 2010 at 2:36 AM    

@e-kath
Try fixing the max width of each tab. That way when text exceeds the width it will drop to the next line, like this:
.PageList li a {max-width:80px;}

COBOL eh, I studied FORTRAN, both old skool :)

e-kath August 10, 2010 at 3:18 AM    

Thank you, Greenlava,

As so many seem to relay back to you, "It worked!" :) I added the line you suggested to the Advanced>Add CSS feature of the Template Designer. Thanks also, for your instructions on using that feature.

As an aside, as a suggestion to others, I also preceded each of my added codes in the Add CSS box, with a comment explaining the code. (In my case, the code makes minimal sense without the explanation.) Like this:
/* write your note of explanation here */
Copy the code here

Question: Can a hard return be built into the individual setup of each Tab Title, so that I can force the returns at a preferred point in each Tab? The 80px you suggested is about perfect with a couple of exceptions.

In effort to reduce the overall width space of the Tab Bar, I've also already shortened the left and right margins of each tab using your directions above. And I've experimented with font sizes towards the same goal.

e-kath August 10, 2010 at 3:20 AM    

p.s. in my day, the FORTRAN folks were the elite, the 'wizards,' in the field :) .

Greenlava August 10, 2010 at 11:27 AM    

@e-kath
1. Thanks for the suggestion. Commenting also saves you from a "what is this code for?" moment later on.
2. Hard return might work (well, it should). So it's BULLETIN
BOARD instead of BULLETIN BOARD.

p.s. the mentioning of COBOL, FORTRAN is making me nostalgic.

BenjaminJC August 23, 2010 at 2:57 PM    

Gosh, the information here is unbelievable Greenlava. I sure hope you make an income from this wonderful blog. I use the Awesome Inc. Template by Tina Chen and I cannot for the life of me figure out how to change the width of the "tabs" in the pagelist so that they are fixed and the text inside wraps if necessary. How is this possible. I know there is a way. I'm not html programmer but I've tried a bunch of different snippets and none seem to change the width of the tabs. Also, I want to be clear that I want the tabs to be all the same size and the text inside to wrap if necessary and make the tabs deeper if room is needed. Your snippet suggested way above did not seem to adjust the tab width. Your "alignment" trick did work though, thanks. Please help me with cell width o great one :) Thanks in advance!
bjc

Greenlava August 23, 2010 at 4:32 PM    

@BenjaminJC
This code should do the trick:
.PageList li a {width:115px;vertical-align:top;height:25px;}

"I sure hope you make an income..." -most tutorial seekers are ad blind, so there goes my income :)

Anonymous,  August 27, 2010 at 11:15 PM    

Hello, i have a question y have a tina chen template (black and grey color) in blogger, and i have to change the footer size because is too high for my blog. I try a lot of times for many hours but its impossible. Greetings from Argentina!!!...

Greenlava August 28, 2010 at 2:29 AM    

@Anonymous
What's your blog url?

Anonymous,  August 28, 2010 at 1:24 PM    

empleadoscallcenters.blogspot.com sorry y forget

Greenlava August 28, 2010 at 7:52 PM    

@Anonymous
Add this snippet in your template custom CSS box:
.footer-inner {
padding:30px 15px !important;
}

to reduce the footer height, simply change 30px to a smaller value.

Anonymous,  August 29, 2010 at 1:15 AM    

Greenlava you are a master!!!!!!!!!!!!!!!!!!! Thanksssssss for help me!!! The code worked!!!!! thanks so much

e-kath September 2, 2010 at 9:13 PM    

Just checking back to see what other questions might have come up here. And I see I haven't thanked you in closing for your help earlier...

Thanks sooooo much :) !

kraftenkrazy3 October 4, 2010 at 9:01 AM    

Hey, I am looking for code to customize my page tab bar. I want to insert an image of ribbon or scrapbook paper, like from photobucket, as the background of the bar instead of the digital bar look. Any ideas?

Greenlava October 4, 2010 at 9:49 AM    

@kraftenkrazy3
You can add a background image to the whole bar, not to individual tabs.
Add this:
#PageList1 {background: url(PUT DIRECT LINK TO IMAGE HERE) no-repeat !important;}
For more ideas on styling your bar/tabs, refer to Template Designer: Change the style of pages tabs

Help October 25, 2010 at 6:21 PM    

Hi, I tried working with the codes and following the instructions but nothing works. Any help would be much appreciated.

www.fairytalesretold.blogspot.com

Greenlava October 25, 2010 at 11:29 PM    

@Help
What were you trying to do?

Help October 26, 2010 at 1:59 AM    

I was trying to change the gray colour of the tabs.

Greenlava October 26, 2010 at 11:47 AM    

@Help
Oh I forgot to include !important in the snippet (no.6).
I'm updating the code now.
Thanks for bringing that up.

Jouie October 27, 2010 at 9:58 AM    

Hi. I'm blind, but a blogger! I was using Awesome inc templet by Tina chen but changed it when I was having problems on my page. But I realized that the templet isn't the cause of the trouble, I wanted to put it back but I'd like to ask a question first. I'm not sure if you can help me on this as it's more on accessibility issue I guess?

My blog site
http://www.universitech.blogspot.com/

I love putting h1 h2 etc code on my titles as our screen reader goes to them directly when we press a particular key. But on my page, from top, I'm confused because this doesn't work well. Because I can't see the screen, and still learning HTML, I can't figure out what really causing the problem. Can you have a look on my page and help me to fix anything wrong if there really is?

Thank you. My other site
http://www.jouielovesyou.multiply.com/

Greenlava October 28, 2010 at 1:45 PM    

@Jouie
This is what I'm seeing now:
Each post title (which consists of a link and title text) is enclosed in a h3 tag. Then inside that the title text is enclosed with a h1 tag.
Maybe that causes the problem.
I've viewed your blog using Fangs screen reader emulator. In screen reader output tab, of the two headings only h1 shows up. But in Headings tab both headings appear, both showing the same text (post title).

Anonymous,  October 31, 2010 at 1:03 PM    

Yes thank you sir. I think you got it! But did the template I'm using put that h3 tags there? Is it safe to remove the h3s? What would you recommend sir? I just learned that IE browser performs well when dealing with that kind of problem. So, if my blind visitors use IE, they would not notice it; but Firefox users would. Thanks for your help. Genius!!!

Simon Novak November 10, 2010 at 12:32 AM    

really helpfull, thanks

Yapo Nightroad November 15, 2010 at 10:45 PM    

THANK YOU!! I'VE BEEN TRYING TO FIX AWESOME INC.'S HORIZONTAL NAV BAR HEHE ^-----^ THNKS!! <3

Anonymous,  December 17, 2010 at 5:22 AM    

I am having the same problem as @anonymous, where the pages tab extends out to the edges of the page, instead of stopping along with the edges of the text boxes.

I tried this code:
.tabs-cap-top, .tabs-cap-bottom, .tabs-outer {border:none !important; background:none !important;}
.PageList {background:#ccc;}

but it made my pages turn white and it added a sort of "chip" at the beginning top of each tab. Is there any code I could enter that would just cut off the excess?

Greenlava December 17, 2010 at 3:15 PM    

@Anonymous
What is your blog URL?

Claudya January 5, 2011 at 2:28 AM    

Ty very much!!!!!! Awesome tut! xo

Circus Daily January 10, 2011 at 12:24 PM    

Hi...I'm just learning about the static pages and how they can be turned into a horizontal gadget for navigation...I'm trying to customize the whole thing and landed on your blog. But, I can't for the life of me find this...Tabs Text submenu, or any related submenu under the "Advanced" menu in the blogger template designer...

Can you provide more insight to it's where abouts?

Thanks..

Greenlava January 10, 2011 at 3:08 PM    

@Circus Daily
Your template is a regular Layout template, not a Designer template. That's why you didn't see the Tab submenus.
However, you can still style them by adding this snippet:
.PageList li a {CSS DECLARATIONS IN HERE}
as shown in no.4 to 7.
To style font, get the CSS properties here.

Circus Daily January 11, 2011 at 5:59 AM    

So guess what Greenlava...I think I solved it...ALMOST. First of all sorry for all the comments here, lame i know. BUT, I just changed the code you provided from PageList to LinkList and it seemed to work. YAY! It's doing what I want it to do.

Last two questions. Now that I'm up and running with the links, I still need to figure out how to add the circle (bullet) between the links, (tabs). And I'd like to increase the space under the linklist gadget and the rest of the page. I sort of did this by making the linklist line height 4em, but not sure if that's the best way of going about it.

Thanks again, I'll stop stalking you promise.

Greenlava January 11, 2011 at 10:07 AM    

@Circus Daily
You can try adding this:
.LinkList ul {list-style-type:disc; margin-bottom:10px;}

Circus Daily January 11, 2011 at 1:27 PM    

Hi there...the space worked but the discs did not...could something possibly be overriding it you think?

Greenlava January 11, 2011 at 3:42 PM    

@Circus Daily
Where did you installed the tabs? Do you mind sharing the URL? I need to see it to find out the problem.

Circus Daily January 12, 2011 at 12:43 AM    

You know, it's close...so I'll make the changes to the live version, then let you know once it's up. Thanks so much, your blog rocks...I'm an avid follower now.

Alissa

J S Kundapur February 8, 2011 at 12:45 AM    

Thanks a lot. It is so simple when you tell the trick!

Sassy PR Girl February 9, 2011 at 2:09 PM    

I am using the "Awesome, Inc" template. Under "Page elements" --> Blog Posts --> EDIT. I checked "show share buttons" but the buttons don't appear on the page. Help!

Thank you!!!

CvilleREAgent February 10, 2011 at 12:32 PM    

mmm..its not working on mine? http://www.residencypropertysolutions.blogspot.com/

Should I insert directly html instead of css? Thanks!

CvilleREAgent February 10, 2011 at 12:36 PM    

It worked again inserting directly to html (minima stretch template). Thanks!

Greenlava February 11, 2011 at 8:12 AM    

@Sassy PR Girl
Try resetting your template.
Go to Design > Edit HTML and click the "Revert widget templates to default" link under the template code window.

Sassy PR Girl February 12, 2011 at 9:16 AM    

@Greenlava, I have no idea how it worked but it did!!You're AWESOME!! But clearly you already knew that :) Many thanks!!!

Anonymous,  March 2, 2011 at 1:46 AM    

I'm just getting started, so this may be a dumb question, but how can I get my pages tab bar to be the same length as my banner? www.birthgoddessguide.com - any help would be appreciated. Love this site! :)

Greenlava March 3, 2011 at 12:17 AM    

@Anonymous
I see you've fixed the length, by yourself. Nice.

Tony Timmins March 18, 2011 at 3:34 AM    

Hi,same question as post 52 please www.ancestralwormhole.blogspot.com
Only been blogging 4 weeks but used this site a number of times. Brilliant just what a newbie needs, thanks.

Tony Timmins March 18, 2011 at 7:18 AM    

Found the answer in post 8 - sorry to bother you, I should have read the comments more carefully. Super blog, thanks Tony

Liz April 15, 2011 at 3:37 AM    

I have been searching for 2 days for these answers and all I've gotten is html code stuff which means nothing to me. So thanks a million!!! I feel much better about my blog pages now.

Simone @ Doberman's by the Sea April 19, 2011 at 1:22 AM    

None of the codes work for me-not in CSS or Html.

Greenlava April 21, 2011 at 11:05 AM    

@Simone @ Doberman's by the Sea
Just leave the code in your template and I'll check why it would not work.
Post here once you've added the code.

Cori Stanley May 4, 2011 at 10:47 AM    

Thank you for all your help with my blog. I have been able to do everything, except this. I do not have options 1-3 in my Template Designer. I was unable to add borders, etc. or any other designing. I added the CSS snippet, but nothing happened.

My site is www.hcg-losingit.com. I want to do something with my page tabs such as box or border them. I am happy with the colors.

Cori Stanley May 5, 2011 at 10:19 AM    

I went back and read the other posts and found answers to most of the questions I previously asked. But, the tip above to make the tab corners round (#10) did not work at all. Also, I am still having trouble narrowing the space between the tabs. I have played with the snippets, but without success. What am I doing wrong? (www.hcg-losingit.com).

Thanks.

Greenlava May 8, 2011 at 9:17 PM    

@Cori Stanley
Try replace your snippet with this:

.PageList li {
padding:0 !important;
margin:5px !important;
}
.PageList li a {
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
padding-left:15px;
padding-right:15px;
border:2px solid green;
background:beige;
}

and if you want to center the tabs, add this:

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

Cori Stanley May 12, 2011 at 8:50 AM    

Thanks. It is much better now.

Is there any way to make the corners rounded? They still look square.

You are an awesome guy. Is there anything I can do to help your business? Post a link or something?

Greenlava May 12, 2011 at 2:13 PM    

@Cori Stanley
Use bigger value for rounder corners. Try 5px.
Well, you can grab my button (on the right) and put it on your blog. Thanks

ehppl May 20, 2011 at 10:23 PM    

Hello!
I am using a third-party template for my blog.So , the editing of the colors is not that an easy task for me. Although I am very much been able to customize the template as per my own requirements, my final hurdle remain: to change one of the repeating colors from red-to green(this color appears at the tab-list highlight, the hyperlinks etc.). Can you tell me where to look for in the html edit section, to make my changes?
Thank You!

Greenlava May 22, 2011 at 9:42 AM    

@ehppl
Look for the words "hover" in your template CSS and then for each declaration replace the color code for "color" (for text color) or "background" (for background color) property whichever applicable.
For example, this is the CSS rule for the hover state of the navigation tabs:

.menu-primary li a:hover,.menu-primary li a:active,.menu-primary li a:focus,.menu-primary li:hover > a,.menu-primary li.current-cat > a,.menu-primary li.current_page_item > a,.menu-primary li.current-menu-item > a{color:#FFF;background:url(http://3.bp.blogspot.com/_0oF63rRT4XI/Tch-wTFPZ0I/AAAAAAAAAHo/_scdljeDddw/s000/menu-primary-bg.png) left -140px repeat-x;outline:0;text-shadow:0 1px 0 #770004}

the red background is actually an image. To turn the background green, simply replace "background:....;" with "background: green;"

Nikki June 10, 2011 at 10:29 PM    

thanks a lot! this tutorial is about the only decent one I could find on the blogger tabs! You were a great help! I do have one question left... do you know how I can give the tabs bar a background image? Could you mail me? gohomemydear@gmail.com

thank you!
Enjoy your weekend :)
x

Nikki June 10, 2011 at 10:41 PM    

oh, I tried to add #PageList1 {background: url(PUT DIRECT LINK TO IMAGE HERE) no-repeat !important;} ... but that didn't work.... Hope you could help me :) x

Greenlava June 11, 2011 at 1:09 AM    

@Nikki
The code should've worked. What's the direct link (URL) to the image?

Persnickety Hall June 27, 2011 at 9:26 AM    

Just wanted to say thank you! I've looked up and down trying to figure out how to change the Page tab's width. :)

Shakti Dove July 21, 2011 at 3:23 PM    

So apparently I dont have a designer template, just a regular one, but is there still a way to add a background bar?

Shakti Dove July 22, 2011 at 3:39 AM    

Never mind the previous question I posted. In a stroke of pure genius I figured it out :D

Youssef Elmasri July 25, 2011 at 5:27 AM    

Hi Greenlava,

When I apply the code you posted in comment 8 it makes the background of my tabs disappear, leaving only the names of the tabs. But I would like to make the tabs bar width the same as the width of my posts, not extending across the whole page. Any tips?

Greenlava July 27, 2011 at 1:48 AM    

@Youssef Elmasri
Your tabs are made of a LinkList widget, instead of a PageList.
To make the snippet work on a LinkList, replace the word "PageList" with "LinkList".

J. Brian McKillop August 1, 2011 at 11:30 AM    

Got my Page List Gadget setup, now trying to change the colors in #1, #2, and #3 above. But I do not see the Tabs Text nor Tabs Background in Design > Template Designer > Advanced menu. I am using the Rounders template.

How can I make the changes?

Greenlava August 3, 2011 at 1:20 AM    

@J. Brian McKillop
You are using a normal Layout template, that's why you don't see the menus.
Here are the codes for #1 1nd 2:
.crosscol .PageList {background: PUT TAB BACKGROUND COLOR CODE HERE;}
.crosscol .PageList li a {color: PUT TAB TEXT COLOR CODE HERE;}

As for #3, you can't set it since the tab links are non-page links.

Anonymous,  August 3, 2011 at 2:29 AM    

Hi Greenlava,
Please bear with you as I am a newbie and am learning as I'm going. I just created a blog and I want my blog title horizontal and the picture centered. I have been to other sites and tried what they suggested and it didn't work and it has left me more confused and frustrated. Help http://no2ndguessing.blogspot.com/ Thanks, Donna

J. Brian McKillop August 3, 2011 at 8:52 AM    

Works great - thanks!

How do I make the Labels bold?

Таня August 4, 2011 at 10:54 PM    

My Menu Bar is longer than my blog. How would I resize the whole menu bar? So it will fit the size of other elements?
How I can cut off the right and the left unused parts of the bar?
Sorry for language, may be you can have a look and see what is the problem? http://hopegracefields.ru/

Lindsie August 6, 2011 at 6:41 AM    

I am trying to make my page tabs thinner (minimize height). I just feel like they are too thick. How can I do this? My blog: http://wed4less.blogspot.com/

Greenlava August 7, 2011 at 7:58 PM    

@Anonymous
Try this:
http://www.bloggersentral.com/2009/07/aligning-header-image-and-texts.html

@J. Brian McKillop
Add font-weight: bold; to .crosscol .PageList li a

@Таня
Sorry I can't find the bar.

Greenlava August 7, 2011 at 8:25 PM    

@Lindsie
The "height" is due to top and bottom margin set to all widgets by Blogger:
.widget {margin: 30px 0;}

You can cancel out the PageList's margins by adding margin: 30px 0; to .PageList.

J. Brian McKillop August 9, 2011 at 12:03 AM    

Thanks, you are a great help!

Dundee Stars Fanzine
September 15, 2011 at 11:43 PM    

Hi, thanks for this wonderful page - just one quick question. I want my tabs bar to be the exact same width as my banner, I've tried some of the codes you've already suggested and they've worked great but as you can see, the bar extends past my banner on the right and takes up the same width as my right sidebar. Is there anyway I can get my blue tabs bar to just be the same width as my banner?

http://bringbackmagnussjostrom.blogspot.com/

Thanks!

Greenlava September 17, 2011 at 2:50 PM    

@Dundee Stars Fanzine
Try adding this snippet:
.tabs-inner .section {margin: 0 20px 0 15px;}
.tabs-inner .widget li a {padding: 0.6em 1.2em;}

Anonymous,  September 17, 2011 at 11:37 PM    

Thanks for posting this up!

Hotels chennai September 19, 2011 at 2:52 PM    

nice post thanks

arsyparsy September 28, 2011 at 12:26 PM    

Hi, I've been trying to get the tabs on my page... I even tried to revert to my old template and then use the new template again! But I don't know how to put the tabs on my page.... Would you know the problem? Your help would be very useful!

Greenlava September 29, 2011 at 10:57 AM    

@arsyparsy
Just go to Design > Page Elements, click the Add A Gadget under the header, and select Pages gadget.

arsyparsy September 29, 2011 at 7:24 PM    

Oh wowwww I figured it out... Aw thank you anyway, disregard my last comment! Thank you so much for the help :)

Lacoya S. October 29, 2011 at 9:35 AM    

Hello,

I have a white/black fade as the background of my page tabs bar. I do not know why this is nor do I know how to change it. I want my tab bar background to be completely black, no fade. How can I do this?

http://imanaturalblackgirl.blogspot.com

Thanks in advance!

Lacoya S. October 29, 2011 at 10:00 AM    

I figured it out....I had to go into the HTML and change the gradient png from 'light' to 'black'.

Koen Bakkers November 28, 2011 at 7:15 PM    

Hi, great topic.

I've tried some coding here to shorten my pagebar on the right side of the blog. I would like it to be stopped at the end of the photo. For now, I haven't found the right css.

wittelijnen.com

Do you have an idea?

Greenlava November 29, 2011 at 5:46 PM    

@Koen Bakkers
Try this snippet:
.tabs-inner .PageList ul {width:758px;}

Koen Bakkers November 29, 2011 at 7:34 PM    

Sweet Greenlava. It works like a charm!

The Curly Fit Chic December 1, 2011 at 2:18 AM    

Okay, I was able to add the Tabs. But, now I have two different problems.

1. As the Tabs go to the right I have two double lines. I know that is the border. However, I don't know how to remove the margin space (I think that is the problem)?

2. Once I added the tabs, either my Header is not aligned correctly or my Tabs aren't aligned correctly. I used the following from your site for aligning the Tabs:

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

Then when I went to Edit HTML I already had the following which looks correct to me:

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;

Any help you can provide would be great. My blog is: thecurlyfitchic.com

Thanks so much!

Greenlava December 1, 2011 at 8:04 PM    

@The Curly Fit Chic
1.Your header image is bigger than the outer wrapper, so no matter how you tweak it, it won't align. You need to reduce it's width to 900px.
2. Add this CSS snippet to fix everything else:
#header-wrapper {width: 100%;}
.crosscol .LinkList ul {padding:0;}
.crosscol .LinkList li a {margin:0 -2px 0;}

Cindy @ Creating at Home January 10, 2012 at 4:58 AM    

Hello!

I am trying to make the top corners of my pagelist navigation buttons rounded. I tried adding the code that you suggested:


.PageList {-moz-border-radius:5px;}
.PageList li:first-child a {-moz-border-radius-bottomleft:5px !important;-moz-border-radius-topleft:5px}

However, my buttons still aren't rounded. My blog is: http://www.creatingathome.com

Help, please? Thanks so much.

Cindy

Greenlava January 11, 2012 at 9:10 PM    

@Cindy @ Creating at Home
That's the code to round the bar, not the individual buttons.

I see you've added this code in your template:
#PageList1 ul li{
background: url(http://1.bp.blogspot.com/-l7JkRiwLZos/Tue53XpEbBI/AAAAAAAAA9c/0-ALLA2Fuds/s1600/9DCECBC0E2E39DCECBC0E2E39DCECB_38.png);
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-goog-ms-border-radius: 25px;
border-radius: 25px;
}

to round the individual buttons, target the "a" tag instead of "li" tag, like this:
#PageList1 ul li a {
background: url(http://1.bp.blogspot.com/-l7JkRiwLZos/Tue53XpEbBI/AAAAAAAAA9c/0-ALLA2Fuds/s1600/9DCECBC0E2E39DCECBC0E2E39DCECB_38.png);
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-goog-ms-border-radius: 25px;
border-radius: 25px;
}

Anonymous,  February 6, 2012 at 8:08 AM    

Thanks...great help! Have been trying to figure this stuff out for a couple days

Eliana February 8, 2012 at 11:15 AM    

Ok, I got it :)

.tabs-inner .widget li a {
padding:0 !important;
margin:10px !important;
}
.PageList {text-align:center !important;}
.PageList li {display:inline-block !important; float:none !important;}

This works almost perfectly, only that as I increase the margin, the tabs go more and more to the bottom of the tab bar (not vertically centered)

Greenlava February 9, 2012 at 5:59 PM    

@Eliana
margin:10px; adds margin to all 4 sides. Perhaps you want to try applying margin only to left and right sides, like so:
margin:0 10px 0 10px;

Anonymous,  February 22, 2012 at 1:14 AM    

to round the edges of my page tabs I just add

.PageList {-moz-border-radius:5px;}
.PageList li:first-child a {-moz-border-radius-bottomleft:5px !important;-moz-border-radius-topleft:5px}

into the Add CSS section?

frank@nycg February 25, 2012 at 4:57 AM    

I have a garden blog: nycgarden.blogspot.com. The only free info I appreciate as much as garden info on the internet is html info! Thanks for the page tab info. Worked! But here is my question. I want to create empty space between the bottom of my page tabs and the posts and sidebars. Maybe 10+ pixels. Any thoughts on how to do that? Thanks!

Inside the Birdcage February 25, 2012 at 9:48 AM    

Hi, I'm trying to add a background image behind the entire tabs(pages) bar on my page (www.insidethebirdcage.com). Any tricks to do this?

Thanks!

Greenlava February 27, 2012 at 2:00 AM    

@Inside the Birdcage
Use this snippet:
.tabs-inner .PageList {background: url(PUT IMAGE URL HERE);}

@frank@nycg
Add bottom margin to the bar, like so:
.tabs-inner .PageList {margin-bottom: 10px;}

frank@nycg March 21, 2012 at 6:14 AM    

Perfect! Thanks -works like a charm.

STC Technologies April 12, 2012 at 7:48 AM    

I am trying to make the top corners of my pagelist navigation buttons rounded. I tried adding the code that you suggested:


.PageList {-moz-border-radius:5px;}
.PageList li:first-child a {-moz-border-radius-bottomleft:5px !important;-moz-border-radius-topleft:5px}

However, my buttons still aren't rounded. My blog is: http://www.creatingathome.com

Help, please? Thanks so much.

Donna April 15, 2012 at 9:10 PM    

Hi there,
I have tried several times to add the CSS for option 8 - To remove the bar, not the tabs. But the grey border of my pages tabs remains and extends beyond my header image which looks horrid. Not sure what I am doing wrong. Please help! My blog is www.hunguponretro.blogspot.com
Great site - many thanks!

Greenlava April 16, 2012 at 6:30 PM    

@Donna
It's option 5 for tabs borders.
Try this if you want to remove both tabs and bar borders:
.tabs-inner .PageList li a, .tabs-inner .PageList ul {border:0;}

Greenlava April 16, 2012 at 7:03 PM    

@STC Technologies
The suggested code is for the bar, not tabs (and it works only on Mozilla browser).
For tabs use this (and it should work on most browsers):
.PageList li a {-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}

Donna April 16, 2012 at 9:20 PM    

Thank you so much for your response Greenlava! I have added the code, and have lost some of the tabs border, but still have border lines on the left and right, and top of the pages tab (extended out from my header image). Have I missed something? Many thanks again for your time. You rock!

Greenlava April 17, 2012 at 8:57 AM    

@Donna
Adding !important to the value should fix that:
.tabs-inner .PageList li a, .tabs-inner .PageList ul {border:0 !important;}

Donna April 17, 2012 at 12:15 PM    

It worked! Thank you so much Greenlava. Your help is very much appreciated.

J Elliott April 23, 2012 at 2:24 AM    

Ahh.. I am trying to remove the page bar background completely and I have no idea where to actually place the code that you have given us above. Help appreciated! ;)

Greenlava April 23, 2012 at 3:00 AM    

@J Elliott
From the Dashboard go to Template > Customize > Advanced > Add CSS and paste the code in the text box provided.
To lose the borders completely, use Donna's code right above.

FILISCHI May 4, 2012 at 11:18 PM    

Bravo!

StatsProfessor May 21, 2012 at 11:16 AM    

Is there a way to add widgets inside the tabs, kind of like the search bar but social sharing widgets. Thanks

Thiet ke web May 24, 2012 at 10:09 AM    

thanks you bloggersentral
post good

Lordy Rozard May 29, 2012 at 12:54 PM    

I want to make it gradient look like your background tabs. But I can find it nowhere... Can you help me?

Greenlava May 30, 2012 at 12:22 AM    

@Lordy Rozard
Create your gradient here:
http://www.grsites.com/generate/group/4000/

After that upload the gradient using Blogger editor. Then switch to HTML mode and copy the image URL. Finally put the URL inside a CSS rule:
#PageList1 {background: url(PUT THE IMAGE URL HERE)}

antiquities June 14, 2012 at 5:48 AM    

Hi, your codes for the tabs are great, thank you. But I cannot figure out why my left tab, "DIY", is missing the line on the left side of the tab...
Also, I can't seem to make my tabs line up perfectly with my picture.
If anyone can help I'd greatly appreciate it!!!

http://antiquitiesblog.blogspot.com/

GreenLava June 16, 2012 at 9:05 PM    

@antiquities
Find and remove this code in your CSS:

.tabs-inner .widget li:first-child a {
border-left: none;
}

Kat June 20, 2012 at 8:16 PM    

hey scratch that SB..found your link to remove tab border..
big thanks again..
will def keep checking back!

Dconfrst June 20, 2012 at 10:09 PM    

also used this tool!
Thumbs up!

Krishna Patel July 3, 2012 at 7:15 AM    

OMG Thank you soooooo much. I have been luking for this everywhere. thankss :DD P.S. Absolutely love your site.

Cynthia July 3, 2012 at 11:51 PM    

All this (first) code did was to put a white border around my photos on the blog. I want to remove it now.

Lorilea11 July 4, 2012 at 7:45 AM    

Thank you so so much! this helped me a lot for my new blog!

md k ahmed July 22, 2012 at 7:12 PM    

thanks for sharing valuable info

Anonymous,  July 29, 2012 at 12:01 AM    

Please, am new to blog design, how do i replace the values of this code ".tabs-inner .PageList li a {padding-left:10px; padding-right:10px;}" with mine? my url is 9janetbiz.blogspot.com i actually want to increase size of the text margins on the menu tab in length and breath so as to accommodate the long text in my drop down menu. As you can see some of the text in my dropdown menu is partially vissible. Also, the left side of the menu tab has too much space. Can the menus be evenly distributed on the tab to avoid the space on the right side of the menu tab?

VIC.

Shannon July 29, 2012 at 10:26 PM    

Your blog has been so helpful! Thank you!

I have a quick questions... I centered my tabs and added a "dotted' border to them. My "home" button on the far left is missing the border. Can this be fixed? I saw that others had similar questions but the solutions you suggested for them didn't seem to work for me.

http://sewingbarefoot.blogspot.com/

Thanks in advance for your help!

Greenlava August 5, 2012 at 1:42 PM    

@Shannon
Try adding !important to the border property value, like this:
.tabs-inner .PageList li a {
border: 1px dotted grey !important;
}

Shannon,  August 6, 2012 at 10:52 PM    

That did the trick! Thanks so much :)

Greenlava August 8, 2012 at 6:54 AM    

@Anonymous
I'm sorry but this tutorial applies only to Pages (PageList) gagdget. Yours is actually a third party HTML/Javascript gadget.

Carrie Kimmel September 6, 2012 at 11:56 PM    

Thank you, huge help!!!

Suraj Gurau September 13, 2012 at 11:49 AM    

thanx man...

ZonaIde October 8, 2012 at 3:38 AM    

Thanks... :)

Anonymous,  October 10, 2012 at 7:59 AM    

Thank you!!! This is great info.

eman October 15, 2012 at 9:02 AM    

Greenlava please, how do I change the background color of tabs on hover in a link list positioned in the sidebar?

Many thanks for your superb work!

Greenlava October 16, 2012 at 12:30 AM    

@eman
Try this:
.sidebar .LinkList li a:hover {background:PUT COLOR CODE HERE;}

eman October 17, 2012 at 10:34 AM    

Yes it works but it changes the background of the link. I wanted to change the hover color of the tab the link is on top of. I have three different link lists in my sidebar.

I tried several variations to your code with no success, any idea?

Many thanks!

Greenlava October 17, 2012 at 7:20 PM    

@eman
I have to view your blog to find out what's the problem.

eman October 18, 2012 at 8:07 PM    

My blog is still under construction but I have tried your code in four different Blogger templates, two of which with no customisation at all. I also checked it on Firefox, Chrome and Safari. In every case I got the background of the link highlighted, not the tab.

Greenlava October 21, 2012 at 5:38 PM    

"I got the background of the link highlighted, not the tab"

This is the construct of a tab:
<li><a>Text</a></li>

The link is the a (anchor) element and what you consider as tab is the li (list) element.

What you need to do is to make the link fill up the tab.
You can achieve this by applying zero padding to li element, like this:
.sidebar .LinkList li {padding:0;}

add then add padding to a element to give it more body, for example:
.sidebar .LinkList li a {padding:10px;}

Central High School Class of '63 October 22, 2012 at 10:28 AM    

Great stuff. Thank you so mich.

Anonymous,  October 24, 2012 at 1:54 AM    

hi, I actually have the same problem as Shannon (a few posts up) but mine is the regular boxes tabs - home button missing an edge. I tried adding !important as per your advice for Shannon but it doesn't seem to work out..Code I added behind - .tabs-inner .PageList li a {border:2px solid grey; !important;
}

Would love your help!

TIA!

Vermaelen05 October 25, 2012 at 12:08 PM    

I want the "blog title" to be different from the name which appears on the BROWSER tab, like here - http://aviewofmyarse.blogspot.co.uk/ can you please help? Whatever I type in the blog title, it appears in the browser tab currently.

VHDA October 27, 2012 at 5:07 AM    

The default for the Simple template's tab is to not have the gradient on the tab correlating to the page you are viewing. i want the gradient to be applied to the tab. What is the code to add to do this?

Greenlava October 29, 2012 at 2:07 AM    

@VHDA
Go to Template > Customize > Advanced > Tabs Background > Selected Color and choose "Transparent" from the dropdown menu.

Greenlava October 29, 2012 at 2:40 AM    

@Vermaelen05
The following post should help:
SEO (Search engine optimization) friendly Blogger page title

Anonymous,  October 29, 2012 at 11:04 PM    

Hi,

I have got the same problem as #130 Shannon up there but mine is the usual rectangle boxes (edge of home is missing as well)...hope you can help! Love all the little tips here! Keep it up!

TIA!

samaine18 November 4, 2012 at 9:15 PM    

How do I put a background to the page tabs? Like a ribbon behind a text. Thanks!

Greenlava November 5, 2012 at 4:37 PM    

@samaine18
If you want to put the same background for all tabs use this:
.tabs-inner .PageList li a {background:url(PUT IMAGE URL HERE) no-repeat;}

If you want a different background for each tab, refer to Styling individual page tabs on Blogger

Anonymous,  November 6, 2012 at 11:42 PM    

hi,

really hope you can help! my page tabs home button is missing an edge and I do not know how to solve it!

Hope you can help! thank you!

Greenlava November 7, 2012 at 4:35 PM    

@Anonymous
Please refer to reply #122.

Michael J. Schiemer November 25, 2012 at 11:24 AM    

You are a genius man! You've helped me a great deal over the past couple years!!!

SwirliciousBeauty December 3, 2012 at 7:34 PM    

Hi, I am having trouble with my tabs/pages.

I do not want the whole bar to be in colour. I just want the tabs to be coloured, if that makes sense? So for example, my tabs are "home" "twitter" "intagram". I want those to be in a light purple but the rest of the bar to be gone.

Can you help? I hope the way I have explained it makes sense

Eeltsje Hettinga December 22, 2012 at 7:22 AM    

Hi, I am having a lot difficulties to delete to underlined headers and links on my blogspot.

I removed - stupidly - two lines in the html of the template. It had something to do with the text-decoration.

I would have been easier if I had made a backup of the of the original template-html. I did not!

How do I get rid of those underlines? What do I have to change in the html of the template?

I would be grateful to anyone who can help me solve the problem.

Tx. upfront.

==
blogspot: http://eeltsjehettinga.blogspot.nl/

Greenlava December 25, 2012 at 10:21 PM    

@Eeltsje Hettinga
Go to Template > Edit HTML > Proceed and find this:
a:link {
text-decoration: none;
color: #858585;
}

replace:
text-decoration: none;

with:
text-decoration: none !important;

That will remove underline from all links.

Eeltsje Hettinga December 27, 2012 at 11:10 PM    

Thank you so much for your answer. It was the right solution. Sincerely.

Marci Judkins January 4, 2013 at 12:52 PM    

Worked great! Thanks so much for the tutorial! It was very easy to follow!!!

the scarecrow January 29, 2013 at 4:45 PM    

I've been looking for ages for a way to remove the separator lines, and your advice was both easy to follow and SUPER helpful. Thank you so much!

Angraj February 6, 2013 at 11:45 AM    

Thanks Greenlava for the codes!

Karen February 12, 2013 at 2:25 AM    

Hi

I'm using the template ethereal (designer - Jason Morrow) and the page tabs have rounded corners. Is it possible to change it so that the corners aren't rounded? I'm new to HTML, would appreciate if you could help me. Thanks!

Greenlava February 19, 2013 at 1:00 PM    

@Karen
Use this CSS rules:
.tabs-inner .PageList li a {
-moz-border-radius: 0;
-webkit-border-radius: 0;
-goog-ms-border-radius: 0;
border-radius: 0;
}

Brandy@Afterthoughts March 5, 2013 at 5:11 AM    

Thank you so much for this; it was really helpful! Except for one thing: I still have lines in between each tab (though not a border around it). Can you please help me figure out how to remove these lines? My site address is www.bakersfieldconference.org thank you!

Greenlava March 6, 2013 at 12:27 AM    

@Brandy@Afterthoughts
Replace this:
.tabs-inner .PageList li a {margin-right:25px;}
with this:
.tabs-inner .PageList li a {margin-right:25px; border-right: none;}

Brandy Vencel March 6, 2013 at 1:57 AM    

Thank you so much! It worked and was easy to do. I really appreciate it. :)

Michelle March 8, 2013 at 1:17 AM    

Can I change the shape of my tab to a circle? Thanks for all the info! Michelle

Katie March 22, 2013 at 9:07 AM    

Very helpful, THANK YOU!

Anonymous,  April 12, 2013 at 6:47 AM    

thank you so much!! this was so helpful!

Niki Chapman June 3, 2013 at 7:31 AM    

I just want to say a HUGE thank you - this has been so helpful to me!

Jing Chiam June 13, 2013 at 4:44 PM    

Thank you for your help! My pages widget was bugging me but with your help, it's looking much better!

Geez Bet July 12, 2013 at 8:42 PM    
This comment has been removed by the author.
Greenlava July 18, 2013 at 5:54 PM    

@Geez Bet
By default, Pages tabs won't hightlight pages other than homepage and static page.
Why not replace the PageList gadget with a LinkList, then follow this tutorial: Highlighting current page tab in navigation bar (using a LinkList gadget)

Towab Muhammad Yusuf March 12, 2014 at 6:48 PM    

yeah it's much better .

Nicole Buccio July 29, 2014 at 2:42 PM    

I can't thank you enough for all your help! Your instructions have been spot on and helped me (new to coding) fix some of the frustrations I had with my blog design.

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.

Click to go to top Click to comment