Share your custom Firefox/Minefield 4 stylish scripts

[miguel reizinho]

I've ended up with this:

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

Not finished yet though.

I've browsed through this board and in userstyles.org but I can't find that Stylish icon in you toolbar. Can you share it?

[Deo Domuique]

Can you keep the Favicon?

Also, if I apply it on Beta 12 the tabs don't get the squared look. Everything else works well.

Just remove this part from his code:

#page-proxy-stack{
   display: none !important;
 }

I did so and works just fine.

[CGar]

I've browsed through this board and in userstyles.org but I can't find that Stylish icon in you toolbar. Can you share it?

That's actually the icon for an add-on called Stratiform. It's made by our Neowin resident SoapyHamHocks :D

https://www.neowin.net/forum/topic/976782-stratiform-for-firefox-4/

[grayscale]

Is it possible to display the favicon only on non-https sites?

[Kaoxt]

Anyone have a stylish code to make the Identity box like this mockup, and dropdown arrows?

Love the gradient in that. =)

[ajua]

Just remove this part from his code:

#page-proxy-stack{
   display: none !important;
 }

I did so and works just fine.

Thanks! I will try it tomorrow

[grayscale]

Don't mind my last post query about non-https favicon, I figured it out :)

[miguel reizinho]

That's actually the icon for an add-on called Stratiform. It's made by our Neowin resident SoapyHamHocks :D

https://www.neowin.net/forum/topic/976782-stratiform-for-firefox-4/

Thanks for the information. I've wrote a style that use those icons for Stylish. You can see them in the screenshot. I can release it if the author of the icons (SoapyHamHocks ?) gives me permition for it. Please let me know. Thank you.

[miguel reizinho]

Anyone have a stylish code to make the Identity box like this mockup, and dropdown arrows?

Love the gradient in that. =)

It has been posted before. Here you go:

Identity Box

 @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/* identity box */

#identity-box {
  color: rgba(0,0,0,.68) !important;
  font-weight: bold;
}

#identity-box.verifiedDomain,
#identity-box.verifiedIdentity {
  text-shadow: 0 1px 0 rgba(255,255,255,.35)!important;
  -moz-box-shadow:0 0 0 1px rgba(0,0,0,.3) inset,0 2px 0 0 rgba(0,0,0,.04) inset,0 3px 0 0 rgba(255,255,255,.3) inset, 0 1px 0 0 rgba(0,0,0,.2) !important;
}

#identity-box.verifiedDomain {
  background-color: hsl(219,52%,69%) !important;
  background-image: -moz-linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.2) 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,.2)) !important;
}

#identity-box.verifiedIdentity {
  background-color: hsl(93,55%,55%) !important;
  background-image: -moz-linear-gradient(rgba(255,255,220,.7), rgba(255,255,220,.2) 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,.2)) !important;
}

#identity-box.verifiedDomain:active,
#identity-box.verifiedIdentity:active,
#identity-box.verifiedIdentity[open="true"],
#identity-box.verifiedDomain[open="true"] {
  -moz-box-shadow: 0 1px 10px 0 rgba(0,0,0,.8) inset !important;
}

Dropdown Arrow

#urlbar dropmarker[anonid="historydropmarker"]{
   list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAICAYAAAAvOAWIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPlJREFUeNpMUEtqhEAQrfaHIhqcleIqR8h1MszcZo6SnGSYrWtFyMaFC/GDP1DbTj2JkILurs+r96pLJEmipmki27ZJKUWGYZAQgpZlIU3TjtwwDHS5XEiM4/hVFMWn4zjkui7N80yWZdG+7wQDuO97iuP4W3DwVlVVwuzvnueRrusH4AS2bUu+7/8w84fGuY6dO0tLsIIR8lJKwnjsyyAI7sBpf8VnFEUPyCE+50VzGIYPJnoeari2bcOrM/iVpqlqmkblea7qun4hD8xBitnAwib5g1feSleWJZmm2bH8lUESQGzoYD47cdZ1vWVZpljthvh//VeAAQADxrNysDKqaQAAAABJRU5ErkJggg==") !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("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==");
 }

[+Heartripper Subscriber¹]

after all the feedback regarding the favicon, i edited the style so that now it's shown. :)

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

[nub]

Is it possible to display the title bar without enabling the menu bar with stylish? (My tabs are not in the title bar)

