static files

Date: March 18th 2016
Last updated: March 18th 2016

Static files refer to CSS stylesheets. Create a directory structure similar to templates following the namespace convention. Note that the only thing changing here is the html file called profile.html and the newly created style.css.

tree
#<snipped>
    ├── static
    │   └── surferprofile #<=== namespace
    │       └── style.css 
    ├── templates
    │   └── surferprofile
    │       ├── diary.html
    │       ├── index.html
    │       └── profile.html
#<snipped>#

profile.html
Note the call to load staticfiles. Django knows how to deal with the namespacing. Don't miss the link inside the head of the html file.

{% load staticfiles %}

<!DOCTYPE html>
<html>
  <head>
      <link rel="stylesheet" type="text/css"
            href="{% static 'surferprofile/style.css' %}" />
  </head>
  <body>
      <header>
          <div id="logo">
              SURFDIARY
          </div>
          <div class="headermenu">
                  menu3
          </div>
          <div class="headermenu">
                  menu2
          </div>
          <div class="headermenu">
                  menu1
          </div>
      </header>

      <div id="container">
          <div id="profilename">
              <h1> {{ surfer }} </h1>
          </div>
          <div id="profilestats">
              <p>
                  {{surfer.height}}
                  {{surfer.weight}}
                  {{surfer.DOB}}
                  {{surfer.hometown}}
                  {{surfer.favwave.all }}
              </p>
          </div>
          <div id="subcontainer">
              <div id="profilephoto">
                  profile pic
              </div>
              <div id="boarddimensions">
                  board dimensions
                  {% for board in surfer.boards.values_list %}
                    {{board}}
                  {% endfor %}
              </div>
              <div id="finslist">
                  fins list
                  {{surfer.fins.values_list }}
              </div>
          </div>
      </div>

  </body>
</html>

style.css

header {
    height: 50px;
    background-color: lightblue;
    line-height: 50px;
}

#logo{
    position: relative;
    float: left;
    font-size: 40px;
    vertical-align: middle;
    width: auto;
    padding-left: 1%;
    padding-right: 1%;
}

.headermenu{
    padding-left: 1%;
    padding-right: 1%;
    vertical-align: middle;
    float: right;
}
#container{
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 5%;
}

#profilename {
    margin-top: 5%;
    margin-bottom: 5%;
}

#profilestats{
    margin-top: 3%;
    margin-bottom: 3%;
}

#subcontainer{
    width: 100%;
    height: auto;
}

#profilephoto, #boarddimensions, #finslist{
    float: left;
    background-color: lightgrey;
    width: 30%;
    height: 400px;
    margin-right: 3.3%;
}

Layout

There is a lot of reformatting required. I am not attempting this now.

results matching ""

    No results matching ""