DiscPage: a plugin to create static pages and insert discussion balloons in the text

Why does your plugin modify the hamburger icon? It turned it red and now I have to figure out how to overwrite the CSS back to normal. I like your plugin, but please fix this?

Hi @Erik_Manger, your issue is described here:

My hamburger menu has turned red, what should I do?

Hamburger Menu
A red hamburger menu means that DiscPage is off . This occurs:

  1. when an error has prevented DiscPage from starting (in that case, check the debug console for a DiscPage-related error), and
  2. when you manually turn DiscPage off (see below).

@syl I’m having a real hard time with these steps. Sorry, I know this is a super noob problem. BUT could you provide a simple copy-paste template? Or a short video walkthrough? Or if you walk me through this personally I’ll create a youtube video for others that are SUPER noobs.

  • To edit a static page , click the “pencil” button at the top right of the page (you can also turn DiscPage off from the hamburger menu, then edit the topic as you would do normally).
  • To style static pages , use the .dpg-page-content class. To style an individual page, use the html[data-dpg-page-id] data attribute. For example, go to Settings > Customize > Light Theme > Edit CSS/HTML and enter the following in the Common > CSS section:
1 Like

Can a static page import a js or link to one?

1 Like

A static page is rendered like a standard Discourse topic, so rules for js scripts in topics applies. I think there are several discussions about this here on meta: it implies creating a theme component and customizing it (there is also a Discourse setting to allow linking external scripts).

You might also want to check the “To customize a static page” section on this page and see this example of js in a static page (combo boxes at the top).

1 Like

Did you create a static page already? Can you see the pencil button?

Styling a static page is like styling a standard Discourse topic page: you create a theme component and customize it. There is an example here. You can also search for “Theme Components” here on meta. The .dpg-page-content class allows to create CSS rules that apply to static pages only instead of all topic pages.

On that subject, let’s say I have an api that retrieves an image given user input. In that link you sent, you have some combo boxes at the top. If the user selects something from the combo box, the js will show something based on that user input. Is that possible inside a static page?

1 Like

I think your tool is working 100% correctly. The problem is my lack of knowledge on how to use it :frowning: I’ll take a look at that link you provided with the .dpg-page-content

Page: This is a test page - Pages - TigerGraph

Click the Edit button. Drop-in a chunk of code. Click the Settings. Go to Customize. Drop-in chunk of code you should see a basic HTML webpage appear. Would help a super noob like me haha!

I appreciate you taking time responding to my question :slight_smile:

I’ll keep you posted with my progress. Hopefully, I can make mine look something like yours!

1 Like

I think it’s possible. In the dpg_displaypage event handler, you need to use $.ajax() to call your external API. Also, I think you need to add your external API to the content security policy script src Discourse setting.


It looks like this plugin is still maintained, but I seem to have isolated an issue on my server where the login page is not viewable when this plugin is enabled. I am hoping to get this solved.

If this plugin is enabled on my server I can confirm that the login page appears blank and if I disable the plugin then the login page appears as normal again. If a user is already logged in then the issue isn’t present and the server works as normal.

Looking for some help/support to solve this. I am happy to provide any additional information required to support troubleshooting.

Thanks Jordan.
Yes, I will need some more information, as I’ve checked on my various Discourse instances and couldn’t reproduce the issue.
When you say “the login page is not viewable”, you mean the login popup, right?
Please give me some more details and/or screenshots. Also, if possible, PM me and provide the url of your Discourse instance.

1 Like

Hey Syl,

Thanks for the reply.

When I have the discpage plugin enabled and I go to the discourse instance when not logged in, I am presented with a completely blank page. See below:

I did also just recently check the console logs and noticed there are some errors related to discpage. Although they don’t mean anything to me. Maybe they mean something to you…


Thanks for reporting this. The bug has been filed here:
Until the bug is fixed, a workaround is to disable the “login required” Discourse setting.

EDIT: the bug is now fixed.

1 Like

Hi Syl,
It’s a bit awkward :sweat_smile: sorry to be blunt, I was looking at the source of the plugin, just by curiosity, having no coding skill whatsoever, and I’m confused by the formatting of the lib file. I assume it’s not a technical choice (but what do I know :smile: ), and I can imagine and understand where it comes from.
I kind of feel you’re midstream, and it’s already great, so I really don’t want to sound ungrateful, but would you consider sharing an intelligible version of your work?
IMHO in the long run, the pace of the core upgrades can be challenging to follow for the plugins authors, it might ease the mind of those who could use the features of your plugin but hesitate to build something relying on the shoulders of too few people, and why not it might even create some goodwill and interest?

Many thx anyway :wink:

