Help <style> Coding?

[Javax]

Hi there.

I was wondering if there's a way to input <style> coding into my posts. There's a specific HP Bar generator that I've been wanting to include in my RP posts, but I haven't been able to successfully make it work. Is there a way to do so on RpN?

This is the website I'm using: HP Bar Generator

The <style> code follows:
<style>
@import url(http://fonts.googleapis.com/css?family=Russo+One);
#roxiiwrap {
font-family: "Barlow", sans-serif;
font-weight: 700;
color: #fff;
font-size: 12px;
padding: 10px;
}
#roxiibar {
height: 20px;
width: 250px;
overflow: hidden;
display: inline-block;
vertical-align: middle;
margin: 5px;
text-align: left;
background-color: rgba(255,255,255,0.25);
border: 2px solid #333;
border-radius: 15px;
box-shadow: 1px 1px 2px #333;
}
#roxii{

background: #a90329;
background: -moz-linear-gradient(left, #a90329 0%, #8f0222 44%, #6d0019 100%);
background: -webkit-linear-gradient(left, #a90329 0%,#8f0222 44%,#6d0019 100%);
background: linear-gradient(to right, #a90329 0%,#8f0222 44%,#6d0019 100%);
background: #6d0019;
background: -moz-linear-gradient(left, #6d0019 0%, #8f0222 56%, #a90329 100%);
background: -webkit-linear-gradient(left, #6d0019 0%,#8f0222 56%,#a90329 100%);
background: linear-gradient(to right, #6d0019 0%,#8f0222 56%,#a90329 100%);
filter: progidXImageTransform.Microsoft.gradient( startColorstr='#6d0019', endColorstr='#a90329',GradientType=1 );

display:inline-block;
height: 100%;
vertical-align: middle;
line-height: 20px;
border-right: 1px solid #333;
box-shadow: 1px 1px 2px #333;
text-align:left;
width: {text: roxii bar}%;
}
</style>
<div id="roxiiwrap">
<div id="roxiibar">
<div id="roxii">&nbsp;&nbsp;Roxii&nbsp;&nbsp;</div>
</div>
</div>
<!-- Thanks for using lizzledpink's HP bar generator!
HP Bar Generator -->

Any help is greatly appreciated! ^^

 

[Fable]

You'd have to find a way to basically convert it into BBCode. I actually made something like this a while back, not perfect, but it's the same thing.

.

Health

[div=overflow:hidden;position:relative;][div=float:left;width:300px;pointer-events:none;]
[div=margin-right:10px;][div=width: 100%;
				background-color: #e0e0e0;
				padding: 5px;
				border-radius: 3px;
				box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);].[/div][/div]
[div=position:absolute;display: block;top:22px;left:2px;
				height: 22px;
				background-color: #659cef;
				border-radius: 3px;
				padding:2px;]Health[/div][div=clear:both;][/div][/div][/div]

You can also look into Help - Progress Bar color?

 

[Javax]

You'd have to find a way to basically convert it into BBCode. I actually made something like this a while back, not perfect, but it's the same thing.

.

Health

[div=overflow:hidden;position:relative;][div=float:left;width:300px;pointer-events:none;]
[div=margin-right:10px;][div=width: 100%;
                background-color: #e0e0e0;
                padding: 5px;
                border-radius: 3px;
                box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);].[/div][/div]
[div=position:absolute;display: block;top:22px;left:2px;
                height: 22px;
                background-color: #659cef;
                border-radius: 3px;
                padding:2px;]Health[/div][div=clear:both;][/div][/div][/div]

You can also look into Help - Progress Bar color?

Oh, thank you. ^^

 

[Fable]

Oh, thank you. ^^

Yup, feel free to toy with it, it's pretty rough around the edges. >_>;;;