Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Questions about creating CSS files

  • 6 replies
  • 1 has this problem
  • 5 views
  • Last reply by cor-el

more options

Under the heading of "teach me how to fish" I have these questions/requests: 1. I need a good, comprehensive tutorial about creating CSS files. 2.Is there a comprehensive listing of CSS commands (related to FF 57) or is that statements? Either way rather than just guess a list describing what each does would be helpful. Any help most appreciated.

Under the heading of "teach me how to fish" I have these questions/requests: 1. I need a good, comprehensive tutorial about creating CSS files. 2.Is there a comprehensive listing of CSS commands (related to FF 57) or is that statements? Either way rather than just guess a list describing what each does would be helpful. Any help most appreciated.

All Replies (6)

more options

Would say no and yes but not all in one place and not related to 57 in full way.

https://www.userchrome.org/ https://www.userchrome.org/what-is-userchrome-css.html https://github.com/axydavid/FirefoxUI/blob/master/README.md https://github.com/wilfredwee/photon-australis

have to look and search sites for other url's

Please let us know if this solved your issue or if need further assistance.

more options

Thanks for your reply /w links which I will study.

That said, since you say 'yes and no' and 'not related to 57' I guess my issue is not resolved. Does make one wonder why Mozilla would consider v57 ready for prime-time if one of its major user components is not fully documented and therefore difficult (impossible for some) to use! Will they ever give this their full attention?

more options

Some links with posts relevant to css + FF57 that may help you

the post by jscher2000 on 11/16/17 - sorry don't know how to post a link to the exact post, just scroll down to it

https://support.mozilla.org/en-US/questions/1177360

The chosen solution at this link

https://support.mozilla.org/en-US/questions/1178010?page=1

Information at these links by the author of the Classic Theme Restorer add-on

https://github.com/Aris-t2/CustomCSSforFx/

https://github.com/Aris-t2/CustomCSSforFx/issues

I've been saving the links until I have time to learn how to make the changes myself. Until then staying on 56. This time of year there is just not enough time to learn how to do something new.

more options

Thanks for the additional links. I likely would have delayed as well but my 'upgrade' was forced on me even though I had the appropriate do-not-upgrade options ticked, very annoying! I hate retreating so will push ahead through the dark. For me I consider this issue solved but any other readers that want to add links should feel free to do so. That would help us all. Might actually be 'fishing' sometime in the future.

more options

CSS rules consists of

  • selectors - these identify particular elements in the UI (e.g., tabs bar) and are particular to Firefox
  • properties - these are mostly standard CSS (e.g., visibility), but -moz-prefixed properties are particular to Firefox
  • values - these are mostly standard CSS (e.g., hidden), except for the -moz-prefixed properties

It sounds as though you are wishing for a well written guide to the useful selectors, and we should all love that. But... I'm not aware of such a thing. Other than looking at and modifying rule sets you find online, I can suggest the following:

You can inspect the local copy of the source code of the tolbar area if you paste the following address to the address bar and press Enter/Return to load it:

view-source:chrome://browser/content/browser.xul

That's hard to read as plain text. If you save it locally with a .xml extension and open it in an editor that can add syntax coloring to XML, that will make it easier to spot the ID and class attributes.

Note: The source file doesn't show dynamically generated content like the address bar drop-down or your bookmarks.

To explore interactively, check out the Browser Toolbox. See: https://developer.mozilla.org/docs/To.../Browser_Toolbox. It's not as convenient as the old DOM Inspector combined with the old Element Inspector, but hopefully it will continue to improve.

more options

You can also check out the Firefox source code on DXR. There are usually a lot of useful comments in the source code, so (new) devs can see what the code is supposed to do.