Giters

Timvde / UserChrome-Tweaks

A community maintained repository of userChrome.css tweaks for Firefox

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Previewing tutorial

Madis0 opened this issue · comments

commented

Hello,
I'm posting the tutorial for easily (kinda) previewing styles, you could add this to the readme for example.

Feel free to modify this in any way (wording, markup, simplification). Reference: https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox https://developer.mozilla.org/en-US/docs/Tools/Style_Editor

Testing styles

Pre-setup

Before being able to try styles, you need to enable two developer options (only do this once). To do that:

  1. Press Ctrl + Shift + I on Win/Linux or Cmd + Opt + I on Mac
  2. Click on the cog that appears in a right or left top corner, next to other buttons.
  3. Scroll down to Advanced Settings and check the settings "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging".
  4. Close the developer tools panel and proceed with next tutorial

Testing a style

  1. Press Ctrl + Alt + Shift + I on Win/Linux or Cmd + Opt + Shift + I on Mac
  2. Click on the tab Style Editor, choose file userChrome.css on the sidebar
  3. Choose the style you want to preview from this repository, copy the code
  4. Scroll down on the development tools window textbox, paste the code
  5. You should see the style being applied. If you like what you see, you can click Save, otherwise it will disappear after restarting the browser.
commented

You can actually select the userChrome.css file and change this one. After changing it to your liking, you can save it directly from the devtools.

commented

You're right, updated the tutorial.