Share your custom Firefox/Minefield 4 stylish scripts

1,483 · March 7, 2011

They've already posted what's need to be added.

March 7, 2011

They've already posted what's need to be added.

This is the image no, for what it should look like when you click it? I thought there was suppose to be another unless I'm wrong:

Here's the code now as is:

#urlbar dropmarker[anonid="historydropmarker"]{
   list-style-image: url("file:///C:/Users/Kurt/Documents/Firefox/arrow1.png") !important;
   margin: 2px 2px -2px 2px !important;
 }

 :-moz-any(#TabsToolbar, #nav-bar, #addon-bar) toolbaritem:not([id="urlbar-container"]) .dropmarker-icon{
   list-style-image: url("file:///C:/Users/Kurt/Documents/Firefox/arrow3.png"
);
 }

I have it showing the dropdown in the URL bar fine, until I click on it, then nothing shows. Not sure if something is wrong with the code or not.

1,526 · March 7, 2011

This is the image no for what it should look like when you click it? I thought there was suppose to be another unless I'm wrong:

If you want that just add:

.urlbar-history-dropmarker[open] {
  list-style-image: url(http://i.imgur.com/BwiVL.png) !important;
}

March 7, 2011

If you want that just add:

.urlbar-history-dropmarker[open] {
  list-style-image: url(http://i.imgur.com/BwiVL.png) !important;
}

Sorry, I think I'm getting you confused, this is how it looks now:

When I click on that URL whitish grey arrow, nothing is showing. I thought it was suppose to darken. The problem is, I don't see how it's suppose to darken if I don't even see a second image for when I click on it.

It's working on mine now. Check your code again.

As I've said previously, try saving it on one of your folders, that way you will not have any problem on the image location, since it is saved locally.

Sorry for double posting.

Can you post a Screenshot on how it looks on your end when you click the URL arrow? I want to see if yours is darkening.

1,483 · March 7, 2011

Sorry, I think I'm getting you confused, this is how it looks now:

When I click on that URL whitish grey arrow, nothing is showing. I thought it was suppose to darken. The problem is, I don't see how it's suppose to darken if I don't even see a second image for when I click on it.

Can you post a Screenshot on how it looks on your end when you click the URL arrow? I want to see if yours is darkening.

I don't like the second image so I chose to use the same image.

March 7, 2011

This is the code your using for second image no?

 :-moz-any(#TabsToolbar, #nav-bar, #addon-bar) toolbaritem:not([id="urlbar-container"]) .dropmarker-icon{
   list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/
eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjQwMzVBQkI5MzZDMzExRTA5RDYxRjE4MDRDMjBCNUE0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjQwMzVBQkJBMzZDMzExRTA5RDYxRjE4MDRDMjBCNUE0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NDAzNUFCQjczNkMzMTFFMDlENjFGMTgwNEMyMEI1QTQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NDAzNUFCQjgzNkMzMTFFMDlENjFGMTgwNEMyMEI1QTQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/
eHBhY2tldCBlbmQ9InIiPz4FOdgvAAABKklEQVR42mIsXXWOAQiYgZgLiDmhbHTwB4i/Q/FfFiDBCMQ8QCwPxKwMuMEPIH4MxJ9hmjhv7l+n/eT84Vn8AgI8LCwsYFX/
gfj3718Mnz99eqXhGp4grWPxGqYJJPfdOSjm8V9T3YmnjhwqExGXYGVhYWX49fMnw5tXLz5HJvtOeM8t9/bd118g2xiYoJq+PHn/7QabvMEuQzPzyZ8+fvz9798foA0fvtu5uPd94VM4BNRwF6juK0g9E9S9f4H4w8O3X68JaFhuUVJWmXHjytXvOgZGk/
6Ia+x9+enHDZA8VB0DC1oIfbjz6vNlTTPX/wam5nee/+U+f+/1l+vIGtA1wTS+v/784zlpAc5bTz98+QJ10l9kRSxYghak4NPTD98/Q/2LAQACDAAv54O64PQP9QAAAABJRU5ErkJggg=="
);
 }

Can't figure out for the life of me, why I'm getting no second image, even with URL's fixed so it's shorter.

1,483 · March 7, 2011

.urlbar-history-dropmarker{
   list-style-image: url("file:///wherever/dropdown.png") !important;
   margin: 2px 2px -2px 2px !important;
   -moz-image-region: auto !important;
 }

That's all you need. Read previous posts.

March 7, 2011

I guess I thought it was supposed to be used a different way going off of Spewboy's old strata40. He has the arrow, but when clicked it would change colors to a darker image something like the one seen in here:

1,483 · March 7, 2011

As I've said, I don't like the darker image so I decided not to use it.

Read previous post, SoapyHamHocks already posted the solution.

March 7, 2011

As I've said, I don't like the darker image so I decided not to use it.

Read previous post, SoapyHamHocks already posted the solution.

Yeah, I tried all of his atm and having no luck. The first code gave me two arrows, and second one gave me an image of the arrow I didn't want. Do you see anywhere where it's using that darker image? All the arrows I see, are the wrong ones, unless I'm missing it.

This is the arrow I'm seeing:

If I'm not mistaken it should be bigger to match the bigger arrow seen above. Doesn't go with this arrow:

1,483 · March 7, 2011

.urlbar-history-dropmarker{
   list-style-image: url("file:///wherever/dropdown.png") !important;
   margin: 2px 2px -2px 2px !important;
  -moz-image-region: auto !important;

 }
.urlbar-history-dropmarker[open] {
  list-style-image: url(http://i.imgur.com/BwiVL.png) !important;
}

March 7, 2011

.urlbar-history-dropmarker{
   list-style-image: url("file:///wherever/dropdown.png") !important;
   margin: 2px 2px -2px 2px !important;
  -moz-image-region: auto !important;

 }
.urlbar-history-dropmarker[open] {
  list-style-image: url(http://i.imgur.com/BwiVL.png) !important;
}

That's getting better, and works, but when it's open is the wrong image I believe. Shouldn't the arrow image be bigger to match that of when it's not open?

Thanks again for all the help btw.

March 7, 2011

Finally got it all situated. Just ended up having to make a custom image to match the arrow that you guys gave me when opening the history.

The last thing I wanted to change was the dropdown arrow where it "Lists all tabs" right below the close button on Windows, so it's using the bigger image as seen in the mockup:

https://wiki.mozilla.org/images/1/17/Firefox-4-Mockup-i06-%28Win7%29-%28Aero%29-%28TabsTop%29.png

Any help would be appreciated!

1,483 · March 7, 2011

Finally got it all situated. Just ended up having to make a custom image to match the arrow that you guys gave me when opening the history.

The reason why it's a different image is because it is intended to be used for that (dropdown arrow, lists all tabs), not as a darker version of the first.

Which then brings us to the solution to your next query

:-moz-any(#TabsToolbar, #nav-bar, #addon-bar) toolbaritem:not([id=urlbar-container]) .dropmarker-icon -> this has the darker image cause it was suppose to show the dropdown arrow used by history, etc.

The last thing I wanted to change was the dropdown arrow where it "Lists all tabs" right below the close button on Windows, so it's using the bigger image as seen in the mockup:

https://wiki.mozilla.org/images/1/17/Firefox-4-Mockup-i06-%28Win7%29-%28Aero%29-%28TabsTop%29.png

Any help would be appreciated!

:-moz-any(#TabsToolbar, #nav-bar, #addon-bar) toolbaritem:not([id="urlbar-container"]) .dropmarker-icon{
   list-style-image: url("file:///wherever/dropdown2.png");
 }
#alltabs-button .toolbarbutton-icon{
list-style-image: url("file:///wherever/dropdown2.png");
-moz-image-region: auto !important;
}

dropdown2.png is the 'darker' image.

March 7, 2011

I take it dropdown2.png is this image?

Just wanted to clarify. Also I put that code in, and now I am getting no arrow.

This is what I used:

:-moz-any(#TabsToolbar, #nav-bar, #addon-bar) toolbaritem:not([id="urlbar-container"]) .dropmarker-icon{
   list-style-image: url("file:///C:\Users\Kurt\Documents\Firefox\listalltab.png");
 }
#alltabs-button .toolbarbutton-icon{
list-style-image: url("file:///C:\Users\Kurt\Documents\Firefox\listalltab.png");
-moz-image-region: auto !important;
}

1,483 · March 7, 2011

I take it dropdown2.png is this image?

Just wanted to clarify. Also I put that code in, and now I am getting no arrow.

This is what I used:

:-moz-any(#TabsToolbar, #nav-bar, #addon-bar) toolbaritem:not([id="urlbar-container"]) .dropmarker-icon{
   list-style-image: url("file:///C:\Users\Kurt\Documents\Firefox\listalltab.png");
 }
#alltabs-button .toolbarbutton-icon{
list-style-image: url("file:///C:\Users\Kurt\Documents\Firefox\listalltab.png");
-moz-image-region: auto !important;
}

Working on mine:

March 7, 2011

Odd, mine is just vanishing and get no image.

March 7, 2011

Got it I believe... just have to use the imgur link. For whatever reason it's not working with the local one, even though when I put "file:///C:/Users/Kurt/Documents/Firefox/listalltab.png" in my browser it loads fine, but it doesn't want to show up where it should be.

March 7, 2011

Sorry for double post... last dropdown arrow that I am looking for if anyone can help is the one right next to the Google image in the Search box.

Thanks!

2,353 · March 7, 2011

Beta 12 does not have the squared tabs yet.

I guess that's why I'm seeing a dotted line on top of the tabs:

March 7, 2011

Whoever wants to try this, go on!

Native Transparent Win-Glass Addon Bar + Find Bar with nice border.

/* Bottom Box */

#browser {
-moz-appearance: none;
  background-color:transparent!important;
  border-bottom-width:2px;
  border-bottom-style:solid;
  -moz-border-bottom-colors: rgba(255,255,255,.15) rgba(0,0,0,.1);
}

