search

Timvde / UserChrome-Tweaks

A community maintained repository of userChrome.css tweaks for Firefox
GNU General Public License v3.0
1.25k stars 122 forks source link

Previewing tutorial #4

Open Madis0 opened 6 years ago

Madis0 commented 6 years ago

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.
SeriousM commented 6 years ago

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.

Madis0 commented 6 years ago

You're right, updated the tutorial.

SeriousM commented 6 years ago

I posted the tutorial here: https://www.reddit.com/r/FirefoxCSS/comments/73dvty/tutorial_how_to_create_and_livedebug_userchromecss/