<h1>Web Tutorial<aclass="headerlink"href="#web-tutorial"title="Permalink to this headline">¶</a></h1>
<p>Evennia uses the <aclass="reference external"href="https://www.djangoproject.com/">Django</a> web framework as the basis of both its
database configuration and the website it provides. While a full understanding of Django requires
reading the Django documentation, we have provided this tutorial to get you running with the basics
and how they pertain to Evennia. This text details getting everything set up. The
<aclass="reference internal"href="../../Web-Character-View-Tutorial.html"><spanclass="doc std std-doc">Web-based Character view Tutorial</span></a> gives a more explicit example of making a
custom web page connected to your game, and you may want to read that after finishing this guide.</p>
<sectionid="a-basic-overview">
<h2>A Basic Overview<aclass="headerlink"href="#a-basic-overview"title="Permalink to this headline">¶</a></h2>
<p>Django is a web framework. It gives you a set of development tools for building a website quickly
and easily.</p>
<p>Django projects are split up into <em>apps</em> and these apps all contribute to one project. For instance,
you might have an app for conducting polls, or an app for showing news posts or, like us, one for
creating a web client.</p>
<p>Each of these applications has a <codeclass="docutils literal notranslate"><spanclass="pre">urls.py</span></code> file, which specifies what
<aclass="reference external"href="https://en.wikipedia.org/wiki/Uniform_resource_locator">URL</a>s are used by the app, a <codeclass="docutils literal notranslate"><spanclass="pre">views.py</span></code> file
for the code that the URLs activate, a <codeclass="docutils literal notranslate"><spanclass="pre">templates</span></code> directory for displaying the results of that code
in <aclass="reference external"href="https://en.wikipedia.org/wiki/Html">HTML</a> for the user, and a <codeclass="docutils literal notranslate"><spanclass="pre">static</span></code> folder that holds assets
like <aclass="reference external"href="https://en.wikipedia.org/wiki/CSS">CSS</a>, <aclass="reference external"href="https://en.wikipedia.org/wiki/Javascript">Javascript</a>,
and Image files (You may note your mygame/web folder does not have a <codeclass="docutils literal notranslate"><spanclass="pre">static</span></code> or <codeclass="docutils literal notranslate"><spanclass="pre">template</span></code> folder.
This is intended and explained further below). Django applications may also have a <codeclass="docutils literal notranslate"><spanclass="pre">models.py</span></code> file
for storing information in the database. We will not change any models here, take a look at the
<aclass="reference internal"href="../../../Concepts/New-Models.html"><spanclass="doc std std-doc">New Models</span></a> page (as well as the <aclass="reference external"href="https://docs.djangoproject.com/en/1.7/topics/db/models/">Django docs</a> on models) if you are interested.</p>
<p>There is also a root <codeclass="docutils literal notranslate"><spanclass="pre">urls.py</span></code> that determines the URL structure for the entire project. A starter
<codeclass="docutils literal notranslate"><spanclass="pre">urls.py</span></code> is included in the default game template, and automatically imports all of Evennia’s
default URLs for you. This is located in <codeclass="docutils literal notranslate"><spanclass="pre">web/urls.py</span></code>.</p>
</section>
<sectionid="changing-the-logo-on-the-front-page">
<h2>Changing the logo on the front page<aclass="headerlink"href="#changing-the-logo-on-the-front-page"title="Permalink to this headline">¶</a></h2>
<p>Evennia’s default logo is a fun little googly-eyed snake wrapped around a gear globe. As cute as it
is, it probably doesn’t represent your game. So one of the first things you may wish to do is
replace it with a logo of your own.</p>
<p>Django web apps all have <em>static assets</em>: CSS files, Javascript files, and Image files. In order to
make sure the final project has all the static files it needs, the system collects the files from
every app’s <codeclass="docutils literal notranslate"><spanclass="pre">static</span></code> folder and places it in the <codeclass="docutils literal notranslate"><spanclass="pre">STATIC_ROOT</span></code> defined in <codeclass="docutils literal notranslate"><spanclass="pre">settings.py</span></code>. By default,
the Evennia <codeclass="docutils literal notranslate"><spanclass="pre">STATIC_ROOT</span></code> is in <codeclass="docutils literal notranslate"><spanclass="pre">web/static</span></code>.</p>
<p>Because Django pulls files from all of those separate places and puts them in one folder, it’s
possible for one file to overwrite another. We will use this to plug in our own files without having
to change anything in the Evennia itself.</p>
<p>By default, Evennia is configured to pull files you put in the <codeclass="docutils literal notranslate"><spanclass="pre">web/static_overrides</span></code><em>after</em> all
other static files. That means that files in <codeclass="docutils literal notranslate"><spanclass="pre">static_overrides</span></code> folder will overwrite any previously
loaded files <em>having the same path under its static folder</em>. This last part is important to repeat:
To overload the static resource from a standard <codeclass="docutils literal notranslate"><spanclass="pre">static</span></code> folder you need to replicate the path of
folders and file names from that <codeclass="docutils literal notranslate"><spanclass="pre">static</span></code> folder in exactly the same way inside <codeclass="docutils literal notranslate"><spanclass="pre">static_overrides</span></code>.</p>
<p>Let’s see how this works for our logo. The default web application is in the Evennia library itself,
in <codeclass="docutils literal notranslate"><spanclass="pre">evennia/web/</span></code>. We can see that there is a <codeclass="docutils literal notranslate"><spanclass="pre">static</span></code> folder here. If we browse down, we’ll
eventually find the full path to the Evennia logo file:
<p>Inside our <codeclass="docutils literal notranslate"><spanclass="pre">static_overrides</span></code> we must replicate the part of the path inside the <codeclass="docutils literal notranslate"><spanclass="pre">static</span></code> folder, in
other words, we must replicate <codeclass="docutils literal notranslate"><spanclass="pre">evennia_general/images/evennia_logo.png</span></code>.</p>
<p>So, to change the logo, we need to create the folder path <codeclass="docutils literal notranslate"><spanclass="pre">evennia_general/images/</span></code> in
<codeclass="docutils literal notranslate"><spanclass="pre">static_overrides</span></code>. We then rename our own logo file to <codeclass="docutils literal notranslate"><spanclass="pre">evennia_logo.png</span></code> and copy it there. The
final path for this file would thus be:
<codeclass="docutils literal notranslate"><spanclass="pre">web/static_overrides/evennia_general/images/evennia_logo.png</span></code> in your local game folder.</p>
<p>To get this file pulled in, just change to your own game directory and reload the server:</p>
<p>to only update the static files without any other changes.</p>
<blockquote>
<div><p><strong>Note</strong>: Evennia will collect static files automatically during startup. So if <codeclass="docutils literal notranslate"><spanclass="pre">evennia</span><spanclass="pre">collectstatic</span></code> reports finding 0 files to collect, make sure you didn’t start the engine at some
point - if so the collector has already done its work! To make sure, connect to the website and
check so the logo has actually changed to your own version.</p>
</div></blockquote>
<blockquote>
<div><p><strong>Note</strong>: Sometimes the static asset collector can get confused. If no matter what you do, your
overridden files aren’t getting copied over the defaults, try removing the target file (or
everything) in the <codeclass="docutils literal notranslate"><spanclass="pre">web/static</span></code> directory, and re-running <codeclass="docutils literal notranslate"><spanclass="pre">collectstatic</span></code> to gather everything from
scratch.</p>
</div></blockquote>
</section>
<sectionid="changing-the-front-pages-text">
<h2>Changing the Front Page’s Text<aclass="headerlink"href="#changing-the-front-pages-text"title="Permalink to this headline">¶</a></h2>
<p>The default front page for Evennia contains information about the Evennia project. You’ll probably
want to replace this information with information about your own project. Changing the page template
is done in a similar way to changing static resources.</p>
<p>Like static files, Django looks through a series of template folders to find the file it wants. The
difference is that Django does not copy all of the template files into one place, it just searches
through the template folders until it finds a template that matches what it’s looking for. This
means that when you edit a template, the changes are instant. You don’t have to reload the server or
run any extra commands to see these changes - reloading the web page in your browser is enough.</p>
<p>To replace the index page’s text, we’ll need to find the template for it. We’ll go into more detail
about how to determine which template is used for rendering a page in the
<aclass="reference internal"href="../../Web-Character-View-Tutorial.html"><spanclass="doc std std-doc">Web-based Character view Tutorial</span></a>. For now, you should know that the template we want to change
is stored in <codeclass="docutils literal notranslate"><spanclass="pre">evennia/web/website/templates/website/index.html</span></code>.</p>
<p>To replace this template file, you will put your changed template inside the
<codeclass="docutils literal notranslate"><spanclass="pre">web/template_overrides/website</span></code> directory in your game folder. In the same way as with static
resources you must replicate the path inside the default <codeclass="docutils literal notranslate"><spanclass="pre">template</span></code> directory exactly. So we must
copy our replacement template named <codeclass="docutils literal notranslate"><spanclass="pre">index.html</span></code> there (or create the <codeclass="docutils literal notranslate"><spanclass="pre">website</span></code> directory in
web/template_overrides<codeclass="docutils literal notranslate"><spanclass="pre">if</span><spanclass="pre">it</span><spanclass="pre">does</span><spanclass="pre">not</span><spanclass="pre">exist,</span><spanclass="pre">first).</span><spanclass="pre">The</span><spanclass="pre">final</span><spanclass="pre">path</span><spanclass="pre">to</span><spanclass="pre">the</span><spanclass="pre">file</span><spanclass="pre">should</span><spanclass="pre">thus</span><spanclass="pre">be:</span></code>web/template_overrides/website/index.html` within your game directory.</p>
<p>Note that it is usually easier to just copy the original template over and edit it in place. The
original file already has all the markup and tags, ready for editing.</p>
</section>
<sectionid="further-reading">
<h2>Further reading<aclass="headerlink"href="#further-reading"title="Permalink to this headline">¶</a></h2>
<p>For further hints on working with the web presence, you could now continue to the
<aclass="reference internal"href="../../Web-Character-View-Tutorial.html"><spanclass="doc std std-doc">Web-based Character view Tutorial</span></a> where you learn to make a web page that
displays in-game character stats. You can also look at <aclass="reference external"href="https://docs.djangoproject.com/en/1.7/intro/tutorial01/">Django’s own
