Better shoutbox for horizontal layout

[Oldiesmann]

I am planning to upgrade/overhaul a site that I help out on soon. The site currently consists of a single front page (with various forum content displayed using SSI), a gallery and the forum.

I have decided to use a portal for the overhaul/upgrade since it would allow for more flexibility and tighter integration. We currently have the Ultimate Shoutbox mod installed (slightly modified to use the database instead of a text file), but last time I tried upgrading it to SMF 2.0, it broke things for reasons I never did figure out. Since we'll be using a portal, I'd rather just use the shoutbox included with the portal. Since the site is also using the articles mod, I'm considering using TinyPortal since it has a great articles system (and that's one less mod I have to install and keep up with).

However, TP's shoutbox won't work for our needs - it works great for a vertical layout, but it's horrible for a horizontal layout. Is there any way to improve the layout to be similar to the old Ultimate Shoutbox or at least work in a block that's only about 150px high?

[rocknroller]

I think that all can be done just need a little imagination and CSS knowledge. I can help with that.

[lurkalot]

However, TP's shoutbox won't work for our needs - it works great for a vertical layout, but it's horrible for a horizontal layout. Is there any way to improve the layout to be similar to the old Ultimate Shoutbox or at least work in a block that's only about 150px high?

Oldiesmann Hi again    You can set the height of the shoutbox in the admin panel.  Like http://cctestsite.info/forums/index.php?action=forum

[IchBin]

Are you talking about the size of the shoutbox or the actual layout of it? I don't know what the Ultimate shoutbox looks like.

[lurkalot]

Are you talking about the size of the shoutbox or the actual layout of it? I don't know what the Ultimate shoutbox looks like.

Brad, it's the one here at the top of the forum index http://www.photography-cafe.com/forum/index.php

[IchBin]

I guess you have to be logged in to see it Lurk.

[lurkalot]

I guess you have to be logged in to see it Lurk.

  Sorry Brad, I'm a member there, and forgot about that as I'm always logged in. 

[Oldiesmann]

However, TP's shoutbox won't work for our needs - it works great for a vertical layout, but it's horrible for a horizontal layout. Is there any way to improve the layout to be similar to the old Ultimate Shoutbox or at least work in a block that's only about 150px high?

Oldiesmann Hi again    You can set the height of the shoutbox in the admin panel.  Like http://cctestsite.info/forums/index.php?action=forum

How do I manage to keep running into you?

Brad - it's actually the old "SMF Shoutbox" mod, which has since been removed from the mod site.

Setting the height of the shoutbox doesn't help as it just means more scrolling.

Take a look at my test site to see what I mean: http://smf.oldiesmann.us/tiny/index.php

Shoutbox height is 100px, and the panel is set to force a height of 150px on all blocks.

I'm just looking for a simpler layout. The "SMF Shoutbox" has a simple single-line textbox at the top along with a row of smileys below it, and then all the shouts in a 200px-high iframe. On the current shoutbox, I can see 9 shouts at once, even with one having slightly larger text and another being nothing but smileys.

[Maxx1]

The first thing I notice in yours is the follow is missing some bottom padding:
This looks like it not the correct file, or has been modified by someone?

Code Select Expand

.tp_shoutbody {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: -moz-use-text-color #888888 #888888;
    border-image: none;
    border-right: 1px solid #888888;
    border-style: none solid solid;
    border-width: medium 1px 1px;
    font-size: 0.9em;
    line-height: 1.3em;
    margin: 0 5px 8px 0;
    overflow: auto;
    padding: 8px;  <!-- should be something like this = padding: 8px 0 8px 8px; ->
    }

or just replace the padding comment with this one:
   

Code Select Expand

padding: 8px 0 8px 8px;

Now this is in your TPShout.css...But if you habg in there I'll see if I can find a better one for you! (TPShout.css that is).

there is another issue, that you shout window is not centered vertically, so let me check that out!

LOOK at the below post >>>


regards,
maxx

[Maxx1]

Ok this is the complete TPSout.css file as is, yours has been modify it looks like:

SMF2/Themes/default/TPShout.css (1234 bytes)

Code Select Expand

/**
* @package TinyPortal
* @version 1.0
* @author IchBin - http://www.tinyportal.net
* @founder Bloc
* @license MPL 2.0
*
* The contents of this file are subject to the Mozilla Public License Version 2.0
* (the "License"); you may not use this package except in compliance with
* the License. You may obtain a copy of the License at
* http://www.mozilla.org/MPL/
*
* Copyright (C) 2012 - The TinyPortal Team
*
*/

.tp_shoutupper
{
background: url(images/tinyportal/shout_arrow.png) no-repeat bottom left;
margin: 0 5px 0 0;
text-align: right;
padding: 0;
height: 20px;
}
.tp_shoutavatar
{
margin: 0 5px 0 0;
overflow: hidden;
}
.tp_shoutbody
{
background: #fff;
border: solid 1px #888;
border-top: none;
line-height: 1.3em;
margin: 0 5px 8px 0;
padding: 8px;
font-size: 0.9em;
overflow: auto;
}
.tp_shoutcontainer
{
}
.tp_shoutmember,
.tp_shoutavatar img
{
font-weight: bold;
float: left;
}
.tp_shoutmember
{
}
.tp_shoutavatar .avy2 img
{
width: 30px;
max-height: 100%;
margin: 0 6px 0 0;
float: left;
background: white;
border: solid 1px #aaa;
padding: 1px;
}
.tp_shoutavatar h4
{
font-size: 1.1em;
margin: 5px 0 5px 0;

}


now please  Keep in mind I don't think it will look good at all at 150px any way you do it!... but that's up to you!

regards,
Maxx