Add Header HTML support to Custom Wizard Themes

This one is nice and simple!

image

I can’t repro this one. For example thepavilion.io/w/welcome has this forum’s favicon.

Has your forum got a favicon set? i.e. favicon in Settings > Branding.

Thanks @angus , Favicon is set.

On further investigation, Favicons appear on Wizard’s without a custom theme set, but not on wizards with a custom theme set.

hm interesting. Our wizard has a custom theme set. I will investigate this further and try to repro however.

Just to confirm, you’re good for your purposes on this front though?

Hi @angus , I did a bit more digging here, this should help:

Reproduction Steps:

  1. Create a new Theme

  2. Define some HTML in it’s </head> section

image

image

  1. Create a custom wizard, and set its theme to the new theme created.

  2. Open the wizard. Observe the contents of </head> in the theme are inserted at the top of the <body> tag. We’re using this to re-create the forum’s header on the wizard page (better support for this may be a feature request…)

  3. Observe <link rel="icon", but it is now under the body tag, rather than the head tag where it should be. As a result, there is no favicon.

image

Conclusion:

When </head> is defined in a theme, it seems to be inserted in the body along with things that really ought to be in the head tag (like the icon link).

This seems like a bug, but in this case is proving useful as this is the only place we seem to be able to inject HTML above the wizard as…

  • </body> inserts below the wizard.
  • Header, After Header and Footer are ignored.

Edit: As to your other question, we can proceed without the Favicon but it’d be good to fix soon.

1 Like

Hi @angus - just following up on these, have you had an opportunity to look into this yet?

Hi @angus - happy new year! Just checking in on this one to see if it is on your radar.

Yup, I’ll handle this one tomorrow

1 Like

@othomson The reason you’re experiencing this issue is because you’re inserting a <div> in the </head> section of the html

The </head> section of html is for meta tags and other meta info about the page, including the favicon. It’s not where visible headers go. See further <head>: The Document Metadata (Header) element - HTML: HyperText Markup Language | MDN.

By inserting a <div> in here you’re breaking the html on the page. Notice that you can create the same problem if you do this in a theme applied to vanilla discourse.

The relevant part of the theme component system you want to use is the “header” (rather than the </head>) which inserts html into the </body> section of the html in normal discourse, above where the ember app (i.e. the Discourse client) is attached.

The custom wizard html.erb layout (which creates the custom wizard html), does not currently include support for the “Header” template in theme components. I’ll add that.

This is not a bug however. I’ve updated the title of the topic and the category to reflect that. I’ll ping you here when I push the feature (later today).

@othomson Done :slight_smile:

This topic was automatically closed after 32 hours. New replies are no longer allowed.