Share your custom Firefox/Minefield 4 stylish scripts

January 17, 2011

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. :(

January 17, 2011

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

January 17, 2011

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

January 18, 2011

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

January 19, 2011

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 ;)

January 19, 2011

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%);
}

January 19, 2011

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

January 20, 2011

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

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

Here is the code i use atm:

#TabsToolbar &gt; #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 &gt; #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 &gt; #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 &gt; #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 &gt; #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 &gt; #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 &gt; #home-button {
	min-width: 1cm !important;
  }
}

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

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

January 20, 2011

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

January 22, 2011

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:

January 24, 2011

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

January 24, 2011

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}

January 24, 2011

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

January 24, 2011

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.

January 24, 2011

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.

January 24, 2011

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?

January 24, 2011

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

January 24, 2011

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; 
}

January 24, 2011

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...

January 24, 2011

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; 
}

January 24, 2011

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?

January 24, 2011

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;
}

January 24, 2011

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 ) ?

January 25, 2011

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.

January 25, 2011

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...

Sign In

Share your custom Firefox/Minefield 4 stylish scripts

Recommended Posts

Arkaic

Link to comment

Share on other sites

+Heartripper Subscriber¹

Link to comment

Share on other sites

Drifus

Link to comment

Share on other sites

CGar

Link to comment

Share on other sites

vajlent

Link to comment

Share on other sites

foxxyn8

Link to comment

Share on other sites

Drifus

Link to comment

Share on other sites

vajlent

Link to comment

Share on other sites

CGar

Link to comment

Share on other sites

r0bc

Link to comment

Share on other sites

Karl-Johan

Link to comment

Share on other sites

foxxyn8

Link to comment

Share on other sites

Deo Domuique

Link to comment

Share on other sites

SoapyHamHocks Member

Link to comment

Share on other sites

Deo Domuique

Link to comment

Share on other sites

foxxyn8

Link to comment

Share on other sites

Deo Domuique

Link to comment

Share on other sites

foxxyn8

Link to comment

Share on other sites

Deo Domuique

Link to comment

Share on other sites

foxxyn8

Link to comment

Share on other sites

Deo Domuique

Link to comment

Share on other sites

foxxyn8

Link to comment

Share on other sites

Deo Domuique

Link to comment

Share on other sites

foxxyn8

Link to comment

Share on other sites

Deo Domuique

Link to comment

Share on other sites

Recently Browsing 0 members

Posts