Page Publishing

[JQ331]

Page publishing is really cool–the topics look great as standalone pages. But I haven’t been able to use it like I had hoped:

1. I thought one cool use would be to set up page publishing as a landing page for the forum–so before users login they get to see a topic I have published and styled to be the page they see. Is that possible?

2. The original post here mentions you can style the page. Is there a way to add jquery or javascript to the page? (edit: I see that from the earlier discussion there have been requests for being able to add jquery, javascript to the pages but not yet there, at least as of last year–basically, it looks like people have been hoping that they could have a static page, but render with the same customization possibilities of a normal topic–which is what I would appreciate too.)

[RGJ (Richard - Communiteq)]

@JQ331

Is there a way to add jquery or javascript to the page?

Yes, there is, although it is not immediately obvious.

@RGJ

It indeed seems that “regular” text/javascript is executing on published pages when it’s in the header or footer of a theme component.

[hellekin]

Is there a preferred way to link back to the original post from the published page?

I find myself willing to do this quite often, to encourage replies from readers, while keeping control over the style of the read-only, published page. I tried several ways, including linking to the topic prominently or simply with a ‘discuss’ link.

Maybe an option to add a discuss button that would remain visible at all times (but still be modifiable with CSS) could work. Did someone implement such a CSS trick already?

[lisandro_iaffar]

Depending on the nature of the page, I leave a link wherever suitable. In some at the top, like here:

In some at the bottom, like here:

You can “simulate” a button by codding CSS for a specific tag, like I did for the header of this category:

La Libertad Avanza - PD

Text:

Ciudadanos con la convicción de que la República Argentina puede, debe, y va a ser un lugar mejor, si trabajamos todos Unidos en pos de la Libertad.
<mark>&nbsp;&nbsp;&nbsp;[**Afiliación**](https://foro.enunionylibertad.com/t/formulario-de-pre-afiliacion/92)&nbsp;&nbsp;&nbsp;</mark>

(the important part are the <mark> tags)

CSS for said <mark> tags:

/* Code to CHANGE "mark" tag render to something that looks like a "menu bar" */
mark {
  display: inline-block;
  background-color: #E1E1E1 !important;
  color: black;
  border-radius: 20px !important;
  padding-top: 5px;
  padding-bottom: 5px;
}

[denvergeeks]

An alternative to Page Publishing - another method is to use CSS to remove the unwanted elements on a regular Topic Post, while preserving all of the functionality (i.e. Javascripts in installed Theme Components, and CSS styling, etc.)

Tags in the composer can be used to selectively apply formatting to a specific Topic Post.

For example, on my site I achieve this by pasting the following CSS into my theme’s CSS in the Common tab:

/********************** REMOVE THINGS FROM LAYOUT USING TAGS ***************/

.tag-no-header {
    .d-header {
        display: none !important;
    }
    #post_1 nav.post-controls .actions button.edit {
    top: 0px !important;
    }
    .topic-body h1 {
        padding-top: 0 !important;
    }
}

.tag-no-sidebars {
    aside.sidebar {
        display: none !important;
    }
}

.tag-no-category {
    .topic-category {
        display: none !important;
    }
}

.tag-no-timeline {
    .topic-navigation {
        display:none !important;
    }
    .container.posts {
        grid-template-columns: 100% !important;
    }
    .topic-body {
    width: 100% !important;
    }
}

.tag-no-post-links {
    .post-links-container {
        display:none !important;
    }
}

.tag-no-box-shadow {
    .topic-body {
        width: 100% !important;
        border-top: none !important;
        box-shadow: none !important;
        background-color: unset !important;
    }
}

.tag-no-topic-meta-data {
    .topic-meta-data {
        display:none !important;
    }
}

.tag-no-side-margins {
    .wrap {
        max-width: unset !important;
        padding: 0 10px !important;
    }
    .content-wrapper {
        display: block !important;
    }
    #main-outlet-wrapper {
        width: 100% !important;
    }
    .topic-body {
        width: 100% !important;
    }
}

.tag-no-footer-buttons {
    #topic-footer-buttons {
        display: none !important;
    }
}

Then I create Tags that I can selectively apply to Topic Posts, matching the CSS selectors in the code above…

no-header
no-sidebars
no-category
no-timeline
no-post-links
no-box-shadow
no-topic-meta-data
no-side-margins
no-footer-buttons

---

So here are the two different versions of the same Topic Post…

