API tools faq
paste
deadove

TEF Template 1

deadove
Sep 23rd, 2020 (edited)
361
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.19 KB | None | 0 0
raw download clone embed print report
  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>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!