deadove

TEF Template 1

Sep 23rd, 2020 (edited)
113
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div style="display: none;">
  2.  
  3. COLORS (copy the color code you want to change, then ctrl+f and replace them)
  4. -- #c9c097 - main text
  5. -- #fff194 - link
  6. -- #a69c6f - link hover
  7. -- #d6cbb2 - border
  8. -- #5e5650 - background 1
  9. -- #736a63 - background 2
  10. -- #36312f - post background
  11. -- #111111 - tooltip text
  12. -- #39a82a - tooltip link
  13. -- #faf0de - tooltip text bg
  14. -- #ffffff - progress bar text
  15. -- #160509 - progress bar border
  16. -- #361b1e - progress bar bg
  17. -- #80583c - progress bar
  18.  
  19. </div><table class="setab"><tbody class="setab"><tr><td class="setab"></td><td class="setab"><div class="bigti">NAME</div>
  20. <div class="box1"><table class="intab"><tbody class="setab"><tr><td class="image"><div class="img"><div class="imgti">TITLE</div><div class="imgbl"></div>
  21. <span class="ri imgut">UPDATES [ 00/00/0000 ]</span>
  22. <div class="imghv"><span class="tooltip">Mental<span class="tooltiptext">100%</span></span> | <span class="tooltip">Physical<span class="tooltiptext">100%</span></span> | <span class="tooltip">Emotional<span class="tooltiptext">100%</span></span></div><div style="height: 290px; overflow: auto;"><div class="imgli">00:00<span class="ri">text</span></div>
  23. <div class="imgli">00:00<span class="ri">text</span></div></div></div></td><td class="bio"><div class="tabcontainer"><span class="tab"><input type="radio" id="tab1" name="tabs" checked><label for="tab1">Basics</label><div class="tabcontent"><div class="bioti">ABOUT</div>
  24. <b>name:</b> <span class="ri">xxx</span>
  25. <b>pronouns:</b> <span class="ri">xxx</span>
  26. <b>scent:</b> <span class="ri">xxx</span>
  27. <b>maturity:</b> <span class="ri">xxx</span>
  28. <b>sexuality:</b> <span class="ri">xxx</span>
  29. <b>setting:</b> <span class="ri">xxx</span>
  30. <b>companions:</b> <span class="ri">xxx</span>
  31. <b>tasks:</b> <span class="ri">xxx</span>
  32. <b>size:</b> <span class="ri"><a href="https://orig00.deviantart.net/e42f/f/2016/350/9/4/ungulate_size_chart_by_apeldille-dartnvu.jpg">0</a></span>
  33. <b>theme:</b> <span class="ri"><a href="#">xxx</a></span>
  34. <hr>
  35. text</div></span><span class="tab"><input type="radio" id="tab2" name="tabs"><label for="tab2">Visual</label><div class="tabcontent"><div class="bioti">APPEARANCE</div>xxx
  36.  
  37. <img src=""></div></span ><span class="tab"><input type="radio" id="tab3" name="tabs"><label for="tab3">Stats</label><div class="tabcontent"><div class="bioti">PERSONA</div>xxx
  38.  
  39. <div class="progress" style="border-top: none;"><div class="progress-bar" style="width:50%;">Introversion</div></div><div class="progress"><div class="progress-bar" style="width:50%;">Strength</div></div><div class="progress"><div class="progress-bar" style="width:50%;">Intelligence</div></div><div class="progress"><div class="progress-bar" style="width:50%;">Wisdom</div></div><div class="progress"><div class="progress-bar" style="width:50%;">Arrogance</div></div><div class="progress"><div class="progress-bar" style="width:50%;">Charisma</div></div><div class="progress"><div class="progress-bar" style="width:50%;">Dexterity</div></div><div class="progress"><div class="progress-bar" style="width:50%;">Adventurousness</div></div><div class="progress"><div class="progress-bar" style="width:50%;">Agility</div></div><div class="progress"><div class="progress-bar" style="width:50%;">Constitution</div></div><div class="progress"><div class="progress-bar" style="width:50%;">Tenderness</div></div><div class="progress"><div class="progress-bar" style="width:50%;">Attack</div></div><div class="progress"><div class="progress-bar" style="width:50%;">Reliability</div></div><div class="progress"><div class="progress-bar" style="width:50%;">Defense</div></div><div class="progress"><div class="progress-bar" style="width:50%;">Resilience</div></div><div class="progress"><div class="progress-bar" style="width:50%;">Luck</div></div><div class="progress"><div class="progress-bar" style="width:50%;">Magic</div></div><div class="progress"><div class="progress-bar" style="width:50%;">Perceptiveness</div></div></div></span><span class="tab"><input type="radio" id="tab4" name="tabs"><label for="tab4">Relations</label><div class="tabcontent"><div class="bioti">PERCEPTIONS</div>
  40. <span style="font-size: 20px; font-family: 'Economica';"><a href="#">Name</a></span>
  41. xxx
  42. <hr></div></span></div></td></tr></tbody></table></td><td class="setab">
  43. <div class="creditbx"><a href="http://endlessforest.org/community/">Home</a>
  44. <a href="http://endlessforest.org/community/tracker">Tracker</a>
  45. <a href="http://endlessforest.org/community/node/102262">Map</a>
  46. <span class="tooltip">Credit<span class="tooltiptext" style="margin-left:-325px;">CSS by <a href="http://endlessforest.org/community/node/114482">Zave</a>. Tab and sidebar codes by <a href="http://endlessforest.org/community/node/110902">Sycamorre</a>.</span></span>
  47. <span class="tooltip">Disclaimer<span class="tooltiptext" style="margin-left:-520px; width: 400px;">[ disclaimer text ]</span></span></div></td></tr></tbody></table></div>
  48.  
  49. <div class="pic"><img src="https://www.jing.fm/clipimg/full/52-521381_deer-silhouette-graphics-transparent-background-deer-silhouette-deer.png" style="height: auto; width: 500px"></div>
  50.  
  51. <div style="display: none;">
  52.  
  53. FONTS
  54. <link href="https://fonts.googleapis.com/css?family=Economica|Dancing+Script&display=swap" rel="stylesheet">
  55.  
  56. SETTING UP
  57. <style>.node div.picture, .node h2::before, .node h2 a, .node .submitted {display: none;} table.setab{width:100%; color: #c9c097; z-index: 1;} tbody.setab{border:none;} td.setab{width: 33%; vertical-align: top;} .intab{width: 100%; height: 100%; margin: 0px; padding: 0px;} </style>
  58.  
  59. LINK COLORS
  60. <style>.node a:link, .node a:visited{color:#fff194; transition: all 0.7s} .node a:link:hover, .node a:visited:hover{color:#a69c6f; text-decoration:none;}</style>
  61.  
  62. POST BACKGROUND
  63. <style>#wrapper #container #center .right-corner .left-corner{background: #36312f;}</style>
  64.  
  65. NAME TITLE
  66. <style>.bigti{position: relative; top: -20px; left: -250px; z-index:3; width:auto; margin: 20px auto 0 auto; font-size:90px; text-align:center; font-family: 'Dancing Script', cursive; color:#d6cbb2;}</style>
  67.  
  68. MAIN DIV
  69. <style>.box1{border: 2px solid #d6cbb2; border-radius: 10px; width: 1000px; height: 600px; background: #5e5650;}</style>
  70.  
  71. HORIZONTAL LINE
  72. <style>hr{background-color: #d6cbb2;}</style>
  73.  
  74. LEFT BOX (image + updates)
  75. <style>.image{padding: 2%; width: 30%; height: 100%; border-radius: 8px 0px 0px 8px;} .img{width: 290px; height: 545px; background: #736a63; border-radius: 10px; padding-top: 10px;}</style>
  76.  
  77. LEFT BOX TITLE
  78. <style>.imgti{width: 100%; padding-top: 10px; padding-bottom: 10px; text-align: center; font-size: 20px; text-shadow: 0px 0px 3px #000;}</style>
  79.  
  80. LEFT BOX IMAGE
  81. <style>.imgbl{width: 100%; height: 200px; background-image: url('https://i.pinimg.com/originals/11/2b/74/112b746a2182417b2a947d949798c968.jpg'); background-position: center;}</style>
  82.  
  83. UPDATES
  84. <style>.imgut{font-size: 25px; margin-top: -15px; margin-right: -30px; text-shadow: 0px 0px 3px #000;} .imghv{text-align: center;} .imghv .tooltiptext {margin-top: 20px;} .imgli{margin: 0; padding: 0; width: 280px; padding: 5px; border-bottom: 1px solid #d6cbb2; text-shadow: none;} .ri{float: right;}</style>
  85.  
  86. RIGHT BOX (biography)
  87. <style>.bio{padding: 2%; width: 70%; height: 100%; vertical-align: top;}</style>
  88.  
  89. BIO TITLE
  90. <style>.bioti{font-size: 25px; text-shadow: 0px 0px 3px #000; margin-right: 20px; text-align: right; border-bottom: 1px solid #d6cbb2; padding-bottom: 5px;}</style>
  91.  
  92. TAB CONTENT
  93. <style>.tabcontainer{position:relative; width: 100%; height:100%;} input[type=radio] {display: none;} .tabcontent{position:absolute; top:0; margin:auto; width: 600px; height: 535px; background: #736a63; border-radius: 10px; padding: 10px;} input[type=radio]:checked ~ .tabcontent {z-index: 2; transition: 1s;}</style>
  94.  
  95. TAB LABELS
  96. <style>.tabcontainer label {cursor:pointer; color: #8c847e; background:#5e5650; border-radius: 10px 10px 0px 0px; padding:10px; padding-left: 20px; padding-right: 20px; padding-bottom: 55px; position:relative; margin-left:5px; float:left; left: 220px; bottom: 55px;} input[type=radio]:checked ~ label {background:#736a63; color:#c9c097; transition: 0.5s;}</style>
  97.  
  98. SIDEBAR
  99. <style>.creditbx{position:relative; z-index: 7; font-size:30px; border-left: 1px solid #d6cbb2; padding-left:5px; line-height:35px; font-family:'Economica'; margin-top: 50px;}</style>
  100.  
  101. TOOLTIPS
  102. <style>.tooltip {position:relative; display: inline-block; cursor: pointer; color:#fff194; margin-top: -5px;}</style>
  103.  
  104. TOOLTIP TEXT
  105. <style>.tooltip .tooltiptext {opacity:0; transition:all 0.4s; visibility: hidden;width: 250px; background: #faf0de; color: #111111; padding: 5px; border-radius: 6px; position:absolute; z-index:8; margin: 7px 0 0 -125px; text-align:center; font-family:'Mallanna'; font-size:15px; line-height:15px; text-shadow:none;} .tooltiptext a:link, .tooltiptext a:visited {color: #39a82a;}.tooltip:hover .tooltiptext{opacity: 1; visibility: visible;}</style>
  106.  
  107. BOTTOM IMAGE
  108. <style>.pic{position: absolute; top: 490px; right: 50px; z-index: 6;}</style>
  109.  
  110. STAT BARS
  111. <style>.progress{background:#361b1e; border-top: 2px #160509 solid;} .progress-bar{color:#ffffff; font-size: 12px; font-family: 'Source Code Pro', monospace; background:#80583c; border: none; border-radius: 0px 10px 10px 0px; text-align: center;}</style>
  112.  
  113. </div>
RAW Paste Data