SimplePortal
Support => English Support => Topic started by: newtoallthis on March 27, 2011, 09:42:45 AM
-
Is it possible to make the text input box bigger...for example to accommodate two lines without scrolling?
-
Yes. Take a look at the HTML on the page (I recommend Firebug for Firefox, or developers tools for IE7, 8, or 9, which lets you point at the element you are interested in).
You can see that this input of type text has its width set in portal.css via input.shoutboxinput, but does no5 have its height set.
You can change that.
---
Edit: fixed typo
-
Thank you. I shall go and delve.
-
OK. Tried setting the height to 60 px and the height did increase accordingly. However, text would only be accepted in the centre line of the input box rather than start at the top and wouldn't keep returning until the larger box was full. How do I get the input text to be accepted in the text box just as it is accepted by this reply box into which I am typing?
-
I would have thought that ought to work.
I had a look at the information at http://www.w3schools.com/tags/att_input_size.asp (http://www.w3schools.com/tags/att_input_size.asp) and had a little look at the information there, then started playing with size, width, height and CSS style attributes. Even with style="height: 5ex; white-space: normal;" I couldn't get it to wrap.
I could not get it to work. I think this form element is only meant for 1 line of text.
If there is a way to do what you want to do, I don't know it.
It seems like a textarea would work better for what you would like to do than an input of type=text
-
Thanks again for trying.
Could a textarea be set in the file you pointed to?
-
I recommend that you set up a test forum and do some experimenting.
You can learn a lot that way.
-
I recommend that you set up a test forum and do some experimenting.
You can learn a lot that way.
I have a test forum.
Good advice....I'll go try!
-
It seems like a textarea would work better for what you would like to do than an input of type=text
Having read more on this, I would tend to agree with you regarding the use of textarea.
However, in the section of CSS that you referred to, there is no obvious entry to edit. Are there additional files elsewhere which contains the basic shoutbox code?
-
You would need to make this change in PortalBlocks.php.
-
Have revisited this unsolved problem and again looked through PortalBlocks.php, but it's not even clear where the shout box input code resides.
Have also tried viewing the shoutbox using Firebug and, again, no clearer.
Still looking for help on this, please.
-
Maybe it's this??
<div class="shoutbox_input smalltext">
<input id="new_shout_1" class="shoutbox_input sp_float_left input_text" type="text" name="new_shout">
<input class="sp_float_right button_submit" type="submit" onclick="sp_submit_shout(1, 'dda42495e5', '28e6631930ed9110f9b9a8cb883ba6cd'); return false;" value="Shout!" name="submit_shout">
How can I change type="text" to textarea, bearing in mind that I have to include various textarea settings for height, width, overflow, wrap etc..
-
If I change the following:-
<input id="new_shout_1" class="shoutbox_input sp_float_left input_text" type="text" name="new_shout">
<input class="sp_float_right button_submit" type="submit" onclick="sp_submit_shout(1, 'f12d0e3', 'd61703ae203b27af69443b045edd1f7b'); return false;" value="Shout!" name="submit_shout">
to:-
<textarea id="shoutbox" rows="4" cols="15" name="new_shout" style="width: 125px; height: 20px;"></textarea>
<input class="sp_float_right button_submit" type="submit" onclick="sp_submit_shout(1, 'f12d0e3', 'd61703ae203b27af69443b045edd1f7b'); return false;" value="Shout!" name="submit_shout">
This gives the correct appearance when compared side by side at http://htmledit.squarefree.com/ .
Would it work, though?
I'd appreciate a second opinion before I edit any code in PortalBlocks.php.
-
MY advice: test this code in a test install of your forum.
If it works, then save the old Portalblocks.php, and try the modified one on your real forum.
If you do not like it, immediately put the old Portalblocks.php back. If you like it -- make very clear notes for yourself about the changes required, so you can make them again when there is a new version of SimplePortal.
-
This worked for me:
Open ./Themes/default/PortalShoutbox.template.php
Find:
if ($context['can_shout'])
echo '
<div class="shoutbox_input smalltext">
<input type="text" name="new_shout" id="new_shout_', $shoutbox['id'], '" class="shoutbox_input sp_float_left input_text"', $context['browser']['is_ie'] ? ' onkeypress="if (sp_catch_enter(event)) { sp_submit_shout(' . $shoutbox['id'] . ', \'' . $context['session_var'] . '\', \'' . $context['session_id'] . '\'); return false; }"' : '', ' />
<input type="submit" name="submit_shout" value="', $txt['sp_shoutbox_button'], '" class="sp_float_right button_submit" onclick="sp_submit_shout(', $shoutbox['id'], ', \'', $context['session_var'], '\', \'', $context['session_id'], '\'); return false;" />
</div>';Replace With:
if ($context['can_shout'])
echo '
<div class="shoutbox_input sp_center">
<textarea class="smalltext" name="new_shout" id="new_shout_', $shoutbox['id'], '" style="width: 96%; height: 60px;"', $context['browser']['is_ie'] ? ' onkeypress="if (sp_catch_enter(event)) { sp_submit_shout(' . $shoutbox['id'] . ', \'' . $context['session_var'] . '\', \'' . $context['session_id'] . '\'); return false; }"' : '', ' /></textarea>
<br /><input type="submit" name="submit_shout" value="', $txt['sp_shoutbox_button'], '" onclick="sp_submit_shout(', $shoutbox['id'], ', \'', $context['session_var'], '\', \'', $context['session_id'], '\'); return false;" />
</div>';
To change the width/height of the text box, look for style="width: 96%; height: 60px;" and change to suit.
This edit also moves the 'Shout!' button to below the text input box.
Note: You will no longer be able to post a shout by pressing the 'Enter' key. Instead, pressing 'Enter' will start a new line in the text box. You must click on the 'Shout!' button to post the shout.
-
newtoallthis,
Does AussieBill's solution do what you want?
-
Tried the code edit on my test forum, saved the change, launched the forum and refreshed and there was absolutely no change to the shoutbox whatsoever. Text box was the same size and the shout button remained on the right.
Any ideas what I could be doing wrong?
[edit] Just a thought. Would the change only be visible if the textbox size was changed? Is this tweak used to increase text box size in the code rather than creating a textarea which can be manipulated by forum users?
[edit] Tried it again and adjusted the textbox height in the code. Still makes no difference at all.
-
What's your browser? Can you use IE (7 or better) or firefox (with firebug plug-in)?
-
What's your browser? Can you use IE (7 or better) or firefox (with firebug plug-in)?
I can browse using whatever you like, but my preference is for FF 5.
-
The firebug plug-in for firefox has a tool that makes it easier for you to see the id or CSS class of any HTML element, and to try out the effects of fiddling with that element's style.
Combine this tool with plenty of CSS information from your favorite CSS tutorial (w3schools.com, for example), and you will very quickly be able to see the effect of changing the height of various elements.
Once you find this out, I encourage you, rather than messing with the php, to add some CSS to the portal.css file (for example), or even the theme's default.css. In any case, you'll want to keep a copy of the added section for the next time you install a new version of SimplePortal (portal.css is always replaced) or the theme.
-
Thanks for that. I have spent a lot of time looking at the CSS of the shoutbox in Firebug. No joy yet but I'll persevere.
-
Then you have seen that the shoutbox input is
<input name="new_shout" class="shoutbox_input sp_float_left input_text" id="new_shout_1" type="text" />and that the css for .shoutbox_input is in portal.css, and that you can change the height for .shoutbox_intput to whatever you want?
-
I have previously changed the text box height (and so have you if you read the earlier part of the thread). Problem is, the input remains as 'text' rather than 'textarea' and text can still only be added in one line.
I'm hoping to get the shout box text input box to behave (but of a smaller size) in the same way as the textarea into which I am typing this reply, the code I see being:-
<textarea style="width: 100%; height: 175px;" tabindex="2" onchange="storeCaret(this);" onkeyup="storeCaret(this);" onclick="storeCaret(this);" onselect="storeCaret(this);" cols="60" rows="12" id="message" name="message" class="editor"></textarea>
Where is the code to be found that you quoted in your last post?
-
For
<div class="shoutbox_input smalltext">Look in PortalShoutbox.template.php.
On a test forum, test out using a textarea, to see if it works well for you.
If so, you can certainly use CSS to restyle it any way you want.
-
Sorry, but I don't understand why the edit I posted here (http://simpleportal.net/index.php?topic=8544.msg48784#msg48784) is not working for you, newtoallthis. It's working just fine on my site in a variety of browsers (FF5, IE8, Chrome & Opera). I'm thinking it could be a cache problem? Have you tried emptying the file cache in Admin->Maintenance->Routine? Perhaps you could try disabling and then re-enabling the ShoutBox and ShoutBox block? Have you tried re-uploading PortalShoutbox.template.php in case there was a problem with your FTP client? Sometimes, the browser cache has to be cleared several times before a change will show.
Has anyone else tried this edit? If so, did it work?
Anyway, to clarify things, here is the important part of the edit. The part that make the one-line text field into a multi-line text 'box':
Find:
<input type="text" name="new_shout" id="new_shout_', $shoutbox['id'], '" class="shoutbox_input sp_float_left input_text"', $context['browser']['is_ie'] ? ' onkeypress="if (sp_catch_enter(event)) { sp_submit_shout(' . $shoutbox['id'] . ', \'' . $context['session_var'] . '\', \'' . $context['session_id'] . '\'); return false; }"' : '', ' />Replace With:
<textarea class="smalltext" name="new_shout" id="new_shout_', $shoutbox['id'], '" style="width: 96%; height: 60px;"', $context['browser']['is_ie'] ? ' onkeypress="if (sp_catch_enter(event)) { sp_submit_shout(' . $shoutbox['id'] . ', \'' . $context['session_var'] . '\', \'' . $context['session_id'] . '\'); return false; }"' : '', ' /></textarea>The rest is just 'styling' to center the text box and put the button underneath. Compare those two bits of code and you can see how I did it. It's quite simple really!
-
Actually, even preserving
class="shoutbox_input in the textarea could be useful -- then it could be styled using CSS this way.
-
I'll try that again, thanks. A larger text box would be an improvement, but it's a user stretchable 'textarea' that I ultimately want to achieve.
In fact, it seems a logical improvement to SP. It can be easily set at any size by users.
-
but it's a user stretchable 'textarea' that I ultimately want to achieve.
I just had a look with the browsers available to me. The textarea is stretchable (by dragging the 'handle' at bottom right with the mouse) in Firefox and Chrome, but not IE and Opera.
-
Thanks for persevering.
Tried the edit again on my test forum. (Original files should be OK. Uploaded from PC through cPanel with no problems.)
Edit didn't work.
I emptied the file cache several times both before and after the edit.
Disabled and re-enabled the shoutbox several times.
Created a new shoutbox.
Tried viewing in FF5, IE8 & Chome.
No change at all to existing or new shoutbox default appearance and/or functionality.
-
Can you attach your PortalShoutbox.template.php file please?
-
Can you attach your PortalShoutbox.template.php file please?
I really do very much appreciate your perseverance.
PortalShoutbox.template.php attached.
-
Strange... your file does not have the modified code in it. If that is the file you actually used it would explain why nothing changed! :0
Anyway, try the attached file, which is your file with my 'modification' (lines 159-164) included. Your file is now exactly the same as mine, so it should work! 8)
-
newtoallthis -- have you been able to replace the textbox with a textarea?
-
The file I uploaded didn't contain the amendment because I'd removed it when it didn't work. I just wanted you to see that it was as it should be (i.e. not corrupted).
I've tried the new file on my test forum. I've emptied the file cache several times, refreshed the page, disabled and re-enabled the shout box and cannot see any change at all.
I'm on SMF 2.0 Gold and you seem to be running SMF 2 RC 3. Could that be an issue?? Also, the file permission for the old and new files are both 0644.
-
Once you start using the new file, you'll see that you've got a textarea for shoutbox entry.
Then, you can start fiddling with it using CSS.
-
I've still got the amended PortalShoutbox.template.php file active and it does not make any difference to the appearance or functionality of the text input box on my test forum. No 'handle' is evident which can be grabbed and stretched.
If I understand AussieBill correctly, just that one edit to PortalBlocks.template.php will cause the desired change to occur without the need to tweak further in portal.css.
-
Some browsers provide you a "handle" to resize the textarea. Safari does. IE does not.
You can use CSS to set the size of the textarea to be 2 lines high, if you like.
-
FF5 as it was, and now FF6, does support the rendering of a 'handle'.
FF is my default browser and no matter how I try, I cannot see a handle to the base of the SP shoutbox.
Thanks for your perseverance, chaps and chappeses, but the 'problem' remains open.
-
What happens if you take out the explicit "width" or "height" parameters for the textarea? Does the handle return then?
-
No it doesn't.
And, when I change the height from 60 px to 120 px, that makes no difference either.
It's almost as though the code content of Portal.Shoutbox.template.php has no bearing whatsoever on how the shoutbox behaves!
-
Once you start using the new file, you'll see that you've got a textarea for shoutbox entry.
Then, you can start fiddling with it using CSS.
Have you tried the code tweak on this or any other site? Have you actually seen it work in the way it was intended??
-
This is very odd. So you have changed
if ($context['can_shout'])
echo '
<div class="shoutbox_input smalltext">
<input type="text" name="new_shout" id="new_shout_', $shoutbox['id'], '" class="shoutbox_input sp_float_left input_text"', $context['browser']['is_ie'] ? ' onkeypress="if (sp_catch_enter(event)) { sp_submit_shout(' . $shoutbox['id'] . ', \'' . $context['session_var'] . '\', \'' . $context['session_id'] . '\'); return false; }"' : '', ' />
to
if ($context['can_shout'])
echo '
<div class="shoutbox_input smalltext">
<textarea name="new_shout" id="new_shout_', $shoutbox['id'], '" class="shoutbox_input sp_float_left input_text"', $context['browser']['is_ie'] ? ' onkeypress="if (sp_catch_enter(event)) { sp_submit_shout(' . $shoutbox['id'] . ', \'' . $context['session_var'] . '\', \'' . $context['session_id'] . '\'); return false; }"' : '', ' ></textarea>
but you don't see any difference? What do you see when you look at the HTML for that div (class=shoutbox_input)? Do you see any change?
If you are doing a page load and seeing no change at all, can you tell me
1) After you edit the file, which Theme are you putting it in?
2) Which theme are you using?
3) Is there a PortalShoutbox.template.php file in any other theme's directory?
-
The two snippets of HTML associated with the shoutbox text input boxes (main forum as compared to the edited test forum) as viewed by Firebug show virtually no differences.
Main Forum:
<div class="shoutbox_input smalltext">
<input id="new_shout_1" class="shoutbox_input sp_float_left input_text" type="text" name="new_shout">
<input class="sp_float_right button_submit" type="submit" onclick="sp_submit_shout(1, 'ac3319f80850', 'e2394537a8873536fb570dcf6bbee6c9'); return false;" value="Shout!" name="submit_shout">
</div>
Test Forum:
<div class="shoutbox_input smalltext">
<input id="new_shout_1" class="shoutbox_input sp_float_left input_text" type="text" name="new_shout">
<input class="sp_float_right button_submit" type="submit" onclick="sp_submit_shout(1, 'cf43d127bcc8', 'ac420cfc1bcb4f648a2c86814faf0e7a'); return false;" value="Shout!" name="submit_shout">
</div>
I have not 'put the file in a theme'. I've edited and saved the PortalShoutbox.template.php file for the test forum only.
The theme used on both main and test forums is Default Theme- Curve.
I don't think that there is another PortalShoutbox.template.php anywhere else on the server since when I search for this file only the two instances are shown....main forum and test forum.
-
It looks like you have not put that file up where your instance of smf will be forced to use it.
That file, PortalShoutbox.template.php, should go in the folder for your default theme.
So if your forum is installed in /smf/, that file will be /smf/Themes/default/PortalShoutbox.template.php
Can you verify that the file in /smf/Themes/default/PortalShoutbox.template.php has the changed code for the shoutbox?
-
It looks like you have not put that file up where your instance of smf will be forced to use it.
That file, PortalShoutbox.template.php, should go in the folder for your default theme.
So if your forum is installed in /smf/, that file will be /smf/Themes/default/PortalShoutbox.template.php
Can you verify that the file in /smf/Themes/default/PortalShoutbox.template.php has the changed code for the shoutbox?
There are only two instances of the file on the server. The code has been added to this one:-
/public_html/smf_test/Themes/default/PortalShoutbox.template.php (an unedited version remains in the same folder but has been renamed).
There has been no change to the appearance or functionality of the Test Forum shoutbox.
The code I used is identical to AussieBill's:-
if ($context['can_shout'])
echo '
<div class="shoutbox_input sp_center">
<textarea class="smalltext" name="new_shout" id="new_shout_', $shoutbox['id'], '" style="width: 96%; height: 60px;"', $context['browser']['is_ie'] ? ' onkeypress="if (sp_catch_enter(event)) { sp_submit_shout(' . $shoutbox['id'] . ', \'' . $context['session_var'] . '\', \'' . $context['session_id'] . '\'); return false; }"' : '', ' /></textarea>
<br /><input type="submit" name="submit_shout" value="', $txt['sp_shoutbox_button'], '" onclick="sp_submit_shout(', $shoutbox['id'], ', \'', $context['session_var'], '\', \'', $context['session_id'], '\'); return false;" />
</div>';
Neither my code nor AussieBill's code are the same as the the code you listed:-
if ($context['can_shout'])
echo '
<div class="shoutbox_input smalltext">
<textarea name="new_shout" id="new_shout_', $shoutbox['id'], '" class="shoutbox_input sp_float_left input_text"', $context['browser']['is_ie'] ? ' onkeypress="if (sp_catch_enter(event)) { sp_submit_shout(' . $shoutbox['id'] . ', \'' . $context['session_var'] . '\', \'' . $context['session_id'] . '\'); return false; }"' : '', ' ></textarea>
Can you please confirm whether I should be using AussieBill's code or yours??
-
For now, let's say it doesn't matter which one you use.
We are just looking for evidence that it is getting used at all. If your code echos "<textarea", there is no reason for that to be rendered as "<input". So I am going to go out on a limb and conclude that the code you are showing me is not being run at all.
When I make a change to this part of the code (actually, I just added style="background-color: red;" to the input), I see the change as soon as I put it in the Themes/default folder. This should work for you, too.
1) Are you certain you are looking at /smf_test/index.php when you see this behavior
2) Are you certain that you have put the changed file into the folder /smf_test/Themes/default/PortalShoutbox.template.php
Please take a copy of that file from your server, copy it down to a new location on your PC, and attach the file.
Thanks.
-
The code I used to edit the file was that supplied by AussieBill.
The Shoutbox I've been testing is to be found at at xxxxxxxxx.com/smf_test/index.php?action=forum.
The enclosed amended PortalShoutbox.template.php was downloaded from xxxxxxxxx.com/public_html/smf_test/Themes/default.
-
And yet, it seems that your changes are not getting loaded.
Go to index.php?action=admin;area=theme;sa=edit;th=1
This is also accessible from
Administration Center » Themes and Layout » Modify Themes » Browse the templates and files in this theme.
Click on PortalShoutbox.template.php
Search for name="new_shout". Is it there, in function template_shoutbox_embed?
If so --- does your forum use caching?
-
The code I found by following your procedure is ('beginning at line 87') identical in my Main and Test forums, i.e. as per a clean install of SimplePortal. AussieBill's edit cannot be seen when looking in Administration Center » Themes and Layout » Modify Themes » Browse the templates and files in this theme when I search name="new_shout".
My forums do use caching (level 1 [recommended]).
-
That's your problem, then.
You are telling me that you have never put the edited file in Themes/default/PortalShoutbox.template.php
I understand from your previous posts that you have copied this file up to SOME place on the server, and even copied it back down again. But if you had successfully copied it into this directory, the changes would be there when you went looking for them.
You have two options:
1) Copy the file into the proper directory
2) Make your desired edit in place, using the editor you have just observed.
-
Thanks to the perseverance of AussieBill and AngelinaBelle, I have now got the textarea to show.
I chose my username carefully to pre-warn others not to make any positive assumptions about my level of experience and expertise. I'd entered the new code into the PortalShoutbox.template.php on the server rather than adding it through my site's theme editor. :-[
One further question. When I edited the theme on my Test Forum, it resulted in the new textarea being visible on both Test and Main forums. I was expecting to have to repeat the procedure on the main forum. Is this normal?
-
This is not normal.
1) Putting PortalShoutbox.template.php in the correct theme's directory should work.
2) Editing the theme's files in the theme editor should work also
3) Editing one forum's files should not affect another forum's files.
Unless the forums are somehow sharing template files. It had never occurred to me to try this. But it can be done.
Please check the following:
For your 'real' forum
* The path to your real forum
(see setting at ?action=admin;area=serversettings;sa=database)
* The path to the Theme Directory on your 'real' forum
(see list at ?action=admin;area=theme;sa=list)
* URL to above directory: (for this theme)
* URL to images directory: (for this theme)
For your 'test' forum
* The path to your test forum
* The path to the Theme Directory on your test forum
* URL to above directory: (for this theme)
* URL to images directory: (for this theme)
-
This is not normal.
1) Putting PortalShoutbox.template.php in the correct theme's directory should work.
2) Editing the theme's files in the theme editor should work also
3) Editing one forum's files should not affect another forum's files.
Unless the forums are somehow sharing template files. It had never occurred to me to try this. But it can be done.
Please check the following:
For your 'real' forum
* The path to your real forum
(see setting at ?action=admin;area=serversettings;sa=database)
* The path to the Theme Directory on your 'real' forum
(see list at ?action=admin;area=theme;sa=list)
* URL to above directory: (for this theme)
* URL to images directory: (for this theme)
For your 'test' forum
* The path to your test forum
* The path to the Theme Directory on your test forum
* URL to above directory: (for this theme)
* URL to images directory: (for this theme)
Both forums return the following:-
Theme directory (templates):
/home/xxxx/public_html/forum/Themes/default
URL to above directory:
http://www.xxxx.com/forum/Themes/default
URL to images directory:
http://www.xxxx/forum/Themes/default/images
Yet, in Admin>Config>Server Settings>Database Paths
Forum URL
SMF Directory
Sources Directory
Cache Directory
...are all reading OK, the separate forum URL's being displayed.
-
This is not a SimplePortal problem.
It is not even a problem with SMF.
Everything is working exactly as it should work :)
I think this happened because you created your test forum as a copy of the "real" one, including the database. And this includes the location of the directory for the default theme. Stop me if I'm wrong.
I think you want a separate themes directory for your test forum, so you can test changes to theme files.
While viewing your test forum:
At the bottom of the page action=admin;area=theme;sa=list
You will see an area to Reset Theme URLs and Directories.
Fill in the Base path and Base URL text boxes. Make sure they both point to (for example) /testforum/, not /forum/. Hit the "Attempt to reset all themes" button.
Now, your test forum should be using its own themes, not the ones in your real forum.
-
Thank you for the reassurance.
I will Reset Theme URLs and Directories as you have suggested.
-
The databases for main and test forums are different. I can backup the main and restore to the test without a problem. The test forum database remains unchanged until I do this.
In Admin (test forum), the correct paths are already in the 'Reset Theme URLs and Directories' text boxes.
However, displayed under 'SMF Default Theme - Curve (2.0)' (same page), it's showing a path to the main forum. Having in mind my comment about the separate databases, is it still your recommendation to 'Reset Theme URLs and Directories'?
-
Never a bad idea to check all your settings after "cloning" a forum like that.
I think that resetting all the theme directories will be fine. You will see no discernable affect on the ones that are already correct. You will see a good change on the default directory, which is the one you care about.
Any time you back up the main forum and restore it to the test forum, you will have to do this, because the information about where to find the Themes folders is stored in the database.
Good luck!
-
Thanks so much, AngelinaBelle. :)
You iz a star! All sorted now.
-
That was exciting, wasn't it. I hope you won't mind that I've marked this one solved for you.
Thanks!