December 10, 2017, 11:37:52 PM

Author Topic: Use CSS in your BBC  (Read 7152 times)

Description:

Offline Cap'n Coconuts

  • Boo.
  • Reactor Operator
  • *
  • Posts: 2072
    • Westboro Watch
Use CSS in your BBC
« on: August 27, 2011, 09:37:32 AM »


Ladies and gentlemen, I have installed a mod that allows you to use CSS in your BBcodes. Most tags can now be given styles; for example:

[table][tr]
[td colspan=2 style="background-color:#333333;"]Hello, world![/td]
[/tr]
[tr]
[td style="background-color:#220022;"]Test[/td][td style="background-color:#111111;"]Table[/td]
[/tr][/table]

Becomes:

Hello, world!
TestTable

Also, table colspan/rowspan is now available, as well as div and span bbcodes. Feel free to use all of this, but please don't abuse it to the extreme or annoy people with it.

You may use inline style attributes (style="") in:
* hr
* img (also comes with rotateangle="degrees", rotatebgcolor="color", and flip="horizontal|vertical")
* list
* li
* table (also comes with border="borderwidth" attribute)
* tr
* td (also comes with colspan="" and rowspan="")
* div
* span

Classes can only be used in div and span for some reason. They're used by adding the class="CSS class" attribute. Added classes are:
* styletest: a class only added for testing purposes; not particularly useful
* upsidedown: Makes whatever's in the tag upside down.

EDIT: On another note, I uploaded a few fonts to the site's files through FTP. If anyone wants a font uploaded to the site so that at least all viewers with Windows machines can view it, give me a link to it and I'll set it up.

The following fonts have been added, and can be used either through CSS or the font tag (probably case-sensitive):
* Chiller
* JennaSue
* OldLondon
* SilkscreenBold
* SuperMarioBros
* Wizardspeak
« Last Edit: February 27, 2013, 07:10:56 PM by Cap'n Coconuts »



Offline Keiang

  • Homeless Magical Asshat
  • Nuclear Waste
  • *
  • Posts: 308
Re: Use CSS in your BBC
« Reply #1 on: August 27, 2011, 01:20:16 PM »
Sweet. Now I can annoy people make intellegent, well thought out posts in all sorts of new ways.

Offline Cap'n Coconuts

  • Boo.
  • Reactor Operator
  • *
  • Posts: 2072
    • Westboro Watch
Re: Use CSS in your BBC
« Reply #2 on: August 28, 2011, 10:19:13 AM »
I wouldn't have known such a mod existed if I wasn't looking for something to fix the rather lacking table features. Tables in SMF don't have column or row span, and the Tabular mod didn't work with SMF 2.0.

The CSS mod came with table column/row span, and because CSS's purpose is just making things look fancy, it doesn't pose a potential security problem like giving full HTML or JavaScript access would. So I figured "why not" and installed it anyway.

EDIT: However, it is still possible to do some irritating things with CSS, like position a colored box right over someone else's post. I guess it's time to edit the guidelines...
« Last Edit: August 28, 2011, 05:13:32 PM by Cap'n Coconuts »

Vic

  • Guest
Re: Use CSS in your BBC
« Reply #3 on: August 29, 2011, 12:54:43 AM »
This'd be nice if I ever gave enough shits to learn CSS. Oh well.

Offline Hopalongtom

  • Notable Intern
  • *
  • Posts: 82
Re: Use CSS in your BBC
« Reply #4 on: August 29, 2011, 03:20:55 AM »
Aww I thought you were talking about a web feed from the BBC.....


Mushroom Kingdom Fusion Skinmods, for those of you who think the game still doesn't have enough variety! ;)

Offline Cap'n Coconuts

  • Boo.
  • Reactor Operator
  • *
  • Posts: 2072
    • Westboro Watch
Re: Use CSS in your BBC
« Reply #5 on: August 30, 2011, 02:02:07 PM »
That's RSS, not CSS.

Also, I don't understand how that would be of use.

EDIT: Also, does anyone have any ideas for classes? You can use classes in your tags as well as inline styles.

Oh, and I should clarify which tags can use styles. [hr], [img], [list], [li], [table], [tr], and [td] can use styles, as well as the [div] and [span] tags that came with the mod.
« Last Edit: August 30, 2011, 02:19:34 PM by Cap'n Coconuts »

Offline RisingManes

  • (18) Atom
  • *
  • Posts: 910
Re: Use CSS in your BBC
« Reply #6 on: September 03, 2011, 06:56:43 AM »
When I read this post, all I could think of is "WOOOOOOO! CSS practice!" But I don't know nearly enough about CSS to do anything worthwhile...

It'd be great if we had a dummy tag made specifically to assign CSS to text. It'd go FANTASTICALLY on my adventures (should I choose to continue hosting them here).

Offline Hopalongtom

  • Notable Intern
  • *
  • Posts: 82
