::Forum - Need Stylesheet Help - Star Wars Combine::

Year 10 Day 124 13:56

Need Stylesheet Help

As many of you may already know, I'm writing a purple skin for SWC, I'm using SWC's CSS editor (finally got around to figuring it out), but I've run into an issue...

I'm attempting to modify the buttons with the selector "input":

Here is the (pink skin) stylesheet of the aforementioned elements:

“input
{
border: 1px solid #C0006F;
background: #660066;

color: #888888;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

- "Stylesheet"
”

I changed it to this:

“input
{
border: 1px solid #9400D3;
background: #4B0082;

color: #888888;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

- "My modifcation"
”

As you can see, all I did was change the colors, nothing else, as you can see, the modification was successful:

But it also messed up my ETA timers, as shown here:

Recall that the only thing I changed was the colors, no other part was changed.
Is there a way I can add a style specifically for the ETA timers so that they aren't effected by the "input" selector? Or perhaps make the ETA timers exempt from the "input" selector?

Year 10 Day 124 20:03

Need Stylesheet Help

Khan

Good to see someone using it :)

Your changes seem sound to me, and they worked when I edited the CSS in Firebug, so I expect it's something in the CSS Editor going awry.

You could try using an attribute selector like input[type=submit] so it only affects input buttons where the type is "submit".

____________

Kids these days!

Year 10 Day 125 10:42

Need Stylesheet Help

Phillip Bromley

Hmm... I'll give it a go, thanks!

____________

Free artwork in my Commerce thread!

Year 10 Day 126 14:26

Need Stylesheet Help

Phillip Bromley

It worked, it didn't change the ETA timers, but it also didn't change other things like some text fields. I fixed this by also adding another attribute selector "input[type=text]", this fixed the problem but also messed up the ETA timers again. What I need is a way to exempt the ETA timers only, and nothing else.

Edited By: Phillip Bromley on Year 10 Day 126 14:35

Year 10 Day 126 17:01

Need Stylesheet Help

Xim Reyes

I'm assuming that this is the line for the ETA timer:

“
[form name="etaTickerSmall" style="display:inline;text-align:left"]
[input type="text" size="20" name="Clock" style="display:inline;text-align:left;font-size:7pt;border:0px;color:#CCCCCC;background:url(http://img.swcombine.com/semitrans/trans_10.gif)" readonly/]
[/form]

- SWC Source
”

This is the first time I've ever tried to style input elements (in fact that input[type=submit] thing that Khan suggested is totally new to me), but based on the same principle the following might work. Use the CSS you quoted in your first post:

“
input
{
border: 1px solid #9400D3;
background: #4B0082;

color: #888888;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

- Bromley
”

Then, try making a selector that will style only the input elements with the name "Clock". So something like this:

“
input[name=Clock] {
Style the ETA timer here}
”

If I'm right then you should be able to style the ETA timers the way you want to without affecting anything else and you can style the rest of the input fields without affecting the timer.

	Year	Day	Time
	14	202	13:56:19

Logged in as
Guest