Using Style Tags (CSS) In Posts

   (1 review)

MyBB 1.8 Using CSS In Posts (<style> Tag)

Mybb does not allow the use of <style> tags in posts, simply because they deem it 'dangerous' which can be true but for us forum role players... style tags can mean life or death when it comes to posting tables! I have here a solution for you! Actually two solutions.

As a kind reminder:

- Before ever touching any core files you should back up your site properly, or keep a copy of the original file you are editing so that you can paste the original code back in easily if something goes wrong.

- This tutorial was created using MyBB 1.8.x software.

------------------------------------------------------

Tutorial Created By: Isoldehn
Tutorial Permissions: Please do not re-post this tutorial else where, instead link someone to this thread.
Tutorial Needs: FTP Access & Knowledge On Editing Core Files AND/OR Ability To Copy & Paste

MyCode Style Tag

or

Core File Edit For HTML Style Tag

MyCode Style Tag

Step 1
- Go to: Admin CP --> Configuration Tab --> MyCode (found in left side navigation) --> Add New MyCode

Step 2
- Create a title and short description, I generally title it "Style" and add the short description as "MyCode style tags to contain CSS."

Step 3
- Add in the regular expression:

\[style\](.*?)\[/style\]

Step 4
- Add in the replacement:

<style type="text/css">$1</style>

Step 5
- Be sure the MyCode is enabled (check yes), parse order doesn't really matter.

------

Well how do I use it now that I've installed it?
You use it just like a style tag but with brackets instead of greater than or less than signs and you need to make sure all line breaks and paragraph breaks are removed from the css.

- This will work:

<div class="bee">Bee class here!</div><div class="boop">Boop class here!</div>
[style].bee { background: pink; padding: 5px; } .boop { background: blue; padding: 15px; }[/style]

- This will not work:

[style]
.bee { 
	background: pink; 
	padding: 5px; 
} 
.boop { 
	background: blue; 
	padding: 15px; 
}
[/style]

Core File Edit For HTML Style Tag

Step 1:
- Open up your FTP
- Navigate to inc/class_parser.php

Step 2:
- Open the file, take a deep breath and look at none of it (unless coding is beautiful to you, in that case stare at it hard)
- Find and remove |style from this bit of code:

$message = preg_replace('#<(/?)(base|meta|script|style)([^>]*)>#i', '&lt;$1$2$3&gt;', $message);

Step 3:
- Save!! 

Step 4:
- Go make a test thread and use the style tag, make sure it works. Remember you will need to remove all line breaks/paragraph breaks from the CSS!
- This will work:

<div class="bee">Bee class here!</div><div class="boop">Boop class here!</div>
<style>.bee { background: pink; padding: 5px; } .boop { background: blue; padding: 15px; }</style>

- This will not work:

<div class="bee">Bee class here!</div><div class="boop">Boop class here!</div>
<style>
.bee { 
  background: pink; 
  padding: 5px; 
} 
.boop { 
  background: blue; 
  padding: 15px; 
}
</style>