Find the right theme for you. Browse through our gallery of expertly-crafted free SMF themes to find the perfect one for your needs.

Custom Login Block

Mick in Tutorials on Jun 16, 2013

Let's create a very simple "login" block using SimplePortal side blocks. The standard login block looks awful and we want to dress it up a bit and make it look cool. In SimplePortal, Let's create a PHP side block. Name it "Custom Login Block". Make sure you to "check" both styling options and its set for "Guests" only.




Then add the following:

Step 1:

global $smcFunc, $scripturl, $context, $txt;

echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/custom-login.css" />';

echo '
<div class="login-wrap">
  <h2>', $txt['login'], '</h2>
 
  <div class="form">
    <form id="guest_form" action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" ', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '>
    <input type="text" name="user" size="10" class="input_text" placeholder="Username"/>
    <input type="password" name="passwrd" size="10" class="input_password" placeholder="Password"/>
    <button>', $txt['login'], '</button>
    </form>
  </div>
</div>';


Change the styling and colors to suit your needs.


Step 2:
Create a file called "custom-login.css" in your CSS folder and add the following:

.login-wrap {
  position: relative;
  margin: 80px auto 0 auto;
  background: #ecf0f1;
  width: 350px;
  border-radius: 5px;
  padding: 15px;
}
.login-wrap h2 {
  text-align: center;
  font-weight: 200;
  font-size: 2em;
  margin-top: 10px;
  color: #34495e;
}
.login-wrap .form {
  padding-top: 20px;
}
.login-wrap .form input[type="text"],
.login-wrap .form input[type="password"],
.login-wrap .form button {
  width: 80%;
  margin-left: 10%;
  margin-bottom: 25px;
  height: 40px;
  border-radius: 5px;
  outline: 0;
  -moz-outline-style: none;
}
.login-wrap .form input[type="text"],
.login-wrap .form input[type="password"] {
  border: 1px solid #bbb;
  padding: 0 0 0 10px;
  font-size: 14px;
}
.login-wrap .form input[type="text"]:focus,
.login-wrap .form input[type="password"]:focus {
  border: 1px solid #3498db;
}
.login-wrap .form a {
  text-align: center;
  font-size: 10px;
  color: #3498db;
}
.login-wrap .form a p {
  padding-bottom: 10px;
}
.login-wrap .form button {
  background: #e74c3c;
  border: none;
  color: white;
  font-size: 18px;
  font-weight: 200;
  cursor: pointer;
  transition: box-shadow .4s ease;
}
.login-wrap .form button:hover {
  box-shadow: 1px 1px 5px #555;
}
.login-wrap .form button:active {
  box-shadow: 1px 1px 7px #222;
}
.login-wrap:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  border-radius: 5px 5px 0 0;
}

Tagged with: smf simple portal php custom login block 


Mick

Mick G

idesignsmf.com

    

Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time and has a weakness for Tacos and Pizza.


2 Comments

very nice man!
1



Connect with us:


Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.

  Receive our monthly newsletter right in your inbox.
Commitment issues? Unsubscribe at any time.


Get 100% complete access to our entire collection and find out why SMF owners prefer our themes





Latest Discussions

Join the conversation