I'm trying to re-skin an existing site using CSS only. I will be taking one of their CSS files and redoing it to match a new design, without changing any HTML. I want a good way of continually updating and then testing, but I have to do it locally because they do not have a dev environment. The site itself is dynamic and authenticated, so I can't just download pages from the site and test the entire thing locally. I was hoping that there is a way to tell my browser (Firefox, preferably) to disable that specific remote CSS file and replace it with a local file.
I don't want to use something like Web Develop Toolbar or Firebug because that requires me to manually make the changes each time I load a page. I want something more seamless.
I was thinking one possibility is to load my new stylesheet in userContent.css, but I would still need a way of telling the browser not to load the original stylesheet from the server.
Any ideas?
UPDATE: I found this Mozilla bug report https://bugzilla.mozilla.org/show_bug.cgi?id=208641 discussing the issue of being able to change userContent.css without restarting Firefox. One of the posters (Simon Wilper) posted some files and info about adding a menu item to refresh userContent.css, but it talks about modifying browser.xul and I can't find that file on my system. This seems like the last piece of the puzzle.
You can use AdBlock Plus to create a custom filter to block that one particular stylesheet, so it will not load when you go to the site. This rule will always be in effect, so as you refresh the page, you will not have to do anything extra.
https://addons.mozilla.org/en-US/firefox/addon/adblock-plus/
As for adding your own stylesheet onto that external site, you can use Stylish, an add-on for adding your own stylesheets to particular domains. This, too, will always be present as you refresh the page.
https://addons.mozilla.org/en-US/firefox/addon/stylish/
The issues you will run into, I imagine, will be what to do with images you are intending on linking to in the CSS. You will have to upload them somewhere, reference them absolutely, and then once you are finished, replace the URLs with new locations on their server. Also, that editing Stylish stylesheets within their editor is pretty poor (no code colouring, no code completion.) Probably better to edit it in your editor of choice, and then paste it into the Stylish textarea. Hit save, then see your work (I believe you won't even have to refresh, but I might be wrong.)
Also, both these add-ons are available for Chrome too.
https://chrome.google.com/webstore/detail/adblock-plus/cfhdojbkjhnklbpkdaibdccddilifddb
https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en
I am not sure why people are suggesting to install extensions for this simple task. I would suggest you to just follow these steps to disable whichever file you want from being loaded in your browser that you want. Just follow these few simple steps:
Hit Ctrl + Shift + C to open source inspection
Navigate to Network tab
Right Click on any file from the list and and click Block request URL
Now the file won't load. Cheers!
PS: Steps are same for Google Chrome and Mozilla Firefox browsers. Not tested on Opera and/or Safari.
Install web developer extension
http://chrispederick.com/work/web-developer/firefox/
And then it will create a menu under the Address bar, click on the css tab and then "Disable Styles" > Disable Individual Style Sheet" > then select the style sheet file you want to disable
after this, again click on the css tab and then "Add User Style Sheets" , next select your css file.
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
Firebug is the most convenient tool I've found for editing CSS - so why isn't there a simple "save" option for CSS?
I am always finding myself making tweaks in Firebug, then going back to my original .css file and replicating the tweaks.
Has anyone come up with a better solution?
EDIT: I'm aware the code is stored on a server (in most cases not my own), but I use it when building my own websites.
Firebug's just using the .css file Firefox downloaded from the server, it knows precisely what lines in which files it's editing. I can't see why there's not an "export" or "save" option, which allows you to store the new .css file. (Which I could then replace the remote one with).
I have tried looking in temporary locations, and choosing File > Save... and experimenting with the output options on Firefox, but I still haven't found a way.
EDIT 2:
The official discussion group has a lot of questions, but no answers.
Been wondering the same for quite some time now,
just gut-wrenching when your in-the-moment-freestyle-css'ing with firebug gets blown to bits by
an accidental reload or whatnot....
For my intents and purposes, I've finally found the tool.... : FireDiff.
It gives you a new tab, probably some weird David Bowie reference, called "changes";
which not only allows you to see/save what firebug, i. e. you, have been doing,
but also optionally track changes made by the page itself....if it and/or you are so inclined.
So thankful not having to re-type, or re-imagine and then re-re-type, every css rule I make...
Here is a link to the developer (don't be disparaged by first appearance, mayhap just as well head straight over to the Mozilla Add-On repository .
I got here looking exactly for this feature, that is, being able to save edited CSS properties back to the original file (on my local development machine). Unfortunately after searching a lot and not finding anything that suits my needs (OK, there's CSS Updater but you have to register and it's a paid extension...) I gave up on Firefox + Firebug and looked for something similar for Google Chrome. Guess what... I just found this great post that shows a nice way of getting this to work ( built into Chrome - there's no need for additional extensions ):
Change CSS and SAVE on local file system using Chrome Developer Tools
I tried it now and it works great highlighting the changed lines. Just click Save and you're done! :)
Here's a video explaining this and much more: Google I/O 2011: Chrome Dev Tools Reloaded
I hope it helps if it doesn't matter to you changing browser while editing your CSS files. I made the change already for now, but I would really love to have this functionality built into Firebug. :)
[Update 1]
Today I just saw this video: Firefox CSS live edit in Sublimetext (work in progress) Looks promising indeed.
[Update 2]
If you happen to be using Visual Studio 2013 with Web Essentials you'll be able to sync CSS automagically as shown in this video:
Web Essentials: Browser tools integration
The Web Developer add-on let's you save your edits. I'd like to combine the editing of Firebug with the Save feature of Web Developer.
(source: mozilla.org)
Use the "Save" button (click CSS menu -> Edit CSS) to save the modified CSS to disk.
Recomendation: Use the "Stick" button to prevent losing your changes when you change the tab for doing other browsing. If it is possible, use only one tab to do the edit and other firefox window the related searches, webmail, etc.
I just released a firebug addon at the mozilla addon sandbox which might quite do what you want:
https://addons.mozilla.org/en/firefox/addon/52365/
It actually saves the "touched" css files on demand to your web server (by communication with a one-file webservice php script).
Documentation can be found at my homepage or on the addon page
I would appreciate any testing, bug reports, comments, ratings, discussion on this, as it's still in early beta, but should already work fine.
CSS-X-Fire
I'm surprised that it still not listed to this question, but probably because is new and the author didn't have time to promote it yet.
It is called CSS-X-Fire and it is a plugin for JetBrains series of IDEs : IntelliJ IDEA, PHPWebStorm, PyCharm, WebStorm, RubyMine.
How it works:
You install one of these IDEs and configure the deployment (supports FTP and SCP). This will allow you to stay in sync with the server.
After this you install this plugin. When it starts it will ask tell you that he will install a plugin for Firefox, in order to do the integration between Firebug and the IDE. If it fails to install the plugin, just use the drag-n-drop technique to install it.
Once installed it will track all your changes from Firebug and you will be able to apply them with a simple click inside de IDE.
FireFile
FireFile is an alternative that requires you to add one small php file to the server side in order to be able to upload the modified css.
You could link firebug to eclipse with fireclipse and then save the file from eclipse
I think the closest you're going to get is by going into Edit mode in Firebug and copying and pasting the contents of the CSS file.
We just introduced Backfire, an open source javascript engine that allows you to save CSS changes made in Firebug and Webkit inspector to the server. The library includes an example C# implementation of how to save the incoming changes to your CSS.
Here's a blog post about how it works:
http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/
And here's the code hosted at Google Code:
http://code.google.com/p/backfire/
I know this doesn't answer your question, but surprisingly, Internet Explorer 8's Firebug clone "developer toolbar" (accessible via F12) offers the option to "save html". This function saves the current DOM to a local file, which means that if you edit the DOM somehow, e.g. by adding a style attribute somewhere, this will be saved too.
Not particularly useful if you're using Firebug to mess around with CSS like everyone does, but a step in the right direction.
I propose a solution that involves a combination of Firebug and FireFTP as well as code that directly accesses the local file system when running a website locally.
Here are the scenarios:
Working on a website that is hosted on a remote machine
In this case you would provide the FTP details and the location of the CSS/HTML/Javascript and Firebug would then update these files when you save your changes. It may even be able to locate the files itself and then prompt you to verify that it has the correct file. If file names are unique it shouldn't be a problem.
Working on a website running on your local machine
In this case you could provide Firebug with the local folder location of the website and the same behaviour would be used to match and verify the files. The access to the local file system could be performed through FireFTP if necessary.
Working on a website hosted remotely without FTP access
In this case something like the FireFile add-on would have to be implemented.
An additional feature would be the ability to save and open project files that store the mappings between the local files and the URLs they are associated with as well as saving the FTP details as FireFTP already does.
I am the author of CSS-X-Fire which Sorin Sbarnea also kindly posted about in this thread. Guess I'm a bit late ;)
CSS-X-Fire emits CSS property changes from Firebug to the IDE where the changes can be applied or discarded.
There are a couple of advantages with this solution over most of the other existing tools which only know know about the filenames and the content downloaded by the browser (see NickFitz comment in the original post).
Scenario 1: You have a website (project) which has a handful of themes from which the user can select from. Each theme has its own CSS file but only one is known to Firebug, the current one. CSS-X-Fire will detect all matching selectors in the project and let you decide which should be modified.
Scenario 2: The web project has stylesheets created compile-time or during deployment. They might be merged from several files and the file names may change. CSS-X-Fire doesn't care of the names of the files, it only deals with CSS selector names and their properties.
Above are examples of scenarios where CSS-X-Fire excels. Since it works with the source files, and knows about the language structure, it also helps to find duplicates not known to Firebug, jump-to-code, etcetera.
CSS-X-Fire is open source under the Apache 2 license.
Project home: http://code.google.com/p/css-x-fire/
FireFile
Firebug was created to detect a problem not to be a debugger. but you can save change if you add new tool that integrate firebug with save changes. it is FireFile, click here
http://thelistoflist.blogspot.com/2010/04/how-to-save-change-you-make-in-firebug.html.
FireFile provide the desired functionality by adding a small PHP file to the server side.
Since Firebug is not working on your server but taking the CSS from the site and storing it locally and showing you the site with those local changes.
Use the CSS editor in the Firefox Web Developer toolbar:
http://chrispederick.com/work/web-developer/
It's got enough good stuff to use in conjunction with Firebug, and it lets you save your CSS out to a text file.
Use Backfire.
http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/
It's an open source solution that sends CSS changes back to the server and saves them.
Backfire uses a single javascript file, and the sourcecode package has a working .NET server implementation example that is easily portable to other platforms.
I had this problem forever as well, and finally decided that we shouldn't be editing things in the web inspector and built something for it (https://github.com/viatropos/design.io).
A better solution:
The browser automatically reflects CSS changes without reloading when you press save in your text editor.
The main reason we're editing css in the web inspector (I use webkit, but FireBug is along the same lines) is because we need to make small adjustments, and it takes too long to reload the page.
There are 2 main problems with this approach. First, you're allowed to edit an individual element that may not have an id selector. So even if you were able to copy/paste the generated CSS from the web inspector, it would have to generate an id to scope the css. Something like:
#element-127 {
background: red;
}
That would start making your css a mess.
You could get around that by only changing styles for an existing selector (the .space class selector in the webkit inspector image below).
Still though, the second problem. The interface to that thing is pretty rough, it's hard to make big changes - like if you want to try real quick copying this block of css to this place, or whatever.
I'd rather just stick to TextMate.
The ideal would be to just write the CSS in your text editor and have the browser reflect the changes without reloading the page. This way you'd be writing your final css as you're making the little changes.
The next level would be to write in a dynamic CSS language, like Stylus, Less, SCSS, etc, and have that update the browser with the generated CSS. This way you could start creating mixins like box-shadow(), that abstracted away the complexities, which the web inspector definitely couldn't do.
There's a few things out there that kind of do this, but nothing really streamlining it in my opinion.
LiveReload: pushes css to browser without refreshing when you press save, but it's a mac app, so it'd be difficult to customize.
CodeKit: also a mac app, but it refreshes the browser every time you save.
Not having the ability to easily customize the way these work is the main reason I didn't use them.
I put together https://github.com/viatropos/design.io specifically to solve this problem, and make it so:
The browser reflects the css/js/html/etc anytime you save, without reloading the page
It can handle any template/language/framework (Stylus, Less, CoffeeScript, Jade, Haml, etc.)
It's written in JavaScript, and you can whip together extensions real quick in JavaScript.
This way, when you need to make those little changes to CSS, you can say, set background color, press save, see nope, not quite, adjust the hue by 10, save, nope, adjust by 5, save, looks good.
The way it works is by watching whenever you save a file (at the os level), processing the file (this is where the extensions work), and pushing the data to the browser through websockets, which are then handled (the client side of the extension).
Not to plug or anything, but I struggled with this issue for a long ass time.
Hope that helps.
Firebug works on the computed CSS (the one which you get by taking the CSS in the files and applying inheritance, etc. plus the changes made with JavaScript). This means that probably you couldn't use it directly to include in an HTML file, which is browser/version specific (unless you care only about Firefox). On the other hand, it keeps track of what is original and what is computed... I think it should not be very difficult to add some JS to Firebug to be able to export that CSS to a text file.
I was wondering why can't I bloody well select and copy the text in front of my eyes. Especially when others say you can just "select and copy". Turns out you can, you just have to start the drag outside of any text (i.e. in the gutter above or to the left of the text) as any mousedown -- whether it's a click or drag -- on any text immediately invokes the property editor. You can also click outside text to get a cursor (even if it's not always visible) which you can then move around with the arrow keys and select text that way.
The text copied to the clipboard is devoid of any indenting, unfortunately, but at least it saves you from manually transcribing the entire contents of the CSS file. Just have your diff programme ignore changes in whitespace when comparing against the original.
You could write your own server script file that takes a filename parameter and a content parameter.
The server script would find the requested file and replace its contents with the new one.
Writing the Javascript that taps into firebug's info and retrieves the useful data would be the tricky part.
I'd personally rather ask the dev team at firebug to supply a function, it shouldn't be too hard for them.
Finally, Ajax sends the filename/content pair to the php file you created.
Quoted from the Firebug FAQ:
Editing Pages
Can I save to the source the changes I made to the webpage I'm seeing?
Right now you can't. As John J. Barton wrote on the newsgroup:
Editing in Firebug is kinda like taking out the pickles from and adding mustard to a restaurant sandwich: you can enjoy the result, but the next customer at the restaurant will still get pickles and no mustard.
This is a long-requested functionality, so someday it'll be available directly from Firebug. Meanwhile, you can try Firediff, an extension for firebug by Kevin Decker.
How can I output all changes that have been made to a site's CSS within firebug?
That's a feature implemented in Kevin Decker's Firediff.
Here's a partial solution. After you make your changes, click on one of the links to the relevant file. This is the original file, so you'll have to refresh the file, which is under the options menu button in the upper right of the firebug pane. Now you have the modified css page, which you can copy & paste. Obviously, you'll have to do it for each css file.
Edit: looks like Mark Biek has a quicker version
A very easy way to "edit" your page is to go onto the site via your internet browser. Save the page as html only onto your desktop. Go to your desktop and right click on the new web page file and select open with, choose notepad and edit the page from there, if you know html it will be easy. After all your editing is done, save the file and reopen your webpage, the changes should be there if done correctly. You can then use your new edited page and export or copy it to your remote location
Actually Firebug is a debug and analyze-Tool: not an editor and obviously not considered to be one. The other reason was already mentioned: how to you want to change CSS, stored on a server when debugging a webpage?