Using CSS to customize javascript text

[rasmits]

I've got a couple lists in the form of javascript that I'd like to put on my site. Specifically, lists from Digg and del.icio.us. They work - the text shows up fine - but it's plain. I can't figure out for the life of me how to edit the colour, font, and size of the displayed lists.

I've gone to several CSS / HTML 'help me' sites but none seem to specifically address javascript text, so I'm hoping someone here can help me.

For example, here's the del.icio.us script:

<script type="text/javascript" src="http://del.icio.us/feeds/js/username?count=10;bullet=%E2%80%A2"></script>
<noscript><a href="http://del.icio.us/username">my del.icio.us</a></noscript>

Thank you!

[chris e boy]

While I can't see what the output generated from these feeds is, get yourself a copy of Firebug for Firefox and click the inspect button. Rollover the generated text and it should tell you what the class or id of the text is. You can then add a css rule for that class/id to format it.

If the elements do not have classes or ids put the script inside a div with a class or id and use something like div.myclassname p (assuming the element you want to format is a p tag) to format the element.

[rasmits]

It's actually just going into an iWeb 'Web Widget' thing.

[torifile]

Better than firebug, get CSSEdit. It's a fantastic app that anyone who does CSS should use.

edit: I don't think you'll be able to do anything with the text because it's getting code from another server. Even if you were able to style it, any styles applied by the (del.icio.us) server will override the changes. You could try enclosing the script tags in a span element and styling that class. It couldn't hurt.

[chris e boy]

Better than firebug, get CSSEdit. It's a fantastic app that anyone who does CSS should use.

As far as I know CSSedit is for editing CSS. Firebug is only a tool for debugging existing CSS including dynamically generated CSS such as that generated on the fly by JavaScript.

It's actually just going into an iWeb 'Web Widget' thing.

I've never used iWeb so I can't help you there. Sorry.

[torifile]

As far as I know CSSedit is for editing CSS. Firebug is only a tool for debugging existing CSS including dynamically generated CSS such as that generated on the fly by JavaScript.



I've never used iWeb so I can't help you there. Sorry.
It's great for editing CSS, of course, but it's also get a very cool "X-Ray" feature which allows you to see all the styles applied AND the stylesheets that applied them. If you have tried it yet, you need to.

[chris e boy]

Firebug does that too, but i'll certainly give it a shot

[torifile]

Firebug does that too, but i'll certainly give it a shot
It also let's you override the stylesheet with your own changes so you can see what they'd look like in addition to live previewing the changes.

[Brad]

It also let's you override the stylesheet with your own changes so you can see what they'd look like in addition to live previewing the changes.

Since we're playing the "me too" game, I'll mention that Firebug does this too. :lol:

[chucker]

CSSEdit is less vomit-inducing. So there.

If del.icio.us does happen to serve its own stylesheet, you can always override that with your own JavaScript, accessing the DOM.

[Brad]

CSSEdit is less vomit-inducing.

Well, duh! You'll get no argument from me.

[rasmits]

I don't understand anything like 'accessing the DOM'. I'm truly no CSS guru, so I'm probably going to have to be walked through a little bit of this...

[chris e boy]

CSSEdit is less vomit-inducing. So there.

You could always use the new inspector built into Safari 3, it does a lot of the same things but it looks a lot prettier.

[chucker]

You could always use the new inspector built into Safari 3, it does a lot of the same things but it looks a lot prettier.

The Web Inspector indeed keeps getting better.

[rasmits]

Alright, so if I was to use one of these fancy tools, what would I do with it?

[chucker]

You'd have to tell us what markup you get first.