Jump to content
KimSR

firefox Clipper is SO hard to see!

Recommended Posts

I use both Chrome and Firefox, and on both, the Evernote Clipper is grey and so hard to see on all but plain, pale backgrounds. I can easily see the icons for every other plugin and bookmark.

 

Why can't you put a green box behind it or a border or something that isn't grey, so it's easy to see? At the moment, when I clip, I just have to aim for the blank space in my plugins bar, and considering that you're supposed to be so bloody easy to use, that seems a bit silly.

 

This is a screenshot of the icon on Firefox: http://screencast.com/t/gcw9hp0MFR

 

Here is a screenshot of the icon on a totally different type of background on Chrome: http://screencast.com/t/lrpfNkJh

 

Again, ALL of my other icons stand up to varied backgrounds and themes except Evernote.

  • Like 1

Share this post


Link to post

I'm using this CSS with Firefox 35. It makes the button icon background green except when the mouse cursor hovers it:

 

@namespace url(hxxp://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#nav-bar toolbarbutton[id^=action-button][id$=evernote-button] image
{ transition-property: background-image !important; transition-duration: 150ms !important; }
#nav-bar toolbarbutton[id^=action-button][id$=evernote-button]:not(:hover) image
{ background-image: linear-gradient(#a6e868,#87ca48) !important; }

 

I don't use Chrome, but I'm not aware of user CSS being able to modify the browser's chrome. You can use this CSS with Firefox either with the Stylish add-on or by using the userChrome.css file. (If you don't know how to use either, then "Google search is your friend.".)

 

Hope this helps.

 

(You'll have to change the "hxxp" in the first line to "http" when you use it. The forum here--like most forums--breaks the URL when it's posted.)

 

Edit: Here's something similar for someone also using Clearly:

 

toolbarbutton[id^=action-button][id$=evernote-button] > image,
toolbarbutton#readable_by_evernote__button > image
{ transition-property: background-image !important; transition-duration: 150ms !important; }
toolbarbutton[id^=action-button][id$=evernote-button]:not(:hover) > image
{ background-image: radial-gradient(closest-side,#fff,#97ca58) !important; }
toolbarbutton#readable_by_evernote__button:not(:hover) > image
{ background-image: radial-gradient(closest-side,#fff,#b4c5e7) !important; }

 

(It uses a radial gradient instead.)

 

Edit #2: Here's a note with example image:

https://www.evernote.com/shard/s532/sh/b0c04452-8fe8-4b57-adfc-3a2b2b4a0aee/2f750196919b9436a52f0dc1f72df35d

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...