Determine color values with Eyedropper

When designing websites or graphics, the choice of color plays an essential role. A color picker is an indispensable tool for designers to accurately determine color tones in RGB, HEX or CMYK code.

Color pickers also known as Eyedropper are especially useful for designers to determine colors of logos, fonts or online media. Only with the precise color value can be further processed, so that there are no deviations in the optical presentation. A color picker is a small and helpful tool to determine any color value at lightning speed. Such an additional program is also helpful for private editing of photos. For example, the color of a certain area of the image can be determined in order to make corrections to the overall image.

There are many such color pickers and with different approaches, some can be found in graphics user programs such as Gimp or CorelDRAW, often directly integrated in a floating toolbox, others are usually available free of charge as additional tools. Websites also offer online tools for color determination, and browser plugins are offered in large numbers of color pipettes or as a magnifying glass.

How to use Firefox Colorpick Eyedropper

Mozilla Firefox also includes a handy Eyedropper for website developers, which can be found via menu    More tools => Eyedropper.

A useful color picker for Windows is the free app Screen ColorPicker (HEX) from the Microsoft Store.

The advantage of the app is that color codes can be retrieved from any object from a window of any application, by using the mouse to bring a pixel freely over the screen into the crosshairs, once you have found the pixel, you press Space to select the color code, by clicking on the Copy Paste icon in the upper right corner, the code is copied to the clipboard. Now the color code can be inserted, when editing CSS style sheets or to the color scheme of a graphics app. Color codes in HEX(HTML), RGB, CMYK, HSV and HSL are supported.

Get Screen ColorPicker in the Microsoft Store

Firefox Update enlarges the bookmarks menu under the toolbar. Reduce spacing between bookmarks by userChrome.css

As we can see after the Mozilla Firefox Update 92, the bookmarks menu spacing under the toolbar now appears much larger. A comparison to Chrome shows the bookmark padding between the bookmarks is now twice as large.

If we try the Firefox Toolbar settings by click the menu button    and choose More tools and open Customize toolbar with click the Density button and choose “Normal” does not really shows a reduction. If there are a large number of bookmark items in a folder, depending on the screen resolution, the menus can sometimes overlapping.

How to Customize Firefox Bookmark Spacing

  As announced, in the current release of Firefox 92 the menu spacing can only be reduced via userChrome.css.

By creating the file userChrome.css the bookmark menu (menuitem) can be adjust using style sheets. Before that, however, Firefox 69 and later must set the default setting on the about:config-page from false to true to enable userChrome.css and userContent.css in the Chrome folder, to do it with pasting about:config in the firefox address bar and hit Enter

  Proceed with Caution. Click button Accept the Risk and Continue

Next in the search box type or paste the line below into “Search preference name” and hit Enter

toolkit.legacyUserProfileCustomizations.stylesheets

The option for Customize Style Sheets opens, click on the switch icon on the right to set it to true.

Next for the style sheet files create a folder chrome (if not already exist), this under the Firefox profile folder, this profile folder is easy find by click the Firefox menu button    choose Help and open More troubleshooting information, then scroll down a bit and click on the Open Folder button at Profile Folder.

Click to Open Folder button just opens in Windows File Explorer. Now create the chrome folder here.

  You’ll need to tell Windows to show you file extensions, if you haven’t already. Windows hides file extensions by default to simplify things. On Windows 8 or 10, you can simply click the View tab on the ribbon and check the File name extensions box to make them visible.

userChrome.css is a style sheet with special importance to Firefox. The rules in userChrome.css under the profile folder are applied to the user interface, and can override nearly every built-in style rule.

  This userChrome.css has nothing to do with Google Chrome. Chrome refers to the user interface of the web browser, which is what Google Chrome was named after.

menupopup > menuitem, menupopup > menu {
 padding-block: 2px !important; /*adjust: 0px-4px*/
 min-height: 22px !important; /*adjust: 21px-24px or unset*/
}

*|*:root {--arrowpanel-menuitem-padding: 2px 8px !important;}

Add the CSS code into Notepad Editor and save them with the file name userChrome.css. Copy the file under the Firefox profile folder to the chrome folder. The next time you open Firefox, the bookmarks under the toolbar appear smaller again.

If you also want to change the font size, the default font-size can be adjust by inserting the CSS code line.

/*
 * Make all the default font sizes 8 pt:
 */
* {
font-size: 8pt !important
}

  Whenever you edit your userChrome.css file, you will have to close all open tabs and relaunch Firefox for your changes to take effect.