Fx4* .css tweaks

Discussion of general topics about Mozilla Firefox
Locked
User avatar
ajnauron
Posts: 460
Joined: April 10th, 2010, 4:39 pm

Re: Fx4 .css tweaks

Post by ajnauron »

makondo wrote:I have a bunch of styles for tabs, you should be able to pick something useful out of them(link in my sig). Aren't they transparent by default on vista/win 7?

This might do it but there diff. states of tabs now, like pinned, on-top, etc. which if you need it, must be added to the :not line:

.tabbrowser-tabs tab:not([selected="true"])
{ background: transparent !important; }

Image


Thanks, this makes inactive tabs fully transparent. If I wanted to adjust the level of transparency, how would I change the tag? How can I adjust the transparency of the new tab button?
Intel Core i3-2310M | NVIDIA GeForce GT 540M | 16GB G.SKILL DDR3 1333MHz PC3-10666 | Western Digital 750GB 5400RPM | Windows 7 SP1 x64
User avatar
T0morrow
Posts: 302
Joined: April 9th, 2010, 9:16 am

Re: Fx4 .css tweaks

Post by T0morrow »

I'll post a link to other topic here: viewtopic.php?f=23&t=2087945
There are several css tweaks there for link target display (when you hover over a link a small popup is shown in bottom of the screen where statusbar used to be).
makondo
Posts: 1961
Joined: October 18th, 2007, 5:26 pm
Location: Rocky Mountains

Re: Fx4 .css tweaks

Post by makondo »

ajnauron,
you should use a color. For instance, rgba(0,0,0, .5) is black and half transparent (not really but good enough for this matter). So, the code will look like this:

.tabbrowser-tabs tab:not([selected="true"])
{ background: rgba(0,0,0, .5) !important; }

Or you can use white rgba(255,255,255 .5) < the last number (.5) is the 'transparency' of the color. Change it to .2 and see the difference. Change it to .9 and see the difference.

You really need to do a search for .css and learn from there if you're going to modify your browser. And here's a good start.
User avatar
ajnauron
Posts: 460
Joined: April 10th, 2010, 4:39 pm

Re: Fx4 .css tweaks

Post by ajnauron »

makondo wrote:ajnauron,
you should use a color. For instance, rgba(0,0,0, .5) is black and half transparent (not really but good enough for this matter). So, the code will look like this:

.tabbrowser-tabs tab:not([selected="true"])
{ background: rgba(0,0,0, .5) !important; }

Or you can use white rgba(255,255,255 .5) < the last number (.5) is the 'transparency' of the color. Change it to .2 and see the difference. Change it to .9 and see the difference.

You really need to do a search for .css and learn from there if you're going to modify your browser. And here's a good start.


I really appreciate the help, makondo. I'll definitely learn CSS so I know my way around. When I was looking at the CSS you gave me, I tried toggling the transparency around, and I noticed the changes. However, I also noticed that when I used the code above, I got double borders around my tabs:

Image

However, something like

Code: Select all

.tabbrowser-tab:not([selected="true"]),
.tabs-newtab-button
   {background-image: -moz-linear-gradient(rgba(190, 190, 190, .5), rgba(110, 110, 110, .5) 50%),
                           -moz-linear-gradient(RGB(212, 208, 200), RGB(212, 208, 200)) !important; }

.tabbrowser-tab:not([selected="true"]):hover,
.tabs-newtab-button:hover
   {background-image: -moz-linear-gradient(rgba(240, 240, 240, .6), rgba(160, 160, 160, .6) 50%),
                           -moz-linear-gradient(RGB(212, 208, 200), RGB(212, 208, 200)) !important; }


...would fix it:

Image

The above example is more complicated, I copied it from here(I chose Silver, Black, No, Semi-Transparent). I understand the explanation you gave for the first example with the transparent tabs, but I don't get why the example above has so many sets of specified colors, or which decimal/percentage value in that case would change the transparency(What does the 50% represent?), or why the set above fixes the double border problem. Could you be so kind as to translate what the above example is trying to do?
Intel Core i3-2310M | NVIDIA GeForce GT 540M | 16GB G.SKILL DDR3 1333MHz PC3-10666 | Western Digital 750GB 5400RPM | Windows 7 SP1 x64
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: Fx4 .css tweaks

Post by patrickjdempsey »

Those make the gradient pattern. I think the percentage is how far up the tab the gradient begins. The transparency is made by the fourth number in the colors.

RGB = red, green, blue.
RGBA = red, green, blue, alpha transparency.

The color numbers are a value from 1 - 256 while the alpha transparency is a number from 0 - 1 where 0 is completely transparent and 1 is completely opaque.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
makondo
Posts: 1961
Joined: October 18th, 2007, 5:26 pm
Location: Rocky Mountains

Re: Fx4 .css tweaks

Post by makondo »