#main-window[sizemode=normal] #browser {
  border-bottom-left-radius: 2px;
  border-bottom-right-radius:2px;
  -moz-border-right-colors:  rgba(255,255,255,.15) rgba(0,0,0,.1);
  -moz-border-left-colors:   rgba(255,255,255,.15) rgba(0,0,0,.1);
}

#browser-bottombox,
#browser-bottombox&gt;* {
  -moz-appearance: -moz-win-glass!important;
  background-color: transparent;
}

Addon Bar Buttons -Not incuded.

March 7, 2011

I am currently using several modified stylish scripts for this result. To have a glassed navbar and active tab the border around the navbar has been made transparent. I would like to have a visible border, like in the standard theme, around the navbar and tabs, with just the interior of the navbar glassed. Now, as far as I have understood (and my tests seem to confirm), any top border of the navbar remains visible between the navbar itself and the active tab (see the attached smaller pic) unless the tab is completely opaque, because, after all, the border is an uninterrupted line from left to right and the "effect" of the tab being one and the same with the navbar is just an effect of the tab image overlapping the border and hiding it just for the width of the tab. Thus, opaque tab = continuous effect and transparent tab = border "cutting", of course to different extents according to the transparency of the border and of the tab itself.

Is the above correct, and thence there's no way to have an opaque (or slightly transparent) border arount navbar and active tab, without seeing it on the tab, or is there any way to do it, maybe with this last iteration of the tab design? I am currently removing the border with the following
#main-window[tabsontop="true"]  #nav-bar {
        background-clip: padding-box !important;
        border-top: 1px solid transparent !important; 
        border-left: 0px solid transparent !important;
        border-right: 0px solid transparent !important;
}
I actually thought (without being able to do it) of a transparent vertical gradient that gets 100% opaque just 1 or 2px on top of the navbar and on the bottom of the active tab, just to hide the border, leaving the rest of the tab and navbar transparent... is this overkill?

