<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Utility Billing West{% block title %}{% endblock %}</title>
    <link rel="stylesheet" type="text/css" media="all" href="/static/admin/include/main2.css" />
    <script src="https://code.jquery.com/jquery-1.9.0.js"></script>
	<script src="https://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

    <!-- DATATABLES -->
    <script src='https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js'></script>
    <script src="https://cdn.datatables.net/buttons/1.6.4/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.flash.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.print.min.js"></script>

    <!-- END DT -->

    <style type="text/css">
        body {
            background-color: #fff;
            background-image: none;
        }

        .navbar {
            background-image: url('/static/img/navbar_bg.png');
            height: 167px;
            /* height: 100px; */
        }

        .brand {
            display: inline-block;
            float: left;
            padding-top: 10px;
        }

        .page-header {
            display: inline-block;
            float: right;
            color: #fff;
            padding-top: 10px;
        }

        .nav-container {
            /* width: 1260px; */
            width: 1174px;
            height: inherit;
            margin: auto;
            padding-top: 30px;
        }

        .brand img {
            width: 320px;
        }

        .main-container {
            width: 1174px;
            height: auto;
            margin: auto;
            color: #707070;
            /* color: #fff; */
        }

        hr {
            /* border-color: #c1daea; */
            border: none;
            height: 7px;
            background-color:#c1daea;
            margin-top: 3px;
        }

        .a-tag {
            background-color: #ff8003;
            color: #fff;
            float: right;
            padding: 5px 10px;
            border-radius: 4px;
            font-size: larger;
            font-weight: bolder;
            text-decoration: none;
            font-size: 10px;
            padding: 0px;
            /* padding-left: 15px;
            padding-right: 15px; */
            padding: 0px 8px 0px 8px;
            margin-left: 11px;
            text-transform: uppercase;            
        }

        table {
            /* white-space: nowrap; */
            border: 1px solid #ababab;
        }

        tr, th, td {
            border: 1px solid #ababab;
            padding: 5px;
        }
        
    </style>

    {% block extrastyle %}
    {% endblock %}

</head>
<body>
    <nav class="navbar">
        <div class="nav-container">
            <div class="brand">
                <img src="/static/img/logo_client.png" alt="">
            </div>
            <div class="page-header">
                {% if request.user.ubw_profile %}
                <p style="font-size:25px;font-weight: bolder;">BILL PAY ADMINISTRATION</p>
                <a href="{{ DJANGO_BASE_URL }}logout/" class="a-tag">logout</a>
                <p style="display:inline-block; float:right;margin-top:0px;">Logged in as <b>{% if request.user.ubw_profile.firstname %}{{ request.user.ubw_profile.get_full_name|upper }}{% else %}{{ request.user.ubw_profile.username }}{% endif %}</b></p>&nbsp;&nbsp;
                {% endif %}
            </div>
        </div>
    </nav>

    <hr>

    <div class="main-wrapper">
        <div class="main-container">
            {% block content %}
            {% endblock %}
        </div>
    </div>
         
</body>
</html>
Template source: client_base_v2.html

Template source: `client_base_v2.html`
