Hello everyone,
I hope to write in the appropriate section.
I would like to modify the shoutbox like this.
Let me start by saying that I use TinyPortal.
As you may already know, the shoutbox on mobile looks like this.
shoutbox originale.PNG
As you know, while writing in the bottom box, the text always scrolls to the right and to recheck what you wrote before you have to scroll to the left.
The box has always seemed a little too tiny to me and the writing, which always and only follows that direction, isn't very comfortable, especially when you have to double-check what you wrote before.
Well, I would like the painting to be a little bigger and for the writing to wrap at the end of the margin.
Furthermore, I would very much like it if, among the various buttons, there was also the one to add images via links, like the one found in the topics.
I show you an image that I modified to make my idea clear.
shoutbox modificata.PNG
Please note this tiny detail too.
At the bottom right of the box there is a very small white dot, which should be used to further enlarge the box, depending on your tastes, by holding down with your finger.
riquadro dettaglio.PNG
I hope some of you can help me.
Greetings.
You should have posted in the Tinyportal support topic. Perhaps someone can merge this post with that?
Question 1: the input field.
TinyPortal offers 4 different layouts that you can choose in the block settings.
The input layout you want resembles Shoutbox layout 2.
You can choose that one...
2023-12-16_194951.jpg
Question 2: Button for adding images
Has been asked and discussed before on on the support forum.
We are not planning to add that: if you want to add an image in a shoutbox message it is supported, but we feel the shoutbox is not meant or planned for full blown editing of post like messages.
FYI: the little white dot you are referring to is a standard browser feature for input fields that are defined as textarea: if you choose layout option 2 you will see this available already...
Quote from: @rjen on December 16, 2023, 01:56:07 PMQuestion 1: the input field.
TinyPortal offers 4 different layouts that you can choose in the block settings.
The input layout you want resembles Shoutbox layout 2.
You can choose that one...
2023-12-16_194951.jpg
Question 2: Button for adding images
Has been asked and discussed before on on the support forum.
We are not planning to add that: if you want to add an image in a shoutbox message it is supported, but we feel the shoutbox is not meant or planned for full blown editing of post like messages.
FYI: the little white dot you are referring to is a standard browser feature for input fields that are defined as textarea: if you choose layout option 2 you will see this available already...
HI.
Thanks for your answer.
How can I put the date and time at the end of the message without leaving spaces like in the previous layout?
Not easily: you would have to make changes to the shoutbox template file...TPShout.template.php
We are offering these 4 standard layouts: if you want to change them more you will have to do it yourself...
The layouts are build up in this piece of code...
// Shoutbox single shout template
function template_singleshout($row, $block_id)
{
global $scripturl, $context, $settings, $txt;
$data = TPBlock::getInstance()->getBlock($block_id);
$set = json_decode($data['settings'], TRUE);
$shoutbox_id = $set['shoutbox_id'];
$shoutbox_layout = $set['shoutbox_layout'];
$shoutbox_height = $set['shoutbox_height'];
$shoutbox_avatar = $set['shoutbox_avatar'];
$shoutbox_barposition = $set['shoutbox_barposition'];
$shoutbox_direction = $set['shoutbox_direction'];
if(is_null($shoutbox_layout) && isset($context['TPortal']['shoutbox_layout'])) {
$shoutbox_layout = $context['TPortal']['shoutbox_layout'];
}
$layoutOptions = array(
'0' => '
<div style="padding-bottom: 5px;">
<div class="tp_shoutbody_layout0">
<div class="tp_shoutavatar">
' . ($shoutbox_avatar == '1' ? '<div class="tp_shoutavatar2"><a href="' . $scripturl. '?action=profile;u=' . $row['member_id'] . '">' . $row['avatar'] . '</a></div>' : '') . '
<h4><a ' .(!empty($context['TPortal']['shoutbox_use_groupcolor']) ? 'style="color:' .$row['online_color']. ';"' : '') . ' href="' . $scripturl . '?action=profile;u=' . $row['member_id'] . '">' . $row['real_name'] . '</a></h4>
' . (allowedTo('tp_can_admin_shout') ? '
<div class="tp_shoutbox_edit">
<a href="' . $scripturl. '?action=tpshout;shout=admin;s=' . $row['id'] . ';' . $context['session_var'] . '=' . $context['session_id'].'"><img src="' . $settings['tp_images_url'] . '/TPmodify_shout.png" title="'.$txt['tp-edit'].'" alt="'.$txt['tp-edit'].'" /></a>
<a onclick="TPupdateShouts(\'del\', '.$block_id.', '.$row['id'].'); return false;" class="shout_delete" title="'.$txt['tp-delete'].'" href="' . $scripturl. '?action=tpshout;shout=del;s=' . $row['id'] . ';' . $context['session_var'] . '=' . $context['session_id'].'"><img src="' . $settings['tp_images_url'] . '/TPdelete_shout.png" alt="'.$txt['tp-delete'].'" /></a>
</div>' : '') . '
<span class="smalltext clear" style="padding-top: .5em;color:' .$context['TPortal']['shoutbox_timecolor']. ';">'. tptimeformat($row['time'], true, $context['TPortal']['shoutbox_timeformat2']).'</span>
</div>
<div class="tp_bubble speech" ' . (!empty($context['TPortal']['shoutbox_textcolor']) ? 'style="color:' .$context['TPortal']['shoutbox_textcolor']. '">' : '>') . '' .$row['content']. '</div>
</div>
</div>',
'1' => '
<div class="tp_shoutbody_layout1">
' . ($shoutbox_avatar == '1' ? '<div class="tp_shoutavatar2"><a href="' . $scripturl. '?action=profile;u=' . $row['member_id'] . '">' . $row['avatar'] . '</a></div>' : '') . '
<a ' .(!empty($context['TPortal']['shoutbox_use_groupcolor']) ? 'style="color:' .$row['online_color']. '"' : '"') .' href="' .$scripturl. '?action=profile;u=' . $row['member_id']. '">'. $row['real_name'] .'</a>:
' .(allowedTo('tp_can_admin_shout') ? '
<div class="tp_shoutbox_edit">
<a href="' . $scripturl. '?action=tpshout;shout=admin;s=' . $row['id'] . ';' . $context['session_var'] . '=' . $context['session_id'].'"><img src="' . $settings['tp_images_url'] . '/TPmodify_shout.png" title="'.$txt['tp-edit'].'" alt="'.$txt['tp-edit'].'" /></a>
<a onclick="TPupdateShouts(\'del\', '.$block_id.', '.$row['id'].'); return false;" class="shout_delete" title="'.$txt['tp-delete'].'" href="' . $scripturl. '?action=tpshout;shout=del;s=' . $row['id'] . ';' . $context['session_var'] . '=' . $context['session_id'].'"><img src="' . $settings['tp_images_url'] . '/TPdelete_shout.png" alt="'.$txt['tp-delete'].'" /></a>
</div>' : ''). '
<div class="smalltext shout_date" style="padding-top: .5em;color:' .$context['TPortal']['shoutbox_timecolor']. ';">'. tptimeformat($row['time'], true, $context['TPortal']['shoutbox_timeformat2']).'</div>
<span '. (!empty($context['TPortal']['shoutbox_textcolor']) ? 'style="color:' .$context['TPortal']['shoutbox_textcolor']. '">' : '>') . '' . $row['content'] .'</span>
</div>',
'2' => '
<div class="tp_shoutbody_layout2" style="background:' . (($row['counter'] % 2) ? ($context['TPortal']['shoutbox_linecolor2']) : ($context['TPortal']['shoutbox_linecolor1'])) . ';">
' . (allowedTo( 'tp_can_admin_shout' ) ? '
<div class="tp_shoutbox_edit">
<a href="'.$scripturl.'?action=tpshout;shout=admin;s='.$row['id'].';'.$context['session_var'].'='.$context['session_id'].'"><img src="'.$settings['tp_images_url'].'/TPmodify_shout.png" title="'.$txt['tp-edit'].'" alt="'.$txt['tp-edit'].'" /></a>
<a onclick="TPupdateShouts(\'del\', '.$block_id.', '.$row['id'].'); return false;" class="shout_delete" title="'.$txt['tp-delete'].'" href="'.$scripturl.'?action=tpshout;shout=del;s='.$row['id'].';'.$context['session_var'].'='.$context['session_id'].'"><img src="'.$settings['tp_images_url'].'/TPdelete_shout.png" alt="'.$txt['tp-delete'].'" /></a>
</div>' : '').'
<div class="tp_shoutbox_time">
<span class="smalltext" style="color:' .$context['TPortal']['shoutbox_timecolor']. ';">'. tptimeformat($row['time'], true, $context['TPortal']['shoutbox_timeformat2']).'</span>
</div>
' . ($shoutbox_avatar == '1' ? '<div class="tp_shoutavatar2"><a href="' . $scripturl. '?action=profile;u=' . $row['member_id'] . '">' . $row['avatar'] . '</a></div>' : '') . '
<a ' .(!empty($context['TPortal']['shoutbox_use_groupcolor']) ? 'style="color:' .$row['online_color']. ';"' : '') . '
href="' . $scripturl . '?action=profile;u=' . $row['member_id'] . '">' . $row['real_name'] . '</a>: <span ' . (!empty($context['TPortal']['shoutbox_textcolor']) ? 'style="color:' .$context['TPortal']['shoutbox_textcolor']. '">' : '>') . ''.$row['content'].'</span>
<p class="clearthefloat"></p>
</div>',
'3' => '
<div class="tp_shoutbody_layout3" style="background:' . (($row['counter'] % 2) ? ($context['TPortal']['shoutbox_linecolor2']) : ($context['TPortal']['shoutbox_linecolor1'])) . ';">
' . (allowedTo( 'tp_can_admin_shout' ) ? '
<div class="tp_shoutbox_edit">
<a href="'.$scripturl.'?action=tpshout;shout=admin;s='.$row['id'].';'.$context['session_var'].'='.$context['session_id'].'"><img src="'.$settings['tp_images_url'].'/TPmodify_shout.png" title="'.$txt['tp-edit'].'" alt="'.$txt['tp-edit'].'" /></a>
<a onclick="TPupdateShouts(\'del\', '.$block_id.', '.$row['id'].'); return false;" class="shout_delete" title="'.$txt['tp-delete'].'" href="'.$scripturl.'?action=tpshout;shout=del;s='.$row['id'].';'.$context['session_var'].'='.$context['session_id'].'"><img src="'.$settings['tp_images_url'].'/TPdelete_shout.png" alt="'.$txt['tp-delete'].'" /></a>
</div>' : '').'
' . ($shoutbox_avatar == '1' ? '<div class="tp_shoutavatar2"><a href="' . $scripturl. '?action=profile;u=' . $row['member_id'] . '">' . $row['avatar'] . '</a></div>' : '') . '
<a ' .(!empty($context['TPortal']['shoutbox_use_groupcolor']) ? 'style="color:' .$row['online_color']. ';"' : '') . '
href="' . $scripturl . '?action=profile;u=' . $row['member_id'] . '">' . $row['real_name'] . '</a>: <span ' . (!empty($context['TPortal']['shoutbox_textcolor']) ? 'style="color:' .$context['TPortal']['shoutbox_textcolor']. '">' : '>') . ''.$row['content'].'</span>
<span class="smalltext" style="color:' .$context['TPortal']['shoutbox_timecolor']. ';">'. tptimeformat($row['time'], true, $context['TPortal']['shoutbox_timeformat2']).'</span>
<p class="clearthefloat"></p>
</div>',
);
if(!empty($layoutOptions[$shoutbox_layout])) {
return $layoutOptions[$shoutbox_layout];
}
}