New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Previewing tutorial #4

Open
Madis0 opened this Issue Sep 2, 2017 · 3 comments

Comments

Projects
None yet
2 participants
@Madis0
Collaborator

Madis0 commented Sep 2, 2017

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 CmdOpt + 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

This comment has been minimized.

Show comment
Hide comment
@SeriousM

SeriousM Sep 28, 2017

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.

SeriousM commented Sep 28, 2017

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

This comment has been minimized.

Show comment
Hide comment
@Madis0

Madis0 Sep 30, 2017

Collaborator

You're right, updated the tutorial.

Collaborator

Madis0 commented Sep 30, 2017

You're right, updated the tutorial.

@SeriousM

This comment has been minimized.

Show comment
Hide comment
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment