How to remove borders from page tabs gagdet on blogger

Todays post is a quick and easy one, how to remove borders from page tabs in blogger. You can usually do this in the template designer but sometimes that has restrictions so I’ve also written about how to remove borders for tabs in HTML. You may need to have a look around yourself for similar code as it varies from template to template.

How to remove the border around page tabs – Template Designer

If your template allows, you can change the separator colour, line colour or tabs border colour in the Template Designer (Template > Customise > Advanced) under the Tabs Background or Accents sections. If you can’t alter the borders there, follow the tutorial below to manually remove.

Remove the border around page tabs – Manually

Go to Template > Edit HTML and between <b:skin> and </b:skin> you’ll find a section called Tabs, this controls the style of your page tabs or navigation menu so you will need to remove the borders from here. The following selectors are some of the areas you’ll want to have a look at, these typically have border properties but of course, it will depend on you code.


.tabs-inner .widget li a { ... }

.tabs-inner .widget ul { ... }

.tabs-inner .section:first-child ul { ... }

.tabs-inner .section:first-child { ... }

.tabs-inner .widget li a { ... }

remove the border from page tabs navigation blogger

Look for the properties border, border-top, border-bottom, border-right, and border-left. Either remove it, or change the value to 0 or for each. This will remove the border.

.selector { border-top: 0; }

Alternatively, you could change it to match your background or make it transparent, making it a little easier to add back if you need to.

