Thursday, May 16, 2013

Stop Ghostery button changing size

The Ghostery addon keeps track of the various advertising, analytic and social trackers present on the pages you visit. It gives you information about the trackers and the ability to toggle the blocking of each one individually.

The one gripe I have with this terrific addons is that the button it uses, at least in Firefox, changes width depending on if the page you're on have trackers or not. Call me nit-picky but stuff like this is really irritating to me.

Thankfully Firefox is fantastically customizable (at least until Australis hits :/ ) so it's fixable.



You might have to tweak the widths below to get the icon centered properly but that is easily done by trial and error.

Note the pointer-events:none; in the #ghostery-toolbar-button .badge style below. It makes the badge, even though on top of the actual Ghostery button, click-through-able so the button still works.

Paste the below css in a stylish-style:
#ghostery-toolbar-button {
width:30px;
margin:0 auto 0 auto;
text-align:center;
}
#ghostery-toolbar-button
.ghostery-toolbar-button {
position:relative;
z-index:0;
margin-left:2px !important;
}
#ghostery-toolbar-button
.ghostery-toolbar-button:hover {
background:none !important;
}
#ghostery-toolbar-button .badge {
position:relative;
z-index:1;
pointer-events:none;
width:32px !important;
margin-right:-30px !important;
}