[HOW TO] Add a background image to posting area

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

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

Postby topdown » 17 May 2009, 22:04

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.
Do not PM me for Support unless I give permission in a post......PM's only help one, posts help everyone !
User avatar
topdown    
STG Styles Leader
STG Styles Leader
 
Posts: 3030
Joined: 01 Oct 2007, 22:56
Location: Handyman's harddrive
Favorite Team: STG Teams
Gender: Male
phpBB Knowledge: 9


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

Postby rayminator2009 » 13 Nov 2009, 23:27

stitch626 wrote: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');
rayminator2009
Crewman
Crewman
 
Posts: 3
Joined: 28 Aug 2009, 13:25
Gender: Male
phpBB Knowledge: 8

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

Postby Hippie459MN » 29 Dec 2009, 18:47

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. :D
User avatar
Hippie459MN    
Supporter
Supporter
 
Posts: 208
Joined: 08 Feb 2008, 09:40
Location: Minnesota, USA
Favorite Team: Your moms team
Gender: Male
phpBB Knowledge: 6

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

Postby Sniper_E » 30 Dec 2009, 00:01

@ 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;
}
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: 7003
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 Hippie459MN » 30 Dec 2009, 07:17

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.
User avatar
Hippie459MN    
Supporter
Supporter
 
Posts: 208
Joined: 08 Feb 2008, 09:40
Location: Minnesota, USA
Favorite Team: Your moms team
Gender: Male
phpBB Knowledge: 6

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

Postby Hippie459MN » 30 Dec 2009, 10:34

I think you edited your post but yes, you are correct. Its line 39 in forms.css. :D
User avatar
Hippie459MN    
Supporter
Supporter
 
Posts: 208
Joined: 08 Feb 2008, 09:40
Location: Minnesota, USA
Favorite Team: Your moms team
Gender: Male
phpBB Knowledge: 6

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

Postby v01d » 10 Apr 2010, 00:18

how can i fix this problem?


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

I attached my stylesheet
Attachments
stylesheet.zip
(3.37 KiB) Downloaded 55 times
v01d
Crewman
Crewman
 
Posts: 8
Joined: 16 Dec 2008, 19:40
Gender: Male

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

Postby Hippie459MN » 10 Apr 2010, 06:11

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 ] Image
User avatar
Hippie459MN    
Supporter
Supporter
 
Posts: 208
Joined: 08 Feb 2008, 09:40
Location: Minnesota, USA
Favorite Team: Your moms team
Gender: Male
phpBB Knowledge: 6

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

Postby Sniper_E » 11 Apr 2010, 10:15

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.
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: 7003
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 Reefie » 30 Oct 2010, 11:58

works great thanks
Image
A world without a reef is a world in chaos
Reefie
Cadet I
Cadet I
 
Posts: 17
Joined: 28 Oct 2010, 07:00
Gender: Male
phpBB Knowledge: 5

Previous

Return to Tutorials and How-Tos

Who is online

Users browsing this forum: No registered users and 4 guests