CSS styles for Inline Javascript ?

[Mike]

I am trying to find the correct CSS definition to change the look of
my Javascript "onClick" buttons

I would like to override the default style, and style like TW buttons.

Original Post
http://groups.google.com/group/tiddlywiki/browse_thread/thread/cc102b4b5b2e6c60/5fcb21b95e2ec0a9?q=#5fcb21b95e2ec0a9

Thanks for any help !

Mike

[PMario]

hi

In my MPTW firebug says that it gets the

.viewer .button {
margin:
padding:
border:
}

.button {
color:
}

.a {
text-decoration:
}

.body {
font-family:
font-size:
}

hope this helps

On Feb 2, 2:34 pm, Mike <eris...@gmail.com> wrote:
> I am trying to find the correct CSS definition to change the look of
> my Javascript "onClick" buttons
>
> I would like to override the default style, and style like TW buttons.
>

> Original Posthttp://groups.google.com/group/tiddlywiki/browse_thread/thread/cc102b...

[Mike]

I don't have the colors right, and I have probably overused !important
but this is what I have so far

.jbutton{
color:[[ColorPalette::PrimaryDark]] !important;
background:none !important;
}
.jbutton a:hover{
color:[[ColorPalette::PrimaryDark]] !important;
background:[[ColorPalette::SecondaryLight]] !important;
border:1px solid !important;
-moz-border-radius: 1em !important;
webkit-border-radius:1em !important;}
.jbutton a:active {
color:[[ColorPalette::Background]] !important;
background:[[ColorPalette::SecondaryMid]] !important;
border:1px solid [[ColorPalette::SecondaryDark]] !important;}

Then I use {{jbutton{<script> Fancy Stuf Here </script>}}}

Was originally trying to modify all Javascript links (via StyleSheet
without class wrapper), but this works :P

Any tips for how you got usable information out of firebug? I have it,
just not sure how to make it give me the information I am looking
for . . .

Mike

[Mike]

Looks like I may have been missing the obvious in firefox / firebug
Are you using right click / Inspect Element?

Need to spend some more time with firebug . . .

Mike

[Mike]

Cleaned up a little . . .

.toolbar a:hover{
color:[[ColorPalette::PrimaryDark]];
background:[[ColorPalette::SecondaryLight]];
border:1px solid [[ColorPalette::SecondaryMid]];
padding:2.5px;
-moz-border-radius: 1em;
webkit-border-radius:1em;
}
.toolbar a:active {
color:[[ColorPalette::PrimaryLight]];
background:[[ColorPalette::SecondaryMid]];
border:1px solid [[ColorPalette::SecondaryDark]];
}

I have everything styled the same on my toolbar now !

Mike

[PMario]

hi,
I have firebug version 1.5.0, firefox 3.6

I activate the pointer icon, next to the bug icon. It says "click
element to explore". Mine is german. May be the real english text may
be different.
If you hover over any item on the screen the console window
automatically changes to HTML mode and displays the code. If HTML is
active it automatically opens a second display right that displays the
active style definition for any element.

If an element is clicked, both windows are static, and can be used to
change values. Which will be automatically rendered in the real
display.

The "Styles Tab" in the right display tells you the whole CSS history
of the activated element. Which i think is really cool.

regards Mario