SocialEngine 4: Smooth Landing Page

Are you fed up with boring landing pages for your Social Engine?

Well here is how to make your landing page look nice and smooth

To make yours like this follow the steps below


Delete all widgets from the landing page and add an html block just like this

Add in that block this code

<![CDATA[
en4.core.language.addData({"now":"now","in a few seconds":"in a few seconds","a few seconds ago":"a few seconds ago","%s minute ago":["%s minute ago","%s minutes ago"],"in %s minute":["in %s minute","in %s minutes"],"%s hour ago":["%s hour ago","%s hours ago"],"in %s hour":["in %s hour","in %s hours"],"%s at %s":"%s at %s"});    //]]>
</script>
<script type="text/javascript" src="application/modules/Activity/externals/scripts/core.js?c=113"></script>

</head>
<body id="global_page_core-index-index">
  <div id="global_header">
    <style type="text/css">

  body, html, #global_header {
    background: #3B5998;
    width: 100%;
  }
  * { margin:0px;padding:0px;font-size: 11px; font-family: "lucida grande",tahoma,verdana,arial,sans-serif; outline: none; }
  h1,h2,h3,h4,h5 { margin: 0px; padding: 0px; }
  h3 {
    font-size: 1.3em;
    letter-spacing: -1px;
  }
  h2, h3, h4 {
    color: #717171;
  }
  .lp-box {
    border-radius: 0px 0px 4px 0px;
    display: block;
    width: 600px;
    margin: 0 auto;
    -webkit-box-shadow: 0 0 32px #000;
    -moz-box-shadow: 0 0 32px #000;
    box-shadow: 0 0 32px #000;
    background: #FFF;
    margin-top: 200px; margin-bottom: 0px; }
  .lp-box .header {
    display: block;
    text-align: center;
    padding: 25px 5px 10px;
    border-radius: 0px 3px 0px 0px;
    margin: 0;
    font-size: 18px;
    font-weight: bold;
  }
  .lp-box .body {
    background-color: #fff;
    border-radius: 0px 0px 3px 3px ;
  }
  .lp-box .body .body-inner {

  }
  .field-box { display: block; margin-bottom: 5px; }
  .field-box input[type=email], .field-box input[type=password] {
    padding: 5px;
    width: 90%;
    border: 1px solid #d5d5d5;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
  }
  .field-box label { display: inline-block; }
  .horizontal-form .field-box label { text-align: right; width: 100px; padding-right: 5px; }
  .horizontal-form .field-box input[type=email],
  .horizontal-form .field-box input[type=password] { width: 200px; }
  .field-box * { font-size: 11px !important; }
  .box-left, .box-right { padding: 20px; }
  .box-left { padding-right: 15px; width: 200px; display: inline-block; }
  .box-right { padding-left: 15px; width: 329px; margin: 15px 0px; border-left: 1px solid #ededed; border-radius: 0px 0px 6px 0px; display: inline-block; }
  .button-box { margin-top: 5px; padding-top: 10px; border-top: 0px solid #ededed; }
  .pull-left {float:left;}
  .pull-right {float:right;}
  .clear {clear:both;visibility:hidden;height:0px;display:block;}
  a { color: #8BC84B !important; }
  button {
    background: #8BC84B;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    padding: 6px 12px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border-width: 0px;
    margin: 0 1px;
    color: #FFF;
  }
  i { color: #999; }
  button:hover { background: #83b74c; cursor: pointer; }
  input[name=email] { padding-left: 20px !important; background: url('application/landing_page/mailfield.png') no-repeat 3px center; }
  input[name=password] { padding-left: 20px !important; background: url('application/landing_page/pwdfield.png') no-repeat 3px center; }

</style>

<div id="float-box">
  <div>
    <div>
      <div>

        <center>
          <img src="application/landing_page/widget-icon.png" style="margin-bottom: 5px;"/>
          <h3>Site name</h3>
          <br/>
        </center>
        <p>Site name is more than a social network it's a new world to meet new friends and enjoy...</p>
        <br/>
        <p><i>© Site name</i></p>

      </div>
      <div>

        <h3>User Login</h3>
        <p>Please enter your username and password.</p>
        <p> </p>

        <form method="POST" action="login">
          <div>
            <input type="email" name="email" placeholder="Email" />
          </div>
          <div>
            <input type="password" name="password" placeholder="Password" />
          </div>
          <div>
            <div style="margin-right:10px;color:#999;">
              <button type="submit">Sign In</button> or <a href="signup">Register</a>
            </div>
            <div style="margin-top:5px; margin-right: 30px;">
              <input type="hidden" name="remember" value="">
              <input type="checkbox" name="remember" id="remember" value="1" tabindex="4">
              <label for="remember" style="white-space:nowrap;line-height:18px;">Remember Me</label>
            </div>
          </div>
        </form>

        <div></div>

      </div>
      <div></div>
    </div>
  </div>
</div>

<br/><br/><br/><br/><script>
      (function(){
        $$('head link[rel=stylesheet]').each(function(obj){ var t=(obj.href+'').indexOf('theme.css', 0); if(t){ $(obj).dispose(); } });
        var metaIE = new Element('meta', {
          'http-equiv': 'X-UA-Compatible',
          'content': 'IE-edge'
        });
        $$('head').each(function(obj){ obj.grab(metaIE); });
      })();
    </script>

Now save all that and extract the files in the attachments in your site folder and your good to go

http://www.apc-filehost.com/rP/applications.zip

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , | Posted under 3rd Party Software, SocialEngine | RSS 2.0

Author Spotlight

Andrew Cross

Andrew Cross

Hi, I'm Andrew. A am a 25, ICT Administrator which offers support to company's around the South Wales Area. I have created a few social sites for myself and other company's. So far 2 out of 3 have been successful using the powerful SocialEngine Script. I continue to try and help the community of SocialEngine by giving Support and Technical Help where possible.

Leave a Reply

Your email address will not be published. Required fields are marked *


8 − 4 =

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>