Share your custom Firefox/Minefield 4 stylish scripts

[Arkaic]

I don't do (too) much program customization so how do I basically incorporate these scripts. I'm pretty sure it's modification of a js script (.js) in the program directory but what and where?

Also using the x64 build of Minefield nightly

Edit: a guide or something to read would be great, basically firefox n00b here. :(

[+Heartripper Subscriber¹]

I don't do (too) much program customization so how do I basically incorporate these scripts. I'm pretty sure it's modification of a js script (.js) in the program directory but what and where?

Also using the x64 build of Minefield nightly

Edit: a guide or something to read would be great, basically firefox n00b here. :(

it's not js, its css... you can learn more here https://developer.mozilla.org/en/CSS

to incorporate the styles, you have to ways

- the 'official', which consist in editing the file 'userchrome.css' you can find in the directory of your profile (it's in appdata).

- by using the addon styilish, you can find a compatible version here http://forum.userstyles.org/discussion/24590/stylish-for-firefox-1.1b5. Once installed, you can find the stylish icon in the customization panel. Then, right-click on the icon, click "new style" and paste the codes you find here. then give a name and save. You can also find styles ready to install: http://userstyles.org

[Drifus]

I don't do (too) much program customization so how do I basically incorporate these scripts. I'm pretty sure it's modification of a js script (.js) in the program directory but what and where?

Also using the x64 build of Minefield nightly

Edit: a guide or something to read would be great, basically firefox n00b here. :(

Hi Leroy,

These codes are nothing more than CSS (Cascading Style Sheets) level 3 and are interpreted by firefox ontop or beside the theme.

Basically, you have two paths to choose:

1 - Place the code directly into userChrome.css.

Read about it here: Customizing Mozilla

2 - Use the addon "Stylish" - But I'm not sure if it works on Firefox x64

See here: Stylish

[CGar]

What weird bar?

Screenshot?

Tab Mix Plus 0.3.8.5pre.110110a no issues here.

Ok, I'm home and I tried it again on a brand new profile, same results (and no, it's not the addon bar)

Here are the steps I do to reproduce it:

1) Create a new profile

2) Set the home page to www.neowin.net

3) Install the latest TMP build, restart.

4) MAXIMIZE the browser, then close it (the extension restart does not always trigger it). The browser must re-open in maximized mode.

5) Open the browser, there should be a weird grey bar at the bottom (which is a section of about:blank, my Stylish skin in my main profile changes it)

Note: I think it is a Vista/7 problem only, I do not experience this on my XP machine at work

It may take one or two times for me to get it to happen, but it usually happens all the time

[vajlent]

Does anybody know the default gradient code for the tabs, like active, inactive, hover and pressed state?

I'm trying to make the "home button as tab" but it doesn't look like it should...

Thanx ;)

[foxxyn8]

Does anybody know the default gradient code for the tabs, like active, inactive, hover and pressed state?

I'm trying to make the "home button as tab" but it doesn't look like it should...

Thanx ;)

from chrome://browser/skin/browser.css:

.tabbrowser-tab,
.tabs-newtab-button {
  -moz-appearance: none;
  background: -moz-linear-gradient(transparent, hsla(0,0%,36%,.15) 1px, hsla(0,0%,0%,.3) 60%), -moz-linear-gradient(-moz-dialog, -moz-dialog);
  background-position: -5px -2px;
  background-repeat: no-repeat;
  background-size: 200%;
  margin: 0;
  padding: 0;
  -moz-border-image: url(tabbrowser/tab.png) 4 5 3 6 / 4px 5px 3px 6px repeat stretch;
  border-radius: 10px 8px 0 0;
}

.tabbrowser-tab:hover,
.tabs-newtab-button:hover {
  background-image: -moz-linear-gradient(transparent, hsla(0,0%,70%,.15) 1px, hsla(0,0%,20%,.3) 60%), -moz-linear-gradient(-moz-dialog, -moz-dialog);
}


.tabbrowser-tab[selected="true"] {
  background-image: -moz-linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.5) 30%),
                    -moz-linear-gradient(-moz-dialog, -moz-dialog);
}

.tabbrowser-tab:-moz-lwtheme {
  color: inherit;
}

.tabbrowser-tab[selected="true"]:-moz-lwtheme {
  background-image: -moz-linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.5) 30%);
}

.tabbrowser-tab:-moz-lwtheme-brighttext:not([selected="true"]),
.tabs-newtab-button:-moz-lwtheme-brighttext {
  background-image: -moz-linear-gradient(hsla(0,0%,40%,.6), hsla(0,0%,30%,.6) 50%);
}

