Code:

 

$("css selector here").css("attribute here", "value here");

Code:

 

$("td.c_mark").css("background-color", "blue");

Reid

Nov 3 2009, 10:53 PM

To coincide with this tip, you can also get the Firebug add-on to test out CSS effects without having to edit the CSS each time and reload each time, which is much more time consuming.

In order to do this - and make sure you have firebug installed - simply click on the firebug icon. A box should open up. Click on the Console tab - you may have to use the down-arrow to enable it, though - and then you should see a blank box with a line at the bottom.

Then just use this layout in the line you can type:

Code:

 

$("css selector here").css("attribute here", "value here");

Then hit enter. Here's an example:

Code:

 

$("td.c_mark").css("background-color", "blue");

This picture is what the stuff looked like before I used the code, and this picture is what it looked like after I entered the code. I also included an example of where you would type the code in the second picture.

If you want to recall a line you've already used, then just press the up arrow when you have your cursor in the text line; it should recall the last line. You can press the up and down arrow multiples times to suit your needs.

This lets you try many, many combinations of fancy CSS stuff without having to reload the page eleventy billion times. Of course, don't forget to update your CSS in the end - firebug is a client-side change, which means it won't carry over if you reload the page.

tiptopolive

Nov 3 2009, 11:25 PM

Sweet. Is there a way to transfer the changes into the CSS without having to go in and edit the CSS manually?

Nicola

Nov 4 2009, 12:10 AM

Firebug...bugs me, lol. I have more space lengthways so I find it easier to edit the CSS in real-time using 'Edit CSS', rather than Firebug which adds to the height of the window instead.

Reid

Nov 3 2009, 10:53 PM

Here's an example:

Code:

 

$("td.c_mark").css("background-color", "blue");

This picture is what the stuff looked like before I used the code, and this picture is what it looked like after I entered the code.

OverTheBelow

Nov 10 2009, 12:41 AM

Reid

Nov 3 2009, 10:53 PM

Here's an example:

Code:

 

$("td.c_mark").css("background-color", "blue");

This picture is what the stuff looked like before I used the code, and this picture is what it looked like after I entered the code.

Damn, check me out on those photos!


Is there any way to edit two attributes at a time with firebug?

Code:

 

$("td.c_mark").css({"background-color":"blue", "margin-top":"-20px", "color":"green"});

Code:

 

, "attribute":"value"

Code:

 

$("td.c_mark, td.c_sig").css("background-color", "green");