Jump to content

Using Style Tags (CSS) In Posts
   (1 review)

c.widow
  • As the title suggests I am going to show you two ways to allow style (<style></style>) tags (CSS) in posts on your board!

    Software: MyBB

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>

 

Edited by isoldehn
Added two options.





User Feedback

Create an account or sign in to leave a review

You need to be a member in order to leave a review

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sammiie

  

informative!

Share this review


Link to review

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.