Page Publishing is broken for logged in users

Product Support

AI-generated summary

Users are reporting issues with page publishing in Discourse, where logged-in users see a broken layout with missing sidebar, icons, and other elements. darkpixlz notes the problem is resolved when using the Default theme, suggesting a conflict with the Air theme. JammyDodger confirms the Air theme works fine for them, while Don explains the published page is intentionally styled as a minimal reader view, with limited sidebar and header. The issue stems from custom theme code—specifically an old ::before background rule in the theme—darkpixlz identifies as the culprit, which can be fixed by removing it.

1

When you publish a page, it works fine, but then go to that page.

image
image1920×926 77.6 KB

Here, it looks like it’s combined many themes, the sidebar is missing, icons are gone, there are no stats, no pfp, etc.

When you’re logged out, it’s not as broken, but it’s still missing icons, the sidebar, etc.

image
image1920×1080 158 KB

2

On mobile it looks like this while logged in:

Screenshot_20221029-090401
Screenshot_20221029-0904011440×3040 106 KB

3

Yeah, I tried the Default theme and the bugs went away. Weird, I have no code to add the Air theme background, or the Inter font.

4

FWIW I’ve just tried publishing a page while applying the Air Theme and it seems to be working fine for me. Both the sidebar and summary, etc show up fine on the original topic.

5

Published page has a different style. I think this is designed to minimalistic and it a kind of reader view. Sidebar is not available (yet) on published page and the header is also limited.

Here is the stylesheet for published page:

Discourse Air theme adds a few modification to published page to fit to the theme but you can override these with a theme component if it is not fit with your customizations.

6

Found my issue.

In my theme, a really old piece of code adds the circle like the Air theme.

.published-page {
  &::before {
    background: linear-gradient(
      90deg,
      var(--tertiary-hover) 0%,
      var(--tertiary) 100%
    );
    clip-path: ellipse(148% 70% at 91% -14%);
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    position: fixed;
    z-index: 0;
  }
  .background-container {
    display: none;
  }
}

I’ll remove it.