Part 2 of 2: How to use FireBug to edit CSS Styles in WordPress, Drupal, Joomla & websites TUTORIAL

PART 2 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: http://getfirebug.com/

OPEN SOURCE HTML EDITORS (choose your preferred program): http://kompozer.net/ - OR - http://bluefish.openoffice.nl/index.html

OPEN SOURCE FTP PROGRAM: http://filezilla-project.org/ (download the 'client')

WATCH PART 1 - http://www.youtube.com/watch?v=6eTW8-C6_gk

Please address any questions you may have on this video - thanks!

Category:

Education

Tags:

• Tutorial
• CSS
• WordPress
• Joomla
• Drupal
• CSS Styles
• FireBug
• HTML Editor
• Content Management System
• CMS

[DynamicoDesigns]

I haven't developed in Drupal for a couple of months, so I might be lagging a bit, but from what I recall, Drupal likes to (by default) compress your style-sheets (module, theme, etc.) so they are cached (for speed). Within the Drupal Admin Interface, you would need to go to 'Site Configuration' > 'Performance' > then from there, UNselect 'CSS Compression Settings' area - when you are live again, turn this on. I believe this 'might' be the issue...

[orion9k]

fast feedback I must say :)

aight, mouz dot web44 dot net (temporary url)

The issue is the space between my view-content-block at the bottom with the slideshow pictures and the footer of my page... I've tried solving this with the view/block settings with no success..

I'm btw new to all this but I understand some basics behind html, css etc.

[DynamicoDesigns]

@orion9k I think I got it: I would put this code just UNDER border: 0 none; (really doesn't matter where though) --> margin-top: 3px; <-- - in the 'system.theme.css' file (avoid the '?lvxj8r). From here, you will see the slideshow flush with the footer border. I hope this helps - let me know if there are any issues (heading to Best Buy right now ; )

[orion9k]

Firebug is not really giving me any exact link to area of content and for the most it's linking most content as mysite dot com/dir/filename dot css?lvxj8r which doesn't even exist on my ftp/dir...

[DynamicoDesigns]

@orion9k Hmmm...I'd be happy to briefly check out your page and view it using my firebug; just provide me the link to your website, what area you're pointing at on your site and I can see what is the issue...There could be a number of possibilities for this happening...Hope I can help out a bit...

[orlandoescape]

Thanks for such a great tutorial!!! Great job!!!

[DynamicoDesigns]

@orlandoescape Thank you - much appreciated...Very glad I could help out : )

[orion9k]

hmm nothing happens when I change or add anything into the "system .theme .css" file, even deleting all codes in the file, nothing changes on my page. Do I need to reload my theme or something?

[orion9k]

Any advice would really make my day :O oh and btw. good tutorial for those who can find their .css files hehehehe :)

[orion9k]

Yea this seems really easy mode but one major problem I got with my drupal and using firebug is the weird .css locations from firebug that doesn't even exist on my ftp :S

Take this div.id on my site that I want to change:

div id="views_slideshow_cycle_teas­er_section_slider-block" class="views-slideshow-cycle-m­ain-frame views_slideshow_cycle_teaser_s­ection" style="position: relative; width: 697px; height: 349px;"