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

[klalex (Alex Kleshchevnikov)]

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.

[vinothkannans (Vinoth Kannan)]

Custom header with dropdown navigation

I recently made a dropdown navigation menu for Envato’s new forums, so I’ll share some code to implement something similar on your own site. We’ll be implementing a black header with one link that reveals a menu of more links, like this: [image] In Admin > Customize > CSS/HTML, create a new customization. Remember that you can have multiple customizations active at the same time, so it’s a good idea to use many of them instead of one giant one for everything. For this custom header, create a…

[klalex (Alex Kleshchevnikov)]

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

[HAWK]

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.

[Berto]

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.

[Berto]

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.

[neil (Neil Lalonde)]

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!

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

[Berto]

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.

[vinothkannans (Vinoth Kannan)]

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