The Joomla! Forum ™





Post new topic Reply to topic  [ 48 posts ]  Go to page 1, 2  Next
Author Message
PostPosted: Tue Mar 04, 2008 7:21 pm 
User avatar
Joomla! Guru
Joomla! Guru

Joined: Wed Feb 20, 2008 6:50 am
Posts: 644
Location: Canada, Montreal
When editing in Firebug what is the easiest way to save or implement the changes made??

_________________
Can God help us?
Marketing, SEO, Web development - Powered by Joomla!
http://www.grafcomm.ca/


Top
 Profile  
 
PostPosted: Tue Mar 04, 2008 8:50 pm 
Joomla! Enthusiast
Joomla! Enthusiast

Joined: Wed Feb 22, 2006 12:20 pm
Posts: 206
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


Top
 Profile  
 
PostPosted: Wed Mar 05, 2008 12:06 am 
Joomla! Virtuoso
Joomla! Virtuoso

Joined: Sun Apr 16, 2006 12:20 am
Posts: 3193
Location: 127.0.0.1
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


Top
 Profile  
 
PostPosted: Wed Mar 05, 2008 2:07 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Wed Aug 08, 2007 1:53 am
Posts: 6
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!


Top
 Profile  
 
PostPosted: Wed Mar 05, 2008 4:48 am 
User avatar
Joomla! Guru
Joomla! Guru

Joined: Sun Nov 26, 2006 10:46 pm
Posts: 658
Location: New York
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.


Top
 Profile  
 
PostPosted: Wed Mar 05, 2008 2:59 pm 
User avatar
Joomla! Guru
Joomla! Guru

Joined: Wed Feb 20, 2008 6:50 am
Posts: 644
Location: Canada, Montreal
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????

_________________
Can God help us?
Marketing, SEO, Web development - Powered by Joomla!
http://www.grafcomm.ca/


Top
 Profile  
 
PostPosted: Thu Jan 01, 2009 2:52 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Thu Jan 01, 2009 2:51 am
Posts: 1
I'm having the same problem. I don't know which file to edit. Can someone please help?


Top
 Profile  
 
PostPosted: Thu Jan 01, 2009 8:41 pm 
Joomla! Explorer
Joomla! Explorer

Joined: Wed Dec 12, 2007 2:40 am
Posts: 268
Location: Frisco, CA
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.


Top
 Profile  
 
PostPosted: Thu Jul 23, 2009 2:00 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Thu Jul 23, 2009 1:56 am
Posts: 1
You cannot save changes with Firebug you should greasemonkey to do so


Top
 Profile  
 
PostPosted: Thu Jul 23, 2009 8:57 am 
Joomla! Explorer
Joomla! Explorer

Joined: Wed Dec 12, 2007 2:40 am
Posts: 268
Location: Frisco, CA
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?


Top
 Profile  
 
PostPosted: Thu Aug 27, 2009 6:23 pm 
Joomla! Apprentice
Joomla! Apprentice

Joined: Thu Aug 27, 2009 5:45 pm
Posts: 23
Location: Texas
unleash.it wrote:
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.



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


Top
 Profile  
 
PostPosted: Wed Dec 02, 2009 10:40 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Sun Sep 30, 2007 2:33 pm
Posts: 1
@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


Top
 Profile  
 
PostPosted: Fri Jan 15, 2010 7:43 am 
Joomla! Guru
Joomla! Guru

Joined: Wed Nov 18, 2009 3:53 pm
Posts: 581
jbwebsites wrote:
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!


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!


Top
 Profile  
 
PostPosted: Fri Jan 15, 2010 11:04 pm 
Joomla! Explorer
Joomla! Explorer

Joined: Wed Dec 12, 2007 2:40 am
Posts: 268
Location: Frisco, CA
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.


Top
 Profile  
 
PostPosted: Sat Jan 16, 2010 9:22 am 
Joomla! Guru
Joomla! Guru

Joined: Wed Nov 18, 2009 3:53 pm
Posts: 581
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...


Top
 Profile  
 
PostPosted: Mon Jan 18, 2010 8:20 pm 
Joomla! Explorer
Joomla! Explorer

Joined: Wed Dec 12, 2007 2:40 am
Posts: 268
Location: Frisco, CA
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).


Top
 Profile  
 
PostPosted: Tue Jan 19, 2010 2:20 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue Nov 24, 2009 1:14 am
Posts: 15
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..


Top
 Profile  
 
PostPosted: Tue Jan 19, 2010 2:48 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue Nov 24, 2009 1:14 am
Posts: 15
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..


Top
 Profile  
 
PostPosted: Tue Jan 19, 2010 7:31 am 
Joomla! Guru
Joomla! Guru

Joined: Wed Nov 18, 2009 3:53 pm
Posts: 581
XavierSPL wrote:
...take an educated guess at which file it would be


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? :)


Top
 Profile  
 
PostPosted: Fri Sep 03, 2010 8:59 am 
Joomla! Fledgling
Joomla! Fledgling

Joined: Fri Sep 03, 2010 8:55 am
Posts: 1
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)


Top
 Profile  
 
PostPosted: Sat Sep 18, 2010 12:49 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Sat Sep 18, 2010 7:54 am
Posts: 4
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


Top
 Profile  
 
PostPosted: Thu Oct 07, 2010 6:09 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Thu Oct 07, 2010 6:05 pm
Posts: 2
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.


Top
 Profile  
 
PostPosted: Sun Oct 10, 2010 8:20 am 
User avatar
Joomla! Explorer
Joomla! Explorer

Joined: Mon Mar 01, 2010 7:29 am
Posts: 306
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.


Last edited by MEAT1 on Sun Oct 10, 2010 2:54 pm, edited 1 time in total.

Top
 Profile  
 
PostPosted: Sun Oct 10, 2010 1:37 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Thu Oct 07, 2010 6:05 pm
Posts: 2
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.


Top
 Profile  
 
PostPosted: Mon Nov 01, 2010 2:20 pm 
User avatar
Joomla! Intern
Joomla! Intern

Joined: Thu Sep 09, 2010 6:20 pm
Posts: 52
Location: LOS ANGELES, CA 90015 UNITED STATES
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


Top
 Profile  
 
PostPosted: Wed Nov 24, 2010 6:13 am 
Joomla! Apprentice
Joomla! Apprentice

Joined: Tue Oct 12, 2010 8:21 pm
Posts: 14
Location: DC
arthurhanlon wrote:
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



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


Top
 Profile  
 
PostPosted: Wed Nov 24, 2010 7:12 am 
User avatar
Joomla! Intern
Joomla! Intern

Joined: Thu Sep 09, 2010 6:20 pm
Posts: 52
Location: LOS ANGELES, CA 90015 UNITED STATES
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


Top
 Profile  
 
PostPosted: Wed Nov 24, 2010 7:36 am 
Joomla! Master
Joomla! Master

Joined: Mon Oct 27, 2008 9:27 pm
Posts: 18022
Location: Akershus, Norway
richardphilips wrote:
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



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"


Top
 Profile  
 
PostPosted: Sun Jan 02, 2011 1:11 pm 
Joomla! Fledgling
Joomla! Fledgling

Joined: Sun Jan 02, 2011 1:05 pm
Posts: 3
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!


Top
 Profile  
 
PostPosted: Mon Jan 03, 2011 7:26 am 
Joomla! Explorer
Joomla! Explorer

Joined: Wed Dec 12, 2007 2:40 am
Posts: 268
Location: Frisco, CA
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!


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 48 posts ]  Go to page 1, 2  Next



Who is online

Users browsing this forum: Renata Marcelo and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group