[Solved] Blog pages don't inherit the stylesheet

Support
1

I recently started working on my portfolio once again. I updated Zola and changed the main structure of my site to be just like the [overview tutorial].(Overview | Zola)

All was fun and games until I started creating blog pages and discovered they don’t use the style sheet at all, so they are pure black text over a white background.

My blog: T3kla’s Portfolio and Blog

blog.html

{% extends "base.html" %}
{% block content %}
<div class="blog">
  {% for page in section.pages %}
  <div class="blog-entry">
    <p class="blog-entry-date">{{ page.year }}-{{ page.month }}-{{ page.day }}</p>
    <div class="blog-entry-separator"></div>
    <div class="blog-entry-main">
      <a class="blog-entry-title" href="{{ page.permalink | safe }}">{{ page.title }}</a>
      <div class="blog-entry-tags">
        {% for tag in page.extra.tags %}
        <p class="blog-entry-tag">{{tag}}</p>
        {% endfor %}
      </div>
    </div>
    <div class="blog-entry-separator"></div>
    <div class="blog-entry-extra">
      <p class="blog-entry-words">{{ page.word_count }} words</p>
      <p class="blog-entry-time">{{ page.reading_time }} minutes</p>
    </div>
  </div>
  {% endfor %}
</div>
{% endblock content %}

blog-page.html

{% extends "base.html" %} 
{% block content %}
<h1 class="title">{{ page.title }}</h1>
<p class="subtitle"><strong>{{ page.date }}</strong></p>
{{ page.content | safe }}
{% endblock content %}
2

What does base.html look like?

On your pages, you have:

<link rel="stylesheet" href="../style.css" />

Since it’s a relative path to the stylesheet (../…), it can only find the file on the homepage. On the blogs, it looks for it on https://t3kla.github.io/blog/style.css instead of https://t3kla.github.io/style.css.

You can fix this by using something like this on your template (wherever the CSS loading is happening):

<link rel="stylesheet" href="{{ get_url(path="style.css", cachebust=true) | safe }}" />
3 Likes
3

You solved it, thank you!

Old base.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>{{config.title}}</title>
    <link rel="stylesheet" href="../style.css" />
    <script src="../script.js"></script>
  </head>
  <body>
    {% block content %} {% endblock %}
  </body>
</html>

New base.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>{{config.title}}</title>
    <link rel="stylesheet" href='{{ get_url(path="style.css", cachebust=true) | safe }}' />
    <script src="../script.js"></script>
  </head>
  <body>
    {% block content %} {% endblock %}
  </body>
</html>
2 Likes
4

Great! Be careful with the script.js part, as it’ll have the same problem.

1 Like