Text Boxes In Skins...

Text Boxes In Skins...

Hey there guys,

So I'm not at all an expert in CSS/HTML/Whatever-You-Wish-To-Call it, however for the past year I have been taking stabs at editing skins, and whatnot. After all, I think everyone gets tired of the same one after awhile. My first attempt was quite successful, I used Pulsar as a base. And at the moment, I generally use a modified version of Titan (Basically, just a larger banner, and black background instead of the slate).

But other than Titan, theres always one major problem I have when it comes to skinning, and it drives me to the high heavens in irk-ness.

Text Box/Field/Area Colour; or more precisely, changing it.

You know, the Area in which you type when you're editing/writing in a JP? Or editing bios, or whatever. Those fields, are always WHITE. And If theres anything I hate the most when it comes to RPing, its blinding white fields to type in You can tell I used to use SMS back in the day, because it really puts me off. I've tried everything to find where the coding is for the control of the text area colour (And naturally, the coding to change the text that shows up in it; because on white, the text needs to be darker, blah blah, but on say, black, it'd need to be the opposite), to absolutely no avail. I've even used Safari's inbuilt inspector to track it down; nothing.

Now, I'm pretty sure, to those of you whom know anything about Skinning, that this is probably laughable. But I really would just love to be told, which file, and which line I need to edit. I would really love to edit some skins' that are mainly white, into black-based skins, but the text areas stay white, and its aggravating. The only exception, like I said, is Titan, which has grey text areas and its not as harsh; thus I use Titan a lot. In fact, when I made my first skin, I dropped a lot of the files from Titan, into Pulsar, as a rage-last-resort, to try and get the fields to turn at least grey. And they did! BUT , it messed up other things (italics, bolds, etc wouldn't show up in JP's or any site messages, and the writer in my needs to be about to use italics... the struggle is real, I know.).

Any assistance would be great—this has been the bane of my existence forever

Thanks!
LordMalachi

Re: Text Boxes In Skins...

Hey there...

The text boxes and the jquery stuff made me nuts.

The best way to isolate what / where you need to make changes is to use Firebug or another browser based app that will locate the code and usually allows you to make changes right in the browser to test how it looks and make sure you have the right section.

Second option is to give me a couple of days (been sick) and I will go through my skins and locate the the files that contain the text areas.

Regards ~ Jericho

Re: Text Boxes In Skins...

OK... I did a quick check on one of my sites. The text boxes you're talking about (writing a post, etc) seem to be in the skin.css files. Below is the CSS from the one on my site that I did a quick Firebug check on (actually I used Inspect Element on Google).

Either way, most of the changes you want to make should be in this section. If you run into more problems, post to this thread and I'll do my best to help as time allows.

Code: Select all

/*
|---------------------------------------------------------------
| INPUTS
|---------------------------------------------------------------
*/
input[type=text],
input[type=password],
input[type=email],
textarea,
select {
   border-bottom: 1px solid #871919;
   border-top: 1px solid #871919;
   border-left: 1px solid #871919;
   border-right: 1px solid #871919;
   background: rgba(0,0,0,0.7);
   background: -moz-linear-gradient(top, #000000 0%, #303030 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#303030));
   background: -webkit-linear-gradient(top, #000000 0%,#303030 100%);
   background: -o-linear-gradient(top, #000000 0%,#303030 100%);
   background: -ms-linear-gradient(top, #000000 0%,#303030 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#303030',GradientType=0 );
   background: linear-gradient(top, #000000 0%,#303030 100%);
   font-size: 1.1em;
   font-family: "lucida grande", verdana, arial, sans-serif;
   color: #cdcdcd;
   -moz-border-radius: 3px;
   border-radius: 3px 3px 3px 3px;
   -moz-box-shadow: inset 0 1px 1px #000000, 0 1px 0 #303030;
   -webkit-box-shadow: inset 0 1px 1px #000000, 0 1px 0 #303030;
   box-shadow: inset 0 1px 1px #000000, 0 1px 0 #303030;
}
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
textarea:focus,
select:hover,
select:focus {
   border: 2px solid #871919;
   background: #303030;
   color: #cdcdcd;
}

kbd {
   font-size: 115%;
   font-weight: bold;
   font-family: "lucida grande", verdana, arial, sans-serif;
}

.cell-label {
   font-weight: bold;
   font-size: 100%;
   text-align: right;
}