Integrating the Timeline plugin to Clean Blog theme

Support
1

Hi!

Newbie to Grav with limited skills in coding and CSS, but proficient in terminal.

I have installed Grav + Clean Blog theme and Timeline plugin and have managed to get the plugin to work as intended.
But I have hit some issues when styling the plugin to look like the rest of the site.

To apply the theme to Timeline plugin I have made two files:

timeline_header.html.twig

{% set theme_config = attribute(config.themes, config.system.pages.theme) %}
{% if block("head", "partials/base.html.twig") is defined %}
  {{ block("head", "partials/base.html.twig") }}
{% endif %}
{% if block("navigation", "partials/base.html.twig") is defined %}
  {{ block("navigation", "partials/base.html.twig") }}
{% endif %}
{% if block("header", "partials/base.html.twig") is defined %}
  {{ block("header", "partials/base.html.twig") }}
{% endif %}
{% if block("stylesheets", "partials/head.html.twig") is defined %}
  {{ block("stylesheets", "partials/head.html.twig") }}
{% endif %}
{% if block("javascripts", "partials/head.html.twig") is defined %}
  {{ block("javascripts", "partials/head.html.twig") }}
{% endif %}

{{ assets.css()|raw }}
{{ assets.js()|raw }}

and

timeline_footer.html.twig

{% set theme_config = attribute(config.themes, config.system.pages.theme) %}
{% if block("footer", "partials/base.html.twig") is defined %}
  {{ block("footer", "partials/base.html.twig") }}
{% endif %}
{% if block("bottom", "partials/base.html.twig") is defined %}
  {{ block("bottom", "partials/base.html.twig") }}
{% endif %}
{% if block("stylesheets", "partials/head.html.twig") is defined %}
  {{ block("stylesheets", "partials/head.html.twig") }}
{% endif %}
{% if block("javascripts", "partials/head.html.twig") is defined %}
  {{ block("javascripts", "partials/head.html.twig") }}
{% endif %}

{{ assets.css()|raw }}
{{ assets.js()|raw }}

Both of them in

user/themes/clean-blog/templates/partials

And with those two in place everything is looking quite right - except one thing.
In the Clean Blog theme Page title and Subheading show on top of the Header Background Image in a white font.
On the Timeline page it shows in Gray.
How could I get it to inherit the white text from the theme?

And - the Timeline plugin repeats and shows Page title and Subheading again in the “homepage” for my timeline - ie the timeline.md
Any ideas on how to make Timeline not show those and only keep the one showing on top of the Header Background Image?

I kind of took a shot in the dark and edited

user/plugins/timeline/templates/timeline.html.twig

<title>{% if header.title %}{{ header.title|e('html') }} | {% endif %}{{ site.title|e('html') }}</title>

to just contain <title>something generic I could live with</title>
but that did nothing as far as I could see.

As this site is a wip I do not have it accessible for outsiders, so I hope to have been able to explain everything good enough.

2

The unexpected styling of the header sounds like an issue of CSS-specificity. Whatever styling the theme applies needs to be more specific than what the plugin does. Inspect it in your browser’s development console to see which rule takes precedent. You’ll likely want to include the theme’s header and footer into the theme’s header and footer, or edit the main timeline.html.twig itself as that already renders assets.

The reverse is also possible: You can replicate the timeline_events-block in a custom template in the theme, and pass timeline_content to the macro.

For the repeating title, note that <title> is what renders the title in the name of the tab or page in the browser, not in the actual DOM and visible title. That would be the <h1>-element. You should edit the file in user/themes/clean-blog/templates/timeline.html.twig, like the header and footer.

1 Like
3

Thank you!
Was able to find the CSS element and figure it out.
And my mess up with the <title>…
It was so obvious when you said <h1>-element it was rather embarrassing.

4

Not at all, learning the what’s and why’s is how we find solutions to problems. I hope you find the timeline useful.

2 Likes