[HOW TO] Add a background image to posting area

[topdown]

Just about anything is possible, but what your asking is outside of the scope of this topic.
What your asking for would be a lot more work than what is available in this thread.

You could make a topic in the MOD Requests and Discussion
on what your looking for and someone might be able to help you out.

[rayminator2009]

Ok I am back.

Here is how to add a background image to posting textarea in prosilver.

Follow all the instructions above in first post but skip over the instructions for the subsilver stylesheet.css and proceed with instructions below.

OPEN:
prosilver/styles/theme/forms.css

FIND CODE:

Code: Select all

textarea {
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   width: 60%;
   padding: 2px;
   font-size: 1em;
   line-height: 1.4em;

IN LINE FIND:

Code: Select all

   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;

BEFORE ADD:

Code: Select all

   background-image: url('./images/YOUR_IMAGE.gif');
   background-repeat:no-repeat;
   background-position:center;

for this one you need to change this

Code: Select all

background-image: url('./images/YOUR_IMAGE.gif');

to

Code: Select all

background-image: url('.{T_THEME_PATH}/images/YOUR_IMAGE.gif');

[Hippie459MN]

Works perfect on my prosilver based theme here.

Also, Mine is like this and works fine...

Code: Select all

background-image: url('./images/YOUR_IMAGE.gif');

I was wondering what css file had to be edited for this.

[Sniper_E]

@ Hippie459MN, for prosilver, I'm thinking it's the forums.css file. Somewhere around line 39 if I remember correctly.

Code: Select all

textarea {
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   background-image: url('./images/YOUR_IMAGE.gif');
   width: 60%;
   padding: 2px;
   font-size: 1em;
   line-height: 1.4em;
}

[Hippie459MN]

I just followed the prosilver instructions in the first post and made the edits to form.css and it worked perfect. Shows up in the QR on 3.0.6 too.

Maybe the one in the colours.css will do just the posting page and not the QR. I will have to look into that. Thanks.

[Hippie459MN]

I think you edited your post but yes, you are correct. Its line 39 in forms.css.

[v01d]

how can i fix this problem?


when i'm not hovering over it the edges around it turn white.


I attached my stylesheet

[Hippie459MN]

I can't download the file on my phone but if you use a png or gif with a transparent background you won't have that problem. That I have noticed anyways. Can you post your image too? I can look at it later today.

[ Post made via Mobile Device ]

[Sniper_E]

The image you use needs to be transparent like Hippie said. Text can not be seen well with a image like that.

Code: Select all

textarea {
   color: #33A0FF;
   background-color: #111111;
   border: 1px solid #CCCCCC;
   font-family: Verdana, "Trebuchet MS", "Lucida Grande", Helvetica, Arial, sans-serif;
   font-size: 1.3em;
   line-height: 1.4em;
   font-weight: normal;
   padding: 2px;
}

input:hover, textarea:hover, select:hover {
   color: #22DDDD;
   background-color: #232323;
   border: solid 1px #33A0FF;
}

input:focus, textarea:focus, select:focus {
   color: #33A0FF;
   background-color: #111111;
   border: solid 1px #22DDDD;
}

As you can see in your stylesheet that your .textarea class has a textarea:hover and a texarea:focus class effects.
Put your image in the .textarea class. Follow the directions on the first post of this topic.

[Reefie]

works great thanks