<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang=""> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Writing your first Django app, part 6 — Django 1.11.20 documentation</title> <link rel="stylesheet" href="../_static/default.css" type="text/css" /> <link rel="stylesheet" href="../_static/pygments.css" type="text/css" /> <script type="text/javascript" id="documentation_options" data-url_root="../" src="../_static/documentation_options.js"></script> <script type="text/javascript" src="../_static/jquery.js"></script> <script type="text/javascript" src="../_static/underscore.js"></script> <script type="text/javascript" src="../_static/doctools.js"></script> <script type="text/javascript" src="../_static/language_data.js"></script> <link rel="index" title="Index" href="../genindex.html" /> <link rel="search" title="Search" href="../search.html" /> <link rel="next" title="Writing your first Django app, part 7" href="tutorial07.html" /> <link rel="prev" title="Writing your first Django app, part 5" href="tutorial05.html" /> <script type="text/javascript" src="../templatebuiltins.js"></script> <script type="text/javascript"> (function($) { if (!django_template_builtins) { // templatebuiltins.js missing, do nothing. return; } $(document).ready(function() { // Hyperlink Django template tags and filters var base = "../ref/templates/builtins.html"; if (base == "#") { // Special case for builtins.html itself base = ""; } // Tags are keywords, class '.k' $("div.highlight\\-html\\+django span.k").each(function(i, elem) { var tagname = $(elem).text(); if ($.inArray(tagname, django_template_builtins.ttags) != -1) { var fragment = tagname.replace(/_/, '-'); $(elem).html("<a href='" + base + "#" + fragment + "'>" + tagname + "</a>"); } }); // Filters are functions, class '.nf' $("div.highlight\\-html\\+django span.nf").each(function(i, elem) { var filtername = $(elem).text(); if ($.inArray(filtername, django_template_builtins.tfilters) != -1) { var fragment = filtername.replace(/_/, '-'); $(elem).html("<a href='" + base + "#" + fragment + "'>" + filtername + "</a>"); } }); }); })(jQuery); </script> </head><body> <div class="document"> <div id="custom-doc" class="yui-t6"> <div id="hd"> <h1><a href="../index.html">Django 1.11.20 documentation</a></h1> <div id="global-nav"> <a title="Home page" href="../index.html">Home</a> | <a title="Table of contents" href="../contents.html">Table of contents</a> | <a title="Global index" href="../genindex.html">Index</a> | <a title="Module index" href="../py-modindex.html">Modules</a> </div> <div class="nav"> « <a href="tutorial05.html" title="Writing your first Django app, part 5">previous</a> | <a href="index.html" title="Getting started" accesskey="U">up</a> | <a href="tutorial07.html" title="Writing your first Django app, part 7">next</a> »</div> </div> <div id="bd"> <div id="yui-main"> <div class="yui-b"> <div class="yui-g" id="intro-tutorial06"> <div class="section" id="s-writing-your-first-django-app-part-6"> <span id="writing-your-first-django-app-part-6"></span><h1>Writing your first Django app, part 6<a class="headerlink" href="#writing-your-first-django-app-part-6" title="Permalink to this headline">¶</a></h1> <p>This tutorial begins where <a class="reference internal" href="tutorial05.html"><span class="doc">Tutorial 5</span></a> left off. We’ve built a tested Web-poll application, and we’ll now add a stylesheet and an image.</p> <p>Aside from the HTML generated by the server, web applications generally need to serve additional files — such as images, JavaScript, or CSS — necessary to render the complete web page. In Django, we refer to these files as “static files”.</p> <p>For small projects, this isn’t a big deal, because you can just keep the static files somewhere your web server can find it. However, in bigger projects – especially those comprised of multiple apps – dealing with the multiple sets of static files provided by each application starts to get tricky.</p> <p>That’s what <code class="docutils literal notranslate"><span class="pre">django.contrib.staticfiles</span></code> is for: it collects static files from each of your applications (and any other places you specify) into a single location that can easily be served in production.</p> <div class="section" id="s-customize-your-app-s-look-and-feel"> <span id="customize-your-app-s-look-and-feel"></span><h2>Customize your <em>app’s</em> look and feel<a class="headerlink" href="#customize-your-app-s-look-and-feel" title="Permalink to this headline">¶</a></h2> <p>First, create a directory called <code class="docutils literal notranslate"><span class="pre">static</span></code> in your <code class="docutils literal notranslate"><span class="pre">polls</span></code> directory. Django will look for static files there, similarly to how Django finds templates inside <code class="docutils literal notranslate"><span class="pre">polls/templates/</span></code>.</p> <p>Django’s <a class="reference internal" href="../ref/settings.html#std:setting-STATICFILES_FINDERS"><code class="xref std std-setting docutils literal notranslate"><span class="pre">STATICFILES_FINDERS</span></code></a> setting contains a list of finders that know how to discover static files from various sources. One of the defaults is <code class="docutils literal notranslate"><span class="pre">AppDirectoriesFinder</span></code> which looks for a “static” subdirectory in each of the <a class="reference internal" href="../ref/settings.html#std:setting-INSTALLED_APPS"><code class="xref std std-setting docutils literal notranslate"><span class="pre">INSTALLED_APPS</span></code></a>, like the one in <code class="docutils literal notranslate"><span class="pre">polls</span></code> we just created. The admin site uses the same directory structure for its static files.</p> <p>Within the <code class="docutils literal notranslate"><span class="pre">static</span></code> directory you have just created, create another directory called <code class="docutils literal notranslate"><span class="pre">polls</span></code> and within that create a file called <code class="docutils literal notranslate"><span class="pre">style.css</span></code>. In other words, your stylesheet should be at <code class="docutils literal notranslate"><span class="pre">polls/static/polls/style.css</span></code>. Because of how the <code class="docutils literal notranslate"><span class="pre">AppDirectoriesFinder</span></code> staticfile finder works, you can refer to this static file in Django simply as <code class="docutils literal notranslate"><span class="pre">polls/style.css</span></code>, similar to how you reference the path for templates.</p> <div class="admonition-static-file-namespacing admonition"> <p class="first admonition-title">Static file namespacing</p> <p class="last">Just like templates, we <em>might</em> be able to get away with putting our static files directly in <code class="docutils literal notranslate"><span class="pre">polls/static</span></code> (rather than creating another <code class="docutils literal notranslate"><span class="pre">polls</span></code> subdirectory), but it would actually be a bad idea. Django will choose the first static file it finds whose name matches, and if you had a static file with the same name in a <em>different</em> application, Django would be unable to distinguish between them. We need to be able to point Django at the right one, and the easiest way to ensure this is by <em>namespacing</em> them. That is, by putting those static files inside <em>another</em> directory named for the application itself.</p> </div> <p>Put the following code in that stylesheet (<code class="docutils literal notranslate"><span class="pre">polls/static/polls/style.css</span></code>):</p> <div class="highlight-css snippet"><div class="snippet-filename">polls/static/polls/style.css</div> <div class="highlight"><pre><span></span><span class="nt">li</span> <span class="nt">a</span> <span class="p">{</span> <span class="k">color</span><span class="p">:</span> <span class="kc">green</span><span class="p">;</span> <span class="p">}</span> </pre></div> </div> <p>Next, add the following at the top of <code class="docutils literal notranslate"><span class="pre">polls/templates/polls/index.html</span></code>:</p> <div class="highlight-html+django snippet"><div class="snippet-filename">polls/templates/polls/index.html</div> <div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">load</span> <span class="nv">static</span> <span class="cp">%}</span> <span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">type</span><span class="o">=</span><span class="s">"text/css"</span> <span class="na">href</span><span class="o">=</span><span class="s">"</span><span class="cp">{%</span> <span class="k">static</span> <span class="s1">'polls/style.css'</span> <span class="cp">%}</span><span class="s">"</span> <span class="p">/></span> </pre></div> </div> <p>The <code class="docutils literal notranslate"><span class="pre">{%</span> <span class="pre">static</span> <span class="pre">%}</span></code> template tag generates the absolute URL of static files.</p> <p>That’s all you need to do for development. Reload <code class="docutils literal notranslate"><span class="pre">http://localhost:8000/polls/</span></code> and you should see that the question links are green (Django style!) which means that your stylesheet was properly loaded.</p> </div> <div class="section" id="s-adding-a-background-image"> <span id="adding-a-background-image"></span><h2>Adding a background-image<a class="headerlink" href="#adding-a-background-image" title="Permalink to this headline">¶</a></h2> <p>Next, we’ll create a subdirectory for images. Create an <code class="docutils literal notranslate"><span class="pre">images</span></code> subdirectory in the <code class="docutils literal notranslate"><span class="pre">polls/static/polls/</span></code> directory. Inside this directory, put an image called <code class="docutils literal notranslate"><span class="pre">background.gif</span></code>. In other words, put your image in <code class="docutils literal notranslate"><span class="pre">polls/static/polls/images/background.gif</span></code>.</p> <p>Then, add to your stylesheet (<code class="docutils literal notranslate"><span class="pre">polls/static/polls/style.css</span></code>):</p> <div class="highlight-css snippet"><div class="snippet-filename">polls/static/polls/style.css</div> <div class="highlight"><pre><span></span><span class="nt">body</span> <span class="p">{</span> <span class="k">background</span><span class="p">:</span> <span class="kc">white</span> <span class="nb">url</span><span class="p">(</span><span class="s2">"images/background.gif"</span><span class="p">)</span> <span class="kc">no-repeat</span> <span class="kc">right</span> <span class="kc">bottom</span><span class="p">;</span> <span class="p">}</span> </pre></div> </div> <p>Reload <code class="docutils literal notranslate"><span class="pre">http://localhost:8000/polls/</span></code> and you should see the background loaded in the bottom right of the screen.</p> <div class="admonition warning"> <p class="first admonition-title">Warning</p> <p class="last">Of course the <code class="docutils literal notranslate"><span class="pre">{%</span> <span class="pre">static</span> <span class="pre">%}</span></code> template tag is not available for use in static files like your stylesheet which aren’t generated by Django. You should always use <strong>relative paths</strong> to link your static files between each other, because then you can change <a class="reference internal" href="../ref/settings.html#std:setting-STATIC_URL"><code class="xref std std-setting docutils literal notranslate"><span class="pre">STATIC_URL</span></code></a> (used by the <a class="reference internal" href="../ref/templates/builtins.html#std:templatetag-static"><code class="xref std std-ttag docutils literal notranslate"><span class="pre">static</span></code></a> template tag to generate its URLs) without having to modify a bunch of paths in your static files as well.</p> </div> <p>These are the <strong>basics</strong>. For more details on settings and other bits included with the framework see <a class="reference internal" href="../howto/static-files/index.html"><span class="doc">the static files howto</span></a> and <a class="reference internal" href="../ref/contrib/staticfiles.html"><span class="doc">the staticfiles reference</span></a>. <a class="reference internal" href="../howto/static-files/deployment.html"><span class="doc">Deploying static files</span></a> discusses how to use static files on a real server.</p> <p>When you’re comfortable with the static files, read <a class="reference internal" href="tutorial07.html"><span class="doc">part 7 of this tutorial</span></a> to learn how to customize Django’s automatically-generated admin site.</p> </div> </div> </div> </div> </div> <div class="yui-b" id="sidebar"> <div class="sphinxsidebar" role="navigation" aria-label="main navigation"> <div class="sphinxsidebarwrapper"> <h3><a href="../contents.html">Table of Contents</a></h3> <ul> <li><a class="reference internal" href="#">Writing your first Django app, part 6</a><ul> <li><a class="reference internal" href="#customize-your-app-s-look-and-feel">Customize your <em>app’s</em> look and feel</a></li> <li><a class="reference internal" href="#adding-a-background-image">Adding a background-image</a></li> </ul> </li> </ul> <h4>Previous topic</h4> <p class="topless"><a href="tutorial05.html" title="previous chapter">Writing your first Django app, part 5</a></p> <h4>Next topic</h4> <p class="topless"><a href="tutorial07.html" title="next chapter">Writing your first Django app, part 7</a></p> <div role="note" aria-label="source link"> <h3>This Page</h3> <ul class="this-page-menu"> <li><a href="../_sources/intro/tutorial06.txt" rel="nofollow">Show Source</a></li> </ul> </div> <div id="searchbox" style="display: none" role="search"> <h3>Quick search</h3> <div class="searchformwrapper"> <form class="search" action="../search.html" method="get"> <input type="text" name="q" /> <input type="submit" value="Go" /> <input type="hidden" name="check_keywords" value="yes" /> <input type="hidden" name="area" value="default" /> </form> </div> </div> <script type="text/javascript">$('#searchbox').show(0);</script> </div> </div> <h3>Last update:</h3> <p class="topless">Feb 11, 2019</p> </div> </div> <div id="ft"> <div class="nav"> « <a href="tutorial05.html" title="Writing your first Django app, part 5">previous</a> | <a href="index.html" title="Getting started" accesskey="U">up</a> | <a href="tutorial07.html" title="Writing your first Django app, part 7">next</a> »</div> </div> </div> <div class="clearer"></div> </div> </body> </html>