In the first part of the series, we finished the HTML file for the login/registration page. This post will focus on styling the page by using CSS. The HTML file was made up of a combination of div, form, paragraph, and input tags. HTML and CSS work great together, so let's throw CSS into the mix and see what happens.

Before we start styling the page, we need to do some setup for the static files of our Django project.

Settings.py

Open settings.py and scroll all the way down to the bottom. Add the following two lines of code.

# path -> example/setting.py 

STATIC_URL = '/static/'

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

#baltlogs.com

These lines of code will let Django know where to find the static files for the project.

STATIC_URL

Django will use this path and append it to the base URL of your website. For example, (http://websitename/static/style.css). It’s a reference to the static files during development.

STATICFILES_DIRS

Refers to the location of static files in our project. You can have different paths listed if you have any additional directories that contain static files. It tells Django to look into the paths specified for extra static files that might exist in the project.

Now we need to create a couple of folders to host the static files.

Inside the main folder of the project and at the same level as folders example and listings, create a folder named static.

Inside the folder called static, create a folder named css.

Finally inside the folder called css, create a file called login.css.

This is how the folder directory should look like after you have created all the necessary folders.

Login.css

Open login.css and add the following code.

/* path -> static/css/login.css  */

@import url(https://fonts.googleapis.com/css?family=Lato:300);

.login {
  width: 500px;
  padding: 10% 0 0;
  margin: auto;
}
body {
    background: #3d3d3d; 
    font-family: "Lato", sans-serif;     
  }


/* baltlogs.com */

We have added just a small part of the CSS code. Let’s import the CSS file into the HTML template first and then we’ll add the rest of the code. I recommend opening both files simultaneously in order to see the changes take place and make it easier to identify which elements we are styling.

For example, the snippet above shows that we are modifying the main div element called login which contains the login and registration forms.

The width of the container has been set to 500px. For the padding, I have used the short-hand property to set top and bottom paddings to 10% while right and left paddings are zero as shown. The margin is set to auto which means that the element will be centered horizontally.

The background of the page was also changed to a dark grey. There are way too many CSS properties. I can’t explain all of them here, but feel free to look them up.

Purposely I have used a combination of pixels and percents to define some of the CSS properties. The goal was to point out the fact that there’s not right answer, you can define units interchangeably depending on what you want to achieve.

For instance, pixels are fixed-sized units and are not scalable while percents are used when one wants to get a more responsive design as the end goal. You can check out useful links at the bottom to learn more about it.

Login_page.html

Finally, let’s open login_page.html and add the following two lines of code at the top to import the CSS file into the HTML template.

<!-- Login/Registration Page - HTML -->

{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'css/login.css' %}">

<div class="login">
    <div class="form">
        <form class="registration-form">
            <input type="text" placeholder="name" />
            <input type="password" placeholder="password" />
            <input type="text" placeholder="email" />
            <button>Create</button>
            <p><a href="#">Log In</a></p>
        </form>
        <form class="login-form">
            <input type="text" placeholder="username" />
            <input type="password" placeholder="password" />
            <button>Login</button>
            <p><a href="#">Register</a></p>
        </form>
    </div>
</div>

<!-- baltlogs.com -->

We have loaded the static template tag and defined the path to the static folder, so Django knows where to find the files.

Save the file and issue the python manage.py runserver command to see the changes take place.

The page looks a bit better but not great. After we add a few more lines of code, the page should look way better, so bear with me.

Login.css

Open login.css and add the following code.

/* path -> static/css/login.css  */

@import url(https://fonts.googleapis.com/css?family=Lato:300);

.login {
  width: 500px;
  padding: 10% 0 0;
  margin: auto;
}
.form {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    max-width: 360px;
    margin: 0 auto 100px;
    padding: 45px;
    text-align: center;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  }

.form input {
    font-family: "Lato", sans-serif;
    outline: 0;
    background: #e7e4e4;
    width: 100%;
    border: 0;
    margin: 0 0 15px;
    padding: 15px;
    box-sizing: border-box;
    font-size: 14px;
  }

.form button {
    font-family: "Lato", sans-serif;
    text-transform: uppercase;
    outline: 0;
    background: #262725;
    width: 100%;
    border: 0;
    padding: 15px;
    color: #FFFFFF;
    font-size: 14px;
    -webkit-transition: all 0.3 ease;
    transition: all 0.3 ease;
    cursor: pointer;
  }

.form button:hover,.form button:active,.form button:focus {
    background: #3d3d3d;
  }

.form .registration-form {
    display: none;
  }

body {
    background: #3d3d3d; 
    font-family: "Lato", sans-serif;     
  }

/* baltlogs.com */

After you have added the code above, save the file, and run server again.

You should have a page like the one above which is a pretty decent upgrade compared to what we had before. Feel free to change things up, add more CSS properties, and see what happens. That’s the best way to learn.

Notice there is only one form now. The registration form was hidden by using the CSS property display:none. It’s hidden for now, but we will bring it back when we add the JavaScript code. We will use JavaScript to toggle between forms depending if the user wants to create an account or just sign in.

The next and last part of this series will cover that. Coming soon…

Learn more about Django:

Twitter

Login/Registration Page with HTML,CSS,& JS Series - PART I

Django Takeoff Series - Overview

Django 3..2..1..Takeoff Book

Personal Website