Project LEO
Project LEO is a very serious survey of the most important constellation.
Next steps
Other Resources
{% recent_comments %}
{% recent_targets %}
{% endblock %}
Look for the block of HTML we changed between the and comments. Everything else is
the same as the base template.
We’ve just changed a few lines of HTML, but basically left the template
alone. Reload your homepage, and you should see something like this:
|image1|
Thats it! You’ve just customized your TOM homepage.
Using static files
~~~~~~~~~~~~~~~~~~
Instead of linking to an image hosted online already, we can display
static files in our project directly. For this we will use `Django’s
static
files
`__
capabilities.
Updating Built-in Static Files:
===============================
The TOM Toolkit allows you to easily overwrite some default style settings and image files.
The default static files can be found in the following structure:
::
mytom
├── manage.py
├── templates
├── mytom
└── static
└── tom_common
├── css
│ └── custom.css
└── img
Customize default CSS:
######################
The default styling is mostly based on Bootstrap v4.6.2 (`https://getbootstrap.com/
`__).
If you ran the tom_setup script, you should have a directory ``static`` at the top level of your project.
Within this folder, find the ``tom_common/css`` directory. In this folder, is a file named ``custom.css``.
Editing this file will allow you to overwrite any of the custom css used at the base level in the TOM Toolkit.
As an example, let's change the background color from white (#ffffff) to an off-white (#efead6).
.. code:: css
body {
background-color: #efead6;
}
Once you have added these images to the ``static/tom_common/img`` directory and reloaded the page (you may need to
clear the Cache as well), you should now see your changes displayed on the page.
This example is a fairly heavy handed change that will affect the entire TOM including any elements that inherit
from the `body` `background-color`. More subtle and complex changes will require more careful editing of the
``custom.css`` file. Note: you can use your browser's developer tools to inspect the elements of the TOM in order
to determine which css classes are being used and how to best style them.
Customize default Logos and Icons:
##################################
If you ran the tom_setup script, you should have a directory ``static``
at the top level of your project. Within this folder, find the ``tom_common/img`` directory.
In this folder, place the images you’d like to use in your TOM to replace the default TOMToolkit Logos and Icons.
The images should be named as follows:
::
logo-color.png --> Full Color Logo used on Main Page
logo-color-cropped.png --> Smaller Logo used on the Navbar
favicon-32.ico --> Favicon used in the browser tab
The use of `logo-color.png` assumes that you are using the original TOMToolkit html for your homepage.
Specifically, the following line of code should be left intact and not edited as in the example above:
.. code:: html
Once you have added these images to the ``static/tom_common/img`` directory and reloaded the page (you may need to
clear the Cache as well), you should now see your images displayed instead of the default images provided by TOMToolkit.
Adding Your Own Static Files:
=============================
In some cases you may want to more directly reference a local file.
In this case, you should add a ``img`` directory in the ``static`` directory
at the top level of your project. In this folder, place an image you’d like to display on your
homepage. For example, ``mytom.jpg``.
::
cp mytom.jpg static/img/
Now let’s edit our template to use Django’s ``static`` template tag to
display the image:
.. code:: html
{% raw %}
{% endraw %}
After reloading the page, you should now see ``mytom.jpg`` displayed
instead of the remote cat image.
Further Reading
~~~~~~~~~~~~~~~
Any template included in the TOM Toolkit (or any other Django app) can
be customized. Please see the `official Django
docs
`__
for more details.
.. |image0| image:: /_static/customize_templates_doc/tomhomepagenew.png
.. |image1| image:: /_static/customize_templates_doc/tomhomepagemod.png