[r0bc]

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?

[mysiskatten]

can I change color on tabs on Mac?

[Kaoxt]

It has been posted before. Here you go:

Identity Box

 @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/* identity box */

#identity-box {
  color: rgba(0,0,0,.68) !important;
  font-weight: bold;
}

#identity-box.verifiedDomain,
#identity-box.verifiedIdentity {
  text-shadow: 0 1px 0 rgba(255,255,255,.35)!important;
  -moz-box-shadow:0 0 0 1px rgba(0,0,0,.3) inset,0 2px 0 0 rgba(0,0,0,.04) inset,0 3px 0 0 rgba(255,255,255,.3) inset, 0 1px 0 0 rgba(0,0,0,.2) !important;
}

#identity-box.verifiedDomain {
  background-color: hsl(219,52%,69%) !important;
  background-image: -moz-linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.2) 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,.2)) !important;
}

#identity-box.verifiedIdentity {
  background-color: hsl(93,55%,55%) !important;
  background-image: -moz-linear-gradient(rgba(255,255,220,.7), rgba(255,255,220,.2) 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,.2)) !important;
}

#identity-box.verifiedDomain:active,
#identity-box.verifiedIdentity:active,
#identity-box.verifiedIdentity[open="true"],
#identity-box.verifiedDomain[open="true"] {
  -moz-box-shadow: 0 1px 10px 0 rgba(0,0,0,.8) inset !important;
}

Dropdown Arrow

#urlbar dropmarker[anonid="historydropmarker"]{
   list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAICAYAAAAvOAWIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPlJREFUeNpMUEtqhEAQrfaHIhqcleIqR8h1MszcZo6SnGSYrWtFyMaFC/GDP1DbTj2JkILurs+r96pLJEmipmki27ZJKUWGYZAQgpZlIU3TjtwwDHS5XEiM4/hVFMWn4zjkui7N80yWZdG+7wQDuO97iuP4W3DwVlVVwuzvnueRrusH4AS2bUu+7/8w84fGuY6dO0tLsIIR8lJKwnjsyyAI7sBpf8VnFEUPyCE+50VzGIYPJnoeari2bcOrM/iVpqlqmkblea7qun4hD8xBitnAwib5g1feSleWJZmm2bH8lUESQGzoYD47cdZ1vWVZpljthvh//VeAAQADxrNysDKqaQAAAABJRU5ErkJggg==") !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("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==");
 }

The Dropdown Arrow Code didn't work with Stylish. Not seeing any change for instance in the bookmark's button dropdown arrow.

[miguel reizinho]

The Dropdown Arrow Code didn't work with Stylish. Not seeing any change for instance in the bookmark's button dropdown arrow.

This code is ONLY for the dropdown arrow in the URL bar

[Kaoxt]

This code is ONLY for the dropdown arrow in the URL bar

Hmm, didn't change that either. It's still default Dropdown image.

[grayscale]

Try and save the images he provided: (copy and paste in address bar)

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAICAYAAAAvOAWIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPlJREFUeNpMUEtqhEAQrfaHIhqcleIqR8h1MszcZo6SnGSYrWtFyMaFC/GDP1DbTj2JkILurs+r96pLJEmipmki27ZJKUWGYZAQgpZlIU3TjtwwDHS5XEiM4/hVFMWn4zjkui7N80yWZdG+7wQDuO97iuP4W3DwVlVVwuzvnueRrusH4AS2bUu+7/8w84fGuY6dO0tLsIIR8lJKwnjsyyAI7sBpf8VnFEUPyCE+50VzGIYPJnoeari2bcOrM/iVpqlqmkblea7qun4hD8xBitnAwib5g1feSleWJZmm2bH8lUESQGzoYD47cdZ1vWVZpljthvh//VeAAQADxrNysDKqaQAAAABJRU5ErkJggg==

and this

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

then use this code:

#urlbar dropmarker[anonid="historydropmarker"]{
   list-style-image: url("where_images_are/this.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("where_images_are/this2.png");
 }

replace the where images are with the location of the images

