Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Support

Integrating the Timeline plugin to Clean Blog theme

Solved by Ole Vik View solution

Started by Bjørnar Berg 1 year ago · 3 replies · 82 views
1 year ago

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

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 }}

TXT
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 }}

TXT
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>

TXT

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.
1 year ago Solution

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
1 year ago

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.

1 year ago

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

Suggested topics

Topic Participants Replies Views Activity
Support · by Thomas, 1 week ago
2 60 16 hours ago
Support · by Anna, 3 days ago
2 66 19 hours ago
Support · by Justin Young, 19 hours ago
1 33 19 hours ago
Support · by Duc , 1 week ago
2 69 6 days ago
Support · by Colin Hume, 1 week ago
2 61 6 days ago