Using Firebug to make changes.....

I'm finally getting the hang of using firebug to find where codes are located and make changes to things. What I don't know now though is how to save those changes and upload them to the server from there.

Also, I just realized that the changes I made to my specific page will not necessarily change on all product pages, correct? If not, how would I find where to go to make it appear this way on all product pages that are created?

Remember that the changes you make while using Firebug are OFF-LINE changes.

For example, when working with CSS, You need to COPY the new code you create, open the css file on your server, and PASTE in the changes.

What I usually do is copy the entire off-line stylesheet, and create a NEW stylesheet.css. Then I back-up the original stylesheet on the server and FTP the new one.

fairestcape:

Remember that the changes you make while using Firebug are OFF-LINE changes.

For example, when working with CSS, You need to COPY the new code you create, open the css file on your server, and PASTE in the changes.

What I usually do is copy the entire off-line stylesheet, and create a NEW stylesheet.css. Then I back-up the original stylesheet on the server and FTP the new one.

Ahhhh yes, that's right! I'm a little confused about what you are saying regarding backing up the original and FTPing a new one though.

I have found my stylesheet in filezilla. Are you saying that I should now create a directory under that and paste the new CSS from firebug? Or open that stylesheet and paste the new css from firebug directly into it? Then how would I save it? Or are you suggesting saving the current CSS stylesheet into a word document or something similar?

Sorry for my ignorance. I'm really trying to figure this out!

When you open Filezilla (or any FTP program) you will see TWO display panes.

In a default situation ONE of these panes displays folders and files on your LOCAL computer, and the other shows the files on the REMOTE computer.

The point about backing up is academic... I'm in the habit of making sure that BEFORE I commit any edits to a file (and that may include a completely NEW file) I make a backup of the original. So if I make a stupid mistake (like FTP a *.css file in Binary instead of ASCII), then I have a backup of the original...

... One thing you learn quite quickly when fooling with php files is to make backups BEFORE you tinker... (in my case, through bitter personal experience!)

Got it. Thanks =)

What am I doing wrong here? I made the changes in firebug, but I made them in the HTML. I thought that if I then clicked to the stylesheet that would keep those changes. I uploaded the new stylesheet, but it didn't change the things I did in the HTML portions :huh:

You must use a PLAIN TEXT EDITOR to edit CSS and PHP files. You are not editing "HTML".

There are some good FREE Plain Text Editors on the WWW.

Such as CRIMSON EDITOR and NOTEPAD++ (not notepad, but notepad++)

fairestcape:

You must use a PLAIN TEXT EDITOR to edit CSS and PHP files. You are not editing "HTML".

There are some good FREE Plain Text Editors on the WWW.

Such as CRIMSON EDITOR and NOTEPAD++ (not notepad, but notepad++)

Oh goodness, there's SO much to think about!

So the HTML on firebug is useless?

Going to download one of those now and see what I can do with it....

Ok, now I'm TOTALLY confused! Does this not work with the firebug at all? Do I copy and paste something from FB into the CE and go from there? HOW do I use these together?

1. Using your FTP program, download a copy of your stylesheet to your local computer. Rename it to something (like stylesheet.old).

2. Using Firefox and Firebug, make your changes.

I don't use Firebug. I have the web developer addon. I think they're about the same.

3. right click on the stylesheet in Firebug. You'll get a little popup menu. Click on "select all". Everything in the stylesheet window will be highlighted. Press ctrl and c (letter c) on your keyboard at the same time.

4. Open a new file with either Notepad++ or Crimson Editor.

5. Paste what you copied into it (press ctrl v (the letter v)).

6. Save the file as stylesheet.css

7. upload (FTP) it to your website and overwrite the stylesheet.css that you downloaded in step 1.

Your changes should be permanent.

Thank you for the very clear, step by step instructions!

I want to make sure I'm clear though. The changes I'm making, I'm making in the HTML of Firebug. When I then switch to the CSS page, it seems that the changes I've made so not "hold". How then do I get them to stay?

I do have the Web Developer as well, but I was able to catch on to the firebug more easily which is why I've been working with that one. If the web developer would be better I can certainly try that, but the way fairestcape made it sound I could not use either of those....

I'm not familiar with Firebug. Making changes in the html is pretty much useless since Zen Cart is php which builds the html pages on the fly depending on what the user requests.

afo:

I'm not familiar with Firebug. Making changes in the html is pretty much useless since Zen Cart is php which builds the html pages on the fly depending on what the user requests.

Would I be able to do this with the web developer? I've been searchnig google for some easy answers on how to use it but so far I'm not having a whole lot of luck.

IF you're looking to make changes to the layout or whatever, the HTML source code is useless. As stated above, the pages generated from php files and the output is in HTML.

So, messing with the HTML will do you no good. What you shoud do is load a copy of Zen cart to your local computer, using xampp or something similar. Find the php or stylesheet files that you want to change/edit, save, and open a browser to see your changes. That way you are not messing with the "live" shop in the web server.