Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Shout Box help
Ayiana (New Admin) 8/8/2009 12:14 PM EST : Shout Box help
Ayiana
Posts: 1498
Zomgawsh Poster

Mottie,

I saw that one of your shoutboxes was not of the typical GP design.  I haven't found any way of modifying the shoutbox.  I hate that it has the input box at the bottom - where the oldest entry is.  I'd like to move it to the top.  I've put in a feature request.  However, what really caught my attention about yours was that it had the date and time stamp.  I can see this in the admin features, but not as the normal box.  Did you code your own?

Ayiana
TopBottom

Mottie (MVP) 8/8/2009 4:10 PM EST : RE: Shout Box help
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Ayiana!

Actually, the only modification that I had done to my shout box was to change the color using CSS (this CSS changes ALL your input buttons, input text boxes and selection buttons).
input, select { background:#333; color:#ddd; border:0px; }
The date and time stamp is also selected through the options. So I'm not sure what looks different to you.

I can mess around with the input box and see if I can move it to the top.

TopBottom

Mottie (MVP) 8/8/2009 4:47 PM EST : RE: Shout Box help
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Move your Shout Box Input Area to the Top

Hi Ayiana!

Ok that was easy enough *blink*

Add this code to your Banner HTML, Footer HTML or any free form text/HTML content box (on the same pages as your shout box)
<script type="text/javascript">
$(document).ready(function(){
var tmp = $('div[id*="_pnlNewShout"]');
tmp.parent().prepend( tmp.html() + "<br><br>" );
tmp.html('');
})
</script>
TopBottom

Ayiana (New Admin) 8/8/2009 11:49 PM EST : RE: Shout Box help
Ayiana
Posts: 1498
Zomgawsh Poster

Okay, I swear I tried the options and it only showed the date/time for admins.  Really!  And thank you SO MUCH for the script.  You are amazing.  I have a follow-up question, now.  I don't suppose, it is possible, with your bag of tricks, to change the size or font color of the date and time versus the shout text?

~Ayiana
TopBottom

Mottie (MVP) 8/9/2009 12:54 AM EST : RE: Shout Box help
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Ayiana!

Actually there is a CSS class already built into the shout box. Add and modify this line in your Custom CSS (without the style tags around it) or even add it along with your shout box code:
<style type="text/css">
.SmallDisplay { color:#555555; font-size:8pt; }
</style>
The problem is that "SmallDisplay" class also defines the forum descriptions and date posted in the forums. So maybe the best way around it is to only have this CSS on the same page as your shout box.
TopBottom

Butsuce (New Admin) 2/11/2010 5:41 PM EST : RE: Shout Box help
Butsuce
Posts: 162
Posts With Wolves

Hi Mottie!

Thanks for the code to move the shout entry to the top of the shout box. Is there anyway that the shout box entries can become scrollable to view the shout history?

-Butsuce
Scurvy Dogs
TopBottom

Mottie (MVP) 2/11/2010 6:22 PM EST : RE: Shout Box help
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Butsuce!

I could make the shout box scrollable, but I don't know how to access the shout history. It does appear you can include the last 20 shouts, so you could shrink the shout box and scroll through what's available by adding this CSS to your Additional CSS tab (adjust the height in red to whatever you want).
.gpWidget-shout .StyledList {
 height: 100px;
 overflow-y: auto;
}

UPDATE: Because of the new shout box layout, I have made the shout box image script do this for you now. Mostly because of the wrapper around the shout box has a variable ID.

If you don't plan on using the shout box image script, I've updated the CSS below to make it work, but it's up to you to make figure out the ID of the wrapper (it's relatively easy to do if you have Firefox with the Firebug addon installed).
/* The  #ctl00_ContentPlaceHolder1_ctl10_xmlShouts has variables after "ctl" that may change with each site & page */
.gpWidget-shout #ctl00_ContentPlaceHolder1_ctl10_xmlShouts {
 height: 100px;
 overflow-y: auto;
}
TopBottom

Ayiana (New Admin) 2/22/2010 12:24 PM EST : RE: Shout Box help
Ayiana
Posts: 1498
Zomgawsh Poster

Mottie said:
Hi Ayiana!

Actually there is a CSS class already built into the shout box. Add and modify this line in your Custom CSS (without the style tags around it) or even add it along with your shout box code:
<style type="text/css">
.SmallDisplay { color:#555555; font-size:8pt; }
</style>
The problem is that "SmallDisplay" class also defines the forum descriptions and date posted in the forums. So maybe the best way around it is to only have this CSS on the same page as your shout box.


Mottie,

You still have my undying devotion even though I've been MIA for months.  I wanted to comment on this.  Because of you and the tools you've given us to help us help ourselves I felt confident enough to tinker on my own.  There is a very simply way around this limitation.  I couldn't have my forum descriptions so tiny AND I have the shout box on nearly every page, SO...

Because many of my content boxes have custom CSS (thanks to you), I just added:
#box_Shout_Box_Name .SmallDisplay {font-size: 8pt;}
That made the date/time stamp text smaller and left my forum descriptions alone.

Thanks again, Mottie.

~Ayiana
TopBottom

Ayiana (New Admin) 2/22/2010 12:49 PM EST : RE: Shout Box help
Ayiana
Posts: 1498
Zomgawsh Poster

Mottie said:
Hi Butsuce!

I could make the shout box scrollable, but I don't know how to access the shout history. It does appear you can include the last 20 shouts, so you could shrink the shout box and scroll through what's available by adding this CSS to your Additional CSS tab (adjust the height in red to whatever you want).
.gpWidget-shout .StyledList {
 height: 100px;
 overflow-y: auto;
}


But now I'm feeling kinda like the dumb kid in class.  I had never thought of scrolling the Shoutbox (thanks Butsuce!).  For this reason I had always limitied viewability to last 10 shouts rather than the maximum of 20.  I found the CSS Additions to Standard tab and copied and pasted the above into it, nothing else is in it.  I checked the Enabled box and...  it appears to have no effect over anything.

A caveat: because I am using a theme selector, the Full Custom CSS tab is actually completely empty.  Could this have anything to do with it?

~Ayiana
TopBottom

Mottie (MVP) 2/22/2010 1:54 PM EST : RE: Shout Box help
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Ayiana!

I'm glad you feel confident enough to tinker with your site, it always feels good when you have figured something out for yourself 

As for the CSS that scrolls your shoutbox, I learned a few days ago that you can't have CSS in both the full custom CSS tab and the CSS additions tab. The CSS additions tab should add any CSS there to the end of your custom theme CSS, but it won't add it to the end of the full custom css.

I know you said you are using a premade theme, but double check that it isn't using any custom CSS. If it is, then add the shout box CSS to the end of it. If not, add it to the CSS Additions tab and make sure it is enabled. And if even that doesn't seem to work, add <style> to the top and </style> to the end of the CSS then add the whole thing to your Footer Area.
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%