GuildPortal will be going offline (permanently) by the end of the month.
Sign Up! Login: Password: New User? Forgot? Support
Forums : Layout & Theme > Adding a New Widget Row
Mottie (SuperAdmin) 6/22/2010 10:39 PM EST : Adding a New Widget Row
Posts: 3884



Adding a New Widget Row

GuildPortal admin site link to the original post

Basically this script adds a whole new table above the existing one. I had a hard time trying to figure out how to keep the same size as it was before, but decided I'll just let you set the size.



<script type="text/javascript">
/* Add Widgets to new row

 var t, widgets = [];

 widgets.push([ '.gpWidget-welcomelrg', '75%' ]);
 widgets.push([ '.gpWidget-latestthreads', '25%' ]);

 // Don't change anything below
 // ****************************

  $('.ContentWrapperTable').before('<table class="ContentWrapperTable"><tr class="ContentRow newContentRow"></tr></table>');
 $.each( widgets, function(j){
  t = ( $(widgets[j][0]).is('.gpWidget') ) ? $(widgets[j][0]) : $(widgets[j][0]).closest('.gpWidget');
  $('<td style="width:' + widgets[j][1] + '"></td>').append( t ).appendTo($('.newContentRow'));
 $('tr.newContentRow .ContentBoxBody').equalizeHeights();
$.fn.equalizeHeights = function(){
 return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height(); }).get()));
  • Find the Specific CSS Class of the widget you would like to move into the new row. I didn't make an exhaustive list of every widget, but I tried to cover the most common ones below. If you can't find it in the list, then just hollar at me and I'll find it for you.

 Widget Name

 Specific CSS Class


 Widget Name

 Specific CSS Class



Needs List




News Box – Large




News Box – Small




Officer Contact List


Embeded Page


Page View Counter


Events Box - Small


PayPal Donate Button


Forum Search








Free Form Text/HTML


Quests Box - Small


Game Guides


Raid Point Standings


Game News


Random Categorized Image 


GP News and Updates


Random Thumbnails


Guild Alliance Links


Recent Bloggers


Guild Funds


Recent Posts Stand-Alone


Guild Summary


Recent Topics Stand-Alone


Image Gallery


Roster (Default GP Roster)


Image Gallery-Silverlight 


RSS Feed




Shout Box


Info Widget


Voting Polls – Large


Links – Categorized List


Voting Polls – Small


Links – Single List


Welcome Message


Medals – Recent Awards


Who’s Online


Member of the Month


  • Add the widget(s) you want to move to the widget array as follows:
    widgets.push([ '.gpWidget-welcomelrg', '75%' ]);
    widgets.push([ '.gpWidget-latestthreads', '25%' ]);
    • Add the specific CSS class (in blue) to the code above
    • Add the widget of the widget (in red) as a percentage of 100. If you only add one, use' 100%'. You can add as many widgets as you want to cram into one row.

  • If you have more than one Free Form Text/HTML widget on your page. You can target any specific CSS class or ID inside that widget. For example, say you wanted to add the search box script to this top row. If you look in the HTML:
    <div id="popitmenu" ="clearhidemenu();" ="dynamichide(event)"></div>
    <div align="center"><div id="searchbox">
    <input id="search-input" type="text" maxlength="256" name="search" onKeyPress="return disableEnterKey(event)" />
    <span ="showmenu(event,linkset[0])" ="delayhidemenu()"><img id="search-image" src=""></span>
    <button id="searchbx" />
    You can look for any ID's or specific classes (ones that are only found in this code on this page) - I highlighted some in blue. Add any of these id's to the code.
    widgets.push([ '#popitmenu', '25%' ]);
  • NOTE: Widgets you should actually avoid are ones that expand/contract like the progression widget. The reason is the height of the widget is automatically adjusted when it is first moved. So if you have two or more widgets in this row, the widget that changes will work fine, but there will be a gap under the other one. So it just won't look good.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems

New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
Who's Online 
There are   members online.
So-and-so has logged on!