Is post styling broken?

Forum Help
#1

I discovered when trying to format my plugin posts that you can’t style divs with CSS:

<div style="border: 1px solid blue">
    Hello!
</div>

The above renders like this:

Hello!

On other Discourse-powered forums, it seems to work just fine:

image
image940×572 39.9 KB

Other div properties also work, which is strange:

<div align="center">
    Hello!
</div>
Hello!

I wanted to create a nicely laid out navigation section for my plugin posts using divs and CSS Grid/Flexbox, like this:

image

I attempted to use tables for this, but it introduces lots of unwanted padding and borders, which again can’t be removed since CSS styles don’t seem to work

Another user had this problem in the past too: Quick question regarding post formatting

Are CSS styles intentionally broken? It would be super useful if it was fixed/enabled.

2 Likes
#2

It’s most likely because the DevForum changed a plugin that they use for formatting posts. They’re probably not using Discourse’s plugin, but rather something else that doesn’t support most div styling.

1 Like
#3

Interesting. Is there any reason in particular for this?

1 Like
#4

Hmm. No idea, really.

But I did find another topic that talks about format breaking in old posts:

And one of posts said that they changed plugin, which was the answer. The reason–I guess no one knows for sure. Maybe they didn’t include certain features that other plugins did or something along those lines. I think they’re trying to get as many ways of formatting in one plugin.

2 Likes
#5

No that’s not related, Kunena is forum software, not a Discourse plugin. Before Oct 2015 we used to have a Kunena-based forum on a different URL. Those posts with old formatting are from Kunena that weren’t properly converted over.

3 Likes
#7

I’m pretty sure the DevForum uses MarkdownIt, which basically just applies the styles it would normally apply to transformed markdown. I don’t think MarkdownIt supports any form of custom styles. I might be wrong.

1 Like
#8

It was probably disabled to stop people being obnoxious, or broken by mistake with formatting plugins.

You are, in fact not correct.

1 Like
#9

I didn’t put that very well. I meant, I think it strips style and script tags from HTML. I’m aware some tags have deprecated attributes which can be used for styling.

HTML is enabled
image

1 Like
#10

You can’t use style or class on the DevForum; again, likely to stop obnoxious behaviour and security vulnerabilities.

1 Like
#11

I’m intrigued as to what security vulnerabilities you could run into with CSS styling. For things like offsite images/tracking pixels I’m pretty sure there’s already countermeasures in place.

edit: all the applicable vulnerabilities I found depend on JS or an insecure content policy, e.g. CSS Security Vulnerabilities | CSS-Tricks - CSS-Tricks

#12

I presume the server-side sanitiser gem is still used, so it could be that Roblox have purposely blacklisted certain HTML tags and attributes:

On its default settings it removes style tags and attributes.

1 Like
#13

There’s a relevant issue on their github it appears: Custome Sanitizer: allowing style attributes fails · Issue #130 · rgrove/sanitize · GitHub

edit: and this one too! Allow all CSS properties? · Issue #118 · rgrove/sanitize · GitHub

1 Like
#14

Good catch. I didn’t look in the issues. That might be the case.

1 Like
#15

Yeah it might just be a configuration issue. If so, then it appears all it’ll take to solve is enabling style attributes and configuring the css whitelist to a safe subset :slightly_smiling_face:

1 Like
#16
I actually quite like the borders on this. Makes the fact that it's a navigation very distinct.

Reclass Imiji Atmos Pick InCommand

Atmos is a plugin that makes it easy to find, preview and apply professional skyboxes and lighting configurations in your game.

Once installed, you can browse through a range of different skyboxes in the Skybox Browser…

Also, if you want to test anything in future without making a new public thread, you can just message @discobot.

1 Like
#17

Sorry for the necrobump- This issue still exists, to a certain extent. I have found the the combination of HTML tags right before/after markdown and/or richtext breaks the post styling. Here is an example:

Example

image

![image|690x301](upload://qhYAxICQ70pJFhD44JGyn2xEb1s.png)

Here is what I wrote:

![image|690x301](upload://qhYAxICQ70pJFhD44JGyn2xEb1s.png) 
<hr>
![image|690x301](upload://qhYAxICQ70pJFhD44JGyn2xEb1s.png)

Very simple yet broken. As someone who uses HTML/CSS a lot when writing posts, this is extremely frustrating and also embarssing when I look back and see this instead the image of the issue:
![image|690x301(upload://qhYAxICQ70pJFhD44JGyn2xEb1s.png)

I don’t know why this is happening, but if it’s at all possible to fix, that would be great. Thank you.

#18

image

image

It’s not broken? You just need to put a new line.

#19

I tried this, apologies for not making it clear, but it does not work when inside a summary. Here is the correct code:

[details="Summary"]
![image|690x301](upload://qhYAxICQ70pJFhD44JGyn2xEb1s.png) 
<hr>
![image|690x301](upload://qhYAxICQ70pJFhD44JGyn2xEb1s.png) 
[/details]

Here is it without:

image


image

#20 
[details="Summary"]
![image|690x301](upload://qhYAxICQ70pJFhD44JGyn2xEb1s.png) 

<hr>

![image|690x301](upload://qhYAxICQ70pJFhD44JGyn2xEb1s.png) 
[/details]

works fine for me when I add the newline.

1 Like
#21

Hm, that’s strange. I attempted to do that earlier with no results. It works fine now. I am going to look into this.