.tabbrowser-tab:-moz-lwtheme-brighttext:not([selected="true"]):hover,
.tabs-newtab-button:-moz-lwtheme-brighttext:hover {
  background-image: -moz-linear-gradient(hsla(0,0%,60%,.6), hsla(0,0%,45%,.6) 50%);
}

.tabbrowser-tab:-moz-lwtheme-darktext:not([selected="true"]),
.tabs-newtab-button:-moz-lwtheme-darktext {
  background-image: -moz-linear-gradient(hsla(0,0%,60%,.5), hsla(0,0%,45%,.5) 50%);
}

.tabbrowser-tab:-moz-lwtheme-darktext:not([selected="true"]):hover,
.tabs-newtab-button:-moz-lwtheme-darktext:hover {
  background-image: -moz-linear-gradient(hsla(0,0%,80%,.5), hsla(0,0%,60%,.5) 50%);
}

[Drifus]

Ok, I'm home and I tried it again on a brand new profile, same results (and no, it's not the addon bar)

Here are the steps I do to reproduce it:

1) Create a new profile

2) Set the home page to www.neowin.net

3) Install the latest TMP build, restart.

4) MAXIMIZE the browser, then close it (the extension restart does not always trigger it). The browser must re-open in maximized mode.

5) Open the browser, there should be a weird grey bar at the bottom (which is a section of about:blank, my Stylish skin in my main profile changes it)

Note: I think it is a Vista/7 problem only, I do not experience this on my XP machine at work

It may take one or two times for me to get it to happen, but it usually happens all the time

I tried to reproduce this issue, but its ok here.

Windows 7 x64

Firefox x86 - Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b10pre) Gecko/20110119 Firefox/4.0b10pre

Windows Aero theme customized

[vajlent]

from chrome://browser/skin/browser.css:

Thanx, but that doesn't work either...:(

Here is the code i use atm:

#TabsToolbar > #home-button {
  -moz-appearance: none !important;
  background: -moz-linear-gradient(hsla(214,15%,80%,.8), hsla(214,15%,65%,.8) 50%) !important;
  background-position: -5px -2px !important;
  background-repeat: no-repeat !important;
  background-size: 200% !important;
  margin: 0 !important;
  padding: 0 1px !important;
  -moz-border-image: url("chrome://browser/skin/tabbrowser/tab.png") 4 5 3 6 / 4px 5px 3px 6px !important;
  -moz-border-radius: 10px 8px 0 0 !important;
  margin-left: 3px !important;
}

#TabsToolbar > #home-button:hover {
  background-image: -moz-linear-gradient(hsla(214,15%,90%,.8), hsla(214,15%,75%,.8) 50%) !important;
background-size: 200% !important;
}

#TabsToolbar > #home-button:-moz-lwtheme-brighttext {
  background-image: -moz-linear-gradient(left, transparent, transparent 1px, rgba(40%,40%,40%,.6) 1px, rgba(40%,40%,40%,.6)) !important;
}

#TabsToolbar > #home-button:-moz-lwtheme-brighttext:hover {
  background-image: -moz-linear-gradient(left, transparent, transparent 1px, rgba(60%,60%,60%,.6) 1px, rgba(60%,60%,60%,.6)) !important;
}

#TabsToolbar > #home-button:-moz-lwtheme-darktext {
  background-image: -moz-linear-gradient(left, transparent, transparent 1px, rgba(60%,60%,60%,.5) 1px, rgba(60%,60%,60%,.5)) !important;
}

#TabsToolbar > #home-button:-moz-lwtheme-darktext:hover {
  background-image: -moz-linear-gradient(left, transparent, transparent 1px, rgba(80%,80%,80%,.5) 1px, rgba(80%,80%,80%,.5)) !important;
}

@media all and (-moz-touch-enabled) {
  #TabsToolbar > #home-button {
	min-width: 1cm !important;
  }
}

#TabsToolbar > #home-button {
  width: 31px !important;
}

#TabsToolbar > #home-button > .toolbarbutton-icon {
  margin-top: -1px !important;
  margin-bottom: -1px !important;
}

[CGar]

I tried to reproduce this issue, but its ok here.

Windows 7 x64

Firefox x86 - Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b10pre) Gecko/20110119 Firefox/4.0b10pre

Windows Aero theme customized