I think there are some problems on the long url when pasted in bbcode (though I never encountered that before, I can't post a direct link either).

[Kaoxt]

Try and save the image he provided.

this and this2

then use this code:

#urlbar dropmarker[anonid="historydropmarker"]{
   list-style-image: url("where_this_is/this.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("where_this2_is/this2.png");
 }

That halfway worked. I see the image when I do not click on it. When I click on the image, I then see no dropdown arrow.

Here is the code that I have so far:

#urlbar dropmarker[anonid="historydropmarker"]{
   list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAICAYAAAAvOAWIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPlJREFUeNpMUEtqhEAQrfaHIhqcleIqR8h1MszcZo6SnGSYrWtFyMaFC/GDP1DbTj2JkILurs+r96pLJEmipmki27ZJKUWGYZAQgpZlIU3TjtwwDHS5XEiM4/hVFMWn4zjkui7N80yWZdG+7wQDuO97iuP4W3DwVlVVwuzvnueRrusH4AS2bUu+7/8w84fGuY6dO0tLsIIR8lJKwnjsyyAI7sBpf8VnFEUPyCE+50VzGIYPJnoeari2bcOrM/iVpqlqmkblea7qun4hD8xBitnAwib5g1feSleWJZmm2bH8lUESQGzoYD47cdZ1vWVZpljthvh//VeAAQADxrNysDKqaQAAAABJRU5ErkJggg==") !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("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==");
 }

[foxxyn8]

That halfway worked. I see the image when I do not click on it. When I click on the image, I then see no dropdown arrow.

Try adding:

-moz-image-region: auto !important;

to #urlbar dropmarker

[SoapyHamHocks Member]

Just use

.urlbar-history-dropmarker

as the selector.

.urlbar-history-dropmarker {
  list-style-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAICAYAAAAvOAWIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPlJREFUeNpMUEtqhEAQrfaHIhqcleIqR8h1MszcZo6SnGSYrWtFyMaFC/GDP1DbTj2JkILurs+r96pLJEmipmki27ZJKUWGYZAQgpZlIU3TjtwwDHS5XEiM4/hVFMWn4zjkui7N80yWZdG+7wQDuO97iuP4W3DwVlVVwuzvnueRrusH4AS2bUu+7/8w84fGuY6dO0tLsIIR8lJKwnjsyyAI7sBpf8VnFEUPyCE+50VzGIYPJnoeari2bcOrM/iVpqlqmkblea7qun4hD8xBitnAwib5g1feSleWJZmm2bH8lUESQGzoYD47cdZ1vWVZpljthvh//VeAAQADxrNysDKqaQAAAABJRU5ErkJggg==) !important;
  -moz-image-region: auto !important;
}

[Kaoxt]

Just use

.urlbar-history-dropmarker

as the selector.

.urlbar-history-dropmarker {
  list-style-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAICAYAAAAvOAWIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPlJREFUeNpMUEtqhEAQrfaHIhqcleIqR8h1MszcZo6SnGSYrWtFyMaFC/GDP1DbTj2JkILurs+r96pLJEmipmki27ZJKUWGYZAQgpZlIU3TjtwwDHS5XEiM4/hVFMWn4zjkui7N80yWZdG+7wQDuO97iuP4W3DwVlVVwuzvnueRrusH4AS2bUu+7/8w84fGuY6dO0tLsIIR8lJKwnjsyyAI7sBpf8VnFEUPyCE+50VzGIYPJnoeari2bcOrM/iVpqlqmkblea7qun4hD8xBitnAwib5g1feSleWJZmm2bH8lUESQGzoYD47cdZ1vWVZpljthvh//VeAAQADxrNysDKqaQAAAABJRU5ErkJggg==) !important;
  -moz-image-region: auto !important;
}

That looks a bit different, unless I'm doing something wrong:

Here is how everything looks atm:

As you see the dropdown arrow right below the Close button still isn't the right format like the Bookmarks button, and when I click the URL history arrow, it shows no image then (all white). Not sure if I am doing something wrong here...

[grayscale]

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

[SoapyHamHocks Member]

That looks a bit different, unless I'm doing something wrong:

The forum messes up the formatting, just remove any blank space in the data url line. I've attached the image if that fails.

[grayscale]

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.

[Kaoxt]

The forum messes up the formatting, just remove any blank space in the data url line. I've attached the image if that fails.

I have that showing but when I click it nothing shows up. Shouldn't there be another image just like that, but when clicked it turns like a grey? I recall something like that when using Strata40 at one point, unless that's changed since then.