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

[Maxx1]

OK Top panel set for 150px now looks like this on my test site with the above file!

regards,
maxx

[IchBin]

Yeah I haven't been a real big fan of all the fluff in the shoutbox either Oldies.  If you really want to alter it to fit better, I'd just change the layout in the template. There should be a TPShout.template.php in the default theme with a function at the very bottom that controls the layout for the shoutbox.  You can probably only get what you're really after by altering the output.

[Maxx1]

maybe I can work on this later on see if we can do it a little tighter! Maybe Jim can work with me on this One?

I would also like to work on a way to adjust the padding on the frontpage window functions, probably in the TP.Style.css or what ever it called!

I'll get back on this topic later on hopefully!

I like the looks of the text field with the little arrow however it does take up too much space, what do you guys think about doing away with that, or I could do a custom, css for those that want it out! I'm ass most know by now taking out the background colors and making them transparent so the match any theme color scheme FYI
on both the TPSout and the TPStyle.css. also touching up the submit field for the Shout box!

regards,
Maxx

[Oldiesmann]

Yeah I haven't been a real big fan of all the fluff in the shoutbox either Oldies.  If you really want to alter it to fit better, I'd just change the layout in the template. There should be a TPShout.template.php in the default theme with a function at the very bottom that controls the layout for the shoutbox.  You can probably only get what you're really after by altering the output.

I'll take another look at it over the next couple of days and see if I can get it looking nicer. I'm just a bit surprised that it's so much work to get it looking nicer in the horizontal layout that is so common for most shoutboxes.

[IchBin]

Horizontal shoutboxes are common? I very rarely see shoutboxes, let alone see them horizontal. lol

Maybe I just don't see what you're talking about. When you posted a link to your site, I view the shoutbox as a guest and don't see it with the post box and smilies etc.  What settings are you using for your shoutbox height, block height, and which panel? I can try to see what you're talking about and see if there's something I can put in for future.

[Maxx1]

I never use the shout horz. but have tested and supported other portals and none of them look good at 150px. in height and how can you real expect them to... But I have post info above that will make it look allot better than what he had, if wants to use it it's up to him , or if he needs me to change the CSS for him , I can do that also... Just let me know!

regards,
Maxx

[shobedo]

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

all you need u  can find on google http://www.google.com