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.
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.
2. Bar background color
Select Tabs Background submenu and choose your preferred color from Background Color chart (the left chart).
3. Selected tab background color
Still in Tabs Background submenu. Choose a color from Selected Color chart (the middle chart).
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;}
Increase left and right padding values to widen the tabs.
5. Tab borders
.tabs-inner .PageList li a {border:1px solid grey;}
To remove existing borders, change the line width from 1px to 0px.
6. Tab background color
.tabs-inner .PageList li a {background:#FFB733;}
7. Gaps between tabs
.tabs-inner .PageList li a {margin-right:10px;}
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;}
9. Align the bar
Read How to align Pages/PageList gadget.
Enjoy!
174 comments to "Template Designer: Change the style / appearance of page tabs"
Nice work Greenlava. Looking cool navigation bars. I will try this on my test blog :)
waa,lots of tips yaa..luckily my blog templates already got navigation bar..
Thanks for this piece. I've been struggling to customize my tab border, for ages now. Your codes work like MAGIC!
@~Blabberina~
Thanks for dropping by :)
@OnTheRoadToSuccess
I'm glad it helps.
Subscribe to get updates sent to your email.
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?
@Anonymous
Which template are you using?
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.
@Anonymous
Try this code:
.tabs-cap-top, .tabs-cap-bottom, .tabs-outer {border:none !important; background:none !important;}
.PageList {background:#ccc;}
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?
@Anonymous
Add this:
.PageList {-moz-border-radius:5px;}
.PageList li:first-child a {-moz-border-radius-bottomleft:5px !important;-moz-border-radius-topleft:5px}
It worked! Thank you so much!
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
@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 :)
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.
p.s. in my day, the FORTRAN folks were the elite, the 'wizards,' in the field :) .
@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.
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
@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 :)
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!!!...
@Anonymous
What's your blog url?
empleadoscallcenters.blogspot.com sorry y forget
@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.
Greenlava you are a master!!!!!!!!!!!!!!!!!!! Thanksssssss for help me!!! The code worked!!!!! thanks so much
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 :) !
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?
@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
Hi, I tried working with the codes and following the instructions but nothing works. Any help would be much appreciated.
www.fairytalesretold.blogspot.com
@Help
What were you trying to do?
I was trying to change the gray colour of the tabs.
@Help
Oh I forgot to include !important in the snippet (no.6).
I'm updating the code now.
Thanks for bringing that up.
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/
@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).
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!!!
really helpfull, thanks
THANK YOU!! I'VE BEEN TRYING TO FIX AWESOME INC.'S HORIZONTAL NAV BAR HEHE ^-----^ THNKS!! <3
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?
@Anonymous
What is your blog URL?
Ty very much!!!!!! Awesome tut! xo
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..
@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.
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.
@Circus Daily
You can try adding this:
.LinkList ul {list-style-type:disc; margin-bottom:10px;}
Hi there...the space worked but the discs did not...could something possibly be overriding it you think?
@Circus Daily
Where did you installed the tabs? Do you mind sharing the URL? I need to see it to find out the problem.
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
Thanks a lot. It is so simple when you tell the trick!
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!!!
mmm..its not working on mine? http://www.residencypropertysolutions.blogspot.com/
Should I insert directly html instead of css? Thanks!
It worked again inserting directly to html (minima stretch template). Thanks!
@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.
@Greenlava, I have no idea how it worked but it did!!You're AWESOME!! But clearly you already knew that :) Many thanks!!!
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! :)
@Anonymous
I see you've fixed the length, by yourself. Nice.
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.
Found the answer in post 8 - sorry to bother you, I should have read the comments more carefully. Super blog, thanks Tony
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.
None of the codes work for me-not in CSS or Html.
@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.
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.
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.
@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;}
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?
@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
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!
@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;"
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
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
@Nikki
The code should've worked. What's the direct link (URL) to the image?
Just wanted to say thank you! I've looked up and down trying to figure out how to change the Page tab's width. :)
So apparently I dont have a designer template, just a regular one, but is there still a way to add a background bar?
Never mind the previous question I posted. In a stroke of pure genius I figured it out :D
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?
@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".
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?
@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.
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
Works great - thanks!
How do I make the Labels bold?
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/
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/
@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.
@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.
Thanks, you are a great help!
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!
@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;}
Thanks for posting this up!
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!
@arsyparsy
Just go to Design > Page Elements, click the Add A Gadget under the header, and select Pages gadget.
Oh wowwww I figured it out... Aw thank you anyway, disregard my last comment! Thank you so much for the help :)
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!
I figured it out....I had to go into the HTML and change the gradient png from 'light' to 'black'.
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?
@Koen Bakkers
Try this snippet:
.tabs-inner .PageList ul {width:758px;}
Sweet Greenlava. It works like a charm!
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!
@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;}
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
@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;
}
Thanks...great help! Have been trying to figure this stuff out for a couple days
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)
@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;
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?
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!
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!
@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;}
Perfect! Thanks -works like a charm.
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.
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!
@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;}
@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;}
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!
@Donna
Adding !important to the value should fix that:
.tabs-inner .PageList li a, .tabs-inner .PageList ul {border:0 !important;}
It worked! Thank you so much Greenlava. Your help is very much appreciated.
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! ;)
@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.
Is there a way to add widgets inside the tabs, kind of like the search bar but social sharing widgets. Thanks
thanks you bloggersentral
post good
I want to make it gradient look like your background tabs. But I can find it nowhere... Can you help me?
@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)}
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/
@antiquities
Find and remove this code in your CSS:
.tabs-inner .widget li:first-child a {
border-left: none;
}
hey scratch that SB..found your link to remove tab border..
big thanks again..
will def keep checking back!
also used this tool!
Thumbs up!
OMG Thank you soooooo much. I have been luking for this everywhere. thankss :DD P.S. Absolutely love your site.
All this (first) code did was to put a white border around my photos on the blog. I want to remove it now.
Thank you so so much! this helped me a lot for my new blog!
thanks for sharing valuable info
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.
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!
@Shannon
Try adding !important to the border property value, like this:
.tabs-inner .PageList li a {
border: 1px dotted grey !important;
}
That did the trick! Thanks so much :)
@Anonymous
I'm sorry but this tutorial applies only to Pages (PageList) gagdget. Yours is actually a third party HTML/Javascript gadget.
Thank you, huge help!!!
thanx man...
Thanks... :)
Thank you!!! This is great info.
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!
@eman
Try this:
.sidebar .LinkList li a:hover {background:PUT COLOR CODE HERE;}
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!
@eman
I have to view your blog to find out what's the problem.
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.
"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;}
Great stuff. Thank you so mich.
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!
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.
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?
@VHDA
Go to Template > Customize > Advanced > Tabs Background > Selected Color and choose "Transparent" from the dropdown menu.
@Vermaelen05
The following post should help:
SEO (Search engine optimization) friendly Blogger page title
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!
How do I put a background to the page tabs? Like a ribbon behind a text. Thanks!
@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
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!
@Anonymous
Please refer to reply #122.
You are a genius man! You've helped me a great deal over the past couple years!!!
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
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/
@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.
Thank you so much for your answer. It was the right solution. Sincerely.
Worked great! Thanks so much for the tutorial! It was very easy to follow!!!
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!
Thanks Greenlava for the codes!
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!
@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;
}
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!
@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;}
Thank you so much! It worked and was easy to do. I really appreciate it. :)
Can I change the shape of my tab to a circle? Thanks for all the info! Michelle
Very helpful, THANK YOU!
thank you so much!! this was so helpful!
I just want to say a HUGE thank you - this has been so helpful to me!
Thank you for your help! My pages widget was bugging me but with your help, it's looking much better!
@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)
yeah it's much better .
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.