.selector { border-bottom: 1px solid #ffffff;} 
.selector { border-bottom: 1px solid transparent;} 
Buy me a coffeeBuy me a coffee

45 Comments

  1. Hi, I’ve tried this method to remove the border from my page tabs and it just hasn’t worked at all and I’m not sure why. Is there any other ways I could try as I really need to remove the borders ASAP!

    Thanks!

    Kathleen xxx

  2. HI i trued this but i think i’m getting lost. Where should I put the value 0px or none between this code:

    /* Tabs
    ———————————————– */
    .tabs-inner .section:first-child {
    border-top: $(header.bottom.border.size) solid $(tabs.border.color);
    }

    .tabs-inner .section:first-child ul {
    margin-top: none(header.border.size);
    border-top: none(header.border.size) solid $(tabs.border.color);
    border-left: none(header.border.horizontalsize) solid $(tabs.border.color);
    border-right: none(header.border.horizontalsize) solid $(tabs.border.color);
    }

    .tabs-inner .widget ul {
    background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
    _background-image: none;
    border-bottom: $(tabs.border.width) solid $(tabs.border.color);

    margin-top: $(tabs.margin.top);
    margin-left: -$(tabs.margin.side);
    margin-right: -$(tabs.margin.side);
    }

    Please help me ASAP .

    1. You need to remove the border from all of the areas I’ve mentioned above – .tabs-inner .widget li a, .tabs-inner .widget ul , .tabs-inner .section:first-child ul, .tabs-inner .section:first-child & .tabs-inner .widget li a. For example


      .tabs-inner .section:first-child ul {
      margin-top: none(header.border.size);
      border-top: 0px solid #fff;
      border-left: 0px solid #fff;
      border-right: 0px solid #fff;
      }

  3. Hi, Ellie!

    Thank you sooo much for this nice tutorial! I need this so much and I cannot find anywhere but suddenly when I looked for blogger design related tutorial, Google brought me to you!

    Anyway, I am really not good in HTML code, actually it works. But why the pages turned to like this: my blog.

    Thanks before for the help, Ellie. Good day! (:

  4. Hi Ellie! Thank you so much for posting this. I had been wanting to remove the right and left borders for a really long time and hadn’t been able to find a tutorial on it. That was VERY helpful! I am about to change the logo of my blog and wanted to edit the layout before I use the new logo.

    Thanks again!

    xx

  5. Hi love,

    I have 5 drop down menu tabs across the top of my blog. I’ve been trying to change the background hover color of each subtab from gray to white. Could you help me?

    Thank you in advance xx

  6. Hi there! I tried following your tutorial but I seem to be lost as well. My code does not match up with your example up above. Could you tell me how to remove the borders to my tabs? Also, I’ve been trying to figure out how to remove the background color and can’t seem to figure that one out either. Could you help??

    1. Remove all instances of box-shadow code from .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover to remove the shadow which looks like a border. To change the background colour of the tabs search for .tabs-inner .widget li a and change background to #ffffff (white) or whatever colour you want it. Keep in mind that your tabs font is white, so removing the background means you’ll have to change the font colour to see the text.

  7. With the help of your tutorial I was able to remove the outer borders of the page tabs. Now I don’t know how to get rid of the borders in between the different categories (home / about /). Could you help me out here?

    Thank you for all the great tips! Your blog is a huge help for me 🙂

    Anna

  8. Hi!

    I removed my borders but now I want the top and bottom one back I wondered if you knew how to do this? Ive tried reversing your technique but it didn’t work.

    Thanks !

    Susie

    1. Hello, find .tabs-inner .widget ul and add border-top: 1px solid #000000; border-bottom: 1px solid #000000; back in between the brackets.

  9. Thank you so much for all your help!

    One final thing, I have done that but the border lines have breaks in it (if you take a look at my blog) and i was wondering if you knew how to change it into one straight line?

    Thanks again xx

    1. Hello, you added the borders to .tabs-inner .widget li a and not .tabs-inner .widget ul, this is why they’re only appearing above/below the link (li a) and not the entire navigation.

  10. Hi Ellie 🙂 Would you know how to change the gray color of the tabs on my tabs on my blog?
    http://sothisisbeauty.blogspot.com/
    I went to the advanced customized section and changed all the tabs colors to white (except text) but that just makes them look gray :/ I tried to change some stuff in html, but wasn’t sure what to change. I tried a few things but it didn’t work. Can you please help me? Thanks for your time and thanks if you can help!

    1. Hello, go to Template > Edit HTML and find .tabs-inner .widget li a. Between the brackets you can edit the value for background. It will probably look like background: transparent url(...) repeat scroll top left; so you can replace that with background: #HEXVALUE and change HEXVALUE for the colour. You can find hex values here but white is #FFFFFF.

  11. Hello! Thank you so much for this post i got rid of the top and bottom lines but cant seem to get rid of the lines in between 🙁

  12. Hello! I’ve tried a bunch of times to remove the border from my tabs and nothing worked. I even followed some of the instructions from the comments. Please help. This is what my html looks like and I do not know where to place 0px or none. Your help is much appreciated! Thank you so much!

    1. Find .tabs-inner .widget li a { border-$startSide: $(tabs.border.width) solid $(content.background.color); border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);} and change to .tabs-inner .widget li a { border-$startSide: 0px solid $(content.background.color); border-$endSide: 0px solid $(tabs.border.color);} or .tabs-inner .widget li a { border-left: 0px solid $(content.background.color); border-right: 0px solid $(tabs.border.color);}

  13. Hello 🙂

    I have a fixed navigation bar and I would like to put a line below the page tabs.
    What code do I enter?

    Thank you so much, you are so so helpful!

  14. Hi I am not able to make changes as mentioned as my theme is different. Please look into my site I want to just remove the tabs color of dark blue and keep the background of light blue.

    1. Hello. The tutorial above it for borders, you’re looking for background. You should be able to remove it from Template > Customise > Tabs BG > Selected BG. If not, you can manually remove the BG for .tabs-inner .widget li a in your CSS.

  15. Hi, I have been looking for this html so long! Finally I found it here, thanks a lot!
    But 1 question, after I tried to change colour for the tabs, I couldn’t see my blog when I try to custom it in the “Blogger Template Designer” mode, as well as the “Live on Blog”, I don’t know whats wrong !! :< Do u have any idea?

    Thx a lot!!!

    x

    1. Hi Elaine, after I tried to recover my them and then follow your instruction again, the problem from above is solved.

      Thanks so much for all the tips, it made my blog improved a lot!!! And every time I changed the css, I feel so happy, I learnt a lot from you! Thanks a lot!

      I did pretty much every thing I want by follow ur instruction, but the tab bar just can’t not spread evenly on the top, its looks not very decent at the moment. I have been trying to figure out a fw days, couldn’t figure it out… So I hope you can help me pls :(((

      http://testblog-alheaology.blogspot.com.es

      1. Hey Alice, how do you want it to look? The padding values are set very low, these are one of the things reponsible for the spacing.

Sorry, comments are closed!