Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Welcome > Welcome screen (Splash page)
Mottie (SuperAdmin) 7/26/2008 5:43 AM EST : Welcome screen (Splash page)
ACK!
Mottie
Posts: 3883

1
Like

0
Dislike

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/)
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Solithius (Applicant) 1/22/2009 8:08 AM EST : RE: Welcome screen (Splash page)

Solithius
Posts: 28

0
Like

0
Dislike

Hi I just added a welcome tab to our website and it looks great. I saw that you can hide the Welcome Tab but i changed the tab layout so that all the tabs are on the left side of the page. I like it better that way. Is there anyway to hide that, because its not actually a tab its just a list of the tab names. I have it set up in horizontal tabs right now for the time being until i can find a way to hide it vertically. Any help would be greatly appreciated.
TopBottom

Frost-Guard (Member) 2/25/2009 2:55 PM EST : RE: Welcome screen (Splash page)
Frost-Guard
Posts: 947

0
Like

0
Dislike

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.
"It's not who you are underneath but what you do that defines you."
TopBottom

Guppy Queen (Applicant) 4/7/2009 1:11 PM EST : RE: Welcome screen (Splash page)
Guppy Queen
Posts: 41034

0
Like

0
Dislike

This is awesome. Thanks Mottie.
TopBottom

MystTheFreak (Member) 9/12/2009 1:20 PM EST : RE: Welcome screen (Splash page)
MystTheFreak
Posts: 277

0
Like

0
Dislike

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?
 photo myst-1.jpg
TopBottom

Mottie (SuperAdmin) 9/12/2009 3:57 PM EST : RE: Welcome screen (Splash page)
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi MystTheFreak!

Since the body background image is a background image, you can't really resize it... so it's best to either use an image that looks good if it repeats or use a large image.

To stop the background image from repeating, use "no-repeat" as follows:
body { background: #333333 url(URL TO YOUR BACKGROUND IMAGE) no-repeat; color:#ffffff; display:inline; }
Another recent alternative that I haven't actually messed around with as part of the splash page would be to use an addon that stretches your image (non-background) to fit the browser window - check out this post for details.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

MystTheFreak (Member) 9/12/2009 4:24 PM EST : RE: Welcome screen (Splash page)
MystTheFreak
Posts: 277

0
Like

0
Dislike

Thank you! still a little new to all this html and css LOL
 photo myst-1.jpg
TopBottom

Mottie (SuperAdmin) 6/4/2010 7:22 PM EST : RE: Welcome screen (Splash page)
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Updated & cleaned up the instructions to better match the current control panel.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Idsapit13 (Applicant) 8/4/2010 7:00 AM EST : RE: Welcome screen (Splash page)

Idsapit13
Posts: 116

0
Like

0
Dislike

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

Mottie (SuperAdmin) 8/5/2010 9:53 AM EST : RE: Welcome screen (Splash page)
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Idsapit13!

It appears that your video is hosted on a site sharing host, so you have to download the video and it isn't available to use "live". I'd recommend just uploading your video to youtube or some other similar site. For some reason, IE doesn't like when you move a video around the page, so I had to add a script to take care of it:

  1. Upload you video, or find a video you want to include and get the embed code.
  2. In the embed code, find the video URL (it's different than the page you viewed it on) like in orange below (seen twice, but both are the same):
    <object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/2Qj8PhxSnhg&amp;hl=en_US&amp;fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/2Qj8PhxSnhg&amp;hl=en_US&amp;fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>
  3. Replace the value of "param.movie" with the video URL (near the bottom of the code):
    <style type="text/css">
    body { display:none; }
    </style>

    <div id="splashBox">

     <div align=center>
      <div style="height:200px;"></div>
      Welcome $block[username] to
      <br><br>
      <div id="video"></div>
      <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">
    <style type="text/css">
    .StateBar, .BannerArea, .TabBar, .PageFooter, div.ContentBoxBody, .ContentBoxTitle, input  { display:none; }

    body { background: #333333 url(URL TO YOUR BACKGROUND IMAGE); color: #ffffff; display: inline; }
    img, img a { border:0px; }
    </style>
    </div>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
     var a = document.getElementById('splashBox').innerHTML;
     document.getElementById('ctl00_ContentPlaceHolder1_PageContainer').innerHTML = a;

     var flashvars = {}, param = {}, attrib = {};
     param.movie = 'VIDEO URL';
     param.allowFullScreen = true;
     param.allowscriptaccess = 'always';
     swfobject.embedSWF(param.movie, 'video', '640', '385', '9.0.0', flashvars, param, attrib);
    });
    </script>
  4. Follow the instructions above to learn how to modify the other parts of this Welcome Screen code.
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%