HomeMottie's Help SiteResourcesSupport Tickets
Sign Up! • Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help. If you need to report a problem or want to make a feature request, please send in a support ticket.
Available Forums
Forums : Pimp My Site! > Shout Box help
1 2 3Next
Ayiana (New Admin) 8/8/2009 12:14 PM EST : Shout Box help link
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
Top • Bottom

Mottie (MVP) 8/8/2009 4:10 PM EST : RE: Shout Box help link
GuildPortal MVP
Mottie
Posts: 3872
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.

>>help-site<<
Top • Bottom

Mottie (MVP) 8/8/2009 4:47 PM EST : RE: Shout Box help link
GuildPortal MVP
Mottie
Posts: 3872
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>
>>help-site<<
Top • Bottom

Ayiana (New Admin) 8/8/2009 11:49 PM EST : RE: Shout Box help link
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
Top • Bottom

Mottie (MVP) 8/9/2009 12:54 AM EST : RE: Shout Box help link
GuildPortal MVP
Mottie
Posts: 3872
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.
>>help-site<<
Top • Bottom

Butsuce (New Admin) 2/11/2010 5:41 PM EST : RE: Shout Box help link
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
Top • Bottom

Mottie (MVP) 2/11/2010 6:22 PM EST : RE: Shout Box help link
GuildPortal MVP
Mottie
Posts: 3872
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;
}
>>help-site<<
Top • Bottom

Ayiana (New Admin) 2/22/2010 12:24 PM EST : RE: Shout Box help link
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
Top • Bottom

Ayiana (New Admin) 2/22/2010 12:49 PM EST : RE: Shout Box help link
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
Top • Bottom

Mottie (MVP) 2/22/2010 1:54 PM EST : RE: Shout Box help link
GuildPortal MVP
Mottie
Posts: 3872
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.
>>help-site<<
Top • Bottom

1 2 3Next
Admins Online
There are   members online.
GuildPortal Home • Frequently Asked Questions • Videos • Recent Updates • Support • Terms of Use • Privacy Policy
GuildPortal™ Axiom Shift, LLC.  All Rights Reserved. All game-related trademarks are properties of their respective owners. Several adorable monkeys were harmed during the creation of this site, and for that, we are wholly unapologetic.
So-and-so has logged on!
%title%
%message%