Hi, I don't know if what I'm trying to do is possible, so I thought I'd come here and find out before i waste any more of my time.

I have a blog (blogger) of which I have full access to the templates html/css. I was looking for an alternative comments system and found one at DISQUS. The method of installing their widget was thus: I downloaded my blog template before uploading it to their site. Their wizard then installed the comment widget and presented me with the ammended template which I simply pasted back into my template's html.

I'm now using the 'inspect' function (on the Firefox's tool Firebug) to get the class names etc of all the different elements that go to make up the DISQUS comments system, and then using the <style> tag to customize the look.

I've discovered that I can customize certain elements, but am having trouble with others. For instance, I discovered that the class name for a little drop-down options box was 'dsq-item-sort'. I didn't want this, so used

.dsq-item-sort { display: none; }

to hide it. This did the trick.

I now want to customize the look of the 'submit comment' button. I used Firebug to hover over the button and it highlighted the following in the coding

<div class="submit-footer"><input id="default-submit" class="submit" type="submit" value="Post as OurJud"/>

<input id="custom-submit" class="submit" type="submit" value=""/>


</div>

I have tried styling this button with the following

.submit-footer
.default-submit
.submit

But none of them made any difference.

Am I trying to acheive something that isn't possible?

Sorry for such a long-winded question and thanks in advance.

Try this.
input[type=submit] {color:#fff;}

If that doesn't work, define more specific
.submit-footer input[type=submit] {color:#fff;}

If you want to view all class and id's that are relevant to an element use the web developer add-on for Firefox. Use Outline - Current Element

Even better tool - use the Firebug extension, it will easily show you ALL of the styles in the cascade that are affecting any given element.

Thanks both of you.

Geek, I tried both your suggestions with {display: none;} just as a tester to see if it worked, but neither of your soloutions made a difference.

I've now discovered a custom css page on the website from where I got the comment widget, which says that I have to use an external style sheet to style some elements. Does that mean I can't do what I want without using an external style sheet?

You should be using external stylesheets anyway, so all you'd have to do is add another linked stylesheet to the pages.