OK, I was finally able to hide the top border by having a gradient, transparent from top to bottom on the tab and from bottom to top on the navbar, so as to have a fully opaque area to hide the border. I somehow like it :rolleyes: but still would like to know if my quoted assumption above is correct or whether there is another way to keep the border without having it show through at the junction between tab and navbar.

March 7, 2011

NM :)

March 7, 2011

I've ended up with this:

http://userstyles.org/styles/44843/

http://userstyles.org/style_screenshots/44843_after.png

Not finished yet though.

Awesome :)

Can ou please give me the code to only change identity box?

1,185 · March 7, 2011

Awesome :)

Can ou please give me the code to only change identity box?

Here it is

 /*IdentityBox*/
 #page-proxy-stack{
   margin-right: 1px !important;
   background: none !important;
 }

 #identity-box:not(.verifiedIdentity):not(.verifiedDomain){
   border-right: 1px solid rgba(0,0,0,.18) !important;
   margin: -2px 0 -2px 0 !important;
   background: none !important;
   border-radius: 2px 0 0 2px !important;
   box-shadow: 1px 0 0 0 rgba(0,0,0,.04) !important;
 }

 #identity-box.verifiedIdentity,
 #identity-box.verifiedDomain{
   border-width: 1px 1px 1px 1px !important;
   border-style: solid !important;
   border-radius: 2px 0 0 2px !important;
   box-shadow: 0 0 2px rgba(255,255,255,.25) inset,
               0 0 1px 0 rgba(255,255,255,.85) inset,
               1px 0 0 0 rgba(0,0,0,.04) !important;
   padding: 0 2px 0 2px !important;
   margin: -3px 0 -3px -3px !important;
   font-weight: 600 !important;
   text-shadow: 0 0 3px white !important;
 }

 #identity-box.verifiedDomain{
   border-color: #5d85b8 !important;
   -moz-border-top-colors: #5d85b8 #bfd7f2 !important;
   -moz-border-bottom-colors: #5d85b8 #568cc3 !important;
   background: -moz-linear-gradient(top, #b1ceef, #6d9ee0 8px, #5f90d1 10px, #4977b7) !important;
   color: #182949 !important;
 }

 #identity-box.verifiedDomain:active{
   background: -moz-linear-gradient(top, #4977b7, #5f90d1 8px, #6d9ee0 10px, #b1ceef) !important;
 }

 #identity-box.verifiedIdentity{
   border-color: #72a04d !important;
   -moz-border-top-colors: #72a04d #cee5ae !important;
   -moz-border-bottom-colors: #72a04d #73ab43 !important;
   background: -moz-linear-gradient(top, #c2e0a0, #87c059 8px, #79b14c 10px, #69a03e) !important;
   color: #2b4918 !important;
 }

 #identity-box.verifiedIdentity:active{
   background: -moz-linear-gradient(top, #69a03e, #79b14c 8px, #87c059 10px, #c2e0a0) !important;
 }

