2070 active members
  253 are online

Year

19

Day

350

Time

17:29:26

Guest
Login
snewsgnewsmessagegeneralfactioninventorycombatroom
Year 10 Day 125 13:56
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":

Buttons1.png

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:

Buttons2.png

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

CSSerror1.png


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 125 20:03
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 126 10:42
Hmm... I'll give it a go, thanks!


Year 10 Day 127 14:26
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 127 14:35
Year 10 Day 127 17:01
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.