Jump to content

Photo
* * * * * 1 votes

Make your landing page looks good


  • Please log in to reply
9 replies to this topic

#1 darklife

darklife

    Level 3

  • Members
  • Level
  • 30 points
  • 95 posts


Users Awards

Posted 08 March 2013 - 10:31 AM

Hi i was for some time searching for a way to create a landing page that looks good and works on all the themes
and here's what i made :
Posted Image
to make yours like mine it's very easy just follow these steps :
1 ) Delete all widgets from the landing page and add a html block just like this :
Posted Image
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 class="lp-box" id="float-box">
  <div class="body">
    <div class="body-inner">
      <div class="pull-left box-left">

        <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 class="pull-left box-right">

        <h3>User Login</h3>
        <p class="field-box">Please enter your username and password.</p>
        <p>&nbsp;</p>

        <form method="POST" action="login">
          <div class="field-box">
            <input type="email" name="email" placeholder="Email" />
          </div>
          <div class="field-box">
            <input type="password" name="password" placeholder="Password" />
          </div>
          <div class="field-box button-box">
            <div class="pull-left" style="margin-right:10px;color:#999;">
              <button type="submit">Sign In</button>&nbsp;or&nbsp;<a href="signup">Register</a>
            </div>
            <div class="pull-right" 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" class="optional" style="white-space:nowrap;line-height:18px;">Remember Me</label>
            </div>
          </div>
        </form>

        <div class="clear"></div>

      </div>
      <div class="clear"></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

If you like it please +1

Attached Files



#2 paulsj

paulsj

    Level 7

  • Premium
  • Level
  • 379 points
  • 1,257 posts


Users Awards

Posted 08 March 2013 - 07:26 PM

I wish this can be made into a widget instead of a HTML block.

#3 ChanceTrahan

ChanceTrahan

    Level 4

  • Banned
  • Level
  • 83 points
  • 200 posts
    • Gender:Male
    • Location:Tempe, AZ.
    • Software:SE 4.5.x

Posted 15 March 2013 - 12:17 PM

I wish this can be made into a widget instead of a HTML block.


I will report back with my result after I make this into a widget,
you will still have to copy paste the code into an HTML block but I will simplify this and share the code..
[Spam Links Removed] [WARNING] Perpetrator of Fraud

#4 paulsj

paulsj

    Level 7

  • Premium
  • Level
  • 379 points
  • 1,257 posts


Users Awards

Posted 16 March 2013 - 05:17 AM

Many of the Sign In in widgets or HTML blocks, it doesn't remember login. Does anyone know what the Remember uses for?

#5 ChanceTrahan

ChanceTrahan

    Level 4

  • Banned
  • Level
  • 83 points
  • 200 posts
    • Gender:Male
    • Location:Tempe, AZ.
    • Software:SE 4.5.x

Posted 17 March 2013 - 07:59 AM

Many of the Sign In in widgets or HTML blocks, it doesn't remember login. Does anyone know what the Remember uses for?


Do you mean how to force it to remember your info?
[Spam Links Removed] [WARNING] Perpetrator of Fraud

#6 paulsj

paulsj

    Level 7

  • Premium
  • Level
  • 379 points
  • 1,257 posts


Users Awards

Posted 17 March 2013 - 08:13 AM

Yes, I thought that's what it's for... many widgets and HTML blocks for Sign In have this to check, but it doesn't remember your info.

Do you mean how to force it to remember your info?



#7 ChanceTrahan

ChanceTrahan

    Level 4

  • Banned
  • Level
  • 83 points
  • 200 posts
    • Gender:Male
    • Location:Tempe, AZ.
    • Software:SE 4.5.x

Posted 19 March 2013 - 04:18 PM

Yes, I thought that's what it's for... many widgets and HTML blocks for Sign In have this to check, but it doesn't remember your info.


A fresh install of 4.3.0p1 by TrioxX remembers my info all the time. Just be sure to backup your database and files you may have modified.
[Spam Links Removed] [WARNING] Perpetrator of Fraud

#8 gabry

gabry

    Level 4

  • Members
  • Level
  • 54 points
  • 143 posts
    • Gender:Male
    • Software:SE 4.8.x


Users Awards

Posted 02 May 2013 - 10:35 PM

First of all my friend this is not made by you so ... this is the original splash page http://se417.sociale.../?fwlink=sample
You can buy it from here http://template4me.c.../#splashpagepro

Shame on you !!!!!
You are taking other people work and pretend that you did it is not that nice !!!

#9 x12media

x12media

    Level 1

  • Members
  • Level
  • 3 points
  • 19 posts

Posted 03 May 2013 - 10:37 PM

First of all my friend this is not made by you so ... this is the original splash page http://se417.sociale.../?fwlink=sample
You can buy it from here http://template4me.c.../#splashpagepro

Shame on you !!!!!
You are taking other people work and pretend that you did it is not that nice !!!


LOL BUSTED!!!

Good catch!!

#10 Checker2012

Checker2012

    Level 5

  • Members
  • Level
  • 105 points
  • 256 posts
    • Gender:Female
    • Location:Eindhoven ( Netherlands )

Posted 22 June 2013 - 12:14 PM

First of all my friend this is not made by you so ... this is the original splash page http://se417.sociale.../?fwlink=sample
You can buy it from here http://template4me.c.../#splashpagepro

Shame on you !!!!!
You are taking other people work and pretend that you did it is not that nice !!!


good work + 1 rep
"I don't paint dreams or nightmares, I paint my own reality."




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users


All the resources listed here are just for testing purpose and they shouldn't be used at any commercial environment without a valid license.
Those are for users who wants to try them before buy. Help the developer to build it better by purchasing them from original authors.