|
|
| (14 intermediate revisions by 10 users not shown) |
| Line 1: |
Line 1: |
| − | = Modifying the UI with CSS =
| + | #REDIRECT [[Firefox]] |
| − | | |
| − | Firefox allows one to modify the appearance of its interface (not the web page content) with cascading style sheets.
| |
| − | | |
| − | There are two ways to do this.
| |
| − | | |
| − | * You can create and modify the file ''firefox profile dir/chrome/userChrome.css''. The find out what the profile dir is, see: [http://www.gemal.dk/mozilla/profile.html this].
| |
| − | * Another method is to install ''[https://addons.mozilla.org/en-Us/firefox/addon/stylish/ stylish]'', and add a style to it. The style should start with this declaration: @namespace [https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);]. This method has the advantage that one can modify the style and see changes without restarting the browser.
| |
| − | | |
| − | Now the question is what to do with those files. Firstly, you should know at least some CSS3. This page is a great learning source for this technology.
| |
| − | | |
| − | Knowing CSS3 you should add rules for elements, which you want to modify. To easily learn what elements have what class/id names, there are two ways:
| |
| − | | |
| − | * Open this url in a new page: <code>chrome://browser/content/browser.xul</code>. This will display the main window widgets inside that tab. Now press somewhere in that area with right mouse button and select ''Inspect Element''. Now you can use the inspector tool to inspect an element and learn it’s properties.
| |
| − | * You can also install the [https://addons.mozilla.org/en-US/firefox/addon/dom-inspector-6622/ DOM inspector] extension. After it’s installed, open it’s window with ctrl+shift+i. Choose ''File->Inspect Chrome Document->anything''. Then choose ''Edit->Select Element By Click''. Now click on any element in the Firefox’s window with left mouse button. Information about that element should be displayed in the DOM Inspector’s window.
| |
| − | | |
| − | Now use the obtained information to create a rule. For example, adding this rule hides the menu button:
| |
| − | | |
| − | <code>appmenu-toolbar-button { display: none !important; }</code>
| |
| − | | |
| − | If you need something to start with, here are a few ready styles:
| |
| − | | |
| − | * https://github.com/nezumisama/rice/blob/master/stylish/xul.css
| |
| − | * https://github.com/hdni/dotfiles/blob/master/userstyles/userChrome.css
| |
| − | | |
| − | Suggested extensions
| |
| − | | |
| − | * ''[https://addons.mozilla.org/en-US/firefox/addon/adblock-plus/ AdBlock]'' - well know extensions removing elements with adds, with huge pre-defined lists and ability to make our own.
| |
| − | * ''[https://addons.mozilla.org/en-US/firefox/addon/noscript/ NoScript]'' - disables scripts, plugins and iframes if not explicitly allowed. Increases security and privacy this way.
| |
| − | * ''[https://addons.mozilla.org/en-Us/firefox/addon/stylish/ Stylish]'' - allows to add styles to pages and the UI and manage them (disable, enable, import, export, preview, edit).
| |
| − | * ''[https://addons.mozilla.org/en-Us/firefox/addon/greasemonkey/ Greasemonkey]'' - allows to add and manage custom JavaScript scripts, like [https://4chan-x.just-believe.in/ 4chan X].
| |
| − | | |
| − | = General Tips =
| |
