Rearranging Shoutbox Layout

[Strigoi Morte]

Now, I have been fiddling around on Beta trying to get a feel and have gotten some of the elements to look like what I have been trying to accomplish but I just cannot get it right. Either one area floats off and I just cannot get it right. So I am here asking if it is possible to rearrange the shout box layout to look like this...

^{Clicky Click}

^{(This was posted in the General but I removed it and am pretty sure this is the location this question needs to be in. If it is not, then sorry in advance).}

[Stinky666]

Feb 1, 2013 10:48:50 GMT -8 Strigoi Morte said:

Now, I have been fiddling around on Beta trying to get a feel and have gotten some of the elements to look like what I have been trying to accomplish but I just cannot get it right. Either one area floats off and I just cannot get it right. So I am here asking if it is possible to rearrange the shout box layout to look like this...

^{Clicky Click}

^{(This was posted in the General but I removed it and am pretty sure this is the location this question needs to be in. If it is not, then sorry in advance).}

If no one else has replied to this after I have had sleep and been up for a few hours, I will attempt it.
I am not promising even if I do attempt it, I will manage to do it though. But I shall at least give it a shot =D

[Strigoi Morte]

Is it weird that I sorta knew it would be you that would attempt this??? Maybe I am just crazy and always loved your work... anyways. No matter the case, whether successful or not, or picked up by someone else, greatly appreciate the try at it

[Shorty]

I gave this a go, sorry stinky. But go to Layout Templates and then choose the shoutbox template. Then remove eveything from that template and replace it with this.





<div class="$[shoutbox_class] container full">
<div class="title-bar"><h2>Shoutbox</h2></div>
<div class="content">
       <div align="center">
           <table width="100%">
               <tr>
                   <td colspan="2" width="100%">
                       <div align="left">
                           {if $[welcome_message]}
                           <div class="pad-all-double content-box shoutbox_welcome_message">
                               $[welcome_message]
                           </div>
                           {/if}
                       </div>
                   </td>
               </tr>
               <tr>
                   <td width="50%" style="padding:2px;">
                       <div align="left">
                           {if $[can.post]}
                           <div class="shoutbox_form_container">
                           $[shoutbox_form.header]
                               <div class="shoutbox_name">
                                   {if $[shoutbox_form.guest_name.input]}
                                       Shout as: $[shoutbox_form.guest_name.input]
                                   {else}
                                       Shouting as: $[current_user]
                                   {/if}
                               </div>
                               <div class="shoutbox_form content-box">
                                   $[shoutbox_error]
                                   $[refresh_button]
                                   $[reply_box_buttons]
                                   $[shoutbox_form.message.input]
                                   $[message_character_count]
                                   $[post_button]
                                   $[cancel_button]
                               </div>
                           $[shoutbox_form.footer]
                           </div>
                           {/if}
                       </div>
                   </td>
                   <td width="50%" style="padding:2px;">
                       <div class="shoutbox_container orientation-$[reply_box_position] {if !$[can.post]}no-post{/if}" height="165px" style="padding-bottom:0!important;">
                           <div class="$[shoutbox_posts_class]" style="height: 165px;" 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>
                           
                       </div>
                   </td>
               </tr>
           </table>
       </div>
</div>
</div>

[Strigoi Morte]

Oh hot snazzies, cool cool cool. Still fiddling around to get things looking to my preference but thank you very much for taking the time out and whipping this up :)

One last thing and I will toddle away (and this is not a 'omg this is a must'), but is there any other way to reduce the size(/gap) of the shout box welcome message?  (besides going the css .shoutbox_welcome_message route of margin-bottom: -100px route which I have done  in my test site.) -100 seems to be the magic number but can only wonder and hope for a little more.

[blueshead]

Post a screenshot please.. I'd like to see the result..

[Strigoi Morte]

Feb 2, 2013 8:55:30 GMT -8 blueshead said:

Post a screenshot please.. I'd like to see the result.. :)

Here is a screenshot of just changing the layout as said by Shorty

This is what I have (at the moment) after altering .css (still trying to get the sent message scrollbox a little bigger if it is possible).

[Shorty]

I'm glad you got it how you wanted it.

[blueshead]

Hmm.. It's tempting.. But I've done a few shoutbox changes already and this would break them.. Nice, Though...

[aRMY83]

Yes indeed it is tempting... but for now, I'll save the code just in case I get tired of the look and feeling of the present shoutbox.

Great code Shorty...

[blueshead]

Feb 5, 2013 14:45:36 GMT -8 aRMY83 said:

Yes indeed it is tempting... but for now, I'll save the code just in case I get tired of the look and feeling of the present shoutbox.

Great code Shorty...

oooo. Don't get me wrong.. I'm saving it too.. I think It could do more things as it gets fleshed out.. 

[Shorty]

Feb 5, 2013 16:59:34 GMT -8 blueshead said:

Feb 5, 2013 14:45:36 GMT -8 aRMY83 said:

Yes indeed it is tempting... but for now, I'll save the code just in case I get tired of the look and feeling of the present shoutbox.

Great code Shorty...

oooo. Don't get me wrong.. I'm saving it too.. I think It could do more things as it gets fleshed out.. 

You could honestly do whatever design you wanted to do. If you were to create an image as to what you might want, I or someone else could do it for you.

[havelock]

I got this set up along with avatars for my shouts.  It's great!  I'd love to know how to make the 'Enter your reply here' box larger like Strigoi Morte did.  I'm also wondering how you change the color of the 'enter your reply' form field from white to something darker like almost black.  (Fixed this!)