I'm around and round we go
Moderator
Aug 11, 2013 20:40:25 GMT -5
Simple remodel that makes the shoutbox more condensed in look and feel. You can still customize the settings in the Admin Panel > Shoutbox, and adjust the colors, backgrounds, and borders with the Visual Editor to suite your forum's design.
Preview:
Layout Templates > Shoutbox > replace the whole thing with:
<div class="$[shoutbox_class] container full">
<div class="title-bar"><h2>Shoutbox</h2></div>
<div class="content">
{if $[welcome_message]}
<div class="pad-all-double content-box shoutbox_welcome_message">
$[welcome_message]
</div>
{/if}
<div class="shoutbox_container orientation-$[reply_box_position] {if !$[can.post]}no-post{/if}">
<div class="$[shoutbox_posts_class]" style="height: $[height];" aria-live="polite">
{if $[shoutbox_posts]}
$[shoutbox_posts]
{else}
<b>There are no posts here.{if $[can.post]} Start the conversation {if $[reply_box_position] == 'bottom'}below{else}above{/if}.{/if}</b>
{/if}
</div>
{if $[can.post]}
<div class="shoutbox_form_container">
$[shoutbox_form.header]
<div class="shoutbox_form content-box">
<div class="float-left shoutbox_name">
{if $[shoutbox_form.guest_name.input]}
Shout as: $[shoutbox_form.guest_name.input]
{else}
Shouting as: $[current_user]
{/if}
</div>
$[shoutbox_error]
$[message_character_count]
$[cancel_button]
$[post_button]
$[refresh_button]
$[reply_box_buttons]
$[shoutbox_form.message.input]
</div>
$[shoutbox_form.footer]
</div>
{/if}
</div>
</div>
</div>
Advanced Styles & CSS > Stylesheet > Find the /* Shoutbox */ CSS and replace everything that is not an @ variable:
.shoutbox_welcome_message { color: @shoutbox_message_text_color; font: @shoutbox_message_text_font; background: @shoutbox_message_background; border: @shoutbox_message_border; .rounded-corners(@shoutbox_message_border_radius); margin-bottom: 8px; }
.shoutbox_messages .shoutbox-post { color: @shoutbox_shouts_text_color; font: @shoutbox_shouts_text_font; background: @shoutbox_shouts_background; border: @shoutbox_shouts_border; .rounded-corners(@shoutbox_shouts_border_radius); text-align: left; position: relative; overflow: hidden; margin-top: 5px; margin-right: 10px; padding: 3px 15px 3px 10px; }
.shoutbox_messages .shoutbox_edit_button { color: @shoutbox_shouts_edit_color; font: @shoutbox_shouts_edit_font; text-decoration: @shoutbox_shouts_edit_decoration; display: inline-block; width: 32px; margin-right: 5px; visibility: visible; }
.shoutbox_messages .shoutbox_edit_button.hidden { visibility: hidden; }
.shoutbox_messages .shoutbox_delete_button { color: @shoutbox_shouts_delete_text_color; font: @shoutbox_shouts_delete_text_font; text-decoration: @shoutbox_shouts_delete_text_decoration; background: @shoutbox_shouts_delete_background; border: @shoutbox_shouts_delete_border; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; position: absolute; right: -7px; top: 0; width: 15px; cursor: pointer; margin-left: 20px; margin-top: 0px; padding: 3px; height: 100%; display: inline-block; }
.shoutbox .state-selected { background: @shoutbox_shouts_selected_background; }
.shoutbox_form { background: @shoutbox_reply_background; border: @shoutbox_reply_border; .rounded-corners(@shoutbox_reply_border_radius); padding: 5px 10px; }
.shoutbox_form .shoutbox_counter { color: @shoutbox_reply_counter_color; font: @shoutbox_reply_counter_font; float: right; margin: 5px 0 0 5px; }
.shoutbox_form textarea.gray { color: #666666; }
.shoutbox_messages { overflow-y: scroll; text-align: center; position: relative; }
.shoutbox .content { padding: 5px; }
.shoutbox_messages .shoutbox-post:first-child { margin-top: 0px; }
.shoutbox_messages .message { padding-right: 10px; word-wrap: break-word; }
.shoutbox_messages .details { float: right; margin: 0px 15px 0px 10px; height: 16px; vertical-align: bottom; }
.shoutbox_form.reply-box-bottom { margin-top: 0px; }
.shoutbox_form.reply-box-top { margin-bottom: 0px; }
.shoutbox_form input[type="text"] { margin-top: 2px; margin-bottom: 4px; }
.shoutbox_form .button img { display: inline; padding: 2px 0 0; }
.shoutbox_form .shoutbox_refresh_button { float: right; padding: 2px 6px 0px 6px; }
.shoutbox_form ul.tools { float: right; white-space: nowrap; display: inline-block; }
.shoutbox_form ul.tools li { float: right; margin: 0; padding: 1px 0px 0px 0px; .rounded-corners(0px); border: 0; height: 22px; width: 26px; text-align: center; }
.shoutbox_form ul.tools li img { padding: 0; }
.shoutbox_form textarea { height: 30px; width: 100%; margin-right: 0px; margin-bottom: 5px; margin-top: 5px; position: inherit; .box-sizing(); }
.shoutbox_form .shoutbox_post_button { padding: 2px 6px 0px 6px; float: right; }
.shoutbox_form .shoutbox_cancel_button { float: right; padding: 2px 6px 0px 6px; vertical-align: bottom; }
.shoutbox_name { display: inline-block; font: @shoutbox_shouts_text_font; }
.shoutbox_name input { height: 15px; width: 50%; min-width: 150px; }
.shoutbox_container { position: relative; }
.shoutbox_container > .shoutbox_form_container { position: absolute; width: 100%; }
.shoutbox_container.orientation-top { padding-top: 85px; }
.shoutbox_container.orientation-top.no-post { padding-top: 0; }
.shoutbox_container.orientation-top > .shoutbox_form_container { top: 0; }
.shoutbox_container.orientation-bottom { padding-bottom: 85px; }
.shoutbox_container.orientation-bottom.no-post { padding-bottom: 0; }
.shoutbox_container.orientation-bottom > .shoutbox_form_container { bottom: 0; }
Feel free to tinker with it to make your own layouts or to better fit your forum's design.
Enjoy!