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/)

Thank You Mottie.

This Site Has got to be the Best resource for Guild Portal.

I am going to use a Bunch of things I have found here.You are a God for taking the time to Post all of this in such easy to understand steps.

quick question, is there any way to make it so that the background image doesn't repeat itself or do I just need to make a larger background?

Thank you! still a little new to all this html and css LOL

Hi again.

Hey this all WORks great i have it all working (encoreguild.com)

What i would like to do now is have a Video on it (with music) automatically play.

a perfect example of what i want is like this website (http://www.shutupwomangetonmyhorse.com/index2.html)

i would love my Welcome screen to be the same exact format. have Welcome to Encore on top. the Flash video AUTO play right there in the middle and Underneath have Enter.

could u give me the code to do so? one video i uploaded just for testing purposes right now is here ( http://download525.mediafire.com/t39fesx4bowg/g5r5yzg163q4yq9/World+of+Warcraft+music+video+-+turn+on+the+ignition.flv )

THANKS Again. btw u have like a paypal donate button or anything.