Tutorial Part 1: Site Name, Logo, and Basics

After Installation, you are greeted with a bare-bones website. Let’s start filling things out.

For this tutorial, we will assume the name of your project is mysite.

Logging in

Navigate to http://localhost:8000/admin/ and log in with the username and password you created with the python manage.py createsuperuser command.

After logging in, you will be taken to the admin dashboard - also known as the “Wagtail Admin”.

The admin dashboard.

The admin dashboard.

Changing your site name

By default, the site name shows up in many different places, including page titles in the browser tab. To change the name, go to Settings > Sites, and click on the site that is there. Change the Site name setting and click “Save”.

Note

There is also a WAGTAIL_SITE_NAME setting in the mysite/settings/base.py file. This is really only used for the login screen and on the main Wagtail Admin dashboard. The reason this setting exists is for use with multi-sites. For example, if you have a parent company that operates many separate brand websites within one CMS, then WAGTAIL_SITE_NAME would be the name of the parent company.

For my website, I’m going to change Settings > Sites > Site name to “Simple Sweet Desserts”.

Changing the site name.

Changing the site name.

And edit mysite/settings/base.py by changing WAGTAIL_SITE_NAME as so:

WAGTAIL_SITE_NAME = 'Simple Sweet Desserts Ltd.'

Now the admin dashboard and login page show “Simple Sweet Desserts Ltd.”, and the Home page at http://localhost:8000/ will show “Simple Sweet Desserts”.

Changing navbar and global site colors

The default style is a light-colored navbar and the standard Bootstrap colors. But if you have a white or light colored logo, you might prefer a dark navbar. To change the navbar color, go to Settings > CRX Settings and alter the following settings:

Click “Save” and go to http://localhost:8000/ to see your new navbar. Great success! There are many other settings here for controlling the layout of the navbar. Play with them and pick what works best for you. Once again, most of these settings utilize default Bootstrap styles.

Our site with a dark navbar.

Our site with a dark navbar.

Beyond the navbar, you can swap out the entire Bootstrap CSS theme in use. We provide a few simple themes from Bootswatch. Select an option from the Theme variant setting, click “Save”, and view your site. Pick one that looks best to you. If you are going to be doing a lot of heavy CSS customization, you might want to stick with the default to ensure compatibility with the Bootstrap documentation.

For our website, we are going to change the navbar color scheme back to “Light”, CSS class to bg-light, and leave the theme variant at the default.