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 : Help from the Community > Having a Widget span multiple sections.
-lK- (Guild Admin) 6/22/2010 5:18 PM EST : Having a Widget span multiple sections.
-lK-
Posts: 6
Getting Started!

In my current layout for my guild I only want to use the right and middle sections. But, Would like the Welcome message to span the top of both of those sections. Is there anyway to do this?

TopBottom

_Shulkie_ (Guild Admin) 6/22/2010 7:54 PM EST : RE: Having a Widget span multiple sections.
_Shulkie_
Posts: 467
Fingers of Fury!

i've played about with this (not with much success) though. sure it would be possible using jquery to insert a new div somewhere on the page that spans both columns, then insert the widget code into it, hiding the widget in it's original position.

maybe mottie can shed some light for you
Cheers, Shulkie
TopBottom

-lK- (Guild Admin) 6/22/2010 8:17 PM EST : RE: Having a Widget span multiple sections.
-lK-
Posts: 6
Getting Started!

Yeah, I have been looking around for a way to do it with jquery to no avail. Yeah, I'd be much obliged to anyone who knows a way to do this.

TopBottom

Mottie (MVP) 6/22/2010 10:31 PM EST : RE: Having a Widget span multiple sections.
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi -lK-!

I messed around and I think I got it...


Adding a New Widget Row

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.
TopBottom

-lK- (Guild Admin) 6/23/2010 12:38 AM EST : RE: Having a Widget span multiple sections.
-lK-
Posts: 6
Getting Started!

I must admit Mottie, your amazing at this.

Thank you very much.

TopBottom

shadowstts (Guild Admin) 7/4/2010 5:11 AM EST : RE: Having a Widget span multiple sections.
shadowstts
Posts: 364
Fingers of Fury!

i was woundering if there was a way to make it work with all 3 bits center and the side so i could change my recruitment widget to say 30%(recruitment) and the center (welcome) to 45%(event) and the other part 25% so that the icons for the class would be in straght line insted of under each other. this proibly didnt make any sence but tohught id ask 

Asylum RULES!

TopBottom

Mottie (MVP) 7/4/2010 12:58 PM EST : RE: Having a Widget span multiple sections.
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi Shadowstts!

Yes it is possible, try this:
widgets.push([ '#recruitTalent', '30%' ]);
widgets.push([ '.gpWidget-welcomelrg', '45%' ]);
widgets.push([ '.gpWidget-eventsml', '25%' ]);
but you could just adjust the recruitment box CSS like this if that is all you are after (it hides the class name text, or you could just make is smaller using "font-size: 10px;", but the death knight title still wraps):
.classIcon { width:35%; text-align:center;}
.classIcon span { display:none; }
.talentIcons { width:65%; }
TopBottom

shadowstts (Guild Admin) 7/4/2010 5:42 PM EST : RE: Having a Widget span multiple sections.
shadowstts
Posts: 364
Fingers of Fury!

tryed first sugestion and it looked wierd tryed second one and it worked thx mottie ^^ 

Asylum RULES!

TopBottom

Savatage (New Admin) 10/10/2010 3:34 PM EST : RE: Having a Widget span multiple sections.
Savatage
Posts: 662
Zomgawsh Poster

I was able to achieve it in a different way on my site by positioning.

MERCS

Here is the CSS I used:

.gpWidget-shout { width: 340px; height: 540px; overflow-y: auto; overflow-x: hidden; margin-left: 70px; margin-top: 70px; }
.gpWidget-raidpoints { width: 350px; height: 540px; overflow-y: auto; overflow-x: hidden; margin-left: 480px; margin-top: -540px; }
.gpWidget-progression { width: 340px; height: 300px; overflow-y: auto; overflow-x: hidden; margin-left: 890px; margin-top: -540px; }
.gpWidget-freeform { width: 340px; height: 240px; overflow-y: auto; overflow-x: hidden; margin-left: 890px; margin-top: 0px; }
.gpWidget-welcomelrg { width: 1150px; height: 540px; overflow-y: auto; overflow-x: hidden; margin-left: 80px; margin-top: 80px; }
.gpWidget-forumslrg { width: 1150px; height: 540px; overflow-y: auto; overflow-x: hidden; margin-left: 80px; margin-top: 80px; }
.gpWidget-votinglrg { width: 1150px; height: 540px; overflow-y: auto; overflow-x: hidden; margin-left: 80px; margin-top: 80px; }
.gpWidget-calendar { width: 1150px; height: 540px; overflow-y: auto; overflow-x: hidden; margin-left: 80px; margin-top: 80px; }
.gpWidget-rosterlrg { width: 1150px; height: 540px; overflow-y: auto; overflow-x: hidden; margin-left: 80px; margin-top: 80px; }
.gpWidget-mailcenterlrg { width: 1150px; height: 540px; overflow-y: auto; overflow-x: hidden; margin-left: 80px; margin-top: 80px; }
.gpWidget-newslrg { width: 340px; height: 540px; overflow-y: auto; overflow-x: hidden; margin-left: 80px; margin-top: 80px; }
.gpWidget-rssfeed { width: 750px; height: 540px; overflow-y: auto; overflow-x: hidden; margin-left: 480px; margin-top: -540px; }
.gpWidget-top5members { width: 340px; height: 300px; overflow-y: auto; overflow-x: hidden; margin-left: 80px; margin-top: 90px; }
.gpWidget-wholrg { width: 340px; height: 240px; overflow-y: auto; overflow-x: hidden; margin-left: 80px; margin-top: 0px; }
TopBottom

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