ROUX
Hand of the King
Hello! I'm having trouble with the source button and posting content with html/css codes.
I copy/pasted the code I'd create on another site into the text box AFTER pressing source. Then, I pressed source again, and my Character Sheet showed up perfectly. However, when I pose the content or go to preview it, it fails to reproduce the product of the code!
Here is the code I used:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Cormorant Unicase">
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Cinzel">
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Italianno">
<style>
ul.tab {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 5px solid Black;
background-color: Black;
}
ul.tab li {float: center;}
ul.tab li a {
display: inline-block;
color: White;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.5s;
font-size: 17px;
}
ul.tab li a:hover {background-color: cadetblue;}
ul.tab li a:focus, .active {background-color: cadetblue;}
.tabcontent {
display: none;
padding: 6px 12px;
border: 5px solid Black;
border-top: none;
Background-color: Cadetblue;
}
.tabcontent {
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s; /* Fading effect takes 1 second */
}
@-webkit-keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
color: White;
}
h1 {
font-family: 'Cormorant Unicase', serif;
font-size: 48px;
}
h2 {
font-family: 'Italianno', serif;
font-size: 48px;
}
h3 {
font-family: 'Cinzel', serif;
font-size: 48px;
}
div.container {
width: 100%;
border: 5px solid Azure;
Background-color: Azure;
padding:15px;
box-shadow: 5px 10px 15px 2px black;
}
header, footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}
nav {
float: left;
max-width: 160px;
margin-left: 15px;
padding: 1em;
border-left: 5px dotted black
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 150px;
border-left: 5px dotted black;
padding: 1em;
overflow: hidden;
Background-color: Azure
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Lucifer Camille</h1>
</header>
<nav>
<ul>
<li><a href="https://www.rpnation.com/applications/core/interface/imageproxy/imageproxy.php?img=http://3.bp.blogspot.com/-IQEbIXzz_QY/Tkls6Oj7XCI/AAAAAAAAFHs/fQ_g1nA9h7o/s1600/anthony+g_0024.jpg&key=107245eb2a6f8cc2e86b3dea6dced14ac55e02b7f576e2da79540ae3ee7d1511">Lucifer 1</a></li>
<li><a href="https://www.rpnation.com/applications/core/interface/imageproxy/imageproxy.php?img=https://s-media-cache-ak0.pinimg.com/736x/f7/a2/0a/f7a20ac073b038369adbe8f75147e5af.jpg&key=29b96d280adbb19684779ef91db968ede822c44f4d38dd745f7a4014c4eb6097">Lucifer 2</a></li>
<li><a href="https://www.rpnation.com/applications/core/interface/imageproxy/imageproxy.php?img=http://celebrityimages.org/images/7134602/7134602_1.jpeg&key=f11b260413fb89ac2b10f5df3a78659706e24ba97cbd26661e0582db06f5591c">Lucifer 3</a></li>
</ul>
</nav>
<article>
<h2> "Hello, darlings." </h2>
<ul class="tab">
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Basic')">Basic</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Personality')">Personality</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Bio')">Bio</a></li>
</ul>
<div id="Basic" class="tabcontent">
<h3>Basic Info</h3>
<p style="color:Azure;font-family:Courier;">
...
</p>
<span onclick="this.parentElement.style.display='none'">||Close||</span>
</div>
<div id="Personality" class="tabcontent">
<h3>Personality</h3>
<p style="color:Azure;font-family:Courier;">Surprisingly enough - Lucifer, in personality, might actually live up to his name. The man is an enigma, and most certainly unhinged, though an impenetrable shield of calm and collected tends to conceal his dark thoughts and twisted mind. He knows good and well what he needs to be successful in this world, and has no problems weaving his way there by any means necessary. Manipulation, deception, cunning and chilling lack of remorse do characterize him, and such indisputable facts aren’t likely to change. If his heart is cold, it’s because his mind has leeched it’s warmth with the horrors it witnessed, instead channeling what was once the beauty of a child’s innocence into a deadly weapon aimed to burn.
Despite this, he won’t attack if unprovoked, that would be illogical, and he does stand for logic. His first impressions are always portraying the intelligence, determination, and genteel he appears to retain. This isn’t to say that these qualities are false, however, his mood can change in seconds depending on what situation is brought before him. His face, however, will not change, and it is not odd for him to be able to deploy such harsh cutting phrases and words before the one who’d provoked him could even have time to realize they’d crossed a line.
The man is always watching those around him, what they say, do, and display that they feel. He isn’t a mind reader, but his appreciation for secrets and the power he may be able to wield with such is always a worthy incentive to get close to others. Friendships are simply useful to him in the long term for keeping tabs, and respecting the authority he comes across serves to benefit him as well, though neither hold his guarantee to doing more than appearing genuine.
Romance, in his opinion, is only a means to an end. He finds it amazingly easy to elicit information from those who believe he loves them, or cares about them. He never does. Love is pointless to the man, too much risk with too little reward, and there has only been one instance where he’s even bothered with the physicality of such. In Lucifer’s mind, there is little chance anyway for someone to be as twisted as him inside if he ever did try to truly love. Until then, however...those longing gazes from others would be returned with the usual smug smile on his face, a look that as always, hides the madness that lies beneath the surface.</p>
<span onclick="this.parentElement.style.display='none'">||Close||</span>
</div>
<div id="Bio" class="tabcontent">
<h3>Biography/History</h3>
<p style="color:Azure;font-family:Courier;">He grew up on the upper east side of New York City, bathed in his parent's wealth - however that doesn't make him any less hardworking than others oh no, that just wouldn't do. Discipline was needed, and he forced himself to learn this when he dropped the name he'd been given and more or less worked to create his own identity from scratch, Attending college early and finishing to then attend Law School at Columbia based on merit alone, rather than his parent's contacts. Now he works as a junior partner at a Law firm, one he fully intends to gain control of...in time. So far, he's been content with his little apartment, investing his money into his other projects.</p>
<span onclick="this.parentElement.style.display='none'">||Close||</span>
</div>
</article>
<footer> - R o u x - </footer>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent.style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks.className = tablinks.className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
However, in this link in the most recent post, you can see how it doesn't show up when posted:
When the content is supposed to be showing as this:
Any help would be much appreciated
I copy/pasted the code I'd create on another site into the text box AFTER pressing source. Then, I pressed source again, and my Character Sheet showed up perfectly. However, when I pose the content or go to preview it, it fails to reproduce the product of the code!
Here is the code I used:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Cormorant Unicase">
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Cinzel">
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Italianno">
<style>
ul.tab {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 5px solid Black;
background-color: Black;
}
ul.tab li {float: center;}
ul.tab li a {
display: inline-block;
color: White;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.5s;
font-size: 17px;
}
ul.tab li a:hover {background-color: cadetblue;}
ul.tab li a:focus, .active {background-color: cadetblue;}
.tabcontent {
display: none;
padding: 6px 12px;
border: 5px solid Black;
border-top: none;
Background-color: Cadetblue;
}
.tabcontent {
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s; /* Fading effect takes 1 second */
}
@-webkit-keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a {
color: White;
}
h1 {
font-family: 'Cormorant Unicase', serif;
font-size: 48px;
}
h2 {
font-family: 'Italianno', serif;
font-size: 48px;
}
h3 {
font-family: 'Cinzel', serif;
font-size: 48px;
}
div.container {
width: 100%;
border: 5px solid Azure;
Background-color: Azure;
padding:15px;
box-shadow: 5px 10px 15px 2px black;
}
header, footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}
nav {
float: left;
max-width: 160px;
margin-left: 15px;
padding: 1em;
border-left: 5px dotted black
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul a {
text-decoration: none;
}
article {
margin-left: 150px;
border-left: 5px dotted black;
padding: 1em;
overflow: hidden;
Background-color: Azure
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Lucifer Camille</h1>
</header>
<nav>
<ul>
<li><a href="https://www.rpnation.com/applications/core/interface/imageproxy/imageproxy.php?img=http://3.bp.blogspot.com/-IQEbIXzz_QY/Tkls6Oj7XCI/AAAAAAAAFHs/fQ_g1nA9h7o/s1600/anthony+g_0024.jpg&key=107245eb2a6f8cc2e86b3dea6dced14ac55e02b7f576e2da79540ae3ee7d1511">Lucifer 1</a></li>
<li><a href="https://www.rpnation.com/applications/core/interface/imageproxy/imageproxy.php?img=https://s-media-cache-ak0.pinimg.com/736x/f7/a2/0a/f7a20ac073b038369adbe8f75147e5af.jpg&key=29b96d280adbb19684779ef91db968ede822c44f4d38dd745f7a4014c4eb6097">Lucifer 2</a></li>
<li><a href="https://www.rpnation.com/applications/core/interface/imageproxy/imageproxy.php?img=http://celebrityimages.org/images/7134602/7134602_1.jpeg&key=f11b260413fb89ac2b10f5df3a78659706e24ba97cbd26661e0582db06f5591c">Lucifer 3</a></li>
</ul>
</nav>
<article>
<h2> "Hello, darlings." </h2>
<ul class="tab">
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Basic')">Basic</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Personality')">Personality</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Bio')">Bio</a></li>
</ul>
<div id="Basic" class="tabcontent">
<h3>Basic Info</h3>
<p style="color:Azure;font-family:Courier;">
...
</p>
<span onclick="this.parentElement.style.display='none'">||Close||</span>
</div>
<div id="Personality" class="tabcontent">
<h3>Personality</h3>
<p style="color:Azure;font-family:Courier;">Surprisingly enough - Lucifer, in personality, might actually live up to his name. The man is an enigma, and most certainly unhinged, though an impenetrable shield of calm and collected tends to conceal his dark thoughts and twisted mind. He knows good and well what he needs to be successful in this world, and has no problems weaving his way there by any means necessary. Manipulation, deception, cunning and chilling lack of remorse do characterize him, and such indisputable facts aren’t likely to change. If his heart is cold, it’s because his mind has leeched it’s warmth with the horrors it witnessed, instead channeling what was once the beauty of a child’s innocence into a deadly weapon aimed to burn.
Despite this, he won’t attack if unprovoked, that would be illogical, and he does stand for logic. His first impressions are always portraying the intelligence, determination, and genteel he appears to retain. This isn’t to say that these qualities are false, however, his mood can change in seconds depending on what situation is brought before him. His face, however, will not change, and it is not odd for him to be able to deploy such harsh cutting phrases and words before the one who’d provoked him could even have time to realize they’d crossed a line.
The man is always watching those around him, what they say, do, and display that they feel. He isn’t a mind reader, but his appreciation for secrets and the power he may be able to wield with such is always a worthy incentive to get close to others. Friendships are simply useful to him in the long term for keeping tabs, and respecting the authority he comes across serves to benefit him as well, though neither hold his guarantee to doing more than appearing genuine.
Romance, in his opinion, is only a means to an end. He finds it amazingly easy to elicit information from those who believe he loves them, or cares about them. He never does. Love is pointless to the man, too much risk with too little reward, and there has only been one instance where he’s even bothered with the physicality of such. In Lucifer’s mind, there is little chance anyway for someone to be as twisted as him inside if he ever did try to truly love. Until then, however...those longing gazes from others would be returned with the usual smug smile on his face, a look that as always, hides the madness that lies beneath the surface.</p>
<span onclick="this.parentElement.style.display='none'">||Close||</span>
</div>
<div id="Bio" class="tabcontent">
<h3>Biography/History</h3>
<p style="color:Azure;font-family:Courier;">He grew up on the upper east side of New York City, bathed in his parent's wealth - however that doesn't make him any less hardworking than others oh no, that just wouldn't do. Discipline was needed, and he forced himself to learn this when he dropped the name he'd been given and more or less worked to create his own identity from scratch, Attending college early and finishing to then attend Law School at Columbia based on merit alone, rather than his parent's contacts. Now he works as a junior partner at a Law firm, one he fully intends to gain control of...in time. So far, he's been content with his little apartment, investing his money into his other projects.</p>
<span onclick="this.parentElement.style.display='none'">||Close||</span>
</div>
</article>
<footer> - R o u x - </footer>
</div>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent.style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks.className = tablinks.className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>
However, in this link in the most recent post, you can see how it doesn't show up when posted:
When the content is supposed to be showing as this:
Any help would be much appreciated
Last edited by a moderator:
