News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

Text Area Re-Color Issue.

Started by razzy, August 23, 2017, 03:05:42 PM

Previous topic - Next topic

razzy

Once again I've run into an issue. It's so minor, but I've been quietly ripping my hair out over it.

I almost have the forum I'm building fully customized, with just the right amount of Mod's that the future members will love...etc.

Although I'm a bit stuck, because I cant find the codes to customize the Text Area(typing area) on the board, or for the ChatBar thats installed.
With the SA Chat, I quickly found where the 'background' color of that particular typing area is, but then I'm stuck.

Should I be looking up code help for the typing area's and drop down menu's? Sorry, i'm just lost because html/css is my strong suit, not php.

TehCraw

Can we get a link to your forum, and also a description of what you're trying to do to the text area?
Any fool can write code that a computer can understand. Good programmers write code that humans can understand. - Martin Fowler

razzy

All I'm trying to do is invert the colors. so white to black, and black to light grey. It's nothing major, I just was curious to know if it's extra code I need to add because I've had a hard time finding the color codes in css.

ill pm the link

TehCraw

Thanks. This is pretty easy to do. In your theme's css file, near the top (line 74-ish), there's this section:


input, button, select, textarea
{
font: 95%/115% verdana, Helvetica, sans-serif;
color: #000;
background: #ccc;
border: 1px solid #fff;
padding: 2px;
}


You can change the color, background and border values to whatever you like. For example I tried the following on your site and it looks pretty good.


input, button, select, textarea
{
font: 95%/115% verdana, Helvetica, sans-serif;
color: #ddd;
background: #333;
border: 1px solid #444;
padding: 2px;
}
Any fool can write code that a computer can understand. Good programmers write code that humans can understand. - Martin Fowler

TehCraw

Also, for future reference, you can use your browser's inspect element to quickly find what CSS to change and even try changes "live." Just right-click on any element on the page, then click "Inspect" on Chrome, or "Inspect Element" on Firefox. A screen should pop up displaying the HTML of that element and the relevant CSS should be on the right side.
Any fool can write code that a computer can understand. Good programmers write code that humans can understand. - Martin Fowler

razzy

Ah right. Thank you for going out of your way to help with that. Now I'll be able to finish getting things looking the way I need them to.

Forgot about Inspect Element. Thank you for the reminder. lol

Advertisement: