daily pastebin goal
74%
SHARE
TWEET

TEFc CSS Template 2

sycamorre Dec 13th, 2017 (edited) 151 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <div class="newmenu"><a href="http://endlessforest.org/community/">Home</a> | <a href="http://endlessforest.org/community/tracker">Recent Posts</a> | <a href="http://endlessforest.org/community/current-map-forest">Map</a> | <div class="tooltip">Credit<span class="tooltiptext">CSS and Layout by <a href="http://endlessforest.org/community/node/110902">Sycamorre</a>. Base CSS by <a href="http://endlessforest.org/community/node/85739">Unplugged</a>.</span></div> | <div class="tooltip">Disclaimer<span class="tooltiptext">{disclaimer text}</span></div></div>
  2. <div class="updater"><div class="update-title">Updates</div><div class="update-events">[b]DATE --[/b]
  3.  
  4. Stuff.
  5.  
  6.  
  7. [b]ANOTHER DATE --[/b]
  8.  
  9. More stuff.
  10.  
  11.  
  12. [b]ANOTHER DATE --[/b]
  13.  
  14. More stuff.
  15.  
  16.  
  17. [b]ANOTHER DATE --[/b]
  18.  
  19. More stuff.
  20.  
  21.  
  22. [b]ANOTHER DATE --[/b]
  23.  
  24. More stuff.</div><div class="update-thot">
  25.  
  26. "Thoughts and stuff could go right here."</div>
  27. <div class="update-pme"><div class="tooltip">TOOLTIP 1<span class="tooltiptext">{tooltip 1 text}</span></div> -- <div class="tooltip">TOOLTIP 2<span class="tooltiptext">{tooltip 2 text}</span></div> -- <div class="tooltip">TOOLTIP 3<span class="tooltiptext">{tooltip 3 text}</span></div></div></div>
  28. <div class="bigimg"></div>
  29. <div class="bigdiv">
  30. <div class="bigtitle">Title Here</div>
  31. <div class="accordion">
  32.     <div class="tab"><input id="tab-one" type="checkbox" name="tabs"> <label for="tab-one">Label One</label><div class="tab-content">
  33.         <table><tr><td style="width:450px; vertical-align:top;"><p>Here's a tip: to make multiple sections in a tab, use a simple table and set the width of the cell [code]<td>[/code] to equal how wide you want it to be! You can use both pixel measurements and percentages.</p>
  34. <p>You don't even have to make a new div class for it! Just make sure to set vertical-align if you want your text to be aligned to the top of the cell.</p></td><td style="width:450px; overflow:auto; vertical-align:top;"><div class="celloverflow"><p>The table will grow with the content inside it, making the tab grow, so if you would rather it not do that past a certain point, I have included a simple div you can put into the cells to make sure that it doesn't go over a certain height. You can change this max-height in the CSS section.</p><p>You can even use it in tabs without tables!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p></div></td></tr></table>
  35. </div></div><div class="tab"><input id="tab-two" type="checkbox" name="tabs"><label for="tab-two">Label Two</label><div class="tab-content">
  36.         <p>A couple other options with the accordion: if you change the input's type from type="checkbox"
  37.  to type="radio" the functionality of the accordion will change so that when you open a tab, then try to open another one, it closes the first (so you only have one tab open at a time). You can also add "checked" to the end of the input tag (so it would look like [code]<input id="tab-two" type="checkbox" name="tabs" checked>[/code]) so that tab would be opened automatically when the page is loaded.</p><p>To add more tabs, copy and paste the following, and change "NUM" to something unique for that tab (can be a number, name, whatever, it just has to be unique):
  38.  
  39. <div style="width:500px;margin:auto;word-wrap: break-word;overflow:auto;">[code]<div class="tab"><input id="tab-NUM" type="checkbox" name="tabs"><label for="tab-NUM">Label</label><div class="tab-content">
  40.         <p>TEXT HERE</p>
  41. </div></div>[/code]</div></p>
  42.  
  43. <p>The remainder of the tab is to show how a tab with lots of content looks without using the celloverflow div. NOTE: You can set a max height for the tab-content in the accordion code, but anything that gets over it gets cut off. You can use that celloverflow div to help, just adjust it to the height you want!</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
  44. </div></div><div class="tab"> <input id="tab-three" type="checkbox" name="tabs"><label for="tab-three">Label Three</label><div class="tab-content">
  45.         <div class="celloverflow"><p>This tab will show how a tab with lots of content might look like with the cell overflow div used as well.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p></div>
  46. </div></div></div></div>
  47.  
  48.  
  49.  
  50.  
  51.  
  52.  
  53.  
  54. <div style="display:none;">
  55.  
  56. <!---- CSS BELOW ---->
  57.  
  58. --- UNPLUGGED'S BASE
  59. <style>.preview{background:none;border:none} #header-region, #header img, .sidebar, .breadcrumb,#squeeze h2,.comment .clear-block .content .clear-block, div.status{display:none} #wrapper #container #center .right-corner .left-corner{position:relative;margin:auto;padding:0px;background:none}#wrapper #container #center{float:none;position:static;margin-bottom:-16px;top:0px;}body.sidebar-left #center, body.sidebar-left #squeeze{margin-left:0px; padding:0px} .comment .content{margin-left:20px} .node .picture, .node .submitted{display:none} .node{border-bottom:none} #tabs-wrapper{border-bottom:none; padding:0} tbody{border-top:none} #wrapper #container #center{position:absolute;top:0px} .comment{margin:20px 0px;padding:10px 20px} .node .links, .comment .links{text-align:center} ul.primary{position:absolute;top:0px;left:0px} .node .content{margin:0px} table{width:auto;margin:0;} tbody{border:none}#wrapper #container #center .right-corner .left-corner{width:100%;} .node{padding:0 50px 0 50px} body{overflow-x:hidden}</style>
  60. <style>body{background:#000;} .comment.odd,tr.odd,.comment.even,tr.even{background:#111} .comment{border:none} body{color: #333; font:12px verdana} a:link, a:visited, ul.pager a{color:#666; transition:all 1s;} a:link:hover, a:visited:hover, ul.pager a:hover{color:#888; text-decoration:none} .new{color:#333} .comment div.links{background:none} span.submitted{color:#000} #squeeze{margin:auto;padding:0;} .left-corner {padding:10px;}</style>
  61.  
  62. -- FONTS
  63. <link href="https://dl.dropbox.com/s/qv3z0egdbpih1ol/comicrunes.css?dl=0" rel="stylesheet">
  64. <link href="https://fonts.googleapis.com/css?family=Amatic+SC|Dosis:200|Kanit:200|Megrim" rel="stylesheet">
  65.  
  66. --- BLOG WIDTH/COLORS AND BG COLOR
  67. <style>#wrapper #container #center .right-corner .left-corner {width:900px; background:#0a0a0a; padding:10px; border-left: 5px double #050505; border-right: 5px double #050505;border-bottom: 5px double #050505; box-shadow: 0 0 50px #000;} body{background:#1f1f1f}</style>
  68.  
  69. -- LINK COLORS
  70. <style>a:link, a:visited, ul.pager a{color:maroon; transition:all 1s;} a:link:hover, a:visited:hover, ul.pager a:hover{color:#888; text-decoration:none}</style>
  71.  
  72. -- COMMENT ADJUSTMENTS AND COLORS
  73. <style>.comment,.comment.odd,tr.odd,.comment.even,tr.even{background:#444; color:#555;} .comment .picture {margin-left:-10px;} .comment .content {margin:10px 0 10px 120px;} .comment .submitted{color:#333; border-bottom:1px dashed #222;}</style>
  74.  
  75. -- TOP MENU AND MISC
  76. <style>.newmenu{position:relative; width:700px; padding:5px; margin:auto; text-align:right;}</style>
  77.  
  78. -- UPDATES DIVS
  79. <style>.updater{position:relative; background:#222;width:700px;height:360px;border:2px solid #000;margin:auto;padding:25px;top:0;} .update-events{position:relative; float:left; width:430px; height:280px; padding:10px; border:1px solid #000; background:rgba(0,0,0,0.5); overflow:auto;} .update-pme{position:relative; float:left; width:430px; height:20px; padding:15px 10px; border:1px solid #000; margin-top:10px; background:rgba(0,0,0,0.5); text-align:center;} .update-title {position: relative; float:right; font-size:40px; text-align:center; width:240px; color: #777; font-family: 'comic_runesregular';} .update-thot{position: relative; float:right; font-size:18px; text-align:center; width:200px; color: #555; padding: 0 20px; font-family: 'Dosis', sans-serif;}</style>
  80.  
  81. -- BIG IMG (change width/height to match your img and put the url in the background-image attribute!)
  82. <style>.bigimg{background-image:url('https://dl.dropbox.com/s/uhq2grxgmc2asuw/CSSpreview700.png?dl=0'); width:700px; height:810px; margin:-50px auto 0 auto; position: relative; z-index:1;}</style>
  83.  
  84. -- BIODIV (div with accordion) AND TITLE
  85. <style>.bigdiv{position:relative; background:rgba(30,30,30,0.6);width:700px;margin:-100px auto 100px auto;border-radius:0 100px 0 0; z-index:3;border:2px solid #000;} .bigtitle{position:relative; font-size:70px; margin-left:50px; color:maroon; text-shadow: 0 0 3px #000; font-family: 'comic_runesregular';}</style>
  86.  
  87. -- ACCORDION
  88. <style>.accordion {margin:0; padding: 0; width:700px;} .tab { position: relative; margin-bottom: 1px; width: 100%; overflow: hidden;} .accordion input { position: absolute; opacity: 0; z-index: -1;} .accordion label { position: relative; display: block; padding: 0 0 0 1em; background: #1a1a1a; font-weight: bold; line-height: 2; cursor: pointer; color:#aaa; font-size:30px; text-align:center; font-family: 'Amatic SC', cursive;} .tab-content { max-height: 0; overflow: hidden; -webkit-transition: max-height .35s; transition: max-height .35s;  color:#888; background:#222;} .tab-content p { margin: 1em;} .accordion input:checked ~ .tab-content { max-height: 100em;} .accordion label::after { position: absolute; right: 0; top: 0; display: block; width: 3em; height: 3em; line-height: 3; text-align: center; -webkit-transition: all .35s; transition: all .35s;} .accordion input[type=checkbox] + .accordion label::after { content: "+";} .accordion input[type=radio] + accordion label::after { content: "\25BC";} .accordion input[type=checkbox]:checked + .accordion label::after { -webkit-transform: rotate(315deg); transform: rotate(315deg);} .accordion input[type=radio]:checked + .accordion label::after { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); }</style>
  89.  
  90. --CELL OVERFLOW
  91. <style>.celloverflow{max-height:200px;overflow:auto}</style>
  92.  
  93. -- TOOLTIPS
  94. <style>.tooltip {position: relative; display: inline-block; border-bottom: 1px dotted #333;cursor: pointer;} .tooltip .tooltiptext {visibility: hidden;width: 200px; background:#000; color: #aaa;padding: 5px 0; border-radius: 6px;position: absolute; z-index: 1;margin: 20px 0 0 -100px; text-align:center;} .tooltip:hover .tooltiptext{visibility: visible;}</style>
  95.  
  96. -- SCROLLBAR
  97. <style>#center ::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #000;} #center ::-webkit-scrollbar{width: 0px; background-color: #000;} #center ::-webkit-scrollbar-thumb{background-color: #000000; border: 2px solid #555555;}</style>
  98.  
  99. </div>
RAW Paste Data
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
 
Top