CSS qustion re. input field focus

Use this board to ask questions or have discussions with other Genie users.
Post Reply
Wayne C.
Experienced User
Posts: 139
Joined: Mon Aug 16, 2010 12:04 pm
First Name: Wayne
Last Name: Colasinski
Company Name: Sofworx / Tantara Transport
Contact:

CSS qustion re. input field focus

Post by Wayne C. »

Our input fields have white backgrounds. When an input field has focus, it turns a pale yellow (#ffffdd). I'd like to change that globally to a darker yellow so that it stands out more. I changed the background color in the following class of our style sheet:

.focusInp {
background: #ffff66;
font-weight: bold;
font-family: Monospace;
font-size: 13px;
z-index: 20;
}

It doesn't seem to have had any effect. Am I in the right spot of the CSS to make that change?
Scott Klement
Experienced User
Posts: 2711
Joined: Wed Aug 01, 2012 8:58 am
First Name: Scott
Last Name: Klement
Company Name: Profound Logic
City: Milwaukee
State / Province: Wisconsin

Re: CSS qustion re. input field focus

Post by Scott Klement »

What do you mean by the "right spot"?

The correct place to make this change would be in your own CSS file, or perhaps the CSS file of your Genie skin (its named after the skin, so if your skin is called 'FOO' then the css file is 'foo.css' in the skin's directory.)

Also, I'm pretty sure the font weight, family, size and z-index are already configured for the values you show... why are you changing them if they're already set to that? Or, is something else involved that i changing them later?

So I'd suggest just adding code like this to the end of your skin's CSS:

Code: Select all

.focusInp {
   background-color: #ffff66;
   background-image: none;
}
Wayne C.
Experienced User
Posts: 139
Joined: Mon Aug 16, 2010 12:04 pm
First Name: Wayne
Last Name: Colasinski
Company Name: Sofworx / Tantara Transport
Contact:

Re: CSS qustion re. input field focus

Post by Wayne C. »

Sorry if I wasn't clear. The block of code that I sent was from my skin's CSS. I logged into the Genie Administrator, selected my skin (eTMS Skin) and then selected the option "Edit eTMS Skin.css" . I narrowed things down and guessed that the .focusInp class selector had to be changed. I just changed the color property and left everything else as it was. It could be that "background-image: none" just needed to be added. Thanks.
Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest