Printable Version of Topic
Click here to view this topic in its original format
Jcink.com Forums > General Support > HTML and CSS not working in Signature


Posted by: omfwog Jul 11 2018, 11:14 AM
Alright, so... Everything is turned on correctly in both boards. I posted this code in a forum post and it worked perfectly fine, but for whatever reason.. when I post it in signature, everything falls apart. I have tried it with and without the dohtml tags as well. Is there something I am missing?

CODE

[dohtml]
<link href="https://fonts.googleapis.com/css?family=Montserrat|Wendy+One" rel="stylesheet">
<style type="text/css">
body {
--back:#f5f5f5; /* background */
--border:#e3e3e3; /* border */
--main:#fff; /* title/description boxes bg */
--side:#fafafa; /* sidebag bg */
--tabfont:#E4E5F8; /* unselected tab font colour */
--tabactive:#eeeeef; /* selected tab bg */
--tabafont:#313537; /*selected tab font colour */
--font:#212121; /* main font colour */
 
--kas:#191004;
--sota:#a6cabe;
--rhys:#cccccc;
--xyis:#896b49;
--cassy:#fa3635;
--ian:#017ca7;
--eeva:#189B72;
--kio:#bd56a6;
--mana:#003cab;
--sib:#ff6600;
--kyte:#f600ff;
--rinna:#5d4dd4;
--milo:#28f95d;
--hai:#778bb1;
 
--hbg:url('http://www.rp4me.net/valsig/bg.png');

}

.skewwrap{
width:518px;
padding:10px;
background:url('http://www.rp4me.net/valsig/intersection.png');
margin:5px auto;
border:2px solid var(--border);
}
.skew{
position:relative;
width:515px;
height:240px;
font-family:'Wendy One', sans-serif;
font-size:16px;
color:var(--font);
background:var(--back);
border:1px solid var(--border);
line-height:1.3;
}
.skew label{
display:inline-block;
font-size:12px;
color:var(--tabfont);
padding:0 10px;
width:75px;
height:20px;
line-height:20px;
text-transform:uppercase;
position:relative;
border-left:5px solid transparent;
}
.skewleft{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background:url('http://www.rp4me.net/valsig/congruent_outline.png');
border-right:1px solid var(--border);
}
.skewtabs{
width:600px;
}
.skewtabs [type=radio]{
display:none;
}
.skewstuff{
z-index:1;
width:515px;
transition:.5s;
opacity:0;
position:absolute;
top:70px;
left:0px;
}

.skew *::-webkit-scrollbar{width:5px;background:transparent;}
.skew *::-webkit-scrollbar-track{background:transparent;}
.skew [type=radio]:checked + label{
background:var(--tabactive);
color:var(--tabafont);
}
.skew [type=radio]:checked + label + .skewstuff{opacity:1;z-index:2;}
.skew h1, .skew h2, .skew h3{margin: 0;}
.skew h1{font-size:30px; line-height: 1;}
.skew h2{font-family: "Montserrat", sans-serif; font-size: 12px; font-weight: normal;}
.skew h3{text-transform: uppercase; padding-bottom: 10px;}
.skew p{font-family: "Montserrat", sans-serif; font-size: 12px; font-weight: normal;}

.deva{
background:var(--main);
height: 80px;
padding: 15px;
margin-top: 0px;
box-shadow:0 0 10px rgba(0,0,0,.05);
}
.deva div{
 width: 100px;
 height: 5px;
 margin: 5px 0px;
}
.deva img:first-of-type{
 width: 100px;
 height: 100px;
 z-index: 8;
 position: absolute;
 top: 4px;
 right: 10px;
 border: 1px solid var(--border);
}

.lili {
padding: 13px;
text-align: center;
}
.lili a{
padding: 0 7px;
margin-top: 5px;
display:inline-block;
font-size:15px;
color:var(--tabfont);
padding:0 10px;
width:75px;
height:20px;
line-height:20px;
background: var(--main);
text-transform:uppercase;
text-decoration: none;
font-weight:bold;
text-align: center;
border:1px solid var(--border);
}

.lili a:hover{
 background: var(--side);
}
.scrolly{
width:515px;
height:500px;
position: relative;
}

[type=radio]:nth-of-type(1):checked + label{border-color:var(--kas);}
.kas .deva div{background:var(--kas);}
.kas *::-webkit-scrollbar-thumb{background:var(--kas);}
.kas h3{color:var(--kas);}
.kas .lili a{color: var(--kas)}
.kas .deva img{border: 1px solid var(--kas);}

[type=radio]:nth-of-type(2):checked + label{border-color:var(--sota);}
.sota .deva div{background:var(--sota);}
.sota *::-webkit-scrollbar-thumb{background:var(--sota);}
.sota h3{color:var(--sota);}
.sota .lili a{color: var(--sota)}
.sota .deva img{border: 1px solid var(--sota);}

.skew [type=radio]:nth-of-type(3):checked + label{border-color:var(--rhys);}
.rhys .deva div{background:var(--rhys);}
.rhys *::-webkit-scrollbar-thumb{background:var(--rhys);}
.rhys h3{color:var(--rhys);}
.rhys .lili a{color: var(--rhys)}
.rhys .deva img{border: 1px solid var(--rhys);}

.skew [type=radio]:nth-of-type(4):checked + label{border-color:var(--xyis);}
.xyis .deva div{background:var(--xyis);}
.xyis *::-webkit-scrollbar-thumb{background:var(--xyis);}
.xyis h3{color:var(--xyis);}
.xyis .lili a{color: var(--xyis)}
.xyis .deva img{border: 1px solid var(--xyis);}

.skew [type=radio]:nth-of-type(5):checked + label{border-color:var(--cassy);}
.cassy .deva div{background:var(--cassy);}
.cassy *::-webkit-scrollbar-thumb{background:var(--cassy);}
.cassy h1{font-size: 25px;}
.cassy h3{color:var(--cassy);}
.cassy .lili a{color: var(--cassy)}
.cassy .deva img{border: 1px solid var(--cassy);}

.skew [type=radio]:nth-of-type(6):checked + label{border-left:5px solid var(--ian);}
.ian .deva div{background:var(--ian);}
.ian *::-webkit-scrollbar-thumb{background:var(--ian);}
.ian h3{color:var(--ian);}
.ian .lili a{color: var(--ian)}
.ian .deva img{border: 1px solid var(--ian);}

.skew [type=radio]:nth-of-type(7):checked + label{border-left:5px solid var(--eeva);}
.eeva .deva div{background:var(--eeva);}
.eeva *::-webkit-scrollbar-thumb{background:var(--eeva);}
.eeva h3{color:var(--eeva);}
.eeva .lili a{color: var(--eeva)}
.eeva .deva img{border: 1px solid var(--eeva);}

.skew [type=radio]:nth-of-type(8):checked + label{border-left:5px solid var(--milo);}
.milo .deva div{background:var(--milo);}
.milo *::-webkit-scrollbar-thumb{background:var(--milo);}
.milo h3{color:var(--milo);}
.milo .lili a{color: var(--milo)}
.milo .deva img{border: 1px solid var(--milo);}

.skew [type=radio]:nth-of-type(9):checked + label{border-left:5px solid var(--kio);}
.kio .deva div{background:var(--kio);}
.kio *::-webkit-scrollbar-thumb{background:var(--kio);}
.kio h3{color:var(--kio);}
.kio .lili a{color: var(--kio)}
.kio .deva img{border: 1px solid var(--kio);}

.skew [type=radio]:nth-of-type(10):checked + label{border-left:5px solid var(--kyte);}
.kyte .deva div{background:var(--kyte);}
.kyte *::-webkit-scrollbar-thumb{background:var(--kyte);}
.kyte h3{color:var(--kyte);}
.kyte .lili a{color: var(--kas)}
.kyte .deva img{border: 1px solid var(--kyte);}

.skew [type=radio]:nth-of-type(11):checked + label{border-left:5px solid var(--mana);}
.mana .deva div{background:var(--mana);}
.mana *::-webkit-scrollbar-thumb{background:var(--mana);}
.mana h3{color:var(--mana);}
.mana .lili a{color: var(--mana)}
.mana .deva img{border: 1px solid var(--mana);}

.skew [type=radio]:nth-of-type(12):checked + label{border-left:5px solid var(--sib);}
.sib .deva div{background:var(--sib);}
.sib *::-webkit-scrollbar-thumb{background:var(--sib);}
.sib h3{color:var(--sib);}
.sib .lili a{color: var(--sib)}
.sib .deva img{border: 1px solid var(--sib);}

.skew [type=radio]:nth-of-type(13):checked + label{border-left:5px solid var(--rinna);}
.rinna .deva div{background:var(--rinna);}
.rinna *::-webkit-scrollbar-thumb{background:var(--rinna);}
.rinna h3{color:var(--rinna);}
.rinna .lili a{color: var(--rinna)}
.rinna .deva img{border: 1px solid var(--rinna);}

.skew [type=radio]:nth-of-type(14):checked + label{border-left:5px solid var(--hai);}
.hai .deva div{background:var(--hai);}
.hai *::-webkit-scrollbar-thumb{background:var(--hai);}
.hai h3{color:var(--hai);}
.hai .lili a{color: var(--hai)}
.hai .deva img{border: 1px solid var(--hai);}

.skew [type=radio]:nth-of-type(15):checked + label{border-left:5px solid var(--hskew);}
.hskew .deva div{background:var(--kskew);}
.hskew .deva {background-image: var(--hbg); background-position: right;}
.hskew *::-webkit-scrollbar-thumb{background: var(--hbg);}
.hskew h3{color:var(--hskew);}
.hskew h2{font-size: 20px; color:#E4E5F8;}
.hskew .lili a{color:#333333}
</style>

<div class="skewwrap">
<div class="skew">
 <div class="skewtabs">
 <div class="skewleft">
 
 <input type="radio" id="tab-1" name="tab-group-1" checked>
 <label for="tab-1">K'rine</label>
 
 <div class="skewstuff kas">
 <div class="scrolly">
  <div class="deva">
  <img src="http://www.rp4me.net/valsig/pics/kas.png">
   <h1>K'rine of Ebony Rysth</h1>
  <div></div>
   <h2>Cinderfall Wingleader * Journeyman Harper * #191004</h2>
  </div>
 
  <div class="lili">
  <a href="https://valynor.jcink.net/index.php?showtopic=83&hl=">Profile</a> <a href="https://valynor.jcink.net/index.php?showtopic=84&hl=">Rysth</a>
  </div>
 
 </div>
 </div>
 
 <input type="radio" id="tab-2" name="tab-group-1">
 <label for="tab-2">Soteria</label>
 
 <div class="skewstuff sota">
 <div class="scrolly">
  <div class="deva">
  <img src="http://www.rp4me.net/valsig/pics/sota.png">
   <h1>Soteria of Peridot Myth</h1>
  <div></div>
   <h2>Journeyman Mind Healer * #a6cabe</h2>
  </div>
 
  <div class="lili">
  <a href="https://valynor.jcink.net/index.php?showtopic=264&hl=">profile</a> <a href="https://valynor.jcink.net/index.php?showtopic=254&hl=">Myth</a>
  </div>
 
 </div>
 </div>
 
 <input type="radio" id="tab-3" name="tab-group-1">
 <label for="tab-3">R'hys</label>
 
 <div class="skewstuff rhys">
 <div class="scrolly">
  <div class="deva">
  <img src="http://www.rp4me.net/valsig/pics/rhys.png">
   <h1>R'hys of Silver Felsinth</h1>
  <div></div>
   <h2>Candidate Master * Apprentice Leatherworker * #cccccc</h2>
  </div>
 
  <div class="lili">
  <a href="https://valynor.jcink.net/index.php?showtopic=261&hl=">profile</a> <a href="https://valynor.jcink.net/index.php?showtopic=257&hl=">Felsinth</a>
  </div>
 
 </div>
 </div>
 
 <input type="radio" id="tab-4" name="tab-group-1">
 <label for="tab-4">X'yis</label>
 
 <div class="skewstuff xyis">
 <div class="scrolly">
  <div class="deva">
  <img src="http://www.rp4me.net/valsig/pics/xyis.png">
   <h1>X'yis</h1>
  <div></div>
   <h2>Wingrider * Explorer * White Knight</h2>
  </div>
 
  <div class="lili">
  <a href="https://valynor.jcink.net/index.php?showtopic=263&hl=">profile</a> <a href="https://valynor.jcink.net/index.php?showtopic=255&hl=">Koeth</a>
  </div>
 </div>
 </div>
 
  <input type="radio" id="tab-5" name="tab-group-1">
 <label for="tab-5">Casaendria</label>
 
 <div class="skewstuff cassy">
 <div class="scrolly">
  <div class="deva">
  <img src="http://www.rp4me.net/valsig/pics/cassy.png">
   <h1>Cassy  of Vermilion Chimeth</h1>
  <div></div>
   <h2>Wingrider * Journeyman Runner * Stunt flyer</h2>
  </div>
 
  <div class="lili">
  <a href="https://valynor.jcink.net/index.php?showtopic=181&hl=">profile</a> <a href="https://valynor.jcink.net/index.php?showtopic=182&hl=">Chimeth</a>
  </div>
 </div>
 </div>
 
  <input type="radio" id="tab-6" name="tab-group-1">
 <label for="tab-6">I'an</label>
 
 <div class="skewstuff ian">
 <div class="scrolly">
  <div class="deva">
  <img src="http://www.rp4me.net/valsig/pics/ian.png">
   <h1>I'an of Blue Skadith</h1>
  <div></div>
   <h2>Wingrider * Weaponsmaster</h2>
  </div>
 
  <div class="lili">
  <a href="https://valynor.jcink.net/index.php?showtopic=262&hl=">profile</a> <a href="https://valynor.jcink.net/index.php?showtopic=256&hl=">Skadith</a>
  </div>
 </div>
 </div>
 
 
 <input type="radio" id="tab-7" name="tab-group-1">
 <label for="tab-7">Eeva</label>
 
 <div class="skewstuff eeva">
 <div class="scrolly">
  <div class="deva">
  <img src="http://www.rp4me.net/valsig/pics/eeva.png">
   <h1>Eeva of Green Narsith</h1>
  <div></div>
   <h2>Weyrling * First Blood to High Reaches Hold</h2>
  </div>
 
  <div class="lili">
  <a href="https://valynor.jcink.net/index.php?showtopic=147&hl=">profile</a> <a href="https://valynor.jcink.net/index.php?showtopic=171&hl=">Narsith</a>
  </div>
 
 </div>
 </div>    

  <input type="radio" id="tab-8" name="tab-group-1">
 <label for="tab-8">Mi'lo</label>
 
 <div class="skewstuff milo">
 <div class="scrolly">
  <div class="deva">
  <img src="http://www.rp4me.net/valsig/pics/milo.png">
   <h1>Mi'lo of Green Amrilyth</h1>
  <div></div>
   <h2>Wingrider * Clothing Designer</h2>
  </div>
 
  <div class="lili">
  <a href="https://valynor.jcink.net/index.php?showtopic=259&hl=">profile</a> <a href="https://valynor.jcink.net/index.php?showtopic=258&hl=">Amrilyth</a>
  </div>
 
 </div>
 </div>
 
 
 <input type="radio" id="tab-9" name="tab-group-1">
 <label for="tab-9">Kiosimi</label>
 
 <div class="skewstuff kio">
 <div class="scrolly">
  <div class="deva">
  <img src="http://www.rp4me.net/valsig/pics/kio.png">
   <h1>Kiosimi of Piebald Kiosk</h1>
  <div></div>
   <h2>Master Vintner * Genius * Eccentric</h2>
  </div>
 
  <div class="lili">
  <a href="https://valynor.jcink.net/index.php?showtopic=176&hl=">profile</a> <a href="https://valynor.jcink.net/index.php?showtopic=178&hl=">Kiosk</a>
  </div>
 </div>
 </div>
 
 <input type="radio" id="tab-10" name="tab-group-1">
 <label for="tab-10">Kyte</label>
 
 <div class="skewstuff kyte">
 <div class="scrolly">
  <div class="deva">
  <img src="http://www.rp4me.net/valsig/pics/kyte.png">
   <h1>Kyte</h1>
  <div></div>
   <h2>Firelizard Trainer * Stubborn * Blind</h2>
  </div>
 
  <div class="lili">
  <a href="https://valynor.jcink.net/index.php?showtopic=187&hl=">profile</a>
  </div>
 </div>
 </div>
 
 
 <input type="radio" id="tab-11" name="tab-group-1">
 <label for="tab-11">Mana</label>
 
 <div class="skewstuff mana">
 <div class="scrolly">
  <div class="deva">
  <img src="http://www.rp4me.net/valsig/pics/mana.png">
   <h1>Mana</h1>
  <div></div>
   <h2>Candidate * Journeyman Fisher</h2>
  </div>
 
  <div class="lili">
  <a href="https://valynor.jcink.net/index.php?showtopic=141&hl=">profile</a>
  </div>
 </div>
 </div>
 
 
 <input type="radio" id="tab-12" name="tab-group-1">
 <label for="tab-12">Sibyn</label>
 
 <div class="skewstuff sib">
 <div class="scrolly">
  <div class="deva">
  <img src="http://www.rp4me.net/valsig/pics/sib.png">
   <h1>Sibyn</h1>
  <div></div>
   <h2>Candidate * Secretive * Protective</h2>
  </div>
 
  <div class="lili">
  <a href="https://valynor.jcink.net/index.php?showtopic=96&hl=">profile</a>
  </div>
 </div>
 </div>
 
 
 
 
 <input type="radio" id="tab-13" name="tab-group-1">
 <label for="tab-13">Rinna</label>
 
 <div class="skewstuff rinna">
 <div class="scrolly">
  <div class="deva">
  <img src="http://www.rp4me.net/valsig/pics/rinna.png">
   <h1>Rinna</h1>
  <div></div>
   <h2>Candidate * Tenacious * Animated</h2>
  </div>
 
  <div class="lili">
  <a href="https://valynor.jcink.net/index.php?showtopic=313&hl=">profile</a>
  </div>
  </div>
 </div>
 
 <input type="radio" id="tab-14" name="tab-group-1">
 <label for="tab-14">Hailee</label>
 
 <div class="skewstuff hai">
 <div class="scrolly">
  <div class="deva">
  <img src="http://www.rp4me.net/valsig/pics/hai.png">
   <h1>Hailee</h1>
  <div></div>
   <h2>Candidate * Innovator * Dreamer</h2>
  </div>
 
  <div class="lili">
  <a href="https://valynor.jcink.net/index.php?showtopic=89&hl=">profile</a>
  </div>
 </div>
 </div>
 
 
 <input type="radio" id="tab-15" name="tab-group-1" checked>
 <label for="tab-15">Skewed</label>
 
 <div class="skewstuff hskew">
 <div class="scrolly">
  <div class="deva"><br>
   <h2>embracing the storm</h2>
   <div></div>

  </div>
  <div class="lili hskew">
  <a href="https://valynor.jcink.net/index.php?act=ST&f=52&t=419">tracker</a>
  </div>
 </div>
 </div>
  </div>
 
 
 </div>
 
 
 </div>
</div>
[/dohtml]



Posted by: owl Jul 11 2018, 03:10 PM
Can you link to a live example of a post with HTML in the signature?

Posted by: omfwog Jul 11 2018, 04:39 PM
https://testyboard.jcink.net/index.php?act=ST&f=1&t=2 Because it breaks the board, i didn't even think about it..

without it in the post above it, it does this thing x_x https://testyboard.jcink.net/index.php?showtopic=1...

Posted by: owl Jul 11 2018, 04:41 PM
Thanks for linking that - I have one more request. Can you post the code you're using in your signature? Just so we can rule out some issues with that.

Posted by: John Jul 11 2018, 06:11 PM
The problem is that signatures automatically generate line breaks for each new line, but that will break css in style tags like that. Really what I would recommend here is hosting that css in an external file somewhere if possible because repeating it for every post is a lot of extra content for the viewer to be "redownloading."

However, if you want to use it as is, use a minifier:

https://kangax.github.io/html-minifier/

Paste the code, copy the minified result into your signature. This will strip all of the new lines out of both the html tags and css. Should work.

Posted by: omfwog Jul 11 2018, 08:55 PM
Hm. I tried to actually link to the css externally at first, but it wouldn't work either... I guess I will try that again! Thank you so much. Minifying did seem to work for the most part, though not perfectly... but enough that i think I can tweek it to make it work.

owl - The code I am using in my signature is actually the code in the first post here. http://files.b1.jcink.com/html/emoticons/smile.gif



edit: Though.. now I'm having the issue that any post in a thread past the first one doesn't work.

Posted by: Cory Jul 12 2018, 12:45 AM
I'm not even seeing a topic on your board with replies, just the OP.

'
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)