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! > Two Innovative Requests for the Guru's
Avandius (New Admin) 3/9/2009 12:15 PM EST : Two Innovative Requests for the Guru's
Avandius
Posts: 337
Fingers of Fury!

First:

Is it possible to integrate the WoWhead Searchbox or Universal Search box into the banner area? Such as in the top right area of it. (On my page, where the text "Fenris" is located) I've tried myself by placing the code into the banner area and using absolute positioning, however, the search icon always gets pushed to another row rather than staying horizonal to it.

Second:

Can someone find out how to split a content box into two columns? I've seen it on another GP page but i cannot seem to locate it. Basically the CenterContentBox would be like:

RSS News Feed HERE   

Recent Posts HERE


Mainly, the issue here would be getting the Recent Posts Feed to go in correctly, at least that seems like it would be more difficult then making the RSS feed in there, which is already in a Free Form box.

My website: http://testament.guildportal.com/

Some things may not work right or display correctly due to GP's recent changes.
TopBottom

Mottie (MVP) 3/12/2009 9:35 PM EST : RE: Two Innovative Requests for the Guru's
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Hi Avandius!

I think I might have the first request down... but please make sure it works on all the browsers you have access to, so far it seems to be working for me now. I had to change some code in the searchbox.js, but I didn't want to make the changes in the existing file so I made a copy and named it searchbox2.js. For those of you who don't know what search box we are talking about, check out this post.

Move your search box code into the banner area, then replace the "don't change anything below" part with the code below (the new stuff is in blue). It's not pretty, but I made a table with 2 cells to position the search box on the right side. Maybe you can think of a "prettier" method, but I'm half awake at the moment. When you're done with that, you will need to make one change in your GuildBar CSS to fix the alignment (in red).

SearchBox
/*
******************************
Don't Change anything below
****************************** */
</script>
<div id="popitmenu" ="clearhidemenu();" ="dynamichide(event)"></div>
<br><br><br><br>
<table><tr><td width="90%">&nbsp;</td><td>

<img src="http://i194.photobucket.com/albums/z13/gythawen/Testament/search-1.png">
<div id="searchbox">
<input id="search-input" type="text" maxlength="256" name="search" onKeyPress="return disableEnterKey(event)" />
<img id="search-image" src="" ="showmenu(event,linkset[0])" ="delayhidemenu()">
<img id="searchbx" src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/blank.gif"/>
</div>
</td></tr></table>
<script src="http://www.axiomfiles.com/Files/243007/searchbox2.js" type=text/javascript></script>
GuildBar CSS
.guildBar { width:700px; margin-right:auto; margin-left:auto; margin-top:110px;}



As for your second request, did you want to use the Recent Post RSS feed in the right column? If so, then I'll look into this tomorrow.
TopBottom

Avandius (New Admin) 3/13/2009 4:24 PM EST : RE: Two Innovative Requests for the Guru's
Avandius
Posts: 337
Fingers of Fury!

Thanks Mottie! I'll try putting this in over the weekend or on Monday. *crosses fingers*

Still working on trying to resolve the previous issues GP changes created.

Yep yep, I wanted to try RSS in the right column. The entire content box can be 500-700px wide.
TopBottom

Avandius (New Admin) 3/24/2009 5:12 PM EST : RE: Two Innovative Requests for the Guru's
Avandius
Posts: 337
Fingers of Fury!

Any idea on the 2nd request?
TopBottom

Mottie (MVP) 3/24/2009 6:11 PM EST : RE: Two Innovative Requests for the Guru's
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

LOL sorry Avandius, I totally forgot about this... I'll take a look at it later tonight after the raid
TopBottom

Mottie (MVP) 4/3/2009 4:50 PM EST : RE: Two Innovative Requests for the Guru's
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

LOL sorry again... o.O

I got distracted with the Forum modules

I had to make a few changes from the previous version (again!)...



  • I made a table with the class "feedBox" that has two columns.
    • The very first feed is added to the Recent Post side of the table (right)
    • All additional feeds are placed in the RSS News Feed Column (left)
    • You can make separate divs or switch the classes in the table however you want. Just make sure the ID is unique (only one per page)
  • Made the tooltip border larger since I was seeing the background repeat on some posts
  • Added the author's name to the tooltip

Anyway here is the feed script...
<table width="100%" class="feedBox">
 <tr>
  <td id="feedText1" width="50%" valign="top"></td>
  <td id="recentPosts" valign="top"></td>
 </tr>
</table>

