Joomla Templates Club 406,261 posts

[instantinlaw Friend instantinlawJoin date: February 2007Posts: 1646Downloads:6Uploads:28 Thanks: 68 Thanked: 210 times in 62 posts]

#129272

So you want to find out which bit of CSS code controls that header, etc. that you are working on, but where to start?

Well, you could post in the forums and wait for someone to tell you what to edit, or you can take matters into your own hands and blast through your edits.

How you ask?

Simple realy, all you have to do is install the Firefox web browser on your computer then fire it up.

Next click on Tools > Add-ons. Then click the Get Extensions link.

You might be wondering how this will help you edit your CSS file, but read on to find out….

Once on the Firefox Add-ons site you will see many great extensions which will help you with your web project, but we will focus on two of them for this tutorial.

One of the most popular is Firebug.

Close up of Firebug output.

Firebug is a very good add-on for viewing your css and div information and I highly recommend it, but…

One Add-on I find the most usefull is the Web Developer add-on.

Close up of the Web Developer output viewing the site css.

As you can see by the screenshot above, you not only get all the classes that control a cretain element of the page, but you also get the file it lives in.

Armed with this information it is very easy to navigate to the piece of code you want to edit.

Editing your css file is beyond the scope of this basic tutorial, but it is very easy to do with a little research and a good web editor like Dreamweaver, but you can edit the css code in a plain text editor in a pinch.

Well that’s it for this tutorial, but check this forum for more as I get some free time.

Oh, by the way, both add-ons are free to use.

These tutorials are made on my own time and server bandwith, so don’t forget to say thank you if you find them helpful. 😉
Good Luck! 🙂

10 users say Thank You to instantinlaw for this useful post

1. tempusserbia
2. Hung Dinh
3. aris
4. TomC
5. mae82my
6. Hieu Nguyen
7. mj1256
8. siwi2524
9. jowb
10. larryndeb

[tempusserbia Friend tempusserbiaJoin date: January 2008Posts: 270Downloads:0Uploads:5 Thanks: 29 Thanked: 32 times in 8 posts]

#251844

Since, I was having problems in start customizing my template CSS, these tools were and are still my favorites. One thing was amasing to me: If you change something in FireBug or in Web Developer edit mode, you will see changes immidiately.

Great shout instantinlaw. Thanks.

[instantinlaw Friend instantinlawJoin date: February 2007Posts: 1646Downloads:6Uploads:28 Thanks: 68 Thanked: 210 times in 62 posts]

#251845

Thanks for the tip tempusserbia. 😎

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#253497

<em>@tempusserbia 56920 wrote:</em><blockquote>Since, I was having problems in start customizing my template CSS, these tools were and are still my favorites. One thing was amasing to me: If you change something in FireBug or in Web Developer edit mode, you will see changes immidiately.
</blockquote>
Where the value of this tool really comes into play is for testing purposes on your own site – as opposed to having to upload the changes each time to see it. Plus, if you don’t like the change, you didn’t just overwrite it in your main file info – as the changes youmake in Firebug are not permanent.

It’s a fantastic tool.

[tempusserbia Friend tempusserbiaJoin date: January 2008Posts: 270Downloads:0Uploads:5 Thanks: 29 Thanked: 32 times in 8 posts]

#253749

For color picking, here is extension for FF:

[FONT=”Arial Black”]ColorZilla 1.0[/FONT]

With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily. And there’s more…

Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.

[instantinlaw Friend instantinlawJoin date: February 2007Posts: 1646Downloads:6Uploads:28 Thanks: 68 Thanked: 210 times in 62 posts]

#253768

tempusserbia;59288For color picking, here is extension for FF:

ColorZilla 1.0

With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily. And there’s more…

Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.

Another helpful post. Thank you tempusserbia. 🙂

[tempusserbia Friend tempusserbiaJoin date: January 2008Posts: 270Downloads:0Uploads:5 Thanks: 29 Thanked: 32 times in 8 posts]

#254326

Here is another usefull tool for FF (please, update your firefoxes to new version FF 3.0)

[FONT=”Arial Black”]Total Validator 5.2[/FONT]
by Andy Halford

Provides true HTML validation (HTML 2.0 to XHTML 1.1) using the official DTDs, plus added attribute checking. So you no longer have to put up with the limitations of the W3C validator (no type checking) and tools like HTML Tidy which interpret the standards incorrectly (they don’t use the official DTDs).

