PUBLIC MARKS from decembre with tag userChrome.css

Firefox 57 or Stylish 3.0 users: - Expand the "Show CSS Code" panel - Copy/paste into a userChrome.css file. More information on creating a userChrome.css file:

Custom Scrollbars for Firefox 57+ : Method 1 - files for Firefox profile folder only M1 is based on this project by nuchi: https://github.com/nuchi/firefox-quantum-userchromejs M1 will stop working when Mozilla drops XBL support. From this projects method 1 : folder copy userChrome folder and userChrome.css file to PROFILENAME chrome or add code from userChrome.css file to an existing userChrome.css file. Method 2 - files for Firefox folder and to Firefox profile folder M2 is based on this project by ardiman: https://github.com/ardiman/userChrome.js From this projects method 2profile folder copy userChrome folder and userChrome.js file to PROFILENAME chrome . From this projects method 2firefox folder copy defaults folder and config.js file to Firefox main directory (where the Firefox executable is). Script/startup cache must be deleted after every change! Where to fine startupCache folder? about:profiles > Local Directory > Open Folder, close Firefox and delete all files in startupCache folder. Location on WINDOWS: C:Users NAME AppDataLocalMozillaFirefoxProfiles PROFILE startupCache Location on LINUX location: home NAME .cachemozillafirefox PROFILE startupCache This is not the same profile folder custom scripts and styles are stored! More info about startup cache removal (in German): https://github.com/ardiman/userChrome.js/wiki/Skriptcache More info about startup cache removal (in English )

/* * Edit this file and copy it as userChrome.css into your ff profile */ /* Show TAB favicon only on selected tab */ #feed-button { display: none !important } #urlbar[level] .autocomplete-textbox-container >* { background-color: #FFFFB7 !important; } .autocomplete-history-dropmarker { display: none !important; } /* Hide Tabbar close Button */ /* tabbrowser .tabs-closebutton-box { display: none; } */ /* PERSONAL TOOLBAR */ /* * Note: Rules affecting icons on the PT do not apply to folder contents. * Those are governed by "Bookmarks menu" rules. * Taken from: http://www.mozilla.org/unix/customizing.html#usercss */ /* Kill FOLDER / bookmark icons in the Personal Toolbar */ toolbarbutton.bookmark-item > .toolbarbutton-icon { display: none; } /* BOOKMARKS MENU */ /* OK - kill icons for bookmark groups in Bookmarks menu */ menuitem.bookmark-group > .menu-iconic-left { display: none; } /*hide noscript icon in contextual menu*/ .menu-iconic[id*="noscript-"] > .menu-iconic-left .menu-iconic[class*="noscript-"] > .menu-iconic-left .menuitem-iconic[class*="noscript-"] > .menu-iconic-left { visibility: hidden !important; } /* TABS */ .tabbrowser-tab[selected="true"] { border: none !important; font-family: "pragmata" !important; border-radius: 0 !important; padding-left: 5px !important; padding-right: 5px !important; background: red !important; } .tabbrowser-tab:not([selected="true"]) { border: none !important; font-family: "pragmata" !important; background: #222 !important; border-radius: 0 !important; padding-left: 5px !important; padding-right: 5px !important; } { -moz-appearance: none !important; } #content browser{margin-right:-16px!important;overflow-y:scroll;overflow-x:hidden;} .appmenu-button-container { background: #303030 !important; } #navigator-toolbox #TabsToolbar, { background: #303030 !important; } #appmenu-toolbar-button, .tabbrowser-tab { font: 10pt "pragmata" !important; background-color: #303030 !important; text-shadow: none !important; color: #676767 !important; } #urlbar { height: 22px; } .appmenu-toolbar-button { background: #303030 !important; color: #676767 !important; text-align: left !important; margin: 0 3px 0 0px !important; padding: 0 0 0 0 !important; } .toolbarbutton-menu-dropmarker { display: none !important; } #navigator-toolbox #TabsToolbar { background: #303030 !important; padding: 0px 0px !important; height: 20px !important; } .tabbrowser-tab { text-align: center !important; color: #676767 !important; background: #303030 !important; margin: -2px 0px 0px 0px !important; padding: 0px 2px 0px 4px !important; border: 0 !important; border-left: 0px solid #676767 !important; border-right: 0px solid #676767 !important; border-radius: 0px !important; } .tabbrowser-tab[selected="true"] { /*background: #202020 !important;*/ background: red !important; border-left: 0px solid #676767 !important; border-right: 0px solid #676767 !important; padding: 0px 2px 0px 3px !important; color: #ababab !important; }

'about:config' tweaks (To revert changes right-click entry and select 'reset'): - Tab audio icon browser.tabs.showAudioPlayingIcon - Insert related tab after current tab (suggestion: enable / set to 'true') browser.tabs.insertRelatedAfterCurrent - Titlebar browser.tabs.drawInTitlebar - Searchbar: open search results in new tab browser.search.openintab - Reader mode reader.parse-on-load.enabled - Geolocation (suggestion: disable / set to 'false') geo.enabled - Pocket (suggestion: disable / set to 'false') extensions.pocket.enabled - Anti fingerprinting (Caution: browser might behave in unforseen ways!) privacy.resistFingerprinting read: Fingerprinting info at Mozilla Wiki tweaks ***** Suggested ui tweaks ***** - Toolbar modes (suggestion: compact mode) Customize mode > Density > Compact / Normal / Touch - Titlebar modes (suggestion: Firefox titlebar ['application/hamburger button in titlebar' only works in Firefox titlebar]) Customize mode > Title Bar > uncheck checkbox Drag space above tabs toolbar (suggestion: disable drag space ['application/hamburger button in titlebar' works best without drag space]) Customize mode > Drag Space > uncheck checkbox Bookmarks menu button on bookmarks toolbar Customize mode > Toolbars > Bookmarks Toolbar Customize mode > move 'bookmarks menu' button to bookmark toolbars end Downloads button always visible Customize mode > downloads button > click on button and uncheck 'Auto-hide' Searchbar (suggestion: placed after location bar) Customize mode > Search(bar) > move to navigation toolbar Flexible spaces (suggestion: remove spaces after and before location bar) Customize mode > grab and drag flexible space into palette

Edit this file and copy it as userChrome.css into your ff profile

userChrome.css is a style sheet with special importance to Firefox. The rules in userChrome.css are applied to the user interface, and can override nearly every built-in style rule. Unfortunately, you cannot use userChrome.css to change the functional operation of Firefox; that's what extensions are for. Creating a userChrome.css file and adding style rules allows you to make changes to fonts and colors, hide unnecessary items, adjust spacing, and make other changes to the appearance of Firefox. The following examples illustrate the wide range of effects you can create, either by creating your own style recipes, or building on the work of CSS wizards sharing their talents on the web.

The only way to modify UI is adding custom CSS code to userChrome.css and userContent.css files inside browsers profile folder. Keep in mind CSS code can not create entirely new items, buttons or toolbars. It only can modify already present ui items. 1. Find your profile folder ('profile names are different for everyone'). All OS: about:support > Profile Folder > Open Folder 2. User styles belong into "chrome" subolder. Create it, if there is none yet. PROFILENAME chrome 3. Copy userChrome.css, userContent.css and subfolders into chrome subfolder. How to use custom user styles? The userChrome.css and userContent.css files works like an optionsconfigurations file. All main "features" can be enabled and disabled there.