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.

    ├── static
    │   └── surferprofile #<=== namespace
    │       └── style.css 
    ├── templates
    │   └── surferprofile
    │       ├── diary.html
    │       ├── index.html
    │       └── 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>
      <link rel="stylesheet" type="text/css"
            href="{% static 'surferprofile/style.css' %}" />
          <div id="logo">
          <div class="headermenu">
          <div class="headermenu">
          <div class="headermenu">

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



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

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

    padding-left: 1%;
    padding-right: 1%;
    vertical-align: middle;
    float: right;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 5%;

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

    margin-top: 3%;
    margin-bottom: 3%;

    width: 100%;
    height: auto;

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


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

results matching ""

    No results matching ""