Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Banner > Assigned Image or Flash Banner to Each Tab
Mottie (SuperAdmin) 7/18/2008 10:00 AM EST : Assigned Image or Flash Banner to Each Tab
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

How to assign a Banner Image or Flash File for each tab

GuildPortal admin site link to original post

Banner Area Code

<script type="text/javascript">
var images = [];
/* ********************************
 Add images: images.push (["TabID","Add URL here"]);
 Add Flash:  images.push (["TabID","Add URL here","Width","Height"]);

- TabID is from the URL of your site, below the TabID is 2222222
 "http://www.guildportal.com/Guild.aspx?GuildID=111111&TabID=2222222"
 
 - If the TabID has no match, the script will default to the first image.

- Make sure you have brackets "[]" around the TabID and URL
 ******************************** */

images.push (["2222220","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_cobblestone.gif"]);
images.push (["2222221","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_dirt.gif"]);
images.push (["2222222","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_floor.gif"]);
images.push (["2222223","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_grass.gif"]);
images.push (["2222224","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_lava.gif"]);
images.push (["2222225","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_outland2.gif"]);
images.push (["2222226","http://70.85.12.163/albino_flash06s/badger(www.albinoblacksheep.com).swf","400","350"]);

// banner builder background image
var replaceBannerBackground = true;

// ********************************
// Don't change anything below this line
// ********************************
var img = '', inc = 0, j = 0, currentTab = gupw('TabID');
for (var j=0; j < images.length; j++) {
 if ( images[j][0] == currentTab ) { inc = j; }
}
if (images[inc][1].match('.swf')) {
 img = '<object width="' + images[inc][2] + '" height="' + images[inc][3] +
  '"><param name="movie" value="' + images[inc][1] + '"></param><embed src="' +
  images[inc][1] + '" type="application/x-shockwave-flash" width="' + images[inc][2] +
  '" height="' + images[inc][3] + '"></embed></object>';
 $('#bannerCell').html(img);
} else if (replaceBannerBackground) {
 $('#bannerCell').css('background-image','url("'+ images[inc][1] + '")');
} else {
 $('#containedBanner').attr('src', images[inc][1]);
}
function gupw(n){
 n = n.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");
 n = (new RegExp("[\\?&]" + n + "=([^&#]*)")).exec(window.location.href);
 return n == null ? "" : n[1];
}
</script>

Customizing

  • UPDATE: Several important notes about the code update:

    1. This above code now needs to be placed at the bottom of the page (in the Footer Area : Control Panel > Custom HTML & Script > Footer Area). It should replace the banner image/background before the page is loaded, so you won't see a flash when the image changes. And it also needs to be in the footer to ensure that jQuery has loaded.
    2. It now assumes that you have used the banner builder. The banner builder works with two images: one for the banner background (set as a background image) and the second for your guild name image (it's an image that floats above the background). This code allows you to replace one or the other by setting the "replaceBannerBackground" variable to true or false, depending on how you have set up your banner builder.

  • TabID: Find the TabID for each tab of your site, it is the end of the URL for your site. The TabID of the example below is 2222222

    "http://www.guildportal.com/Guild.aspx?GuildID=111111&TabID=2222222"

    Insert this number into the images variable - the text in green.

    images.push (["TabID",....]);

  • Images: Replace the URL in orange with your image URL. Add and remove the lines as needed.

    images.push (["TabID","Add URL here"]);

  • Flash: Add flash by replacing the URL in orange, then add the width and height of your flash in red, as follows:

    images.push (["TabID","Add URL here","Width","Height"]);
*Note: You MUST have the brackets "[]" (in blue) around the data for this to work!
Edit (4/17/2010): Updated the code to replace the banner background or image that is part of the banner builder. Please read the note added above in the customization area.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 12/28/2008 6:06 AM EST : RE: Assigned Image or Flash Banner to Each Tab
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

How to assign a theme to each tab

GuildPortal admin site link to original post

This version allows you to assign a CSS stylesheet as well as a banner image to each tab of your site. The banner image (or flash file) is placed inside the <div id="banner"></div> to allow you to customize the remainder of your banner area.

Banner Area Code

<div id="banner" align="center"></div>
<script type="text/javascript">
var images = new Array();

/* ********************************
 Add images: images.push (["TabID","URL to CSS","Add URL here"]);
 Add Flash:  images.push (["TabID","URL to CSS","Add URL here","Width","Height"]);

- TabID is from the URL of your site, below the TabID is 2222222
 "http://www.guildportal.com/Guild.aspx?GuildID=111111&TabID=2222222"
 
 - If the TabID has no match, the script will default to the first image.

- Make sure you have brackets "[]" around the TabID and URL
 ******************************** */
var inc = 0; // default theme

images.push (["2222220","http://www.axiomfiles.com/Files/243007/style-bold2.css","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_cobblestone.gif"]);
images.push (["2222221","http://www.axiomfiles.com/Files/243007/style-black2.css","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_floor.gif"]);
images.push (["2222222","http://www.axiomfiles.com/Files/243007/style-ne2.css","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_grass.gif"]);
images.push (["2222223","http://www.axiomfiles.com/Files/243007/style-grey2.css","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_rez2.jpg"]);
images.push (["2222224","http://www.axiomfiles.com/Files/243007/style-blue2.css","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/bkgd_outland2.gif"]);
images.push (["2222225","http://www.axiomfiles.com/Files/243007/style-wv2.css","http://70.85.12.163/albino_flash06s/badger(www.albinoblacksheep.com).swf","400","350"]);
images.push (["2222226","http://www.axiomfiles.com/Files/243007/style-parch2.css",""]);

// ********************************
// Don't change anything below this line
// ********************************
var img = "";
var currentTab = gup("TabID");
 for (var j=0; j < images.length; j++) {
  if ( images[j][0] == currentTab ) inc = j;
 }
 if (images[inc][2].match(".swf")) {
  img = "<object width='" + images[inc][3] + "' height='" + images[inc][3];
  img += "'><param name='movie' value='" + images[inc][2];
  img += "'></param><embed src='" + images[inc][2] + "' type='application/";
  img += "x-shockwave-flash' width='" + images[inc][3] + "' height='" + images[inc][4];
  img += "'></embed></object>";
 } else {
  img = (images[inc][2]=="") ? "" : "<img src=" + images[inc][2] + " border=0>";
 }
 if (images[inc][1] != "") {
  img += "<link rel='stylesheet' type='text/css' media='screen' href='";
  img += images[inc][1] + "'>";
 }
document.getElementById("banner").innerHTML = img;
function gup(name) {
 name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
 var regexS = "[\\?&]"+name+"=([^&#]*)";
 var regex = new RegExp( regexS );
 var results = regex.exec(window.location.href);
 if( results == null )
  return "";
 else
  return results[1];
}
</script>

Customizing

  • See the post above for details on customizing this script. Below are the instructions on the changes

  • Add the link to your custom CSS (in purple) file in the script above, following these examples:

     Add images: images.push (["TabID","URL to CSS","Add URL here"]);
     Add Flash:  images.push (["TabID","URL to CSS","Add URL here","Width","Height"]);

  • Set the default theme using "var inc = 0;". The number points to the "images" array, zero being the first line and number increases sequentially from there.

  • You can leave out the image/flash URL from the "images" array, but you cannot leave out the "URL to CSS", leaving out a "TabID" will set the CSS to the default definition that is set by the "var inc = 0;".

  • If you need instructions on how to make a CSS file, please read this post. For a newer & better method of adding custom HTML for your content boxes, refer to this post.

  • If this isn't quite what you're looking for, there is also a theme selector that allows users to pick their own theme for the site.
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%