API tools faq
paste
Advertisement
southcodes

CHAR PAGE #1: tess v2

southcodes
Jan 6th, 2017
946
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 10.78 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. CHARACTER PAGE #1 v2 slim sidebar - BY SUR SOUTHCODES.TUMBLR.COM
  4.  
  5. - modify as you like but please keep the credit intact <3
  6. - let me know of any errors or if you need help
  7.  
  8. -->
  9.  
  10. <!DOCTYPE html>
  11. <head>
  12.  
  13.     <title>{Title}</title>
  14.     <link rel="shortcut icon" href="{favicon}">
  15.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  16.  
  17. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  18. <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  19.  
  20.  
  21. <style type="text/css">
  22.  
  23.  
  24. /*           basics            */
  25.  
  26.  
  27. iframe#tumblr_controls {
  28.     white-space:nowrap!important;
  29.     -webkit-filter:invert(60%)!important;
  30.     -moz-filter:invert(60%)!important;
  31.     -ms-filter:invert(60%)!important;
  32.     -o-filter:invert(60%)!important;
  33.     filter:invert(60%)!important;
  34.     top:10px!important;
  35.     right:10px!important;
  36.     opacity:.3!important;
  37.     position:fixed!important;
  38. }
  39.  
  40. ::-webkit-scrollbar {
  41.     height:2px;
  42.     width:4px;
  43.     background:inherit;
  44. }
  45.  
  46. ::-webkit-scrollbar-thumb {
  47.     background:#eee;
  48.     border-radius:2px;
  49.     -webkit-border-radius:2px;
  50. }
  51.    
  52. #s-m-t-tooltip{
  53.     max-width:300px;
  54.     margin-top:25px;
  55.     margin-left:15px;
  56.     padding: 2px;
  57.     z-index:999999;
  58.     letter-spacing:1.5px;
  59.     text-transform:uppercase;
  60.     font-size:9px;
  61.     border: solid 1px #dcdee2;
  62.     background-color:#fcfcfc;
  63.     font-family:calibri;
  64.     color:#818284;
  65. }
  66.    
  67. body {
  68.     font-family: 'Open Sans', sans-serif;
  69.     font-size:12px;
  70.     color:#111111;
  71.     letter-spacing:1px;
  72.     background:#fafafa;
  73. }
  74.  
  75. a {
  76.     text-decoration:none;
  77.     color:#111111;
  78.     letter-spacing:1px;
  79.     -moz-transition-duration: 0.6s;
  80.     -o-transition-duration: 0.6s;
  81.     -webkit-transition-duration: 0.6s;q
  82.     transition-duration: 0.6s;
  83. }
  84.    
  85. a:hover {
  86.     color:#333;
  87.     letter-spacing:1.5px;
  88.     -moz-transition-duration: 0.6s;
  89.     -o-transition-duration: 0.6s;
  90.     -webkit-transition-duration: 0.6s;q
  91.     transition-duration: 0.6s;
  92. }
  93.  
  94. .container {
  95.     margin:80px auto 100px;
  96.     width:940px;
  97. }
  98.  
  99.  
  100. /*           sidebar            */
  101.  
  102. .sidebar {
  103.     position:fixed;
  104.     background:#fff;
  105.     border-radius:5px;
  106.     width:120px;
  107.     padding:5px 10px;
  108.     border: 1px solid #eee;
  109.     border-radius:3px;
  110. }
  111.  
  112. .simage {
  113.     width:80px;
  114.     margin: 5px auto;
  115. }
  116.  
  117. .simage img {
  118.     width:80px;
  119.     border-radius:50px;
  120. }
  121.  
  122. .title {
  123.     text-transform:uppercase;
  124.     text-align:center;
  125.     letter-spacing:2px;
  126.     font-weight:bold;
  127.     padding-bottom:10px;
  128. }
  129.  
  130. .desc {
  131.     text-align:center;
  132.     letter-spacing:.5px;
  133.     border-top: 1px solid #eee;
  134.     padding:12px 2.5px;
  135. }
  136.  
  137. .links {
  138.     text-transform:uppercase;
  139.     text-align:right;
  140.     font-size:10px;
  141.     letter-spacing:1px;
  142.     line-height:20px;
  143.     padding:11px 0 10px;
  144. }
  145.  
  146. .links a:hover {
  147.     letter-spacing:3px;
  148. }
  149.  
  150.  
  151. /*           boxes            */
  152.  
  153.  
  154. .box {
  155.     float:right;
  156.     width:651px;
  157.     max-height:350px;
  158.     height:350px;
  159.     background:#fff;
  160.     border: 1px solid #eee;
  161.     border-radius:3px;
  162.     margin-bottom:170px;
  163. }
  164.  
  165. .box img{
  166.     width:350px;
  167. }
  168.  
  169. .side {
  170.     display:inline-block;
  171.     vertical-align:top;
  172.     width:275px;
  173.     margin:auto;
  174.     padding: 10px;
  175.     max-height:350px;
  176.     height:350px;
  177. }
  178.  
  179. .side img {
  180.     width:40px;
  181.     border-radius:50px;
  182. }
  183.  
  184. .head {
  185.     width:180px;
  186.     display:inline-block;
  187.     vertical-align:top;
  188.     margin:5px 0 0 5px;
  189. }
  190.  
  191. .info {
  192.     overflow:scroll;
  193.     font-size:12px;
  194.     height:266px;  /* if text is overflowing from the box lower this number */
  195. }
  196.  
  197. /*           extras            */
  198.  
  199.  
  200. #smaller-border {
  201.     height: 1px;
  202.     width: 70px;
  203.     float:right;
  204.     background-color: #eaeaea;
  205. }
  206.  
  207. #smaller-border2 {
  208.     height: 1px;
  209.     width:275px;
  210.     background-color: #eaeaea;
  211.     margin:7px 0 10px 0;
  212. }
  213.  
  214. span.headline {
  215.     font-weight:bold;
  216. }
  217.  
  218. span.headline a:hover{
  219.     font-weight:bold;
  220.     letter-spacing:1px;
  221. }
  222.  
  223. span.headsubline {
  224.     font-size:10px;
  225. }
  226.  
  227. span.line {
  228.     font-weight:bold;
  229. }
  230.  
  231. .credit {
  232.     position:fixed;
  233.     padding:5px;
  234.     bottom:0;
  235.     right:0;
  236.     font-size:10px;
  237. }
  238.  
  239.  
  240. /*         drop down menu        */
  241.  
  242.  
  243. .dropdown {
  244.     position: relative;
  245.     display: inline-block;
  246.     vertical-align:top;
  247.     margin-top:10px;
  248. }
  249.  
  250. .dropdown-content {
  251.     border:1px solid #eee;
  252.     display: none;
  253.     position: absolute;
  254.     width: 120px;
  255.     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
  256.     z-index: 1;
  257.     margin:-10px 0 0 -80px;
  258.     background-color: #fafafa;
  259. }
  260.  
  261. .droplinks {
  262.     text-transform:uppercase;
  263.     cursor:pointer;
  264. }
  265.  
  266. .droplinks li{
  267.     text-align:center;
  268.     padding:9px 3px;
  269.     font-size:10px;
  270.     list-style:none;
  271.     border-bottom:1px solid #eee;
  272.     -moz-transition-duration: 0.6s;
  273.     -o-transition-duration: 0.6s;
  274.     -webkit-transition-duration: 0.6s;q
  275.     transition-duration: 0.6s;
  276. }
  277.  
  278. .droplinks a:hover{
  279.     letter-spacing:1.5px;
  280.     -moz-transition-duration: 0.6s;
  281.     -o-transition-duration: 0.6s;
  282.     -webkit-transition-duration: 0.6s;q
  283.     transition-duration: 0.6s;
  284. }
  285.  
  286. .dropdown:hover .dropdown-content {
  287.     display: block;
  288. }
  289.  
  290. </style>
  291. </head>
  292.  
  293.         <!--         tooltip        -->
  294.        
  295. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  296. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  297. <script>
  298. (function($){
  299. $(document).ready(function(){
  300. $("a[title]").style_my_tooltips({
  301. tip_follows_cursor:true,
  302. tip_delay_time:30,
  303. tip_fade_speed:300,
  304. attribute:"title"
  305. });
  306. });
  307. })(jQuery);
  308. </script>
  309.  
  310.         <!--         tooltip        -->
  311.        
  312. <body>
  313. <div class="container">
  314.  
  315. <div class="sidebar">
  316.     <div class="simage"> <!--   round sidebar icon  -->
  317.     <a href="/"><img src="SIDEBAR IMAGE URL"/></a>
  318.     </div>
  319.    
  320.     <div class="title">characters</div>
  321.    <div class="desc">here goes a description if you want it. if not, delete the div</div>
  322.    
  323.     <div id="smaller-border"></div>
  324.    
  325.     <div class="links">
  326.         <a href="/">home</a><br>
  327.         <a href="/ask">ask</a><br>
  328.         <a href="http://tumblr.com/dashboard">dash</a>
  329.     </div>
  330. </div>
  331.  
  332.  
  333. <!---               start  boxes                 --->
  334.  
  335.  
  336.  
  337. <!--    START BOX   -->
  338. <div class="box">
  339.  
  340. <!--        principal sideimage       -->
  341. <a href="/tagged/CHAR TAG"><img src="IMAGE URL"/></a>
  342.  
  343. <!--        header icon      -->
  344. <div class="side">
  345. <a href="/tagged/CHAR TAG"><img src="ICON IMAGE URL"/></a>
  346.  
  347. <!--        header       -->
  348. <div class="head">
  349. <span class="headline"><a href="/tagged/CHAR TAG">char name</a></span><br>
  350. <span class="headsubline"> info | info</span>
  351. </div>
  352.  
  353. <!--        hover dropdown links       -->    
  354. <div class="dropdown">
  355.     <span><i class="material-icons" style="color:#ddd">more_horiz</i></span>
  356.     <div class="dropdown-content">
  357.     <div class="droplinks">
  358.     <li><a href="/">LINK 1</a></li>
  359.     <li><a href="/">LINK 2</a></li>
  360.     <li><a href="/">LINK 3</a></li>
  361.     </div>
  362.     </div>
  363. </div>
  364.  
  365. <div id="smaller-border2"></div>
  366.  
  367. <!--    info     /// don't write the first and last lines between <p> </p> or you'll create an extra line break ///          -->
  368. <div class="info">
  369.     <span class="line">line title</span> info
  370.     <p><span class="line">line title</span> info</p>
  371.     <p><span class="line">line title</span> info</p>
  372.     <p><span class="line">line title</span> info</p>
  373.     <p><span class="line">line title</span> info</p>
  374.     <p><span class="line">line title</span> info</p>
  375.     <p><span class="line">line title</span> info</p>
  376.     <span class="line">line title</span> info
  377. </div>
  378. </div>
  379. </div>
  380. <!--    END BOX   -->
  381.  
  382.  
  383.  
  384.  
  385.  
  386.  
  387. <!--    START BOX   -->
  388. <div class="box">
  389.  
  390. <!--        principal sideimage       -->
  391. <a href="/tagged/CHAR TAG"><img src="IMAGE URL"/></a>
  392.  
  393. <!--        header icon      -->
  394. <div class="side">
  395. <a href="/tagged/CHAR TAG"><img src="ICON IMAGE URL"/></a>
  396.  
  397. <!--        header       -->
  398. <div class="head">
  399. <span class="headline"><a href="/tagged/CHAR TAG">char name</a></span><br>
  400. <span class="headsubline"> info | info</span>
  401. </div>
  402.  
  403. <!--        hover dropdown links       -->    
  404. <div class="dropdown">
  405.     <span><i class="material-icons" style="color:#ddd">more_horiz</i></span>
  406.     <div class="dropdown-content">
  407.     <div class="droplinks">
  408.     <li><a href="/">LINK 1</a></li>
  409.     <li><a href="/">LINK 2</a></li>
  410.     <li><a href="/">LINK 3</a></li>
  411.     </div>
  412.     </div>
  413. </div>
  414.  
  415. <div id="smaller-border2"></div>
  416.  
  417. <!--    info     /// don't write the first and last lines between <p> </p> or you'll create an extra line break ///          -->
  418. <div class="info">
  419.     <span class="line">line title</span> info
  420.     <p><span class="line">line title</span> info</p>
  421.     <p><span class="line">line title</span> info</p>
  422.     <p><span class="line">line title</span> info</p>
  423.     <p><span class="line">line title</span> info</p>
  424.     <p><span class="line">line title</span> info</p>
  425.     <p><span class="line">line title</span> info</p>
  426.     <span class="line">line title</span> info
  427. </div>
  428. </div>
  429. </div>
  430. <!--    END BOX   -->
  431.  
  432.  
  433.  
  434.  
  435.  
  436. <!--    START BOX   -->
  437. <div class="box">
  438.  
  439. <!--        principal sideimage       -->
  440. <a href="/tagged/CHAR TAG"><img src="IMAGE URL"/></a>
  441.  
  442. <!--        header icon      -->
  443. <div class="side">
  444. <a href="/tagged/CHAR TAG"><img src="ICON IMAGE URL"/></a>
  445.  
  446. <!--        header       -->
  447. <div class="head">
  448. <span class="headline"><a href="/tagged/CHAR TAG">char name</a></span><br>
  449. <span class="headsubline"> info | info</span>
  450. </div>
  451.  
  452. <!--        hover dropdown links       -->    
  453. <div class="dropdown">
  454.     <span><i class="material-icons" style="color:#ddd">more_horiz</i></span>
  455.     <div class="dropdown-content">
  456.     <div class="droplinks">
  457.     <li><a href="/">LINK 1</a></li>
  458.     <li><a href="/">LINK 2</a></li>
  459.     <li><a href="/">LINK 3</a></li>
  460.     </div>
  461.     </div>
  462. </div>
  463.  
  464. <div id="smaller-border2"></div>
  465.  
  466. <!--    info     /// don't write the first and last lines between <p> </p> or you'll create an extra line break ///          -->
  467. <div class="info">
  468.     <span class="line">line title</span> info
  469.     <p><span class="line">line title</span> info</p>
  470.     <p><span class="line">line title</span> info</p>
  471.     <p><span class="line">line title</span> info</p>
  472.     <p><span class="line">line title</span> info</p>
  473.     <p><span class="line">line title</span> info</p>
  474.     <p><span class="line">line title</span> info</p>
  475.     <span class="line">line title</span> info
  476. </div>
  477. </div>
  478. </div>
  479. <!--    END BOX   -->
  480.  
  481.  
  482.  
  483.  
  484.  
  485. <!---               end  boxes                 --->
  486.  
  487. </div>
  488. <!--    dont touch pls <3   -->
  489. <div class="credit"><a href="http://southcodes.tumblr.com" title="southcodes">×</a>
  490. </div>
  491. </body>
  492. </html>
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!