NoScript Users Unable to View Custom Footer in Theme Customization

[adrelanos]

We’ve implemented both a custom header and footer for our forum by navigating to Settings > Customize > Themes > Components. Here, we installed the standard header component and associated it with the default theme. We then customized this component by adding our specific header HTML in the “Header” section and our footer HTML in the “Footer” section.

For regular users with JavaScript enabled, everything appears correctly with both the custom header and footer visible. However, when accessed with NoScript enabled, specifically using the Tor Browser at its “Safest” setting, the custom header gets misplaced below the content, while the custom footer disappears entirely—it’s also missing from the page source code.

As a temporary solution, we’ve integrated a noscript tag within the “Body” section of the component and embedded the custom footer HTML again inside this noscript tag. However, this is just a workaround, and we’d prefer a cleaner solution, with less likelihood of breaking in the future.

Bug report / feature request:

1. Ensure the custom footer is visible and rendered appropriately for NoScript users.
2. For the NoScript version, the header should appear above the content, and the footer should follow the content, mirroring the display sequence of the regular JavaScript-enabled page.

[Canapin (Coin-coin le Canapin)]

Hello Adrelanos

@adrelanos

Here, we installed the standard header component

Can you be more specific? What is the exact name of this “standard header component”?

[adrelanos]

@Canapin

What is the exact name of this “standard header component”?

Admin → Customize → Themes → Component → Default → Components → Header → Edit HTML/CSS → Header

<div class="header-brand-nav">
    <a class="home" href="https://www.example.com">example</a>
    ... more similar links ...
</div>

[Canapin (Coin-coin le Canapin)]

@adrelanos

the custom header gets misplaced below the content, while the custom footer disappears entirely—it’s also missing from the page source code.

I can repro this.

[Canapin (Coin-coin le Canapin)]

@merefield

Since when were theme components possible without JavaScript?

Here it’s a matter of adding HTML in the header and footer of a theme through this:

[merefield (Robert)]

It is certainly true that some theme elements DO appear on the noscript version of sites.

Would be good to have a definitive statement about the level of intended support.

It seems like assets and CSS are brought down … not sure about other elements.

[Canapin (Coin-coin le Canapin)]

Doing a more proper presentation of the issue:

1. Create a new empty theme component

2. Put <div style="padding: 30px; background: red;"></div> in Header

3. Put <div style="padding: 30px; background: green;"></div> in Footer

4. Go to the home page and refresh the page

5. The red header appears on top of the d-header as expected
   

   

6. Scroll down to make the green footer appear:
   

   
   
   The footer part seems a bit glitchy. It should appear without having to scroll down, and the scroll behavior is weird, it’s like the scrolling motion is slowed down when we reach the custom footer. It might need an new topic as it’s maybe not related to the current issue.

7. In the Browser dev tools (Chrome), go to (Settings) on the right, then Preferences tab, then check “Disable Javascript”:
   

   

8. Refresh the page: