Skip to content

Home

Jump to bottom Edit New page
clarkewd edited this page Aug 19, 2011 · 7 revisions

What is FireFile?

Firefile is a Firebug extension that allows you to save the CSS files edited with firebug live to your web server by transfering it to a server- side script, which then handles css saving. FireFile remembers all modifications done to a website (all modified css rules) and allows you to save them directly to your (local or remote) web server, which means that the changes will be publically applied.

How FireFile works

  1. A server-side php script (one file) get's uploaded to your webserver
  2. Opening the script with your browser links FireFile with the remote script
  3. From now on, FireFile remembers CSS- Changes while you work with Firebug
  4. Thenever you click on "save changes" (blue up arrow), FireFile sends the modified CSS- Sheet to your webserver by communicating with the server- side script firefile.php, which consequently updates your stylesheet on your server
  5. To verify the remote saving, just reload the page. The changes are now live... neat!

Download

You can download the Firefox- Extension from https://addons.mozilla.org/en-US/firefox/addon/52365/ (Official Mozilla Addon Repository).

You can get the Server- Component from https://github.com/tobiasstrebitzer/FireFile-Server/zipball/master

Installation

  1. Upload the script firefile.php (download, zipped) to your web server (e.g. /web/firefile/firefile.php).
  2. Open the script url in your firefox browser (e.g. http://www.your-site.com/firefile/firefile.php).
  3. Fill in the highlighted fields "username" and "password" and click apply.
  4. Now open Firebug. A confirmation message will appear, asking you if you want to add the site to the list of "registered sites".
  5. Now reload the page. If the FireFile- Icon in your status- bar is active (dark), you're all set up!

Getting Started

  1. Backup your stylesheets, just in case something goes wrong.
  2. Modify some css- values in the Firebug CSS- Editing Panel (see screenshot below).
  3. A blue "up"- arrow should appear. Klicking it will save the changes to your server.
  4. You will get a notification on success.
  5. On error (red bar appears) you most likely need to set the file permissions of the css- files to world-writable (666 - 777).
  6. Some settings can be toggled by clicking the "down"- arrow next to the FireFile- Tab.

Advanced Techniques

  • FireFile displays CSS- Comments, although only those between styles, and not between rules (see screenshot above).
  • If you right-click in the css- editing sidepanel you can choose to create new styles. It automatically lists the currently highlighted tags and classes, as well as a "Custom" option for individual selector input. It adds the style to the right-clicked stylesheet (e.g. in above screenshot: style1.css).
  • If you add a "*" selector to your stylesheet, you will be able to add new styles on any element (because the * selector style will be visible on any html element).
  • This extension works perfectly with "Firepicker", which will allow you to pick colors from a palette view.
  • If you add some CSS3- Style Rules (like -moz-box-shadow, -moz-border-radius etc.), FireFile will automatically create the corresponding Style Rules for webkit and other browsers. This option can be turned off (settings- context- menü)

F.A.Q.

  • Does this extension work with FireFox 5? Probably not.
Add a custom footer
Add a custom sidebar
Clone this wiki locally