[HOW TO] Add a background image to posting area

How-to's, little tricks, tutorials, code examples (snippets) and read-me's.

[HOW TO] Add a background image to posting area

Postby stitch626 » 14 Jul 2007, 16:20

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
Attachments
postingbackground.JPG
User avatar
stitch626    
STG Moderator Leader
STG Moderator Leader
 
Posts: 3185
Joined: 08 Feb 2007, 20:47
Location: Michigan
Favorite Team: Detroit Red Wings
Gender: Male
phpBB Knowledge: 7


Re: [HOW TO] Add a background image to posting area

Postby Sniper_E » 15 Jul 2007, 12:51

Smooth move! :thumbsup:
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!
User avatar
Sniper_E    
STG Jedi Master
STG Jedi Master
 
Posts: 7010
Joined: 31 May 2006, 06:29
Location: Shreveport, LA
Favorite Team: The STG Team
Gender: Male
phpBB Knowledge: 6

Re: [HOW TO] Add a background image to posting area

Postby r4wMUnt34q » 01 Aug 2007, 19:04

Well, I tried it on prosilver and it doesnt work. I purged my forum and browser cache too :)
PlusXL 4.0 Portal for phpBB3
My nickname explanation:
When you convert the numbers to letters, you will get rawMUnteaq. Then when you try to pronounce it, you should get something like [ro: man ti: k], something like romantic. Quite complicated, I know.. MU are my initials... People tend to call me r4w (ro:). Call me as you wish, but make sure I get it that/when you are calling or mentioning me.
r4wMUnt34q
Translator
Translator
 
Posts: 22
Joined: 15 Jul 2007, 02:50
Favorite Team: phpBB
Gender: Male

Re: [HOW TO] Add a background image to posting area

Postby stitch626 » 01 Aug 2007, 20:08

r4wMUnt34q wrote: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.
User avatar
stitch626    
STG Moderator Leader
STG Moderator Leader
 
Posts: 3185
Joined: 08 Feb 2007, 20:47
Location: Michigan
Favorite Team: Detroit Red Wings
Gender: Male
phpBB Knowledge: 7

Re: [HOW TO] Add a background image to posting area

Postby Sniper_E » 01 Aug 2007, 22:06

Yes, the setup in prosilver will have to come from the css files. It should be a piece of cake though.
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!
User avatar
Sniper_E    
STG Jedi Master
STG Jedi Master
 
Posts: 7010
Joined: 31 May 2006, 06:29
Location: Shreveport, LA
Favorite Team: The STG Team
Gender: Male
phpBB Knowledge: 6

Re: [HOW TO] Add a background image to posting area

Postby stitch626 » 02 Aug 2007, 17:30

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;
User avatar
stitch626    
STG Moderator Leader
STG Moderator Leader
 
Posts: 3185
Joined: 08 Feb 2007, 20:47
Location: Michigan
Favorite Team: Detroit Red Wings
Gender: Male
phpBB Knowledge: 7

Re: [HOW TO] Add a background image to posting area

Postby r4wMUnt34q » 11 Sep 2007, 12:27

Sweet :clap:, thanks stitch626 !
PlusXL 4.0 Portal for phpBB3
My nickname explanation:
When you convert the numbers to letters, you will get rawMUnteaq. Then when you try to pronounce it, you should get something like [ro: man ti: k], something like romantic. Quite complicated, I know.. MU are my initials... People tend to call me r4w (ro:). Call me as you wish, but make sure I get it that/when you are calling or mentioning me.
r4wMUnt34q
Translator
Translator
 
Posts: 22
Joined: 15 Jul 2007, 02:50
Favorite Team: phpBB
Gender: Male

Re: [HOW TO] Add a background image to posting area

Postby ghettowboy » 19 Sep 2007, 11:00

this doesn't seem to be working with RC5 subsilver2... any suggestions??
ghettowboy
Cadet II
Cadet II
 
Posts: 25
Joined: 11 Jun 2007, 12:00
Gender: Male

Re: [HOW TO] Add a background image to posting area

Postby Sniper_E » 19 Sep 2007, 11:22

Yes, Stitch gave that code out for prosilver.
No is NEVER an Option and NEVER is the only Option when it comes to Giving Up!
User avatar
Sniper_E    
STG Jedi Master
STG Jedi Master
 
Posts: 7010
Joined: 31 May 2006, 06:29
Location: Shreveport, LA
Favorite Team: The STG Team
Gender: Male
phpBB Knowledge: 6

Re: [HOW TO] Add a background image to posting area

Postby ghettowboy » 19 Sep 2007, 11:57

Sniper_E wrote:Yes, Stitch gave that code out for prosilver.



hmmm.... that dosen't seem to work either sniper_e
ghettowboy
Cadet II
Cadet II
 
Posts: 25
Joined: 11 Jun 2007, 12:00
Gender: Male

Next

Return to Tutorials and How-Tos

Who is online

Users browsing this forum: No registered users and 62 guests