Is it possible to change HTML of header and footer and message details on the forum?

Development

AI-generated summary

The discussion revolves around customizing the HTML of Discourse forum pages, particularly the header and footer. klalex inquires about the possibility of using a custom HTML template for these sections, as the admin customization features seem limited. HAWK suggests that adding custom HTML/CSS via the /admin/customize/themes section can achieve this.

Berto seeks to alter the header without using JavaScript, specifically to update the top row on desktop browsers. They propose a solution involving adding extra HTML to the “After Header” area and using JavaScript to move it into place and make it disappear when scrolling down.

vinothkannans offers an alternative solution using CSS, which can easily hide the custom header when scrolling down. They demonstrate this with a sample and provide the CSS code used.

The discussion highlights the limitations of the admin customization features and the need for creative solutions to achieve specific design goals.

1

Is it possible to change HTML of header and footer and message details on the forum? I have a custom design that need to be implemented and customization features in admin looks very limited. Is it possible to use custom HTML template for header, footer and message thread page? Thanks.

2
3

I mean how I can change standard template HTML of discourse pages? Not adding extra HTML, CSS. Is it possible?

4

Adding custom HTML/CSS via /admin/customize/themes will essentially ‘change the standard template’.
You can achieve what you’re trying to do this way – yes.

5

I’m looking to alter the header as well. Is there any way – preferably without using Javascript – to update the top row (inside <header class="d-header clearfix"> after the title class) on desktop?

The Envato solution is unacceptable because they’re wasting a substantial amount of vertical space. We have this huge bar here that’s completely empty on Desktop browsers!

That’d be a great place to put some key links.

6

So here’s my solution unless someone bests it:

  1. Add extra HTML to my theme’s “After Header” area for desktop, the div in this example is <div id="custom-header-links" class="enabled">

  2. Run this code in the theme’s “</head”> area:

    <script type="text/javascript">

jQuery( document ).ready(function() {
    var $nav = $('#custom-header-links');
    var $discourseHeaderTitle = $('.d-header .title');
    $nav.insertAfter($discourseHeaderTitle);
});

jQuery(window).scroll(function () {
    setTimeout(
        function() {
            if ($('.extra-info-wrapper').length && $('#custom-header-links').hasClass('enabled') && jQuery(this).scrollTop() >= 85) {
                jQuery('#custom-header-links').removeClass('enabled');
                jQuery('#custom-header-links')[0].style.display = 'none';
                jQuery('#custom-header-links')[0].style.visibility = 'hidden';        
            } else if (!($('#custom-header-links').hasClass('enabled')) && jQuery(this).scrollTop() < 50) {
                jQuery('#custom-header-links').addClass('enabled');
                jQuery('#custom-header-links')[0].style.display = 'block';
                jQuery('#custom-header-links')[0].style.visibility = 'visible';
            }
        }, 10);
});
</script>

The first area moves it into place when the document is ready. The second section makes it disappear once the user scrolls far enough, so that it doesn’t get in the way of the extra-info-wrapper class that pops up in the title.

The timeout helps in my browser to wait just a tad while the extra-info-wrapper appears, since it kind of fades in.

Regarding that second part, yes, it’s executing more JS every time we scroll, which sucks.

Would love feedback if this is going to pull CPU down! Doing it on desktop only for now though.

7

It’s pretty full when you’re scrolled down in a topic. The header shows topic title, category, and tags.

8

That’s why my solution is to get rid of the extra custom header stuff when scrolling down. Just working on the best way of doing that.

I’m trying to generate an event when .extra-info-wrapper appears and disappears.

9

@Berto Using css you can easily hide extra custom header when user scrolling down. Sample (in Desktop)

I added custom header in ember plugin outlet above-site-header. Then using below simple css I am hiding it when scrolling

.d-header {
    top: auto;
}

.docked .d-header {
    top: 0;
}