Simple Machines Community Forum

I can't find were the code is in index.css, if that's were it is, to change the text box highlight color, it's the color that you get when you click in the text box.



Thank you for your time.

I think that colour is set by the browser, not by any CSS that SMF has...

#search_form .input_text { background-color: #cccccc; }
Change the #cccccc to the hex color of your choice. I'm also assuming you're on 2.x.

Yes I am using SMF 2.02 , I update my sig to reflect that. I could not find in index.css the code you offered?

Lainaus käyttäjältä: mashby - tammikuu 16, 2012, 08:10:07 IP

Koodi [Valitse] Laajenna

#search_form .input_text { background-color: #cccccc; }
Change the #cccccc to the hex color of your choice. I'm also assuming you're on 2.x.

You just need to insert it. It doesn't exist. :) Add it at the top, bottom, middle, wherever you want.

No, it's not the background colour that's being discussed here... it's the blue surround that's set on select which AFAIK is done in the browser and I think the code to change it is going to be similarly browser specific.

mashby - he's wanting to remove the "blue outline" from around the field.  That outline is added to all inputs by Safari by default, it's not set in place by any SMF code.

Here's a way you can remove it.

Add this code to the bottom of your custom themes main CSS file.
input:focus {
outline: none;
}
You then would also be able to go another step, and change the colour by adding "border: 1px solid #hex;" to that CSS declaration which would mirror the same effect, in all browsers.

Oh, that's very controllable too if I read more carefully, eh?

Lainaa#search_form .input_text {
    border: 2px solid #CCCCCC;
}

Changing the #CCCCCC to the hex color of your choice and this is new as well, not a find/replace. You could also specify other colors for focus, hover, etc.

Lainaus käyttäjältä: mashby - tammikuu 16, 2012, 08:40:05 IP
Oh, that's very controllable too if I read more carefully, eh?

Lainaa#search_form .input_text {
    border: 2px solid #CCCCCC;
}

Changing the #CCCCCC to the hex color of your choice and this is new as well, not a find/replace. You could also specify other colors for focus, hover, etc.

Did you read what I said? I'm not trying to be rude...but I just explained why that border is showing up, it's not a CSS border attribute, it's an OUTLINE, which is specified by the browser - Safari, in this case. So it can ONLY be modified by changing input:focus and declaring the outline attribute value as "none;". You can THEN use a border, with a colour, to give the same effect globally (across browsers).

I'll just move on from this topic as I am clearly too stupid to be in here. That highlight isn't something I see in Firefox and I guess it's something Safari does. Thank you.

Lainaus käyttäjältä: mashby - tammikuu 16, 2012, 08:52:27 IP
I'll just move on from this topic as I am clearly too stupid to be in here. That highlight isn't something I see in Firefox and I guess it's something Safari does. Thank you.

That's exactly why I said, not to be rude, because I didn't want you to interpret my post as "are you stupid?".

It happens with Webkit and Opera, not with Gecko. ;)

There you have it :P

Opera and Chrome do it with a horrible sorta mustard yellow colour, while Safari does it with the lurid blue. Can't stand any of them myself. :D

Lainaus käyttäjältä: Antechinus - tammikuu 16, 2012, 09:02:31 IP
Opera and Chrome do it with a horrible sorta mustard yellow colour, while Safari does it with the lurid blue. Can't stand any of them myself. :D

Agreed - Safari has that kind of 'theme' though, so it fits their style, but it could use an update.

Well it's easy enough to sort with css anyway (once people know which attribute to target).

Lainaus käyttäjältä: Antechinus - tammikuu 16, 2012, 09:08:39 IP
Well it's easy enough to sort with css anyway (once people know which attribute to target).

Exactly.

I was using chrome to take the pics and here is another one... man this is just a pain to get rid of all the blue but I am chugging along.

How do you get rid of the blue around these types of buttons?



Thanks for your time.

Anyway if the OP would like an example, this is from one of my themes. It gives a larger drop shadow on focus but without horrible coloured halos of poo.

input, button, textarea{
background: #fff; border: 1px solid #bbb; border-top: 1px solid #ccc; border-bottom: 1px solid #999; box-shadow: 0 2px 2px #ccc;
}

textarea:focus, input:focus {outline: none; box-shadow: 0px 3px 3px #777;}

That will deal with all of them. Try it.

That worked great for the text boxes but what about this poo?

Lainaus käyttäjältä: Labradoodle-360 - tammikuu 16, 2012, 08:36:39 IP
mashby - he's wanting to remove the "blue outline" from around the field.  That outline is added to all inputs by Safari by default, it's not set in place by any SMF code.

Here's a way you can remove it.

Add this code to the bottom of your custom themes main CSS file.

Koodi [Valitse] Laajenna

input:focus {
outline: none;
}
You then would also be able to go another step, and change the colour by adding "border: 1px solid #hex;" to that CSS declaration which would mirror the same effect, in all browsers.

Lainaus käyttäjältä: MediaSVI - tammikuu 16, 2012, 09:25:32 IPQuestion: Do I just copy and paste it into the index.css? Sorry this coding is so dam foreign to me it's like walking around blind  8)

That's just an example of how you can do an alternative styling. It may not be exactly what you want for your theme though.

The main point is that you are talking about input elements in the focus state, and specifically about the outline property when inputs are focused (focused means you have clicked on it and your cursor is inside the input, waiting for you to type something). If you set input:focus {outline: none;} in the css for inputs, that will get rid of the blue. Just look for where it says input in your css.

It's still a good idea to give some visual indication of focus though, because a lot of users are used to getting a visual clue. That's why I used the box-shadow instead. You can use other things, like background colour or border colour. Suit yourself.

It worked great and looks great thank you but what can I do about the blue around these bottons?

Lainaus käyttäjältä: Antechinus - tammikuu 16, 2012, 09:35:00 IP

Lainaus käyttäjältä: MediaSVI - tammikuu 16, 2012, 09:25:32 IPQuestion: Do I just copy and paste it into the index.css? Sorry this coding is so dam foreign to me it's like walking around blind  8)

That's just an example of how you can do an alternative styling. It may not be exactly what you want for your theme though.

The main point is that you are talking about input elements in the focus state, and specifically about the outline property when inputs are focused (focused means you have clicked on it and your cursor is inside the input, waiting for you to type something). If you set input:focus {outline: none;} in the css for inputs, that will get rid of the blue. Just look for where it says input in your css.

It's still a good idea to give some visual indication of focus though, because a lot of users are used to getting a visual clue. That's why I used the box-shadow instead. You can use other things, like background colur or border colour. Suit yourself.

Same thing, except that those are selects instead of being inputs. If you're also worried about textareas, you can hit all three at once.

input:focus, select:focus, textarea:focus {outline: none;}

That did it! Thank you!