Also performs accessibility validation (WCAG, US-508), broken link checking, spell checking (5 languages), and takes screenshots using 32 browsers on Windows, Linux, and OS/X.
Works with:

* Firefox: 1.5 – 3.0.*
Total Validator 5.2

[tempusserbia Friend tempusserbiaJoin date: January 2008Posts: 270Downloads:0Uploads:5 Thanks: 29 Thanked: 32 times in 8 posts]

#254327

Also, when you upgrade FF to v.3., all above extensions are available: Web Developer, FireBug, Colorzilla, and Total Validator.

Be sure, when looking for them to check apropriate versions.

[instantinlaw Friend instantinlawJoin date: February 2007Posts: 1646Downloads:6Uploads:28 Thanks: 68 Thanked: 210 times in 62 posts]

#254488

tempusserbia;59961Here is another usefull tool for FF (please, update your firefoxes to new version FF 3.0)

Total Validator 5.2
by Andy Halford

Provides true HTML validation (HTML 2.0 to XHTML 1.1) using the official DTDs, plus added attribute checking. So you no longer have to put up with the limitations of the W3C validator (no type checking) and tools like HTML Tidy which interpret the standards incorrectly (they don’t use the official DTDs).

Also performs accessibility validation (WCAG, US-508), broken link checking, spell checking (5 languages), and takes screenshots using 32 browsers on Windows, Linux, and OS/X.
Works with:

* Firefox: 1.5 – 3.0.*
Total Validator 5.2

Another good post. Thanks tempusserbia.

[markb1439 Friend markb1439Join date: August 2008Posts: 124Downloads:0Uploads:1 Thanks: 14 Thanked: 34 times in 11 posts]

#264450

All very great tools. Firebug is a must-have.

[scotty Friend scottyJoin date: March 2008Posts: 2339Downloads:0Uploads:13 Thanks: 76 Thanked: 827 times in 595 posts]

#276892

I goto say, the new ‘Developer Tool’ [press F12] in IE8 wipes the floor with anything available to date, inc Firebug.

[instantinlaw Friend instantinlawJoin date: February 2007Posts: 1646Downloads:6Uploads:28 Thanks: 68 Thanked: 210 times in 62 posts]

#276914

scotty;87871I goto say, the new ‘Developer Tool’ [press F12] in IE8 wipes the floor with anything available to date, inc Firebug.

Sounds interesting. Thanks for the tip. 🙂

[bennitos Friend bennitosJoin date: May 2008Posts: 1717Downloads:0Uploads:39 Thanks: 39 Thanked: 474 times in 407 posts]

#276915

<em>@scotty 87871 wrote:</em><blockquote>I goto say, the new ‘Developer Tool’ [press F12] in IE8 wipes the floor with anything available to date, inc Firebug.</blockquote>

You can install de developer tool manuall in IE7 too, and IE6 aswell i think. Just standard in IE8 wich indeed is a good thing 🙂

[wombat1 Friend wombat1Join date: March 2010Posts: 117Downloads:0Uploads:1 Thanks: 38 Thanked: 11 times in 1 posts]

#336348

If you use a MAC, are not a hardcore coder and want to edit all your site’s css files without touching the code, you may be interested in a lil programme called – CSSEdit

Navigate to the site using CSSEdit, click on the xray button, click on the element you wish to edit, then use the GUI to edit. Makes creating or editing css a breeze.

Now if someone could just provide a method whereby css edits dont get wiped upon upgrading themes or components. I maintain 25 sites and the work involved could be significantly reduced if this could be done.

If there isnt a viable way, i would suggest to any venturing the path of developing client sites via CMS and theme as a starting point, to not invest much time altering the look and feel via css since all edits will lead to exponentially annoying upgrade woes. Therefore get a theme that already looks a lot like what you want. Sounds silly but it cannot be stressed enough. Its one reason why the first Joomla theme i have bought is from Joomlart.

[wombat1 Friend wombat1Join date: March 2010Posts: 117Downloads:0Uploads:1 Thanks: 38 Thanked: 11 times in 1 posts]

#336350

For those that prefer to use Safari, theres a Developer menu item that by default is hidden.

Access it by going to
preferences > advanced and selecting the check box at the bottom –
Show Develop menu in menu bar.

Enjoy

[Author]

Posts