Question: How can I make the most out of Firebug or Mozilla's "Inspect Element"?

2 things come to mind, as I have do this often.

1) I never ever ever make edits on a live server. It's too much pressure to get it right. It's too high risk. I use FTP clients to move files to servers (Cyber Duck on my Mac, and FileZila on my work PC). They also have the option to download files from the production server to my local machine.

So if I need to make edits to a file that is live, I download that file and all of it's asset files to my local machine, open it in my code program (In my case that is dreamweaver CS6), make my edits and view them on my local server, test them in all 5 major browsers, and once I'm happy with my edits, I upload those files back to the production server and replace the file that is already there.

Worst case is I have to copy the code from the production server file and paste it into a fresh document on my local machine to work with the code there.

2)If I'm working with a framework, plugin, theme, etc, I really try to avoid making changes to the actual CSS file. Take advantage of CSS's cascading effect, and create a new CSS file that targets those elements you want to change, write your CSS, and let that file override the CSS file that came with with your are working on. Yes, firebug gives you the selector name and line number, but you still my have 6,000 lines of CSS and who wants to me jumping around making edits. Plus, if you mess up, or your edits change something else you weren't expecting it too, it's very easy to delete or undo your code that caused the issue since your edits were made in a separate file, not the CSS file that came with the framework. It's a win-win for you. Safer and faster.

That's how I work anyway.

brilliant. I really appreciate your input kevin

You're welcome.

BTW, both pieces of advice come from me breaking them and learning the hard way its no fun to fix it.

I was making some edits live on a micro site, and I completely jacked it up. Thankfully it was a "practice" live site.

The other I was editing a 6,500 line CSS file to make small changes, and I completely screwed up the order of the elements on the page. I thought ctrl+z would take me back far enough to undo my mistake but it didn't work....yeah...that was fun.

Kevin Korte - Hey Kevin. I am in the process of following your advice and have a few more questions. Our site is hosted through godaddy and I've been using their interface for dealing with the server files. It looks like this ( )

What steps/programs should I take/download to get that same joomla site copied to my local machine. I am currently downloading XAMPP but am not sure what to do next. I want it so that I can copy our current "live" site to my local machine and then make changes in there using coda. After that I would take that "test" and replace the affected files/stylesheets etc.

I am still very new to all of this so I appreciate any and all information!

If you're doing XAMPP, you must be on Windows. I use Filezilla on windows as an FTP. You'll need a FTP account on godaddy. If you're not sure how to set that up, GoDaddy support should be able to do it, or walk you through the process. The exact steps can change from host to host.

Once you have an FTP account, and you have downloaded a FTP program like Filezilla, you can create a new connection to your godaddy server using the FTP credentials from godaddy.

If you do it successfully, you should see your godaddy server files on the right side of your screen, and your local host files on the left. You can than just download the entire root folder contents from godaddy with Filezilla. You just right click on your root folder, and the menu that pops up will have a download option. You click that and it'll pull a copy of all of your web files to your local hard drive.

You move those files into your XAMPP root directory, fire up the Apache server XAMPP will install using the XAMPP control panel, and you should be able to navigate your site on your computer as if it was live in a web browser. Any changes made to those files will only be visable to you until you push them back to your godaddy server using the same FTP program.

Kevin Korte I love you dude! haha thank you.

I use filezilla on my mac and i just got transmit (better looking interface, im figuring out any additional features over fz as i go along)

I'll find an XAMPP equivalent for macosx and follow what you said. It seems dead simple, its just easier to ask every possible question so there are no major speed bumps.

Thanks again Kevin!

My personal computer is a Mac, and I use MAMP on it. Works flawlessly, love the program, the regular version is free (what I have). I would highly recommend MAMP for Mac.

Transmit works! I also use CyberDuck, they all should have the ability to download files from your live server just as easy as they can push files to it.

Kevin Korte

Just found this during my journey.

http://www.cssupdater.com/

"Lets you live sync and save your FireBug css changes with one click."

That a great tool. I'll have to try it and see how it works! Thanks...great find!