Apologies if this doesn’t belong in support. Currently, the main /s subscription page simply shows the subscription/payment options. And each subscription/payment option has only a limited amount of text characters you can include. For my purposes, I’d like to make the /s landing page a bit more welcoming and informative rather than just “business only”. Is it possible to add some kind of introductory or informative text to the /s page above the sub/payment options? Or is this something that might be implemented (one day) as an option or is it beyond the scope? Basically, just a user editable text box with standard formatting options above the current options. I’m not entirely familiar with the css editing options of discourse yet, so I’m uncertain what’s possible when it comes to editing pages or plugins or components. So please excuse any ignorance on my part. Any insight would be appreciated. Thank you.

I got it to work on only the subscriptions page and mostly properly formatted with the following. Huge thanks to @pfaffman and @NateDhaliwal for providing the clues necessary for this complete solution to my needs. Note: This works for my needs, but it’s very hacky. Go to Admin Go to themes and components Choose components tab Choose “install” Select “new” from options Paste in the css (below) Alter CSS to meet your needs Save Enable it (if it isn’t already) and make sure it’s enabled for your specific theme(s) (“include this component on these themes”). Tip: Need help fine tuning the CSS? Consult an AI model like Gemini, Claude… feed it the CSS and tell it what you want to do. /* PART 1: The Header (Styled like a native H1) */ body:has(.product-list) .above-main-container-outlet.subscriptions-campaign::before { content: "This is the Headline"; display: block; /* Styling to match 'title-wrapper' headers */ font-family: var(--heading-font-family); font-size: var(--font-up-5); font-weight: bold; line-height: var(--line-height-small); color: #DDDDDD; /* Space between this header and the text below it */ margin-bottom: 8px; } /* PART 2: The Body Text (With spacing below it) */ body:has(.product-list) .above-main-container-outlet.subscriptions-campaign::after { content: "This is the plain text that goes below the header. \A You can still use backslash-A for new lines here."; display: block; /* Styling to match standard body text */ font-family: var(--font-family); font-size: var(--font-0); line-height: var(--line-height-medium); color: #DDDDDD; white-space: pre-wrap; /* This creates the empty space (carriage return) below your text */ margin-bottom: 40px; } [Screenshot_20251206_201315_Firefox]

I think this can be done with CSS. Could you send a screenshot with where you want to add the text? Thanks.

You can see where the plugin outlets are. Then my Custom Components – add button or text at any plugin outlet will let you stick arbitrary text in any plugin outlet.

[תמונה] NateDhaliwal: Could you send a screenshot with where you want to add the text? Sure. I envision something like this… Before/After. Note, I had to change the default “Subscriptions” text to “make a payment” because we offer more than subscriptions. Although it appears that the text is also tied to the page title. So in my case, it would make more sense to add a block of text above the existing page title vs. below it. [image]

[תמונה] pfaffman: my Custom Components – add button or text at any plugin outlet will let you stick arbitrary text in any plugin outlet This looks great and powerful. Is this something I’m able to take advantage of if I’m hosted? It’s a little light on instructions for new Discourse users – so I’m probably not the ideal candidate for use at present, but I’m trying to get up to speed as quickly as possible and this looks like it would be really handy. I had to follow to the Github page to find reference to this: To find plugin outlets, run enableDevTools() in the javascript console. I appreciate you answering my query. Thank you.

[תמונה] ZeroDean: Is this something I’m able to take advantage of if I’m hosted? Yes. It’s a theme component. (At least most plans allow you to install whatever theme components you want). Did you try clicking the big blue button that says “Install this theme component”? [תמונה] ZeroDean: It’s a little light on instructions That sounds like a fair criticism! I added a link to Introducing Discourse developer toolbar so you can find where the plugin outlets are. [תמונה] ZeroDean: I had to follow to the Github page to find reference to this I even added that link before I read this part of your message! :slight_smile: Oh, but looking at the plugin outlets on /s it doesn’t look like there are any plugin outlets. If you want to stick text above the “Make a payment” heading, you’re in luck! [image] (Pretend “Pay for Services” is “Make a Payment”) You can put it either at top-notices or above-main-container, but I’m afraid that will add the stuff on every page, not just the payment page unless you can figure out some CSS to hide it on all of the other pages. If you’re patient, there’s a reasonable chance you can get https://ask.discourse.com/ to tell you how to do that. OTOH, it would be a fair request to have a plugin outlet added on that page, but that’s another thing to learn.

[תמונה] pfaffman: It’s a theme component. Yes. I am at a level where I can install theme components without issue. [תמונה] pfaffman: That sounds like a fair criticism! Wasn’t intended as criticism at all. My apologies if it came across that way. Was just an observation as a new user. [תמונה] pfaffman: I added a link to Introducing Discourse developer toolbar so you can find where the plugin outlets are. Yes, I’d discovered that link earlier in my searches. The problem is, I don’t know how to run Discourse in a development environment (or access it via the browser console) yet. So my query about being able to take advantage of your component was about that and needing access to the dev toolbar to use it, not the installation of the component itself. Sorry for the confusion. [תמונה] pfaffman: If you’re patient, there’s a reasonable chance you can get https://ask.discourse.com/ to tell you how to do that. I wasn’t aware of this resource, thank you. As for placement, I’m content to place the intro text anywhere it will easily fit above the actual “subscription” content so long as it doesn’t show up on every page. I appreciate your thoughtful response.

[תמונה] ZeroDean: Wasn’t intended as criticism at all. No, no. I meant to imply, yes. You’re right. The documentation should be improved. That’s why I said it was “fair”! [תמונה] ZeroDean: Yes, I’d discovered that link earlier in my searches. The problem is, I don’t know how to run Discourse in a development environment (or access it via the browser console) yet. You don’t have to. Just open the developer tools in your browser (F12 works unless you’re on a Mac; and I have to look it up every time I use a mac even though there is one 8 feet from me then I google “mac open dev tools browser” or something like that) and type enableDevTools() in the console prompt. You can do it right here, right now, on this site.

[תמונה] pfaffman: I have to look it up every time I use a mac I never use a Mac, but I remember “J” thanks to [תמונה] Preparing for Discourse's upgrade to Ember 5 megaphoneAnnouncements option command J should be easy for you to remember laughing

[תמונה] pfaffman: and type enableDevTools() in the console prompt. Ahhh. Browser developer console, not some Discourse dependent console. Things are beginning to make more sense. Thank you. I enabled Custom Components. And enabled devtools in the browser console. And activated the developer toolbar to see plugin-components. And now I understand, you’re saying there is no plugin-component for Subscriptions, so no *easy way to place text on that specific landing page. Got it. *easy as in Step 1. Step 2. Step 3. Success! And not requiring hours of research and CSS education, etc. [image] I read somewhere in my recent Subscriptions searches (sorry I don’t have the link at this exact moment) that it was due for an overhaul anyway. Hopefully my suggestion for an intro/text area will be considered in any future development. I appreciate the help in this thread. Thank you.

There should be a body class that’s only on the subscription page, so you can then use CSS to hide the thing you add on every page except the subscription one. Yes, subscriptions has class="above-main-container-outlet subscriptions-campaign ember-view", so you do something like hide the class of the thing you add and then un-hide it if it’s in a subscriptions-campaign. Something like that.

Insert intro text on /s page?

מפתח

pfaffman (Jay Pfaffman) 8 בדצמבר,‏ 2025,‏ 1:18pm 19

@ZeroDean, this means that you can simplify your css by using this new plugin outlet that’s only in the subscription page.

נושא		תגובות	צפיות
Banner text customization for Subscriptions plugin Product Support subscriptions	7	1741	14 במרץ,‏ 2022
Customizing Subscription Plugin pages Development subscriptions	5	832	11 במאי,‏ 2021
Add project description to login page Product Support	10	1771	19 במאי,‏ 2021
Topic Template Placeholder Text theme component Theme component	60	7826	21 באוגוסט,‏ 2026
Page Publishing Site Management how-to , page-publishing , content	65	28554	23 בינואר,‏ 2026

Insert intro text on /s page?

נושאים קשורים