PhpBB3 BBCodes

Posted: **28 Nov 2012, 13:44**

Snippet Support

Posted: **28 Nov 2012, 13:45**

Adding Background image to textarea

Post by Martin_K

Is there any way of having the background image disappear when inputting text?

Posted: **28 Nov 2012, 13:47**

Open

styles/prosilver/template/posting_editor.html

Find

    name="message" id="message" style="background: #FFFFFF url('{ROOT_PATH}images/message.png') center no-repeat;"

Replace with

Code: Select all

    name="message" id="message" style="background: #FFFFFF url('{ROOT_PATH}images/message.png') center no-repeat;" onmouseover="this.style.backgroundColor='#FFFFFF';"

Posted: **28 Nov 2012, 16:37**

Can't get this to work. Is there a way to do this with css, hover and focus, over the whole text box, and not just the image?

Posted: **28 Nov 2012, 20:09**

I have nearly got it working the way I want by using the input[type=text] css attribute selector, so when you click in the box to start typing the background can be made to disappear. Thanks for your efforts.

Posted: **28 Nov 2012, 20:45**

I check it out and call back

Posted: **28 Nov 2012, 21:04**

Simply a little change:

Open

styles/prosilver/template/posting_editor.html

Find

Code: Select all

    name="message" id="message" style="background: #FFFFFF url('{ROOT_PATH}images/message.png') center no-repeat;"

Replace with

Code: Select all

    name="message" id="message" style="background: #FFFFFF url('{ROOT_PATH}images/message.png') center no-repeat;" onmouseover="this.style.background='#FFFFFF';"

Tested. If you want to make it work another way, explain exactly what you want..

Posted: **29 Nov 2012, 17:31**

And for quickreply_editor.html

Code: Select all

<textarea style="height: 20em; background: #FFFFFF url('{ROOT_PATH}images/message.png') center no-repeat;"

Replace with

Code: Select all

<textarea style="height: 20em; background: #FFFFFF url('{ROOT_PATH}images/message.png') center no-repeat;"onmouseover="this.style.background='#FFFFFF';"

Tested and works.

Posted: **29 Nov 2012, 17:50**

I suggest you use onfocus instead og onmouseover.

Downside with both solutions is that the bg image isnt reinstated when focus is out.
Maybe we should look at the way the search bar works.

Posted: **29 Nov 2012, 17:59**

Best way is to use the css fade effect onmouseover wink wink