[Release] Text Area & Input BG's

[SaintDog]

Author: SaintDog

Description: This will teach you how add background to your Text Areas, Input Boxes, and Form Buttons (this is modification is being used here). Screenshots below:

http://www.vbulletintemplates.com/mods/previews/inputforms.gif

http://www.vbulletintemplates.com/mods/previews/textareas.gif

[imported_Niloc]

Thanks!

[Xanthine]

And if you dont want the background image to move when you type more then the box you can put


background-repeat: no-repeat;
background-attachment: fixed;


After BACKGROUND-IMAGE: url("http://www.yoursite.com/image.gif");

[vertex]

best yet, thanks guys

[Gary W]

Excellent hack ! :D

[Dean N Steve]

i like this !

[N9ne]

Nice, very very nice! Thanks :)

[Exodus]

hmm this only changes the color of the text input border, not the backround itself. nyone else have this problem?

[hellsatan]

Nice, but I wont use it:)

Satan

[autobilia]

What is a recommended size for the *.gif?

[SaintDog]

The one used here is 200x138, although sizes will differ :)

[sphinx]

installed and working fine nice work

[alex2k]

Nice... thank's!

[mashby]

Just a quick note: this mod only appears to work with Internet Explorer and Netscape 6. I use Opera as a browser and the background is not supported, so it must not be part of the W3C specification.

The good news is that any users you have that don't use IE or NS6 will just see a white box. :)

[Andromeda]

Thanks a lot

[TaP]

if i wanted to make the dotted line around the boxes solid would i just take the dotted tag out?

[SaintDog]

Change:

dotted

To:

solid

------------------

This does not place a border around the forum, only the textarea's and input boxes, if you are looking to place a border around the forum, search for Forum Border.

[PennylessZ28]

Awesome, I was looking for that! All i needed was the dashed part!

[Trekkie]

The Mod ist not working, no pic only a white background

Any problems because there are a Htaccess ?

[imported_Sufian]

Great mod!

[Trekkie]

I have solved the problem :)

Great Mod !

[LiL pImPsTeR]

howd u fix it bro? i got it like that too....ive installed this hack ocne before and didint have that problem....

[d3fuse]

Nice hack, perfect for my upcoming forum.

[Buddha]

hey dog, i installed this, and i also used the

background-repeat: no-repeat;
background-attachment: fixed;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;

but in mozilla, the background that i fixed seems to be set to the center of the browser window, not the textarea. so now, when i scroll, it remains positioned in the center of the screen and moves through the textarea.
very funny... bizarre cause you see the image first scroll through the reply window, then appear in the buttons above the textarea.
lol.
how do you fix it in the middle of the textarea window in mozilla?

[Lazerus]

Originally posted by LiL pImPsTeR
howd u fix it bro? i got it like that too....ive installed this hack ocne before and didint have that problem....

i have the same problem....

[Lazerus]

bump....?

[wolfe]

no working for me :( its just making them SOLID

even with dotted there

[imported_SorandeR]

thanks it's great.

[imported_Blindchild02]

doesnt add a BG for me, only dotted lines

[imported_Athletic]

Thanks great mod

Is it possible to not add the backgound to the buttons?

[imported_Athletic]

Originally posted by Blindchild02
doesnt add a BG for me, only dotted lines

You have to add a ";" after: BACKGROUND-COLOR: #CFCFCF

So it looks like this (without the dotted lines):

TEXTAREA, .bginput {
FONT-SIZE: 12px;
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
COLOR: #000000;
BACKGROUND-COLOR: #CFCFCF;
BACKGROUND-IMAGE: url("http://www.your site.com/image.gif");
background-attachment: fixed;

}


Hope this helps

[Lani]

Thisi s great, thanks.

Is there any way to change the look of the select boxes as well? I would like them to look as similar as possible to the other buttons.

[a43079]

nice

[codewebs]

doesnt work :/ white no dotted no backround image

[codewebs]

ok... i even copied what vbtemplates has and it did nothing, so im doing something rong i guess

[codewebs]

i got it :D if you put a gradient for your backround things throught the style, it messed up my css :/ its fixed for me now

[imported_pie]

much appreciated :)

[sonic3d]

nevermind it worked.

l8er
sonic

[imported_Blindchild02]

is there a way to add it ONLY to the quick reply background? not in all the textareas.. i want it in ONLY the quick reply BG

[Sin City]

thanks....great mod :)

[dstruct2k]

is there a way to add it ONLY to the quick reply background? not in all the textareas.. i want it in ONLY the quick reply BG
Yes... You would have to create a new CSS tag... like "qreply" or something.qreply {
FONT-SIZE: 12px;
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
COLOR: #425C80;
BORDER: 1px dotted #283A52;
BACKGROUND-IMAGE: url("http://url here!");
background-repeat: no-repeat;
background-attachment: fixed;
}And then add this to the code for your qreply box:class="qreply"
My Q-Reply box would now look like this (in html)<textarea name="message" rows="10" cols="70" wrap="virtual" tabindex="2" class="qreply"></textarea>
And you should be able to change just that box without changing anything else.

I have not tested this! I am not a CSS guru! I would rather manually specify everything in HTML! Anyone able to edit my post that can fix any errors I have made, please do!

[imported_MaDCaT75]

Yes... You would have to create a new CSS tag... like "qreply" or something.qreply {
FONT-SIZE: 12px;
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
COLOR: #425C80;
BORDER: 1px dotted #283A52;
BACKGROUND-IMAGE: url("http://url here!");
background-repeat: no-repeat;
background-attachment: fixed;
}And then add this to the code for your qreply box:class="qreply"
My Q-Reply box would now look like this (in html)<textarea name="message" rows="10" cols="70" wrap="virtual" tabindex="2" class="qreply"></textarea>
And you should be able to change just that box without changing anything else.

I have not tested this! I am not a CSS guru! I would rather manually specify everything in HTML! Anyone able to edit my post that can fix any errors I have made, please do!
ok but what if we have the hackless quick reply instead?