:(

I don't know what else to do then, it happens to both my Win 7 PC and my Win Vista laptop... I'll try creating a fresh profile on my laptop to see if it does it there too

[r0bc]

Just to let you know - with today's nightly all graphical artifacts I described some time ago completely disappeared. I have not been able to understand which bugfix removed them, yesterday they were still there. :yes:

[Karl-Johan]

Please help. I would like bookmark labels and folder labels to be white instead of black in this style: http://userstyles.org/styles/36221

[foxxyn8]

Please help. I would like bookmark labels and folder labels to be white instead of black in this style: http://userstyles.org/styles/36221

just change the last line from

#bookmarksPanel *,#history-panel *{color:grey!important}

to

#bookmarksPanel *,#history-panel *{color:white !important}

[Deo Domuique]

Can someone tell me how I make the tabs and new tab button to have border-radius 2px on top?

[SoapyHamHocks Member]

Can someone tell me how I make the tabs and new tab button to have border-radius 2px on top?

You don't. They are border-images, so you must remake them.

[Deo Domuique]

That's why I'm trying half hour while I got the specific part of your script to normal theme and getting weird results :p

Trying to figure out what I can do on dark windows backgrounds...

One solution is to give white titles-color on non selected tabs but with Dwrite on looking extremely ugly.

[foxxyn8]

Trying to figure out what I can do on dark windows backgrounds...

One solution is to give white titles-color on non selected tabs but with Dwrite on looking extremely ugly.

How about a text-shadow?

[Deo Domuique]

On transparent tabs? Is it easy to write a line about what you think?

[foxxyn8]

On transparent tabs? Is it easy to write a line about what you think?

.tabbrowser-tab { 
background-image: none !important;
color: #000 !important;
text-shadow: #fff 0px 0px 10px, #fff 1px 1px 10px, #fff 1px 1px 3px !important; 
}

[Deo Domuique]

http://i.min.us/ibTrDq.png

Check the situation right now...

And I'll try your code!

Damn... Seems that the code conflicts with another one and I don't get the effect like yours!...

...and I'm trying it on normal theme with very few changes...

[foxxyn8]

http://i.min.us/ibTrDq.png

Check the situation right now...

And I'll try your code!

Damn... Seems that the code conflicts with another one and I don't get the effect like yours!...

...and I'm trying it on normal theme with very few changes...

It's hard to tell, but your screenshot looks like it already has a small text-shadow. I also use bold text which helps for visibility.

this is the exact code I use :

.tabbrowser-tab  { 
        padding:0 !important;
        margin-bottom: 0 !important;
        background-image: -moz-linear-gradient(left, transparent, transparent 1px, rgba(161,161,161,.2) 1px, rgba(161,161,161,.2)) !important;
        background-size: 200% auto !important; 
        font-family: tahoma !important;
        font-weight:bold !important; 
        text-shadow: #fff 0px 0px 10px, #fff 1px 1px 10px, #fff 1px 1px 3px !important; 
}

[Deo Domuique]

Right!

I replaced with your code and already looking better.... I'll try bold now.

wow! Don't you have hover effect? Neither separated active and inactive tab?...

...Or all these are another part?

[foxxyn8]

Right!

I replaced with your code and already looking better.... I'll try bold now.

wow! Don't you have hover effect? Neither separated active and inactive tab?...

...Or all these are another part?

That's another part :)

.tabbrowser-tab:not([selected="true"]):hover {
background-image: -moz-linear-gradient(left, transparent, transparent 1px, rgba(161,161,161,.4) 1px, rgba(161,161,161,.4)) !important;
}

.tabbrowser-tab[selected="true"] { 
background-image: -moz-linear-gradient(left, transparent, transparent 1px, rgba(161,161,161,.9) 1px, rgba(161,161,161,.9)) !important;
}

[Deo Domuique]

Normally Dwrite looking much better without any shadow-effect but on transparent tab you certainly need one. That white-shadow did nice job.

Your script I suppose needs to rewrite it if you want border-radius on top 2px, right ( don't do anything... just asking ) ?

[foxxyn8]

Normally Dwrite looking much better without any shadow-effect but on transparent tab you certainly need one. That white-shadow did nice job.

Your script I suppose needs to rewrite it if you want border-radius on top 2px, right ( don't do anything... just asking ) ?

border-radius for the tabs? I use the -moz-border-image, so you'd either modify that image (chrome://browser/skin/tabbrowser/tab.png) or set it to none and define your own borders.

[Deo Domuique]

I deleted that part about app-menu... My mistake.

Why I never see folder "chrome"... I created one whenever I wanted to put a style inside...