After a short break,i was redesigning one of my blog which was hosted on blogspot.com.So when i selected a particular template i found out that some how the tab bar color is now having a white gradient across it.And i tried every options in the customize template section to remove it.None of them worked.
Then i started google searching i found many pages which contained my keywords in google's different discuss forums.But when i click on those search results it goes to the home page of that forum.Its like google never knew what i was searching for.And none of the search forum's search bars works properly.Lets accept it,the search giant want to increase the traffic rate only to it's forum's home pages(for some unknown reason!!) and redirects you to it when you click on the search result link thinking you found the solution for your problem.
After 20 minutes trusting in google's search ability i couldn't find any solution.So i randomly clicked through pages from number 15 and found the solution.Sorry for the long introduction.Let's get into the business.
I know many of you are searching for the problem and are not able to find the solution.So here it is in the simplest(is there a word like that??!!) way ..I have added some screenshots so it can be more easier for you to understand.
Below is a sample how my tab bar looked like with the gradient.
Now lets see how to solve this problem.First go to your blogger dash board and click on the 'template' button.Then click on Customize button.(Check the picture below)
You will reach the customization page.Click on the 'Advanced' section then scroll down next column and select the last option 'Add CSS'.On the right side you will find a blank white box(Check the picture below)
 |
| Click on the pic to see it in large size |
Then type the below script there.
<style type="text/css">
body {}
.tabs-inner .widget ul {background:#000000;}
</style>
body {}
.tabs-inner .widget ul {background:#000000;}
</style>
Now '#000000' is the html color code of black.I wanted black so i typed this.Now you might ask what if you need a different color? Wel,then you have to replace '#000000' with the color code of your choice.Now how can you find out the color code of your choice of color?.
Well there is a place where you can find html color codes.Click on that link and you will land on a page wchich contains a huge list.Or else if you have software like adobe photoshop,open it then click on the color selection .You will get a window just like the below picture.
If you notice you can see that the selected color is black and you can see the color code is shown at the bottom(Rounded in red).Select whatever color you want,note the color code replace #000000 with that code click apply to blog on top right .Then you are done.
Here is my fully black tab bar after i edited.
Please let me know if this post solved your problem.
Update : Check out the comment section too..
Hi there. Thank you for this post, but I'm afraid I can't make that CSS work for me. Yes, it works find in your demo, but there is still a gradient present. You just don't see it because you've made the background behind the tabs black, and so the tabs themselves can't be made any darker.
ReplyDeleteAt least that's how it seems to me.
I found your page whilst trying to get a completely different colour tab to the tab background itself, but still can't find the right html to over-ride the gradient command.
My dummy test blog is at http://derbyperegrinessandbox.blogspot.co.uk
I'm trying to get the Blog's Outer Background AND the Tab's Background Colour an identical bluish/green (#134f5c), whilst having the non-selected tab completely different, say mustard (#f1c232).
I don't know enough html to build the code from scratch, but can assess the template html just about well enough to see that there is no variable name command to directly control the tab colour. The offending bit if code in my blogger template which is causing the gracient seems to be :
Variable name="tab.background" description="Tab Background" type="background"
default="transparent url(//www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left" value="transparent url(//www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left"/>
I'll keep on plugging away and let you know if I can find a solution. It must be simple if only I knew something enough html!
Hey Nick,if you check out my current tab bar color,you can see that it's kind of blue now.And i'm not an html master.I posted this idea in my blog,only because i couldn't find any pages about changing or removing this gradient color in the internet.I thought my post might be a help to people who are searching for it.Then after reading some codes and some other pages about designing blogs,i figured this out.
DeleteIt works just fine for me.Even in the blue color there is a slight black shadow at the bottom.That's fine for me.But before applying that CSS code my main problem was the white color spreading to whatever tab color i was selecting.I was able to solve that problem through that CSS code.
Try to google about html codes.You might find a page where you can request for codes.
I guess how the gradient looks will depend on which blogger template you start with.
ReplyDeleteI was using Josh Peterson's standard Picture Window template with the picture removed to get a simple layout with rounded tabs linked to static pages at the top. I wanted the colour behind all the tabs to be the same as the Outer Background to my blog. I wanted to choose the actual tab colour myself, and not to have it a gradient darkening from my Tab Background colour.
These tabs also had a gradient in the code. I couldn't get your method to work on my template, but a bit if trial end error solved the problem.
Rather than go to "Customise" as instructed above, go to "Edit HTML" and "Proceed" to avoid going back to the Template Designer.
Use Find to go look for "tab.background"
You'll need to change the "type" from "background" to "color" and change the default and value urls to a hex colour of your choice.
Original html:
Variable name="tab.background" description="Tab Background" type="background"
default="transparent url(//www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left" value="transparent url(//www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left"/>
New html (giving me a mustard-coloured tab):
Variable name="tab.background" description="Tab Background" type="color"
default="#f1c232" value="#f1c232"/>
Note: to get this post to display here I have removed the chevron from in front of the word Variable in both examples. You will need to put it back in, of course.
See the results under test here: http://derbyperegrinessandbox.blogspot.co.uk
This comment has been removed by the author.
DeleteThank you for that info Nick,that will be more helpful to future visitors.And hey i loved your blog design.And an interesting topic too.Once again thank you for the updated info.
ReplyDelete:)
Keep visiting
Your post did exactly what you wanted. It gave me a lead and it got results with my second posting. So I hope my solution is of use to others, too.
ReplyDeleteThanks for your comment on the redesign of my blog. The real one, with live nest webcameras (which I did back in 2006) is here. http://derbyperegrines.blogspot.co.uk
I have tried both Nick's as well as the author's suggestions. Both works but the gradient still appear at both sides of my blog. You can see it here: pinkydiamonds.com
ReplyDeleteMay I ask if there's a way to remove the excess 'gradient tab'?
I don't understand!!!...Both works but the gradient still appears???
DeleteWorked perfectly! Thank you :)
ReplyDeleteAlways welcome :)
DeleteThanks a lot :) I was searching for this and finally got it :) great work :)
ReplyDelete