Sign In

Share your custom Firefox/Minefield 4 stylish scripts

Recommended Posts

grayscale

Link to comment

Share on other sites

Kaoxt

Link to comment

Share on other sites

SoapyHamHocks Member

Link to comment

Share on other sites

Kaoxt

Link to comment

Share on other sites

grayscale

Link to comment

Share on other sites

Kaoxt

Link to comment

Share on other sites

grayscale

Link to comment

Share on other sites

Kaoxt

Link to comment

Share on other sites

grayscale

Link to comment

Share on other sites

Kaoxt

Link to comment

Share on other sites

grayscale

Link to comment

Share on other sites

Kaoxt

Link to comment

Share on other sites

Kaoxt

Link to comment

Share on other sites

grayscale

Link to comment

Share on other sites

Kaoxt

Link to comment

Share on other sites

grayscale

Link to comment

Share on other sites

Kaoxt

Link to comment

Share on other sites

Kaoxt

Link to comment

Share on other sites

Kaoxt

Link to comment

Share on other sites

ajua

Link to comment

Share on other sites

Deo Domuique

Link to comment

Share on other sites

r0bc

Link to comment

Share on other sites

foxxyn8

Link to comment

Share on other sites

CromoPT

Link to comment

Share on other sites

+Heartripper Subscriber¹

Link to comment

Share on other sites

Recently Browsing 0 members