Interactive color changing in Firefox with userstyle applied?

Comments

• makondo

  March 2015 edited March 2015

  Don't you use Stylish Editor Mod? It has Preview button and Colorpicker button (which works well with Rainbowpicker instead of Fx default blahpicker). It also has a color convert button, with every click you can convert red>#FF0000>rgba(255, 0, 0, 1.0).
  I can't imagine how you can write a style efficiently w/out SEM!
• a3cAnton

  March 2015

  I tell u what I do..
  Not use firebug cause slow down a lot the browser, the build in inspector is enough for me, I use DOMI for modify the browser and complement sometimes the firefox inspector.
  At first edit the style with notepad++ and paste content in stylish editor ( in new window mode).
  Often have open the page, inspector and stylish editor, then I can modify, inspect and see changes in real time.
  Hope I help u a little.
  Regards and congrats for your work.
• Valacar

  March 2015 edited March 2015

  I found a solution, although it's not quite perfect and somewhat buggy :( Figured it out based on this bugzilla page: https://bugzilla.mozilla.org/show_bug.cgi?id=984880

  • Go to about:config in the URL bar
  • Find and set devtools.inspector.showUserAgentStyles to true
  • Go to the Style Editor (Shift-F7)
  • Create a new style (or edit an existing style)
  • Type in your CSS rule, but increase the specificity of the selector
  • Make sure you added !important at the end of each declaration
  • Go back to the Inspector tab, and you should be able to see your CSS rule, where you can manipulate the color by clicking the circular swatch.

  BTW, when I say to increase the specificity, the easiest way is just to prefix your CSS selector with 'html'. For example, if you wanted to just style the 'body' tag, you would be more specific and say 'html body'. If you don't, it most likely won't let you style it.

  html body {
      background: #f00 !important;
  }
  

  @makondo: No, I don't use Stylish Editor Mod or Rainbowpicker. As far as I can tell, neither one lets me do real time color updating like this:

  

  @a3cAnton: I don't normally use Firebug, but I had to try it to see if it could change colors quickly when a userstyle is applied. Also, I don't think editing in Notepad++ and pasting to the Stylish editor and then previewing is "real time"...that's a very slow process in my opinion ;) Real time to me means that if I pick a color, it immediately changes on the screen.
• a3cAnton

  March 2015

  @makondo: sorry, perhaps my explanation is not very good (as my english).
  I mean this:

  

  

  Sin título.png

  1280 x 800 - 372K
• makondo

  March 2015 edited March 2015

  a3cAnton said:

  @makondo: sorry, perhaps my explanation is not very good (as my english)...

  I had no problems with your post.
  I just think it's a long way around (plus, none of our suggestions is what Valacar is looking for anyway! )
• a3cAnton

  March 2015

  agree.