Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  Add ReplyNew TopicNew Poll

 HTML and CSS not working in Signature
#
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]


PM
#
Can you link to a live example of a post with HTML in the signature?

signature
Kindly do not contact me on Discord or PM me for support.

user posted image
#
Yes! I am so sorry for not doing that to begin with. 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 Here...

This post has been edited by omfwog: Jul 11 2018, 04:43 PM
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.

signature
Kindly do not contact me on Discord or PM me for support.

user posted image
#
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.

signature
email: admin@jcink.com :: blog: John C.
#
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.

This post has been edited by omfwog: Jul 11 2018, 09:36 PM
PM
#
I'm not even seeing a topic on your board with replies, just the OP.

signature
user posted image
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options Add ReplyNew TopicNew Poll