CSS in Posts

[Krimm]

Alright, since only basic html is enabled, which I understand now why, I was wondering if this type of CSS is possible to be added to SMF?

[css-div="min-width: 600px; max-width: 1200px; margin: 0 auto; font-family: Arial, sans-serif; color: #000000"]

I've seen it enabled on various other forums, including vbulliten. This can be used to spiffy-up posts quite nicely and I was wondering if it was possible to enable in posts with SMF?

all help is appreciated!

[Arantor]

Depends if you want only admins to use it or not.

If only admins can use it, use the html bbcode:

Code Select Expand

[html]<div style="min-width: 600px; max-width:1200px; margin: 0 auto; font-family: Arial, sans-serif; color: #000000"> your content here </div>[/html]

If you want it for regular users too, that'd be a custom bbcode tag which is a bit more involved depending on what you're trying to achieve and exactly what you want to allow users to be able to do.

[Krimm]

I see, I see. So simply put the CSS really isn't intended to be in member's posts?

What I'm trying to do is just allow formatting to posts... like say perhaps, extreme formatting XD With borders, backgrounds, the whole shabang. But I sort of see that SMF isn't really built for that in posts, which I understand.

[Arantor]

Not really by default, hence my question.

SMF like almost all forums before it, applies on the principle that almost anyone can be posting, with the result that sanitisation of HTML, not to mention a subtle simplification of it, is the order of the day (raw HTML is not allowed to be posted by regular members for the obvious security reasons if nothing else)

It's entirely possible to add your own formatting, but that's why I needed to know what the rules were that you wanted to give your members.

[Krimm]

oh o_o Well I definitely feel stupid now XD Sorry about that.

Members really don't need to use html, nor really CSS, however it's a definite plus when you see posts of advertisements or art threads using CSS tables with colors and whatnot. Preferably, I'd like members to be able to do all the basics but probably more advanced CSS as well, such as tables, backgrounds, linkings to sections in a posts with IDs, etc.

Through adding your own formatting, do you mean just making new tags so like if you clicked one it would setup CSS, like so?

Code Select Expand

[html]<div style="Css preferences here"> your content here </div>[/html]

Or rather add the other formatting of

Code Select Expand

[css div="css preferences here"] content here [/div]

This other forum I attended had member posting html completely disabled, but they enable full use of CSS without html (basically what I showed above. Like they had no  tag whatsoever). I'm really not sure how they did that, if it's a feature of vBulliten, a mod, or what. I apologize if I'm not making much sense, but I really do appreciate the help XD

[Arantor]

BBcode allows many forms of HTML to be generated safely, including tables. You can link to sections in posts using the anchor bbcode to set the destination.

I'm not sure I'd entirely like the above in terms of security but yes, it is entirely possible to create your own bbcode if you wanted to (I've written a number of custom bbcode mods)

So, what options would you like to give members in terms of style and appearance? Many options can be achieved without even adding a tag.

[Krimm]

Oh? you can stylize things without the pre-given BBcodes? So like you could add Cell padding and border thickness to the default table BBcode? To be honest, I've never really experimented with the concept xD

This is an example of what I mean (See attachment) when I say spiffy posts. Can making something like that be done with BBcodes or is that like an entirely different subject? XD

[Arantor]

No, that's not what I said.

Many things you may want to do can be done with existing bbcodes. Even full blown HTML+CSS can actually be done by administrators with [html].

Styling tables is one of the few things it can't do, and for good reason (there is a massive bunch of code for fixing up that [nobbc]

contains and in that order, and that element hierarchy is maintained as far as possible, adding variables to it overcomplicates it) Point is you can always add new bbcodes to achieve almost anything. I've had bbcodes even call other sites for details in the past. You'd have to write some custom bbcode to make that, but it's not hard to do really. (I'm no CSS person as the co-devs on SimpleDesk will tell you, so I wouldn't know what CSS to use there, but I could certainly help you with the rest of it)

[Krimm]

Hey thanks xD I'm really surprised that I've even gotten a response from a help topic.

So I'm a little confused when it comes to adding BBcode that can make something like that. Would it add tags that support CSS like [css-div="members create preferences as they wish"][/div] or is it separate smaller functions that does individual things similar to that such as add a background color or something? Simply put I'm confused about what the BBcode would do if you used it in a post. 

[Arantor]

That's the thing, you can LITERALLY make a bbcode do ANYTHING. Sometimes it needs a little more work but it can be made to do literally any operation you can do in PHP, which is virtually anything. As I said, I've written bbcodes that interact with a webservice to get data, amongst other things.

You could in theory provide a [css-div="arbitrary css expressions here"]content[/css-div] bbcode but to be honest that concept actually scares me, because it's incredibly easy no matter how smart you think you are to break it.

You can trigger CSS expressions in arbitrary CSS which will consume vast amounts of CPU, and there's no guarantee a user won't be smart enough to figure out how to break out of CSS and allow them access to arbitrary nasty Javascript.

For the example you posted, that would be a box on the right of the post, no? I'd be more inclined to offer [rightbox bgcolor=yellow textcolor=black bordercolor=black]content[/rightbox] for example.

i.e. instead of providing a catch-all (bearing in mind that potentially anyone who signs up to your forum can use this!), providing a method for something slightly different.

Also note that there is nothing stopping you as admin from using whatever HTML you want in a post as I mentioned before.

[Krimm]

Oh yes, with my Admin ability I've already gotten my test post up and running. I mainly plan to use it to make reading forum rules and whatnot a bit easier with a nice layout, but in terms of allowing members I simply would like them to have the ability to have well presented posts or perhaps make spiffy signatures.

I understand the downfall to breaking it, however I want to know what murderous things can be done. I'm simply curious because on the forum I've mentioned prior, they allow all of arbitrary CSS expressions (cell padding, floating boxes, backgrounds, etc, etc...) however they've never had a problem with anyone breaking into anything. We aren't talking about a small community either; their slow day comprises of about 196 active users online, most of which are avid scripters (due to an active game development section).

And I see now what you mean with the BBcode xD That does work simply put, but how flexible could it be to the member's demands? Could they change the width, cell padding, or make the background color an image instead?

[Arantor]

You could in theory make it any/all of the above. That was just a suggestion - the sky is the limit.

As for what 'murderous' things could be done. If you don't properly check what the user inputs, and I'm not about to go into the finer points of doing that, you could have something that would amount to [css="some codethat lets you escape the " followed by ><script src="bad stuff.js" />]

Suddenly you are now serving malware and you didn't even realise it.

[Krimm]

Alright, alright, I see your point.

And you know how in CSS, and html probably, you can make a link that creates a small popup window when you hover over it? Like it had a dotted line beneath it, and it looks colored like a link, but when the mouse hovers over it a small box shows up with more text inside of it?

Could THAT possibly be made into a BBCode? If anything, that would probably be a very useful thing for what I'm trying to do with my forum, and one of the big reasons I've been trying to get CSS.

Example from a forum that I've done it on:

[title="Caption text goes here"][/title]

((Off topic: Sorry for the way late response time. Mind got scattered with Spring Testing))

[Arantor]

Some text with a caption (hover on me!)

Code Select Expand

[acronym=Caption goes here]Some text with a caption (hover on me!)[/acronym]

After that, it's just a case of styling the acronym element in CSS to give it an underline and change the cursor if you like.