NoScript Users Unable to View Custom Footer in Theme Customization

Bug
1

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

Hello Adrelanos :slight_smile:

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

2 Likes
3

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

I can repro this.

js
js2498×974 119 KB

:point_down:
no js
no js2498×1363 96.9 KB

2 Likes
6

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

3 Likes
9

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.

2 Likes
13

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

    image
    image2560×1315 146 KB

  6. Scroll down to make the green footer appear:

    image
    image2560×1315 142 KB

    :warning: 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 :gear: (Settings) on the right, then Preferences tab, then check “Disable Javascript”:

    image
    image2560×1315 190 KB

  8. Refresh the page:

    image
    image2560×1315 92.8 KB

1 Like