API tools faq
paste
Advertisement
sycamorre

TEFc CSS Template 4

sycamorre
Dec 25th, 2017
356
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.18 KB | None | 0 0
raw download clone embed print report
  1. <div id="topbar"><div class="tMenu"><a href="http://www.endlessforest.org/community/">Home</a> | <a href="http://www.endlessforest.org/community/tracker">Recent</a> | <a href="http://endlessforest.org/community/node/102262">Map</a> | <span class="tooltip">Disclaimer<span class="tooltiptext" style="line-height:15px; font-size:12px;margin-top:30px;">CSS and layout were made by <a href="http://endlessforest.org/community/node/110902">Sycamorre</a>.
  2.  
  3. {DISCLAIMER TEXT}</span></span></div></div>
  4.  
  5.  
  6.  
  7.  
  8. <bioTtl>Character</bioTtl>
  9. <div class="biocontain"><div class="bioPic"></div>
  10.  
  11. <div class="bio1"><div class="updLeft">
  12. <tabTtl>MM-DD-YYYY</tabTtl>
  13.  
  14. <updX>• <span class="tooltip">Body<span class="tooltiptext">{ physical wellness }</span></span> • <span class="tooltip">Mind<span class="tooltiptext">{ mental wellness }</span></span> • <span class="tooltip">Note<span class="tooltiptext">{ whatever you want or replace/get rid of me }</span></span> •
  15.  
  16. -----
  17.  
  18. "...Put some good thoughts here. Any thoughts. All thoughts. They can be kinda-long thoughts, but not too long!"</updPME></div>
  19. <div class="updHap"><updX>Recently:</updX>
  20.  
  21. Let your people know what's crackalackin'.
  22.  
  23. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu hendrerit urna. Nunc sollicitudin vestibulum tincidunt. Donec fringilla semper eleifend. Aenean faucibus ante diam, a viverra dui maximus id. Quisque quis venenatis sem, sed eleifend elit. Cras ullamcorper consectetur eros, nec bibendum urna iaculis ut. Etiam viverra mattis luctus. Cras venenatis suscipit magna eget dignissim. Curabitur id scelerisque quam, ut rhoncus est. Vestibulum in euismod urna. Praesent vitae ligula eget erat sollicitudin congue. Etiam molestie porttitor tellus.
  24.  
  25. Praesent non sagittis tortor. Cras non justo convallis, ultricies est efficitur, facilisis mauris. Proin ac euismod odio, vitae imperdiet turpis. Maecenas faucibus non urna consequat posuere. Aenean venenatis volutpat purus finibus interdum. Morbi urna risus, auctor eget posuere ut, accumsan et enim. Vestibulum in sollicitudin odio. Pellentesque vehicula neque sit amet eros luctus, et eleifend leo blandit.</div></div>
  26.  
  27. <div class="bio2"><div class="tabcontainer"><span class="tab"><input type="radio" id="tab1" name="tabs" checked><label for="tab1" id="tl1">Tab 1</label><div class="tabcontent"><tabTtl>Tab 1 Title</tabTtl>
  28.  
  29. Tab 1 text.
  30.  
  31. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu hendrerit urna. Nunc sollicitudin vestibulum tincidunt. Donec fringilla semper eleifend. Aenean faucibus ante diam, a viverra dui maximus id. Quisque quis venenatis sem, sed eleifend elit. Cras ullamcorper consectetur eros, nec bibendum urna iaculis ut. Etiam viverra mattis luctus. Cras venenatis suscipit magna eget dignissim. Curabitur id scelerisque quam, ut rhoncus est. Vestibulum in euismod urna. Praesent vitae ligula eget erat sollicitudin congue. Etiam molestie porttitor tellus.
  32.  
  33. Praesent non sagittis tortor. Cras non justo convallis, ultricies est efficitur, facilisis mauris. Proin ac euismod odio, vitae imperdiet turpis. Maecenas faucibus non urna consequat posuere. Aenean venenatis volutpat purus finibus interdum. Morbi urna risus, auctor eget posuere ut, accumsan et enim. Vestibulum in sollicitudin odio. Pellentesque vehicula neque sit amet eros luctus, et eleifend leo blandit.
  34.  
  35. Donec elementum lacus vel quam condimentum, vel ullamcorper magna tempor. Nulla quis vulputate purus. Maecenas maximus convallis mi ac malesuada. Suspendisse convallis rutrum dui eu euismod. Sed a lobortis urna. Mauris mattis sit amet lacus vel posuere. Vestibulum sagittis congue euismod. Cras facilisis risus tortor, eu tincidunt velit ultrices eu. Nullam sit amet est neque. Fusce tempor, felis nec sodales egestas, libero est fermentum risus, ac semper risus nisl et tellus.
  36.  
  37. Mauris id tincidunt lacus, tristique mattis lectus. Quisque in odio semper, lacinia lectus eu, placerat est. In tortor eros, commodo in laoreet in, blandit vitae elit. Quisque volutpat ligula in ex eleifend interdum. Phasellus sodales nibh quis magna semper consequat. Pellentesque libero lectus, tincidunt id luctus eget, elementum tristique lorem. Aenean sit amet nulla et dui condimentum scelerisque et id lorem.
  38.  
  39. Mauris congue, odio ut convallis sodales, nunc enim euismod mauris, sit amet finibus libero massa eu tellus. Morbi quam tortor, dictum ac pellentesque vel, blandit sit amet eros. Donec ullamcorper vitae magna nec tincidunt. Aenean facilisis augue turpis, nec laoreet urna mollis eget. Ut scelerisque felis non rhoncus venenatis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit lacus nec tristique pharetra.</div></span><span class="tab"><input type="radio" id="tab2" name="tabs"><label for="tab2" id="tl2">Tab 2</label><div class="tabcontent"><tabTtl>Tab 2 Title</tabTtl>
  40.  
  41. Tab 2 text.</div></span ><span class="tab"><input type="radio" id="tab3" name="tabs"><label for="tab3" id="tl3">Tab 3</label><div class="tabcontent"><tabTtl>Tab 3 Title</tabTtl>
  42.  
  43. Tab 3 text.</div></span><span class="tab"><input type="radio" id="tab4" name="tabs"><label for="tab4" id="tl4">Tab 4</label><div class="tabcontent"><tabTtl>Tab 4 Title</tabTtl>
  44.  
  45. Tab 4 text.</div></span><span class="tab"><input type="radio" id="tab5" name="tabs"><label for="tab5" id="tl5">Tab 5</label><div class="tabcontent"><tabTtl>Tab 5 Title</tabTtl>
  46.  
  47. Tab 5 text.</div></span></div></div></div>
  48.  
  49.  
  50. <div id= "CSS-Sycamorre" style="display:none;">
  51.  
  52. <!---- CSS BELOW ---->
  53.  
  54. -- SETTING UP
  55. <link href="https://fonts.googleapis.com/css?family=Bahiana|Caesar+Dressing|Crushed|Oxygen|Titillium+Web" rel="stylesheet">
  56. <style>.preview{border:none; background:none; padding:0;} body{background-image:none;} #header, #sidebar-left, #header-region, .breadcrumb {display:none; margin:auto;} #tabs-wrapper{position:absolute; border:none; padding:0; margin-left:-120px; opacity:0.5; transition:all 1s;} #tabs-wrapper:hover{opacity:1;} #wrapper #container #center {float:none; top:0px; margin:auto; position:static; margin-bottom:-16px;} body.sidebar-left #squeeze{padding:0; margin:0;} #wrapper #container #center .right-corner .left-corner {margin:0 auto; max-width:none; padding:0;} .node .picture, .node .submitted{display:none} .node{border-bottom: none;margin:0; padding:0;} .node .content {margin:0;} .links{padding:10px;} .with-tabs{display:none;} .comment{border:none; padding:20px 20px 25px 10px; margin:10px auto 0 auto} .comment div.links{background:none; padding-top:10px;} #comments{margin:0;} tbody{border:none; margin:0; padding:0px;} #squeeze h2{display:none;}</style>
  57.  
  58. -- COLORS
  59.  
  60. <style>body{background:#333; background-image:url('https://dl.dropbox.com/s/qi4bzgcoxb1z3ga/salemNeutral.png?dl=0');} #wrapper #container #center .right-corner .left-corner {background:#111; color:#aaa; border-left: 3px solid #000; border-right: 3px solid #000;} a:link, a:visited{color: #a8b; transition: all 0.7s} a:link:hover, a:visited:hover{color: #ced; text-decoration:none;} .comment.odd, tr.odd, tr.info, tr.even, .comment.even{background:#0a0a0a;}</style>
  61.  
  62. -- BLOG WIDTH/EDITS
  63.  
  64. <style>#wrapper #container #center .right-corner .left-corner{width:930px; padding: 0 10px 20px 10px; font-family:'Titillium Web'; font-size:13px; box-shadow: 0 0 30px 5px #000;} .comment{width:900px; box-sizing: border-box;} .comment .content{margin-top:5px;}</style>
  65.  
  66. -- TOPBAR
  67. <style>#topbar{position:fixed; top:0; z-index:24;} .tMenu{position:absolute; margin-left:15px; z-index:25; top:0; width:200px; padding:5px; border-radius: 0 0 10px 10px; border:2px solid #000; border-top:none; background-color:rgba(0,0,0,0.8); line-height:40px; text-align:center;}</style>
  68.  
  69. -- BIO DIVS
  70.  
  71. <style>.biocontain{position:relative; width:900px; height:900px; margin:auto; border:2px solid #000;} .bioPic{box-sizing: border-box; position:absolute; left:0; top:0; width:300px; height:900px; border:2px solid #000; background-image:url('https://dl.dropbox.com/s/j9f93k72qmxte5p/tallprevpurp.png?dl=0');} .bio1{box-sizing: border-box; position:absolute; right:0; top:0; width:600px; height:350px; padding:10px; background:#333; border:2px solid #000;} .bio2{box-sizing: border-box; position:absolute; right:0; bottom:0; width:600px; height:550px; padding:10px; background:#333; border:2px solid #000;}</style>
  72.  
  73. -- UPDATES
  74.  
  75. <style>.updLeft{position:absolute; left:10px; top:10px; height:94%; width:38%; text-align:center;} .updHap{position:absolute; right:10px; top:10px; height:94%; width:55%; overflow:auto;} updX{font-family:'Crushed';font-size:20px;}</style>
  76.  
  77. -- TABS
  78. <style>.tabcontainer{position:relative; width:100%; height:100%; margin:auto;} input[type=radio] {display: none;} .tabcontainer label {margin-left: 5px; margin-top:-10px; transition:all 0.3s ease-out; overflow:hidden; cursor:pointer; height:0px; background:#ddd; border-bottom:12px solid #000; border-radius:0 0 10px 10px; color: #222; padding:0 10px 0; position:relative; z-index:10; float:left; font-size:18px; font-family:'Crushed'; line-height:20px;} .tabcontent{opacity:0; position:absolute; bottom:0; margin:auto; width:556px; height:500px; padding:10px; overflow:auto;} label:hover{height:20px;padding:10px;} input[type=radio]:checked ~ label {background:#222; color:#ddd; border-color:#a8b;} input[type=radio]:checked ~ .tabcontent {z-index: 2; opacity:1;} #tl1{margin-left:100px;}</style>
  79.  
  80. -- TITLES AND TOOLTIPS
  81. <style>bioTtl{font-size:75px; font-family:'Caesar Dressing'; display:block; width:900px; text-align:right; letter-spacing:5px; margin:auto; color:#cad;} tabTtl{font-size:30px; font-family:'Crushed';} .tooltip {position: relative; display: inline-block; cursor: pointer; color:#879E7B} .tooltip .tooltiptext {opacity:0; transition:all 1s; visibility: hidden;width: 250px; background:rgba(0,0,0,0.7); color: #aaa;padding: 5px; border-radius: 6px;position: absolute; z-index: 1;margin: 20px 0 0 -125px; text-align:center;} .tooltip:hover .tooltiptext{opacity: 1; visibility: visible;} .tooltip:hover .tooltiptext2{opacity: 1; visibility: visible;}</style>
  82.  
  83. -- INVISIBLE SCROLLBAR
  84. <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>
  85.  
  86. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!