Something like that. You can trust Tss, he knows what he's doing.
OTOH, i'm not sure why you get such weirdness, you can clearly see on my shot how it looks here. Maybe you have some other style for tabs?
User avatar
sdrocking
Posts: 778
Joined: October 2nd, 2010, 7:03 am
Location: Madison, WI
Contact:

Re: Fx4 .css tweaks

Post by sdrocking »

Can someone modify http://userstyles.org/styles/39555 so that it has its effect just for the find bar? TIA
User avatar
Tss
Posts: 94
Joined: March 6th, 2010, 4:23 pm
Location: Brasil

Re: Fx4 .css tweaks

Post by Tss »

The problem is that Firefox 4 tabs are weird. The real shape of them is what you see in the pic with double borders - the inner border is actually an image, like a fake border. When you use background(-color): rgba(255,255,255 .5), the color bleeds through the fake borders and it looks like that. I think makondo doesn't have this problem because he uses it fully transparent.
When you use background-image: something, you can position the image so that it starts and ends within the fake borders. Like you said, it's complicated.
Now what you want is something like

Code: Select all

{background-image: -moz-linear-gradient(rgba(190, 190, 190, .5), rgba(110, 110, 110, .5) 50%) !important; }
, which is a gradient that starts with a light gray -rgba(190, 190, 190, .5)- and ends with a darker grey -rgba(110, 110, 110, .5)- in the middle of the tab -50%- and then goes with that last color till the end of the tab. That second gradient --moz-linear-gradient(RGB(212, 208, 200), RGB(212, 208, 200))- is how I change colors in the userstyle; it just paints a second color under the first gradient. You won't need it.
Have fun!
User avatar
T0morrow
Posts: 302
Joined: April 9th, 2010, 9:16 am

Re: Fx4 .css tweaks

Post by T0morrow »

It seems there are still some possible changes to come to addons manager: https://bugzilla.mozilla.org/show_bug.cgi?id=623250
Also if you want addons manager to be more tweakable with css then feel free to add your suggestions: https://bugzilla.mozilla.org/show_bug.cgi?id=569519

If you don't want to register then forward your suggestions(regarding link #2) to me and i'll post them there 8-)
mpurna77
Posts: 141
Joined: August 9th, 2009, 3:57 pm

Re: Fx4 .css tweaks

Post by mpurna77 »

mistertwol wrote:Image


Can anyone please tell me css for making FF tabs look like Chrome tabs. Thanks.
Last edited by mpurna77 on February 7th, 2011, 9:56 am, edited 1 time in total.
User avatar
ajnauron
Posts: 460
Joined: April 10th, 2010, 4:39 pm

Re: Fx4 .css tweaks

Post by ajnauron »

Thanks guys, I really appreciate the help, I would be completely stuck without you guys. I finally settled on this for inactive tabs:

Image

Code: Select all

.tabbrowser-tabs tab:not([selected="true"])
{background-image: white !important; opacity:0.6;}

.tabbrowser-tab:not([selected="true"]),
.tabs-newtab-button
   {background-image: white !important; opacity:0.6;}

.tabbrowser-tab:not([selected="true"]):hover,
.tabs-newtab-button:hover
   {background-image: white !important; opacity:0.6;}


The first part is transparency for inactive tabs, the second is for the new tab button transparency, and the last is for a transparency change on mouseover.
makondo
Posts: 1961
Joined: October 18th, 2007, 5:26 pm
Location: Rocky Mountains

Re: Fx4 .css tweaks

Post by makondo »

mpurna77,
search userstyles.org, there more than enough of styles that do this.

ajnauron,
it's up to you, of course, but what happens when you use opacity is that the whole thing is opaque. That includes font and images (favicons, in this case). When you use color transparency, only bg is transparent. Just a thing to remember.
Last edited by makondo on February 7th, 2011, 9:59 am, edited 1 time in total.
makondo
Posts: 1961
Joined: October 18th, 2007, 5:26 pm
Location: Rocky Mountains

Re: Fx4 .css tweaks

Post by makondo »

Tss wrote:... makondo doesn't have this problem because he uses it fully transparent...


:) a smart observation, Tss... WTF was i thinking? Image
mpurna77
Posts: 141
Joined: August 9th, 2009, 3:57 pm

Re: Fx4 .css tweaks

Post by mpurna77 »

makondo wrote:mpurna77,
search userstyles.org, there more than enough of styles that do this.

ajnauron,
it's up to you, of course, but what happens when you use opacity is that the whole thing is opaque. That includes font and images (favicons, in this case). When you use color transparency, only bg is transparent. Just a thing to remember.


makondo,

I did search didn't find one. Can you give me one which does that. Thank you.
zegames
Posts: 161
Joined: March 11th, 2009, 1:09 pm

Re: Fx4 .css tweaks

Post by zegames »

Try this one http://userstyles.org/styles/35404 maybe need some tweaks.
Locked