The Joomla! Forum ™

When editing in Firebug what is the easiest way to save or implement the changes made??

_________________
God help us!

Not really Joomla specific but I'll answer anyway

As far as I am aware, Firebug is an "on the fly" editor/analyser with no means to "apply" the changes you make. I use firebug for basic debugging and to investigate how certain CSS tricks are achieved on other sites. I always apply my changes to the main file and upload after I have found satisfactory ways of doing things.

Hope this helps,
Arthur

Moving to The Lounge from J! 1.5 General Questions.

_________________
Backup, backup, backup!
The "Master" .htacess file by Nicholas http://snipt.net/nikosdion/the-master-htaccess

When I edit in firebug I find changes I'd like to make in the html. However I have no idea what file to edit! How do I know what file firebug is messing with? It tells you for the css, but doesn't for the html!

Thanks ahead of time!

Here's a short video tutoral about the tool itself and using some basic features:
http://www.litfuel.net/plush/?postid=161

If you google it, I am sure you would find a great deal more.

_________________
If you're not a part of the solution, you're a part of the problem.

to jbwebsites:
As far as I know the Inspect HTML check the inner of the index.php file
To keep the edit you made you can riht click on the close html doctype an copy the html to your real index.php.

For the css, you can see in the right pane (Style, Layout, DOM) what css files are applied to what you select in the html index php, here you can click on the css file link and copy/paste the css code in your original file.

ex: click on the body tag in the html and you will find all css files in the right pane related to the body tag

But I’m sure it’s probably a more elegant way to do it????

_________________
God help us!

I'm having the same problem. I don't know which file to edit. Can someone please help?

This is something I've spent some time trying to figuring out myself and none of the articles on firebug I've found mention much. The Web Developer Toolbar is the defacto way to edit CSS it seems. But with it, your background images dissapear as soon as you click "edit css"... so it's not my favorite.

Here is a way to copy your css edits made with the inspector that works. The down side is you'll loose all of your comments and formats like manual indents.

First make all of your css edits like normal with the inspect button. Then click the CSS tab (second row). Now choose the css file(s) you edited (probably template.css but you'll have to do some research if you don't understand) from the top row, to the right of the edit button.

Do not click the "EDIT" button. You then copy the css you see there and paste it into your template's css. Hint: if you choose select all (ctrl/cmd A), you will also copy firebug's debug code and all HTML for some strange reason. But if you manually highlight the whole whole thing (no ctrl-A), you'll get what you need.

Choosing the "EDIT" button for css is a whole other way to work. But choose it, and you'll loose all the changes you made using the inspect button. For some reason, it work work together with that (as far as I can tell). But you CAN make on the fly edits, with background images...unlike the web dev toolbar... and then neatly copy it at the end, comments and all!

If anybody knows a way to make it play nicer, I'd love to hear your incites.

You cannot save changes with Firebug you should greasemonkey to do so

You can't save them, but you can copy and paste. I do it all the time and it works well...although an extra step of course.

But I'd be curious to know how greasemonkey can help. Would you mind explaining that a bit?

I wish I had read that before it happened to me that my background pictures disappeared after making changes in the css file with Webdeveloper and Firebug. It happened to me last night after downloading those plug ins and I hoped them to make things a bit easier on me since I am fairly new to all of this. I was trying to modify a few things in my Virtuemart pages.
Anyway, have cried enough about it and now I would like to know how I will get my addtocart and notifyme + a few other buttons back. Will I just have to rewrite it in the theme css file?
I was so pissed last night that I even wouldn't look at the css file anymore, what maybe got deleted or changed.
Any help or advice will be greatly appreciated.
Thank You
verdecove

@unleash.it:
i recently released a firebug addon at the mozilla addon sandbox which can do what you are looking for:
https://addons.mozilla.org/de/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 here:
http://www.strebitzer.at/projects/firefile/docs/

I would appreciate any bug reports, comments, ratings, discussion on this,

thanks in advance,
Tobias

I found out the file I need to modify but it's like a subdirectory of the index.php (...index.php/AdvSearch.html), I really need to modify that file but it's like is non existent, what do people mean by "buried deep", I'm confused, can I find that AdvSearch.html or not? THANKS!

Tobias, awesome! I've just installed it and will check it out when I have time. Can it work on a local host?

Two suggestions. I noticed for a remote server a php script has to be uploaded. How about creating an FTP method instead? That would probably make it be an easier and quicker to get connected...especially when working with multiple sites. Also from the looks of it (again, I haven't tried it yet so maybe I'm wrong), all edits are immediately live? While sometimes that could be fine (no problem when working locally), if working on a live site I mostly end up doing a lot of experimentation before I want to commit my changes. So if there were a way to preview all changes locally first, then click a button to apply... or even better have the option to do either... that would be perfect.

Great time saver for those of who are lazy (or want to preserve our wrists from carpal tunnel...).

the apprentice and jbwebsites, why would you need to find the html? The html you get in your browser has been parsed (the php parts have been processed). It's not anything you'd want to put back into your site. This is all about css unless maybe you're talking about the markup from the articles themselves.

Hi unleash.it,

I said I need to find the html because pointing my mouse to some strings I want to delete (namely:
<td width="20%" valign="top" align="left" style="outline-color: rgb(255, 0, 0); outline-style: solid; outline-width: 1px;">Weekend:</td>)

it says that these files are located in ...index.php/AdvSearch.html, but that's not true, is it? I want to find where those d^mn lines are so that I can delete them. That's why I'm looking for the html.