Hi Benjamin,
The plugin’s source code is released in minified form because I’m ashamed of it. It is the result of an R&D experiment and needs extensive refactoring. I postponed the task until the plugin raises some interest.


well, you can count me in the “very interested” column !
I think it’s a very nice variation to the core “quote” feature.
I’m looking for an incentive for my users to engage in some speeches analysis (which is quite close from your Castafiore use I think, much less entertaining hélas!), and hopefully this design might tip them in writing mode.


So far so good !
my 2 cents:

  • humble opinion about the header, I’d rather keep it centered, i feel it integrates the static pages of the plugin more seamlessly in a globally “normal” discourse.
  • fringe case: it might be interesting to specify a balloon category per static category, in case multiple static categories have different read/write rights.
  • am I missing something or does the [dpgb id=titre] [/dpgb] (which are cooked into balloons I believe) are to be set by hand? I candidly (and unsuccessfully!) tried the quote button of the composer, doh :sweat_smile: . It’s probably required as the tag slug is to be set :thinking:
  • could the discpage hide tags setting become hide discpage tags instead ? I don’t really apprehend the difficulty of hidding only the dpg-**** tags but I think they might clog a bit the suggested list when creating a topic

next step, the user engagement test !

Thanks @Benjamin_D, your feedback is most welcome.

The header alignment must fit:

  1. Normal Discourse pages (max-width = 1110px),
  2. DiscPage static pages (max-width = 782px, because 1110px is too wide for a static page where you cannot put side bars/widgets/pictures),
  3. DiscPage split layout, with a static page on the left and topics on the right (max-width = 100%).

I did many tests, with both fixed header alignment and layout-dependant header alignment, and came to the conclusion that a permanent left alignment was the way to go.

However, I will gladly check any idea you can come up with. Be sure to address the three above cases.

It’s already supported, see this paragraph in the doc:

In fact, you can set multiple categories in here. Let's call PageCat the category of the static page the balloon belongs to. If there are more than one balloon category in this field, DiscPage will take the first one which is either a sibling of PageCat (same immediate parent) or the immediate parent of PageCat. If no such category is found, DiscPage will take the first category of the list. This feature allows to pair [static page category, balloon category], which is useful, for example, for multilingual forums or to set up static pages with different group permissions.

I agree this is not easy to grasp. Any idea on how to improve the phrasing is welcome.

Yes, the balloons are to be inserted by hand using a text syntax.
When you first tried the plugin, why did you feel the quote button would be of any help? (I’m interested in your mental state at that moment)

The hide discpage tags feature is already implemented: DiscPage tags are hidden by default in all Discourse pages and widgets. In other words, if you can see a DiscPage tag anywhere (when DiscPage is enabled), that’s a bug.

The discpage hide tags setting is very different: it allows people who don’t want to enable tags in their Discourse instance, but who were forced to do so in order to use DiscPage, to simulate an instance without tags.

1 Like

:thinking: Actually, it’s more the max-width = 1110px that i’d keep, even if, in split screen, the static page under the header takes 100%. I commented out the html.dpg header.d-header .wrap block and it doesn’t feel too bad having a little white around the header above the static split page (even if the edit title and page buttons seem a bit lost up there, non split layout).

Silly me, RTFM :sweat_smile: (in my defense I probably did last year, and forgot :smile: )
I didn’t remember that discpage hid the balloon category (having just tested it as an admin) but that’s a great feature.

So if I understand correctly, in case of multiple {static page category, users rights}, one should make an associated balloon category a sub-category of the static one (which makes sense from the rights POV), or should have both categories as sub-categories of the same third parent one. Not important, but would it also work if the static one is a sub-category of the balloon one?

Probably just the balloon shape of the icon, in conjunction with the fact that I’ve probably never used the quote button of the composer, and maybe I thought, Hey, was that there before? So I tried :crazy_face:
I don’t care having to write a few strings of “code” but I can hear my users howling from here. Maybe they just won’t set themselves the static pages for now. Sometime I feel every stoke on the keyboard can be the last straw… :roll_eyes:

Of course, sorry… I’m gonna put this on my slight fever, I don’t know why I thought that they weren’t hidden, maybe I saw the glimpse of one in the tag drop-down box in the balloon part of the split screen ? I now understand the trailing comma I saw trying everything I could, even tagging the balloon topics!

Would it be possible to let users create and edit (their) static posts? The admin restriction could then only be achieved with the category security settings.

maybe not, modifying a tag_groups seems StaffConstraint :disappointed_relieved:

I can let a TL4 user set a balloon with changing a = User.current()) && a.admin into User.current()) && a.trust_level >= 4 but the tag won’t be created until an admin edit the static page… :thinking:
Something would be great : a category moderator that would be able to change the tag group of its category :smile: