|
|
| Line 1: |
Line 1: |
| − | Firefox allows one to modify the appearance of its interface (not the web page content) with cascading style sheets. | + | You can edit Firefox's appearance with CSS (Cascading Style Sheets). To be more general, you can alter ANY web page with CSS. This is achieved with the usage of userstyles. To use and take complete advantage of them, you need a userstyle manager. |
| | | | |
| − | '''Note, if you have a newer version (nightly) of Firefox, the australis theme will potentially break all of these tweaks.'''<br> | + | In Firefox's case, this would be Stylish: https://addons.mozilla.org/en-US/firefox/addon/stylish/ |
| − | '''Installing [https://addons.mozilla.org/en-US/firefox/addon/classicthemerestorer/ Firefox Classic Theme Restorer] may help in that case.'''
| |
| | | | |
| − | There are two ways to do this.
| + | Note: if you're hell-bent on using Nightly, you'll probably notice your interface userstyles don't work well with Australis. To mitigate this, download Holly -- which is pretty much Nightly without Australis. You can get it here: https://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-holly/ |
| − | [[File:1355789158984.png|thumb|An infographic for ricing Firefox]]
| |
| − | * 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.
| + | The Stylish button that appears after you install it is useful. For instance, to write a userstyle for Firefox, you need to go to: |
| | | | |
| − | 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:
| + | <code>chrome://browser/content/browser.xul</code> |
| | | | |
| − | * 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.
| + | And select Write new style -> For this URL, and it'll have a template set up. |
| − | * 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:
| + | The most useful feature in writing userstyles is the Inspector. You pop it up by pressing Ctrl+Shift+C and it'll let you see what elements you can style on the page. |
| | | | |
| − | <code>appmenu-toolbar-button { display: none !important; }</code>
| + | You can learn how to write CSS in: |
| | | | |
| − | If you need something to start with, here are a few ready styles:
| + | http://www.w3schools.com/css/ |
| − | | |
| − | * 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].
| |
| − | * ''[http://www.logicalincrements.com/firefox/ A list of notable extensions]''
| |
You can edit Firefox's appearance with CSS (Cascading Style Sheets). To be more general, you can alter ANY web page with CSS. This is achieved with the usage of userstyles. To use and take complete advantage of them, you need a userstyle manager.
In Firefox's case, this would be Stylish: https://addons.mozilla.org/en-US/firefox/addon/stylish/
Note: if you're hell-bent on using Nightly, you'll probably notice your interface userstyles don't work well with Australis. To mitigate this, download Holly -- which is pretty much Nightly without Australis. You can get it here: https://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-holly/
The Stylish button that appears after you install it is useful. For instance, to write a userstyle for Firefox, you need to go to:
chrome://browser/content/browser.xul
And select Write new style -> For this URL, and it'll have a template set up.
The most useful feature in writing userstyles is the Inspector. You pop it up by pressing Ctrl+Shift+C and it'll let you see what elements you can style on the page.
You can learn how to write CSS in:
http://www.w3schools.com/css/
