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

Dev
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.

1 Like
2
3 Likes
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.

1 Like
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.

1 Like
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;
}
2 Likes