News: TinyPortal Release Schedule. Please read this update for More Info.

Login  |  Register
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media
Welcome, Guest. Please login or register.
Did you miss your activation email?

November 18, 2019, 08:13:43 PM

Login with username, password and session length

Recent

Members
Stats
  • Total Posts: 189259
  • Total Topics: 20772
  • Online Today: 332
  • Online Ever: 629
  • (November 08, 2018, 01:36:54 PM)
Users Online
Users: 0
Guests: 111
Total: 111

Author Topic: Better shoutbox for horizontal layout  (Read 17032 times)

0 Members and 1 Guest are viewing this topic.

Offline Oldiesmann

  • Jr. Member
  • **
  • Posts: 27
    • Cincy Space
Better shoutbox for horizontal layout
« on: January 03, 2013, 04:48:29 PM »
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?

Offline rocknroller

  • Better to live 100 years as a millionaire than 7 days in misery.
  • Jr. Member
  • **
  • Posts: 33
  • Mini chat HR
    • Mini Chat - Domaca Pricaonica
Re: Better shoutbox for horizontal layout
« Reply #1 on: January 04, 2013, 02:25:33 AM »
I think that all can be done just need a little imagination and CSS knowledge. I can help with that.
Tražite li mjesto za opuštanje, zabavu, Besplatno Upoznavanje, brbljanje i pricanje tu je Mini Chat HR, Domaci sajt sadrži sobe za druženje tj. chat za mobitel, isto kao i za stolna racunala. I to bez prijave email adrese, najbolje pricaonice su MiniChatHR.com

Offline lurkalot

  • Administrator
  • *
  • Posts: 6349
    • Camera Craniums
Re: Better shoutbox for horizontal layout
« Reply #2 on: January 04, 2013, 03:00:19 AM »

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

Offline IchBin™

  • Developer
  • *
  • Posts: 16228
    • My Website
Re: Better shoutbox for horizontal layout
« Reply #3 on: January 04, 2013, 08:21:10 AM »
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.

Offline lurkalot

  • Administrator
  • *
  • Posts: 6349
    • Camera Craniums
Re: Better shoutbox for horizontal layout
« Reply #4 on: January 04, 2013, 10:47:12 AM »
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 ;)

Offline IchBin™

  • Developer
  • *
  • Posts: 16228
    • My Website
Re: Better shoutbox for horizontal layout
« Reply #5 on: January 04, 2013, 12:51:25 PM »
I guess you have to be logged in to see it Lurk.

Offline lurkalot

  • Administrator
  • *
  • Posts: 6349
    • Camera Craniums
Re: Better shoutbox for horizontal layout
« Reply #6 on: January 04, 2013, 01:06:04 PM »
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.  :idiot2:

Offline Oldiesmann

  • Jr. Member
  • **
  • Posts: 27
    • Cincy Space
Re: Better shoutbox for horizontal layout
« Reply #7 on: January 05, 2013, 10:48:35 AM »

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? :P

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.

Offline Maxx1

  • Sr. Member
  • ****
  • Posts: 352
  • Learning To Fly
    • SMF Theme & Portal Testing
Re: Better shoutbox for horizontal layout
« Reply #8 on: January 05, 2013, 03:10:46 PM »
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]
.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]
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
« Last Edit: January 05, 2013, 03:37:10 PM by Maxx1 »
But Mama, That's Where all the fun is!

Offline Maxx1

  • Sr. Member
  • ****
  • Posts: 352
  • Learning To Fly
    • SMF Theme & Portal Testing
Re: Better shoutbox for horizontal layout
« Reply #9 on: January 05, 2013, 03:27:29 PM »
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]
/**
 * @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
But Mama, That's Where all the fun is!