Author Topic:  Custom Login Block for Simple Portal  (Read 9877 times)

0 Members and 1 Guest are viewing this topic.

June 24, 2014, 11:08:50 PM

Offline Brian

  • Administrator
  • Jr. Member
  • *
  • Posts: 49
  • Country: us
  • Karma: 0
    • View Profile
Custom Login Block for Simple Portal
« on: June 24, 2014, 11:08:50 PM »

(Register to disable this ad!)
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 Simple Portal, 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:
Code: [Select]
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>

Step 2:
Create a file called "custom-login.css" in your CSS folder and add the following:
Code: [Select]
.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;

Change the styling and colors to suit your needs.  8)

This is an archive post, which closed down June 1st. All credit and appreciation to Mick.
« Last Edit: June 30, 2014, 09:59:17 PM by Brian »

Click here for $50 off!
Click here for $50 off!

Click here for $50 off!
Click here for $50 off!