Customized shoutbox

[LuciferMorningstar]

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.

You cannot view this attachment.

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.

You cannot view this attachment.

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.

You cannot view this attachment.

I hope some of you can help me.
Greetings.

[@rjen]

You should have posted in the Tinyportal support topic. Perhaps someone can merge this post with that?

[@rjen]

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...

You cannot view this attachment.

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...

[LuciferMorningstar]

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...

You cannot view this attachment.

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?

[@rjen]

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...

Code Select Expand

// 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];
    }
}