[HOW TO] Add a background image to posting area

[stitch626]

I know this has been discussed on this board somewhere but there has never been explicit instructions on how to do this.

In this tutorial I will show you how to add a background image to the background of your posting textarea. IMO This will add more personality to your board and looks real professional if you use a watermark image.

SEE SCREEN SHOT BELOW

This is rather simple and straight forward:

OPEN:
styles/subsilver2/theme/stylesheet.css

FIND CODE:

Code: Select all

textarea {
   background-color: #FAFAFA;
   color: #333333;
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   font-size: 1.3em;
   line-height: 1.4em;
   font-weight: normal;
   border: 1px solid #A9B8C2;
   padding: 2px;

INLINE FIND:

Code: Select all

background-color: #FAFAFA;
   color: #333333;

REPLACE WITH:

Code: Select all

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

Now upload your background image to:
styles/subsilver2/theme/images/

You should be all set after this:

For prosilver follow all instructions above but instead of opening subsilver/stylesheet.css DO THIS:
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;

Now upload your image to styles/prosilver/theme/images

[Sniper_E]

Smooth move!

[r4wMUnt34q]

Well, I tried it on prosilver and it doesnt work. I purged my forum and browser cache too

[stitch626]

Well, I tried it on prosilver and it doesnt work. I purged my forum and browser cache too

Yea, it probably won't work on prosilver. This tutorial was written only for subsilver2. Please see first post. However, I will look into writing something up for prosilver. I will have to do some testing on my local host test board first. The way prosilver handles the styling in completely different than subsilver2 so I need some time to figure it out but it shouldn't be too difficult.

[Sniper_E]

Yes, the setup in prosilver will have to come from the css files. It should be a piece of cake though.

[stitch626]

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;

[r4wMUnt34q]

Sweet , thanks stitch626 !

[ghettowboy]

this doesn't seem to be working with RC5 subsilver2... any suggestions??

[Sniper_E]

Yes, Stitch gave that code out for prosilver.

[ghettowboy]

Yes, Stitch gave that code out for prosilver.

hmmm.... that dosen't seem to work either sniper_e