Tobias extension's instructions are a bit too technical for me, and I'm not sure it would work on a local machine either...

Well I don't know where the temporary file is, but I'd assume somewhere in your user folder. I still don't know why you'd want to go there though. Like I said, you wouldn't want to take anything from that and put it in your Joomla site. Actually deleting that line depends on where its coming from: article vs. component vs. your template. You should go to the proper place on your Joomla site and deal with it (maybe in the file system, maybe in the back end depending).

I've been trying to figure this out too, finding and editing CSS is so easy.. If I come up with something I'll post it tonight..

So what I found out (so far) is that Firebug cannot know the name of the source file.. The Net tab will show the input command to be parsed by the browser, while the html tab shows the parsed html output.. Only the server actually knows the name of the file that has the input code.. You could copy that code from the net tab, take an educated guess at which file it would be (ie; template.php, index.php, etc..) and do a search for the code found on the net tab - which would lead you to the html code..

Easier said than done, I actually followed this procedure on quite a few files but some are more difficult to find than others and I'm stuck on two lines I want to modify but just can't. I'm working locally, so I'm the bl00dy server, can't that help?

Use Backfire. It's an open source solution that sends CSS changes back to the server and saves them.

http://blog.quplo.com/2010/08/backfire- ... n-firebug/

If someone takes the server example implementation included in the package (example is .NET) and ports it to Joomla, it can be a Joomla plugin that works out-of-the-box. Launching Backfire is then a matter of including the javascript, by hand, by setting, by bookmarklet or perhaps someone turns it into a firebug plugin (which is easy since the Backfire client is mere javascript).

Hope this helps!

- Martin (@mrtnkl on twitter, feel free to PM me a question)

You arent able to save any changes you make in firebug. however what you could do is to copy the code you have edited in firebug then replace it with the current code that you wanted changed.

Hope that helped.

_________________
Signature rules: Literal URLs only - viewtopic.php?f=8&t=65

I am able to save HTML edits by right clicking on the upper HTML section of the screen, then choosing the destination directory. I am using FIrefox on a Mac mini.

I find Firebug to be an extremely useful tool for making small edits/updates to web pages.

I don't think this is possible. You can not save changes in firebug.
You can copy your code yes and past it in your html doc but saving changes in Firebug itself can not be done.

I do this all the time.

I make changes to the original page using Firebug, then close firebug, then right click on the changed page, and save it back to the original directory, copying over the original file.

It's quick, easy, and very convenient.

Hi All,
Firebug is html DOM inspector tool.
Also in joomla there html and css code is coming from different php files.
There is no easy way out here. You need to know joomla and must pay attention to which css files we are making changes.
As css follow the hierarchical rules many times we are making change in several css files at a time using firebug, just keep note in your mind what file you are making changes and make the same changes in the actual css files.

Below is the process i normally follow and it works wonder:
1. Inspect the code using firebug.
2. Make the css changes using firebug.
3. Open the respective css file in Notepad++
4. Make change in the respective which is open in Notepad++
5. Save the file
6. Do Ctrl+F5 on the browser/FF and you will see your changes.

Doing Ctrl+F5 is important to clear the browser cache, else there is changes that you will not see your changes.

Hope that was helpful. If any one have any other more efficient method please share.
As this will help many joomla designer and programmer.

_________________
Joomla Rocks
Thanks and Regards, Richard Philips
http://www.htmltojoomla.com
HTML to Joomla Conversion | Convert Static HTML website to Joomla Website

ditto that.
A save function would be great though!

_________________
To err is human, to forgive divine. Punch a baby!
http://basementdetective.com
http://moldremediation101.com

Hi All,
Is there any other Addon Similar to FireBug,
I am happy with firebug but still would like to check what other Joomla developers are using.

Addons I use when developing joomla website are :
1. Firebug
2. MearureIt: for measuring height width of any thing
3. Color Zilla Color Picker
4. JSView: for checking which Javascript and CSS files are getting used in the particular website/project

Please share your addons!!

_________________
Joomla Rocks
Thanks and Regards, Richard Philips
http://www.htmltojoomla.com
HTML to Joomla Conversion | Convert Static HTML website to Joomla Website

I use the Opera browser with Dragonfly for all the above. Dragonfly is standard in Opera and you do not have to install any add ons. Just right click on the page and select "Inspect Element"

You can use cssUpdater! It consists of a FireFox add on and a desktop application that acts as a socket server. When you edit your css in FireBug, all changes is sent to the server on localhost in which you can choose to sync all your changes or only a few.

So your workflow would be:
1. Edit your css in FireBug until satisfied
2. Sync your changes in cssUpdater with one click
3. Reload your page to see that the changes is preserved!

It works on both OS X and Windows and with your favorite editor or IDE since it only cares about the css source files.

Read more and download it at the homepage: http://www.cssupdater.com

Hope this helps!

Hi Jhonte, are you the developer of cssupdater? I didn't see a forum at the site so if it's you, I just thought I'd mention here that I had some problems when I tried to sync up more then one file at a time. The first file syncs fine (and my css file looks fine afterward) but the second won't. In case it makes a difference, they are both called template.css, but they are in different directories.

Other than that, it seems very promising. Every so often I check around to see if someone or something has come up with a way to save from firebug without hassles like comments getting stripped out, etc. Your solution takes a little setup, but if it works it's going to save a lot of people a lot of time!