logoRandom

Adding a logo next to site title to the Elegant theme for Pelican

In order to add a logo Next to the web site name, we need to modify the base template file of the theme and add an <img src="URL"> with URL pointing to our logo file.

Modifying the base template

Open the base.html template file located in the theme folder under themes/elegant/templates/base.html. Search for the {{ SITENAME }} variable in the <body> and add this block inside the same <a> tag :

1
2
3
{% if DISPLAY_LOGO_ON_TITLE %}
    <img src="{{ DISPLAY_LOGO_ON_TITLE }}" alt="logo" style="padding-right: 10px;">
{% endif %}

At the end, you should have something like this :

1
2
3
4
5
6
7
8
...
    <a class="brand" href="{{ SITEURL }}/">
        {% if DISPLAY_LOGO_ON_TITLE %}
            <img src="{{ DISPLAY_LOGO_ON_TITLE }}" alt="logo" style="padding-right: 10px;">
        {% endif %}
        <span class=site-name>{{ SITENAME }}</span>
    </a>
...

Now, in order to load the logo image, modify Pelican's config file pelicanconf.py by adding DISPLAY_LOGO_ON_TITLE with the URL of the logo file on the output folder :

1
DISPLAY_LOGO_ON_TITLE = "/images/logo-32.png"

Rebuild the site and serve it. Now you can go check http://localhost:8000 to see your brand new logo.

$ invoke clean
$ invoke build
$ invoke serve

The logo is clickable and it should redirect to the home page like what the title does.

Share on: Reddit ❄ LinkedIn ❄ Twitter ❄ Facebook ❄ Email

Related Posts

Published

Category

pelican

Tags

Contact