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! > Forum Compact Mode (hides avatar & forum signature)
Mottie (MVP) 7/28/2009 4:58 PM EST : Forum Compact Mode (hides avatar & forum signature)
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Forum Compact Mode

I wrote this script because sometimes the forum avatar or signatures can be very distracting. This button hides them while you are on that page. The avatar and signatures will reappear if you click on the button again or reload the page. You can add this button to either the top area next to the Forum Tools and Topic Tools menus (Top) or next to each post next to the top and bottom links (Side).

 Top
(Compact Link)
 
 Side  (Blue Icon)
 

The Code

Add the following into your Banner or Footer HTML or into a free form text/HTML content box (while in <> HTML mode) on your forum page.
<script type="text/javascript">
$(document).ready(function(){
 var addToTop = false;
 var compactTopText = 'Compact';
 var compactSideImg = 'http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/compact-blue.png';

// Don't change anything below
// ****************************
 if (addToTop) {
  $('div[id*="_mnuTopicAdmin"]').closest('td')
   .prepend('<a href="javascript:void(0)"><span id="compact">' + compactTopText + '</span></a>')
 } else {
  $('.MessageTopBottomCell1')
  .append('| <a href="javascript:void(0)"><img id="compact" src="' + compactSideImg + '"></a>')
 }
 $('.ContentRow').find('#compact').click(function(){ compactMode() })
  .parent().attr('title','Hide/Show Forum Avatar and Signatures').addClass('tooltip');
})
function compactMode(){
 $('.MessageAuthorInfoCell1 center img').toggle();
 $('.MessageBodyCell1 div[style*="overflow"]').toggle();
 return false;
}
</script>

Customizing

  • Use the addToTop variable to place the button where you want it. If set to true, the button will placed next to the forum/topic tools menu. If false, it will be added into each post next to the top and bottom links. See the screen shots above.
    var addToTop = false;
  • If you decide to add the button to the top, use the compactTopText to customize the text or even add an image.
    var compactTopText = 'Compact';

    or

    var compactTopText = '<img src="URL TO YOUR IMAGE">';
  • If you decide to add the button to the side, use the compactSideImg variable to point to your image URL. I decided to leave this as an image since that is a pretty small area and you wouldn't be able to add much text (if any) in that area.
    var compactSideImg = 'http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/compact-blue.png';
TopBottom

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