Is the "Comments" header from Disqus?

[Andre601]

Something I wonder now when I implemented Disqus is, is that "Comments" header above the comment section from Disqus itself, or does Material for MkDocs provide it?

I talk about this part here:

I would like to customize it a bit by adding the GitHub comment SVG to it.

[squidfunk]

No, it's from the Material for MkDocs translations:

mkdocs-material/src/partials/integrations/disqus.html

Line 31 in f0e8756

<h2 id="__comments">{{ lang.t("meta.comments") }}</h2>

[Andre601]

Could I just add the <svg> tag here or would I need to adjust certain things?

[Andre601]

Looks like I can just add the svg, but that would show it as black and I'm not sure what exactly I could do to fix this..

[squidfunk]

You would need to use the masking technique (mask-image) as outlined in the admonition example.

[Andre601]

I'm not quite sure how I would insert this into the h2 title section tho.

[Andre601]

I still try to apply what you suggested @squidfunk but I'm not sure if I do anything right...

If I understood you correctly would I f.e. apply this here?

.md-typeset h2 > .disqus-comments::before {
    background-color: rgb(255, 255, 255);
    -webkit-mask-image: var(--md-text-icon--comment);
            mask-image: var(--md-text-icon--comment);
}

This should to my understanding override any h2 of md-typeset that has a div or similar with the disqus-comments class to display the icon before it?

The HTML (disqus.html) looks like this (Just showing the relevant part. Everything else is from the partials):

<!-- Disqus integration -->
{% if not page.is_homepage and disqus %}
  <h2 id="__comments"><div class="disqus-comments">{{ lang.t("meta.comments") }}</div></h2>

Trying stuff like applying the class to the header directly has no effect.

Like saying that I should apply the masking is easy to say, but for a CSS beginner like me is that equal to saying that I should try and build a NASA rocket.
I would appreciate some help in understanding this entire situation here.

[squidfunk]

Thanks for sharing your progess! I'm afraid I cannot assist you in designing a solution, as I'm trying to invest my time in making progress on Material for MkDocs itself. Maybe somebody else found a way to do this. My understanding was that you could start with the custom admonition example and work from there. I understand though that CSS is tricky sometimes.

[squidfunk]

Another possible way to solve this – you can use theme extension and include the icon directly in the template. You can then add classes to change the color:

mkdocs-material/src/overrides/main.html

Lines 74 to 93 in aac1eed

	{% block content %}
	{{ super() }}
	<!-- Content footer -->
	<footer class="mdx-content__footer md-typeset">
	<a href="{{ 'insiders/' | url }}" title="Material for MkDocs Insiders">
	<hr />
	<span class="twemoji">
	{% include ".icons/logo.svg" %}
	</span>
	<span class="twemoji">
	{% include ".icons/material/plus.svg" %}
	</span>
	<span class="twemoji mdx-heart">
	{% include ".icons/octicons/heart-fill-24.svg" %}
	</span>
	<hr />
	</a>
	</footer>
	{% endblock %}

[Andre601]

Thanks for that. Just putting it in using {% include ".icons/octicons/comment-discussion-24.svg" %} and surrounding this with the twemoji class helped already and applied the right color.

[Andre601]

Solution

(Because you can't accept comments to answers as solutions)

  <h2 id="__comments">
    <span class="twemoji">
      {% include ".icons/octicons/comment-discussion-24.svg" %}
    </span>
    {{ lang.t("meta.comments") }}
  </h2>

[Andre601]

I quickly ask this here because I don't think this is worth a own discussion.

Can the footnotes section be overridden using theme extension? I would like to add a "References" header to it, so that it looks a bit more similar to Wikipedia's footnote setup.

[squidfunk]

I don't think so. It's generated by Markdown, not the theme. However, you could consult the documentation or ask on the maintainers of Python Markdown.

[Andre601]

I found something.
The Footnotes extension allows you to use ///Footnotes Go Here/// (Or a custom text if you change in the settings) to change the position of footnotes.