Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Layout & Theme > Adding a New Widget Row
Mottie (SuperAdmin) 6/22/2010 10:39 PM EST : Adding a New Widget Row
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

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.

Before

After

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

$(document).ready(function(){
 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()));
};
</script>
Customizing
  • 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

Achievements

.gpWidget-achievements


Needs List

.gpWidget-needslist

Bank

.gpWidget-banklrg


News Box – Large

.gpWidget-newslrg

Calendar

.gpWidget-calendar


News Box – Small

.gpWidget-newssml

Chat

.gpWidget-chatlrg


Officer Contact List

.gpWidget-officercontacts

Embeded Page

.gpWidget-embedded


Page View Counter

.gpWidget-viewcount

Events Box - Small

.gpWidget-eventsml


PayPal Donate Button

.gpWidget-paypaldonate

Forum Search

.gpWidget-forumsearch


Progression

.gpWidget-progression

Forums

.gpWidget-forumslrg


Quests

.gpWidget-questlrg

Free Form Text/HTML

.gpWidget-freeform


Quests Box - Small

.gpWidget-questsml

Game Guides

.gpWidget-gameguides


Raid Point Standings

.gpWidget-raidpoints

Game News

.gpWidget-gamenews


Random Categorized Image 

.gpWidget-randomcatimage 

GP News and Updates

.gpWidget-guildportalnews 


Random Thumbnails

.gpWidget-randomthumb

Guild Alliance Links

.gpWidget-alliessml


Recent Bloggers

.gpWidget-recentblogs

Guild Funds

.gpWidget-fundslrg


Recent Posts Stand-Alone

.gpWidget-mostrecentposts

Guild Summary

.gpWidget-guildmetasml


Recent Topics Stand-Alone

.gpWidget-latestthreads

Image Gallery

.gpWidget-imageslrg


Roster (Default GP Roster)

.gpWidget-rosterlrg

Image Gallery-Silverlight 

.gpWidget-slgallery


RSS Feed

.gpWidget-rssfeed

Inbox

.gpWidget-mailcenterlrg


Shout Box

.gpWidget-shout

Info Widget

.gpWidget-infosml


Voting Polls – Large

.gpWidget-votinglrg

Links – Categorized List

.gpWidget-catlinks


Voting Polls – Small

.gpWidget-smallvote

Links – Single List

.gpWidget-linkssml


Welcome Message

.gpWidget-welcomelrg

Medals – Recent Awards

.gpWidget-recentmedals


Who’s Online

.gpWidget-wholrg

Member of the Month

.gpWidget-monthlymember




  • 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" />
    </div></div>
    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
TopBottom

 
 
Key 
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!
%title%
%message%