<style type="text/css">
.feedTitle { color: #ffffff; }
.feedDate { color: #ffcc00; }
.feedDesc { color: #ffffff; padding: 5px; }
.feedDesc img { max-width: 550px; width: auto !important; width: 550px; }

.feedBox { font-size:12pt; width:800px; }
.feedBox a:link { color: #ffcc00; text-decoration: none; }
.feedBox a:visited { color: #ffcc00; text-decoration: none; }
.feedBox a:hover { color: #ffffff; text-decoration: none; }
.feedBox a:active { color: #ffcc00; text-decoration: none; }

.tooltip td { background: transparent url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/tooltip2.png);}
.tooltip a:link, .tooltip a:visited { color: #ffcc00; text-decoration: none; }
.tooltip {empty-cells: show; border-collapse:collapse; border-spacing:0;}
.tooltiplt {padding: 10px;}
.tooltiprt {background-position: right top !important;}
.tooltiplb {background-position: left bottom !important;}
.tooltiprb {background-position: right bottom !important;}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("feeds", "1");
$(document).ready(function() {
var myfeeds = new Array();

var feedTxt = "feedText1";
var tooltipWidth = 560;

var previewMode = false;
var previewLength = 800;
var readMoreMessage = "...<br><br><img align=right src=http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/moreinfo.gif>";

// The first feed should be your "recent posts" RSS feed link
myfeeds.push (["Recent Posts","http://guildportal.com/RSS/Feed.aspx?Type=GuildForumsMR&ID=258012",10]);

// The remaining feeds will go into your news feed box
myfeeds.push (["Digg Stories/Popular","http://www.digg.com/rss/index.xml",4]);
myfeeds.push (["New Movies this week","http://us.rd.yahoo.com/movies/rss/thisweek/?http://rss.ent.yahoo.com/movies/thisweek.xml",5]);

// **************************************
// Do not change anything below this line
// **************************************
var ttcss = "#dhtmltooltip";
var ttBrdr = $(ttcss).css("border-width");
var ttBkgd = $(ttcss).css("background-color");
$('.feedBox')
 .mouseover(function(){$(ttcss).css("border-width","0").css("background-color","transparent")})
 .mouseout (function(){$(ttcss).css("border-width",ttBrdr).css("background-color",ttBkgd)});
 for (var k = 0; k < myfeeds.length; k++) {
  var feedoutpt = (k==0) ? $("#recentPosts") : $("#"+feedTxt);
  feedResult(myfeeds[k],feedoutpt);
 }
function feedResult(currentFeed,feedoutpt) {
 var feed = new google.feeds.Feed(currentFeed[1]);
 feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
 feed.setNumEntries(currentFeed[2]);
 feed.load(function(result) {
  if (!result.error) {
   var ftitle = (currentFeed[0] == "") ? (result.xmlDocument.getElementsByTagName("title")[0].firstChild.nodeValue) : (currentFeed[0]);
   var feedText = "<div class='feedTitle'>" + ftitle + "</div>";
   var items = result.xmlDocument.getElementsByTagName("item");
   for (var j = 0; j < items.length; j++) {
    var xtitle = $(items[j]).find("title").text();
    var xlink = $(items[j]).find("link").text();
    var pubDate = $(items[j]).find("pubDate").text();
    var author = $(items[j]).find("author").text();
    var descript = $(items[j]).find("description").text();
    pubDate = pubDate.replace(/'/g,"&#92;&#39;").replace(/\"/g,"&quot;");
    descript = descript.replace(/'/g,"&#92;&#39;").replace(/\"/g,"&quot;");
    if (previewMode) {
     var dStart = descript.indexOf("<br>") + previewLength;
     if (descript.length > dStart) {descript = descript.substring(0,dStart) +  readMoreMessage;}
    }
    var feedPopup = '<div><table class=tooltip><tbody><tr><td class=tooltiplt>';
    feedPopup += '<span class=feedDate>' + pubDate + '</span>';
    feedPopup += (author=='') ? '' : ' by ' + author;
    feedPopup += '<div class=feedDesc>' + descript + '</div></td>';
    feedPopup += '<td class=tooltiprt>&nbsp;</td></tr><tr><td class=tooltiplb>&nbsp;</td>';
    feedPopup += '<td class=tooltiprb>&nbsp;</td></tr></tbody></table></div>';
    feedText += (j % 2 == 0) ? '<div class=NormGridRow>' : '<div class=AltGridRow>';
    feedText += '<a href="' + xlink + '" =\"ddrivetip(\'' + feedPopup + '\', \'\', \'';
    feedText += tooltipWidth + '\');\" ="hideddrivetip();">' + xtitle + '</a></div>';
   }
   feedText += '<br>';
   $(feedoutpt).append(feedText);
  } else { alert ("feed error from " + currentFeed[0]); }
 });
 }
});
</script>
I'm not including instructions for this... it's basically the same as the other feed posts with minor changes in the CSS.
TopBottom

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