How to make a Welcome page (Splash Page) for your Guild Site

GuildPortal admin site link to original post

This method will create a Welcome page (a.k.a. Splash page or intro page) to your site. You can add images, flash or even a video to this page. I set up a basic welcome page to my "Test-site 2" which can be viewed here.

Setting up your site

First off you need an empty tab on your site. If you have a paid subscription site, just make a new tab. If you have a free site, you are limited to eight (8) tabs, so you may need to combine two tabs into one or just delete one tab all together.

Make a new page

• Control Panel > Pages & Content (Widgets) > Add a New Page
• Page Name: I used "Welcome", but you can put in anything you want.
• Minimum Level to See: make this "Super Admins" for now.
• Click [ Save Page ].

Page Order

• In the Page Display Order section (where you end up after you add a page), the welcome page you just added should be at the bottom.
• Make sure the welcome tab isn't your first tab (for now, but when done it will be). Because while it is set to super admin access only, people searching for your site through the GuildPortal search or people that have your site url that doesn't contain a "TabID" will end up on the Welcome page and only see a message stating they don't have the access to see the page.

Add a new Content Box

• Go to Control Panel > Pages & Content (Widget) >  select your welcome page.
• Click the [ Add Widget ] button.
• Enter "free" into the Search widgets box and press enter.
• Add to "In the middle of the page", then click [ Save New Widget ].
• Click [ Yes ] when it asks if you want to customize it.
• Switch the editor to <>HTML mode and add the code below.

The Welcome Screen

The code

Find the Welcome widget you made before. Click "Edit" inside the box, then add the code below into the editor while it is in HTML mode.

