Share your custom Firefox/Minefield 4 stylish scripts

By Steven P.
in Web Browser Discussion & Support

 Share

Recommended Posts

Grand Master

Arkaic

Posted
Posted

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

Mentor

+Heartripper Subscriber¹

Posted
  • Subscriber¹
Posted

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

Contributor

Drifus

Posted
Posted

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

Rising Star

CGar

Posted
Posted

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

WeirdBar.png

Community Regular

foxxyn8

Posted
Posted

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

Contributor

Drifus

Posted
Posted

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

Collaborator

vajlent

Posted
Posted

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

Rising Star

CGar

Posted
Posted

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

Community Regular

foxxyn8

Posted
Posted

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}

Collaborator

Deo Domuique

Posted
Posted

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.

Community Regular

foxxyn8

Posted
Posted

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

post-350326-0-96398400-1295911042.png

Collaborator

Deo Domuique

Posted
Posted

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

Community Regular

foxxyn8

Posted
Posted

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

Community Regular

foxxyn8

Posted
Posted

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

post-350326-0-92998500-1295912604.png

Collaborator

Deo Domuique

Posted
Posted

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

Community Regular

foxxyn8

Posted
Posted

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.

This topic is now closed to further replies.
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.