Before (no Tags applied):

After (All Tags applied) - which I can also embed as an iFrame into other Posts on my site :

[Richie (Richie Rich)]

Wow

That’s some seriously cool out of the box thinking

[denvergeeks]

Thank you so much @Richie!! Out-of-the-Box is my entire World!

[Canapin (Coin-coin le Canapin)]

There’s a typo in your code, a double semicolon:

    .topic-body h1 {
        padding-top: 0 !important;;
    }

Also,

@denvergeeks

After (All Tags applied)

Did you forget to post your image? Unless the After version of your page is just music

---

I played a bit with your code and that’s just brilliant!

We could add some advice for using this trick depending on your needs.

• Your topics could be closed to prevent people circumvent the CSS rules and reply to them

• Your topics could be unlisted to not add noise to topic lists or appear in the search results

• The tags could be in a tag group invisible to regular users to remove noise in the tag lists

• You could hide some elements only regular users but not for the admin (like the post menu)

That just came quickly to my mind, but I suppose there are other things that may be thought about.

[denvergeeks]

Thanks @Canapin I fixed the code typos.

Categories and Sub-Categories can also be used in CSS by using category-

i.e…

.category-books .main-content,
.category-my-great-book .main-content {
    width:100% !important;
}

I’m also using this trick on my site extensively, to style content and embeds on-the-fly inside the composer…

Custom css inside a post / adding custom classes

Styles/classes are stripped out, but you can use data-theme-* attributes to target things in posts: <div data-theme-bot> Content here </div> For example, this paragraph is wrapped in a data-theme-bot div And then in a theme, target it like: div[data-theme-bot] { background-color: red; }

I have a section of my site where I document my developments (mainly so my future self can recall and find what I have already done, so I don’t continue to reinvent my own wheels!) But anyone is welcome to visit and/or subscribe to that category if you’d like…

Site Development

[Canapin (Coin-coin le Canapin)]

@Canapin

Did you forget to post your image? Unless the After version of your page is just music

Oops; my adblocker somehow blocked your second image, weird.

For those who want to see the pages live:

https://noobish.me/t/open-source-culture-no-tags/525 → https://noobish.me/t/open-source-culture-with-tags/320

Neat.

[lisandro_iaffar]

This is awesome!!! Thank you for sharing!!!
This deserves it’s own “how-to” entry

[hellekin]

One obvious drawback to using CSS for “removing” content, is that it’s not actually removed, just hidden. Therefore you’re loading data that your client won’t be using.

My intention with this question below was to determine a common way for Discourse practitioners to recognize a way to the discussion across instances.

@hellekin

Is there a preferred way to link back to the original post from the published page?

[denvergeeks]

@hellekin “across instances” of what?

Are you using Wordpress?

GitHub - discourse/wp-discourse: WordPress plugin that lets you use Discourse...

… or Ghost?

Official Ghost + Discourse Integration

There is a new, even tighter integration with Ghost and Discourse that enables Single Sign On…

✨ Introducing Discourse on Ghost - Reimagining the integration!

There is also this plugin…

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

With DiscPage, you create static pages by adding the “Page” category to any topic. You can then insert balloon icons, to allow users to discuss subsections of the page. [image] See the old demo the new demo and the repo.

[hellekin]

@denvergeeks

@hellekin “across instances” of what?

Across instances of Discourse.

[Danielle_Tully]

Hello, I currently have a discourse site that requires login to see and do anything. I want to use the publish topic feature to create a homepage for my users but since I’m also using secure media, I’m getting the below error. Is there anyway around this? I tried the procourse-static-pages (doesn’t work with the latest version of discourse, I’m unable to save a new page. The security group drop down box is not being populated so that might be the issue) and discpage (doesn’t seem to work with a custom theme I’m using) plugins. So I’m really hoping I can get this feature to work. Does anyone have any advice?

[brasofilo (Rodolfo Buaiz)]

WoW!
What an amazing tweak you’ve made out of Discourse, congrats and thanks for sharing :)

[Lilly (Lillian)]

this is very cool. well done and thank you for sharing

[denvergeeks]

Thanks, @brasofilo and @Lilly! I’m planning some Theme Components based on this, and related use cases.

[Wall-E (Raphael)]

Unless I missed something on this feature, the published page only shows the initial post, not the answers to it. If that’s the intended behavior, is there a way (plugin?) to make the standalone page also show all the replies to the initial post?