Re: Use CSS in your BBC
« Reply #7 on: September 03, 2011, 07:18:36 AM »
The button for url tags could be a little more fancy... all it does is just add them around what you typed... which to be honest automaticly happens when posting a link anyway?

Can we have something like the old system where it came up with a popup box where you could paste the link in then asking you if you want to wrap text around it?


Mushroom Kingdom Fusion Skinmods, for those of you who think the game still doesn't have enough variety! ;)

Offline Cap'n Coconuts

  • Boo.
  • Reactor Operator
  • *
  • Posts: 2072
    • Westboro Watch
Re: Use CSS in your BBC
« Reply #8 on: September 03, 2011, 10:54:04 AM »
@Risingmanes: That's what [div] and [span] are for.

[span style="font-variant:small-caps;font-size:200%;"]Blahblahblah[/span]

Blahblahblah

@Hopalongtom: Try [url=http://www.something.com/]link text[/url].

WOOO

Offline Hopalongtom

  • Notable Intern
  • *
  • Posts: 82
Re: Use CSS in your BBC
« Reply #9 on: September 03, 2011, 12:21:39 PM »
Thanks for that, I'll copy and paste that into a notepad... still the old system was rarther convenient.


Mushroom Kingdom Fusion Skinmods, for those of you who think the game still doesn't have enough variety! ;)

Offline RisingManes

  • (18) Atom
  • *
  • Posts: 910
Re: Use CSS in your BBC
« Reply #10 on: September 05, 2011, 05:28:22 PM »
Ah. Thanks, Cook. Though a CSS guide would be incredibly handy for the use of this new feature.

I have plans for it in Troper Tales. :3

Offline Cap'n Coconuts

  • Boo.
  • Reactor Operator
  • *
  • Posts: 2072
    • Westboro Watch
Re: Use CSS in your BBC
« Reply #11 on: September 06, 2011, 04:43:14 AM »
Go here and here for what you need.

Oh, and I found out that classes only work in the div and span BBCodes for some reason. if you want to apply styles to tables, you have to put it in a div tag. So [span class="styletest"]TEST[/span] becomesTEST. This example only works on the default theme right now.
« Last Edit: September 06, 2011, 04:44:49 AM by Cap'n Coconuts »

Offline RisingManes

  • (18) Atom
  • *
  • Posts: 910
Re: Use CSS in your BBC
« Reply #12 on: September 06, 2011, 11:15:30 AM »
I'll use this post as my personal sandbox. As I said, I have my own plans for it in Troper Tales.

Testing, one, two, three.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel nunc in justo imperdiet lacinia vel quis sapien. Pellentesque suscipit vestibulum lectus sed euismod. Fusce et nibh velit. Nunc venenatis, tortor non ultrices sollicitudin, nisl justo elementum mauris, in lacinia ligula leo quis risus. Praesent ultricies diam ut ipsum placerat tincidunt. Aliquam commodo bibendum mi eget vulputate. Integer nibh nisi, suscipit imperdiet euismod eu, blandit at nibh. Vivamus ultrices nunc at libero pharetra mollis. Curabitur vitae auctor dolor. Sed dolor nisi, gravida posuere elementum eget, placerat at nisl. Fusce felis tellus, aliquet ultrices faucibus vitae, porta luctus odio. Integer eget dui nisl. Morbi vel molestie neque.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis metus ac dui volutpat at scelerisque dolor dapibus. Nulla lobortis, sapien nec viverra vehicula, ipsum lectus egestas eros, nec mattis urna risus a arcu. Duis aliquet, ligula ultrices tincidunt imperdiet, risus eros dapibus diam, a fringilla augue augue ac nibh. Proin vitae congue enim. In et justo accumsan nibh euismod tristique. Aliquam at nibh ipsum, nec gravida metus. Sed at sem quam, nec vehicula neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
« Last Edit: September 06, 2011, 11:44:30 PM by RisingManes »

Offline Cap'n Coconuts

  • Boo.
  • Reactor Operator
  • *
  • Posts: 2072
    • Westboro Watch
Re: Use CSS in your BBC
« Reply #13 on: September 22, 2011, 02:07:39 PM »
I am using a font that may not be installed on your system. I uploaded it via FTP and have a @font-face rule for it in the themes' CSS files. Assuming you know the name of the font family, you can use that font and expect most people to see it either by using the style attribute or even the typical font BBCode. Right now, I'm using SuperMarioBros.

Also, classes. Give me some ideas for some, please.

Offline RisingManes

  • (18) Atom
  • *
  • Posts: 910
Re: Use CSS in your BBC
« Reply #14 on: October 02, 2011, 09:37:25 PM »
I'd use one for darker font colors. I know a few who uses the forum's default colors, which are made for light skins, and hurts my eyes (in the MKFusion Black theme).

 

anything