Part 1 of 2: How to use FireBug to edit CSS Styles in WordPress, Drupal, Joomla & websites TUTORIAL
PART 1 of 2 – I show you how you can use the awesome open-source project FireBug plug-in/extension to edit CSS Styles and customize the layout and theme of your website, whether in a CMS (Content Management System) like WordPress or Drupal, to HTML or any other web-language. A good point about using CSS is that once you master it, you can control just about anything on your website: font styles, website appearance, backgrounds, and more! When mastered correctly, you will be much closer to having cleaner markup, which means – if built correctly – your site can be compliant a much longer time with the ever-changing web-world and your site will perform much better than a site that is developed using ‘junk standards’ (like using tons of ‘inline styles’ – gross)! : ) HELPFUL LINKS BELOW TO ASSIST IN THIS PROJECT IF YOU ARE NEW: OPEN SOURCE FIREBUG DOWNLOAD: getfirebug.com OPEN SOURCE HTML EDITORS (choose your preferred program): kompozer.net – OR – bluefish.openoffice.nl OPEN SOURCE FTP PROGRAM: filezilla-project.org (download the ‘client’) WATCH PART 2 – www.youtube.com Please address any questions you may have on this video – thanks!
Written by - Visit WebsitePosted in Wordpress Tutorial Videos
October 14th, 2012 at 1:12 pm
if you want to start creating a professional and profitable website, I have the solution for? you. This is the absolutely the best wordpress training you’ll find. get it now while it’s still available. You can watch a sample video from this training…. just go to: ===> /watch?v=FsnhDl9TSpg <=== or visit my channel
October 14th, 2012 at 1:12 pm
I’ve a problem…when I try to put a new property in the CSS it doesn’ t allow me. I can only change sizes, colours… but I cannot create a new propery into the CSS. Am I doing something wrong?? I’ ll appreciate any suggest! Thank you!
October 14th, 2012 at 1:12 pm
Thanks : ) – Also, this is FireBug’s way of telling you where the START of your changes are…The ‘line-number’ FireBug shows is referring to is the default style name (example: CSS Style possibly named ‘theme-background’ could be situated at line-number 25 and has a LOT of variables associated with it like ‘color’, ‘background-image’, align, etc.)…From there,? you’re able to look at the list of variables & change whichever one you wish…I hope this helps…And my apologies if it’s confusing..
October 14th, 2012 at 1:12 pm
many thanks,its been very helpful. i m learning a lot. I can download any file from my website server by dragging on to my? computer (FileZilla) but cant transfer these files to the Dreamweaver page. I can open any file on Dreamweaver from Computer by using File-open options, but the no. of lines that you have shown on firebug and the dreamweaver dont show the same no. and in the same position. do i need to configure the firebug or dreamweaver to resolve this?
October 14th, 2012 at 1:12 pm
Thanks Angela..Much appreciated – I try my best to cover any topic I make tutorials/videos for in-depth to benefit novices, beginners, and professional alike: you made my? day with your nice comment : ) – Have a good day & thanks again!
October 14th, 2012 at 1:12 pm
You’re good, man. There? are so many Firebug “tutorials” that do nothing more than waste our time…you got it right…thank you.
October 14th, 2012 at 1:12 pm
One more? thing… I almost didn’t watch this video ’cause I kept thinking, “Oh he will probably be like all the rest.” 🙂
October 14th, 2012 at 1:12 pm
I’m at 6:38 in your video, but I had to stop it to say, “Thank you.” So far you have explained this better than any video that I’ve seen, and I’ve seen a lot. So many people bypass explaining that you have to click the firebug once in? order for the element to be inspected really good once you get where you want to be. I love how you showed that once you click the firebug once to inspect, you can move the cursor around, but nothing happens. That is what I’ve been hunting for! Thanks.
October 14th, 2012 at 1:12 pm
How about using text editor with a Firebug-like UI for tweaking css and? html lively?
That way you don’t have to do the “manual saving of the changed css” thing.
That’s LIVEditor – the only text editor built after this concept, it’ll be in beta soon 🙂
October 14th, 2012 at 1:12 pm
This is? a GREAT video!
October 14th, 2012 at 1:12 pm
Americanii creeaza website-uri, olandezii construiesc masini zburatoare, italienii fac autostrade moderne..Politia din Satu Mare Romania…manipuleaza calculatoarele, intercepteaza telefoanele, manipuleaza oamenii…SISTEM DICTATORIAL FASCIST…tiganii Uniunii Europene…ROMANIA…tara de gunoaie?
October 14th, 2012 at 1:12 pm
I finally figured? it out, thanks for the help, much appreciated 🙂
October 14th, 2012 at 1:12 pm
Very cool!…I love it – great tool to help make editing speedier: I think I’d refrain from recommending to a novice though until they learn to back-up; only drawback I see is that if you make an edit and save, you? would have to be religious about back-tracking (a full understanding of CSS for sure) – this is an excellent tool for professionals; thanks for sharing : )
October 14th, 2012 at 1:12 pm
Try using Firebug with Firefile. Direct save to your server or localhost. Be careful? to know what you’re doing or as a precaution backup the css files. Saves me weeks of time!
October 14th, 2012 at 1:12 pm
Much appreciated – I’m glad you found it useful…Have an awesome day and thanks? again! ~ Roger
October 14th, 2012 at 1:12 pm
Very useful information, exactly what? I was looking for… Thanks
October 14th, 2012 at 1:12 pm
Hi Darkc44 – That makes my day; glad I could help you out : ) …I’m always trying to find out ways to make things easier for everyone…Feel free to pass this along to anyone you think might also benefit from? it…Have an awesome day – I will be posting frequently…~ Roger
October 14th, 2012 at 1:12 pm
I’ve read this Dreamweaver book, I’ve asked for help on different forums, watched a lot of outdated youtube videos but your 14 minute video was more helpful then any other method! you just made web design so much easier for me. Truly appreciate? it!
October 14th, 2012 at 1:12 pm
Thank you very much for the compliment: I love both editors (Chrome’s & FireFox’s); I’m glad this? video has helped some people – have a great day! : )
October 14th, 2012 at 1:12 pm
Thanks ,? I´ve already used the Chrome editor, but I think that this (firebug) it is more precise.
good technic.