DJANGO – 32 FINAL TOUCHES OF THE APPLICATION

1. Adding a background image

body {
    background-image: url("../img/bg.jpg");
}

2. Floating the search button

Code for computer list template form

<div class="flt-search">
          <form method="post" action="">
             {% csrf_token %}
             {{form|crispy}}
             <input class="btn btn-primary search-btn" type="submit" value="Search" />
          </form>
        </div>

CSSS code to float the search form

.flt-search #div_id_computer_name, 
.flt-search #div_id_users_name{
    float: left;
    width: 200px;
    margin-right: 20px;
}

3. Displaying tooltip on edit and delete

Edit tooltip

<td><a href="{% url 'computer_edit' id=instance.id %}" data-toggle="tooltip" title="edit this item"> 

Delete tooltip and recycle bin image

<td><a href="{% url 'computer_delete' id=instance.id %}" data-toggle="tooltip" title="delete this item"><img src="{% static 'img/del.png' %}"></a></td>

4. Computer entry form image

<div class="col-sm-9 aligncenter">
    <img style="width: 100%" src="/static/img/pc.png">
</div>

5. CSS styles for title and table

.title{
    font-family: helvetica;
    font-weight: bold;
    font-size: 25px;
    color: #2e6da4;
    text-align: left;
}

table{
    width: 100%;
    /*margin: auto;*/
    text-align: center;
    /*box-shadow: 12px 12px 20px 6px #2e6da4;*/
    font-size: 15px;
}