<style type="text/css">
#splashBox { margin: 0 auto; text-align: center; color: #fff; }
body {
  background: #333333 url(URL TO YOUR BACKGROUND IMAGE);
  color: #ffffff;
}
#PageContainer,.gpWidget,.sectionWrapper,.ContentZone,#bannerTable,
.BannerArea,.WfTopMenu,.TabBar,.straightBarWrapper,.InnerTabTable { display: none; }
.sectionWrapper { -webkit-box-shadow: 0 0 #000; -moz-box-shadow: 0 0 #000; box-shadow: 0 0 #000; }
</style>

<div id="splashBox">
 <div align=center>
  <div style="height:200px;"></div>
  <h1>Welcome $block[username]</h1>
  <img src="URL TO YOUR LOGO">
  <div style="height:100px;"></div>
  <a href="URL TO YOUR HOME PAGE">
   <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/entersite.gif">
  </a>
 </div>
<meta http-equiv="refresh" content="10; url=URL TO YOUR HOME PAGE">
</div>

<script type="text/javascript">
$(function() {
 var w = $('#splashBox').closest('.gpwidget');
 // remove the next two lines if you want your box borders to show
 w.find('.ContentBoxTitle').hide().end()
  .find('.ContentBox, .ContentBoxTitle, .ContentBoxBody').andSelf().attr('class','');
 // remove the above two lines if you want your box borders to show
 $('#splashBox').parents().show();
});
</script>

Customizing the code

• Content: You can edit anything between the <div id="splashBox"> and the </div> at the bottom (in gold).
  
  
• Alignment: This line in the css "#splashBox { margin: 0 auto; text-align: center; }" aligns all of the splash page content to the center of the page (horizontally). If you want to left justify it, the remove the "text-align:center" and add a "width: 600px;" or whatever width to set the content.
  
  
• Spacers: You can add/edit/remove spacers as desired - "<div style="height:200px;"></div>". These were added in place of adding a bunch of "<br>"s. Change the height to suit your needs.
  
  
• Welcome Message: The welcome message above is "Welcome $block[username]". The "$block[username]" is automatically replaced with the currently logged in user. If they aren't logged in, the block will be replaced with "Guest".
  
  
• Logo: In the code as '<img src="URL TO YOUR LOGO">'. Replace the URL in orange in with the URL of your guild, site, or game.
  
  
• Home Page: In the code as '<a href="URL TO YOUR HOME PAGE">'. Replace the URL in orange with a link to your Home Page.
  
  
• Enter site Image/text: In the code as '<img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/entersite.gif">'. Replace the URL in orange or just replace the entire line with any text. This is what users will click on to get to your Home page.
  
  
• Automatic redirect: The HTML in purple is optional... it redirects the browser to your home page after so many seconds. The content portion of the meta tag, has all this information: "10" is the time in seconds before the page redirects to the url (in orange). Replace the time in seconds (in red) and the URL (in orange) to your homepage. Notice how the quotes are around the entire content, not just around the url.
  
  <meta http-equiv="refresh" content="10; url=URL TO YOUR HOME PAGE">
  
  
• The above code is just a basic setup: Welcome message, site logo, and a clickable image to enter the site.
  
  
  • You can do whatever you in the contents: add a flash video, music player or even the latest boss kill image! Check it out on my test-site 2 site.
  • You can see another example of a welcome screen that I helped set up at Chainmail... it uses mostly CSS to hide the page elements.
  • The code doesn't show any box borders by default, but if you want to display them then remove the two lines in the script between the comments "remove the next two lines if you want your box borders to show" and "remove the above two lines if you want your box borders to show" (in green).

Hiding the Welcome tab

• Horizontal Full Bar (Nav Bar Builder)
  Add the following code to your custom script section (Control Panel > Custom HTML & Script > Custom Javascript/JQuery > Additional Functions tab). Make sure you check "Enabled?" before saving.
  

  $(document).ready(function(){
   $('.straightBarWrapper').find('td:contains("Welcome")').hide();
  })

  Replace the text in blue with the Welcome page name - the text is case sensitive, but it will match partial names, so "elcome" would work with both "Welcome" and "welcome".
  
  
• Horizontal Tab Bar
  
  
  • Go to Control Panel > Pages & Content (Widgets) > Welcome page (or whatever you named it) > Page Properties tab
    
    
  • Copy (Ctrl-C) the URL below and paste (Ctrl-V) it into the "Tab Image when Not Current" and "Tab Image when Current Page" boxes. The image is a 1x1 pixel of a transparent background.
    
    http://i201.photobucket.com/albums/aa236/Mottie1/testsite/blank.gif
    
    
  • Click [ Save Page Properties ].

Making your welcome screen public

• Go to Control Panel > Pages & Content (Widgets) > Page Display Order
  
  
• Move your Welcome page to the very top of the list,
  
  
• Cick on the name to go to the Page Contents section, then click on Page Properties.
  
  
• Change "Level to View" to "Public Access"
  
  
• Click [ Save Page Properties ] and you're done!

You can test this out by going to the GuildPortal Home and searching for your guild name (left side). Click on the link to your site and you should get your welcome screen!

Enjoy!

Edit (7/27/2008): Fixed a problem, it now works with Internet Explorer.
Edit (7/28/2008): Fixed display issue by adding back some CSS I left out.
Edit (7/30/2008): Added HTML mode () reminder 
Edit (1/8/2009): Updated the instructions since there is now better control panel interface and a new "PageFooter" class defined on every page.
Edit (1/18/2009): Updated the code (included script to load jQuery and more CSS to hide more elements) to prevent a page flicker that occurred since the new jQuery Code box update.
Edit (2/3/2009): Removed the extra script loading since the jQuery Code box is no longer required.
Edit (4/9/2009): Added a meta tag that makes the welcome page redirect to your home page after so many seconds.
Edit(6/4/2010): Updated & cleaned up the instructions to match the current control panel
Edit(7/23/2011): Updated to work with recent changes
Edit(7/31/2011): Updated code to make it work better with embedded content (video & audio) and to allow including your box borders.
Edit(2/21/2012): Updated to work with other associated GuildPortal sites (e.g. http://ourlegionportal.com/)

Ok, mine works to a point. However, it's repeating the image. How do I fix that? Is it because I have a repeating image as the background to the site set in the CSS? And... it doesn't seem to work in IE

http://sgo.guildportal.com

EDIT: Ok, I got it working now... on Firefox

When I try to go to the link in IE, it doesn't work at all, and won't let you get to the site.

grrrrr... fail again. I really really don't like IE

I'll work on it when I'm done playing in game

Yeah, the Chainmail site is only using CSS to hide all the stuff I don't want to show. Since it was so specialized, I decided to go with something that would work with all sites.

Either way, it's working now!
*shake fist at M$*

I actually changed three things (*grumble* because IE is stubborn).

1. Added CSS at the top because it's faster to hide it with CSS than to wait for the script to hide it. I was seeing the box borders flash on the screen before the welcome screen popped up.
2. Moved the CSS inside the "splashBox" to the bottom otherwise IE would completely ignore it.
3. Changed the javascript to wait for the htm to completely load before acitvating. This was the key to making the script work with IE. If you know anything about javascript, I added a jquery improvement over the window. function (I just learned that last night... jquery looks pretty sweet, I need to learn it! )