XOOPS: How to have sizeable text areas in Xoops 2.0 and Xoops 2.2

Posted by: hervetOn 2005/11/21 18:50:18 7996 reads
What is it ?
Have yo ever find the text areas available in Xoops too small (or too large ) ?
With this modification of Xoops (also called hack), you will be able to resize
all the text areas available in Xoops. You can make then higher, larger and even smaller !

For a better understanding, see this animated picture. Resized Image
This is very useful when you are writing a long article or a long post in a forum and when
you want to have a global view of your text.

This modification was applied to the simple text areas, like the one you can find in your
website's preferences and in the dhtml text areas used, for example, in the comments.

The original idea come from FUDforums, an excellent Open Source forum.
To run, this hack requires that javascript is enable.


Tests
I have successfully tested this modification with the News module (1.4x) and with all the text
areas avaiblable in Xoops like for example the main preferences or the comments.
I have also successfully used the following browsers with the hack :
Mozilla 1.7.12, Internet Explorer 6, Opera 8.5, Firefox 1.0.7, Netscape 8.0.3.3, Konqueror

There are two versions of this hack, one for the Xoops 2.0 series and one for the Xoops 2.2 series.
You will find the links to download the hacks at the end of this article.
The hacks were made with Xoops 2.0.13.2 and Xoops 2.2.3

All you have to do is to download the files and to send them to your website.


If you have problems with this hack
It's possible that this hack does not runs with your website (because of the theme and the style sheet).
Quickly (for experts), in all the cases (Xoops 2.0 or 2.2), find the style sheets files used by Xoops
and modify the textarea's style by replacing width with min-width

In details :
For Xoops 2.0.x and for the admin's part of your website, edit the file called
/xoops/modules/system/style.css and find a line wich begins (or contains) textarea
then, in this line, search for width: and replace it with min-width
Here is an example.
Before :
Quote:

textarea { border: #000000 1px solid; width: 430px; font: 11px verdana, arial, helvetica, sans-serif;}

after :
Quote:

textarea { border: #000000 1px solid; min-width: 430px; font: 11px verdana, arial, helvetica, sans-serif;}


For Xoops 2.0.x and for the user side of your website, in your theme's directory edit all
the css files and use the same process as above (find texarea and width and replace
it with min-width).


For Xoops 2.2.3 and for the admin's part and for the user part of your website, edit the file called
/xoops/themes/mytheme/css/style.css (replace mytheme with your theme) and find a line wich begins (or contains)
textarea then, in this line, search for width: and replace it with min-width
Here is an example.
Before :
Quote:

textarea { border: #000000 1px solid; width: 430px; font: 11px verdana, arial, helvetica, sans-serif;}

after :
Quote:

textarea { border: #000000 1px solid; min-width: 430px; font: 11px verdana, arial, helvetica, sans-serif;}



Discuss of this hack
You can discuss of this hack in this forum.
Use it to report problems or suggestions.


Download it
Link to the complete hack for Xoops 2.0.13.2
Link to the complete hack for Xoops 2.2.3

Bye,
Hervé