API tools faq
paste
Advertisement
southcodes

CHAR PAGE #1: tess v1

southcodes
Jan 6th, 2017
1,128
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 10.64 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. CHARACTER PAGE #1 v1 wide 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.  
  103. .sidebar {
  104.     width:215px;
  105.     position:fixed;
  106.     background:#fff;
  107.     border-radius:5px;
  108.     padding:5px 10px;
  109.     border: 1px solid #eee;
  110.     border-radius:3px;
  111. }
  112.  
  113. .simage {
  114.     width:80px;
  115.     display:inline-block;
  116.     margin: 5px auto;
  117. }
  118.  
  119. .simage img {
  120.     width:80px;
  121.     border-radius:50px;
  122. }
  123.  
  124. .title {
  125.     display:inline-block;
  126.     text-transform:uppercase;
  127.     text-align:center;
  128.     letter-spacing:2px;
  129.     font-weight:bold;
  130.     padding-bottom: 10px;
  131. }
  132.  
  133. .desc {
  134.     text-align:center;
  135.     letter-spacing:.5px;
  136.     border-top: 1px solid #eee;
  137.     padding:12px 2.5px;
  138. }
  139.  
  140. .links {
  141.     text-transform:uppercase;
  142.     font-size:10px;
  143.     letter-spacing:1px;
  144.     line-height:20px;
  145. }
  146.  
  147. .links a:hover {
  148.     letter-spacing:1px;
  149. }
  150.  
  151. .links a {
  152.     padding: 0 2px;
  153. }
  154.  
  155. .sidetext {
  156.     display:inline-block;
  157.     width:120px;
  158.     vertical-align:top;
  159.     padding:20px 0 20px 10px;
  160. }
  161.  
  162.  
  163. /*           boxes            */
  164.  
  165.  
  166. .box {
  167.     float:right;
  168.     width:651px;
  169.     max-height:350px;
  170.     height:350px;
  171.     background:#fff;
  172.     border: 1px solid #eee;
  173.     border-radius:3px;
  174.     margin-bottom:170px;
  175. }
  176.  
  177. .box img{
  178.     width:350px;
  179. }
  180.  
  181. .side {
  182.     display:inline-block;
  183.     vertical-align:top;
  184.     width:275px;
  185.     margin:auto;
  186.     padding: 10px;
  187.     max-height:350px;
  188.     height:350px;
  189. }
  190.  
  191. .side img {
  192.     width:40px;
  193.     border-radius:50px;
  194. }
  195.  
  196. .head {
  197.     width:180px;
  198.     display:inline-block;
  199.     vertical-align:top;
  200.     margin:5px 0 0 5px;
  201. }
  202.  
  203. .info {
  204.     overflow:scroll;
  205.     font-size:12px;
  206.     height:266px;  /* if text is overflowing from the box lower this number */
  207. }
  208.  
  209.  
  210. /*           extras            */
  211.  
  212.  
  213. #smaller-border {
  214.     height: 1px;
  215.     width: 110px;
  216.     margin-bottom:10px;
  217.     background-color: #eaeaea;
  218. }
  219.  
  220. #smaller-border2 {
  221.     height: 1px;
  222.     width:275px;
  223.     background-color: #eaeaea;
  224.     margin:7px 0 10px 0;
  225. }
  226.  
  227. span.headline {
  228.     font-weight:bold;
  229. }
  230.  
  231. span.headline a:hover{
  232.     font-weight:bold;
  233.     letter-spacing:1px;
  234. }
  235.  
  236. span.headsubline {
  237.     font-size:10px;
  238. }
  239.  
  240. span.line {
  241.     font-weight:bold;
  242. }
  243.  
  244. .credit {
  245.     position:fixed;
  246.     padding:5px;
  247.     bottom:0;
  248.     right:0;
  249.     font-size:10px;
  250. }
  251.  
  252.  
  253. /*         drop down menu        */
  254.  
  255.  
  256. .dropdown {
  257.     position: relative;
  258.     display: inline-block;
  259.     vertical-align:top;
  260.     margin-top:10px;
  261. }
  262.  
  263. .dropdown-content {
  264.     border:1px solid #eee;
  265.     display: none;
  266.     position: absolute;
  267.     width: 120px;
  268.     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.1);
  269.     z-index: 1;
  270.     margin:-10px 0 0 -80px;
  271.     background-color: #fafafa;
  272. }
  273.  
  274. .droplinks {
  275.     text-transform:uppercase;
  276.     cursor:pointer;
  277. }
  278.  
  279. .droplinks li{
  280.     text-align:center;
  281.     padding:9px 3px;
  282.     font-size:10px;
  283.     list-style:none;
  284.     border-bottom:1px solid #eee;
  285.     -moz-transition-duration: 0.6s;
  286.     -o-transition-duration: 0.6s;
  287.     -webkit-transition-duration: 0.6s;q
  288.     transition-duration: 0.6s;
  289. }
  290.  
  291. .droplinks a:hover{
  292.     letter-spacing:1.5px;
  293.     -moz-transition-duration: 0.6s;
  294.     -o-transition-duration: 0.6s;
  295.     -webkit-transition-duration: 0.6s;q
  296.     transition-duration: 0.6s;
  297. }
  298.  
  299. .dropdown:hover .dropdown-content {
  300.     display: block;
  301. }
  302.  
  303. </style>
  304. </head>
  305.  
  306.         <!--         tooltips        -->
  307.        
  308. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  309. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  310. <script>
  311. (function($){
  312. $(document).ready(function(){
  313. $("a[title]").style_my_tooltips({
  314. tip_follows_cursor:true,
  315. tip_delay_time:30,
  316. tip_fade_speed:300,
  317. attribute:"title"
  318. });
  319. });
  320. })(jQuery);
  321. </script>
  322.  
  323.         <!--         tooltips        -->
  324.        
  325. <body>
  326. <div class="container">
  327.  
  328. <div class="sidebar">
  329.     <div class="simage"> <!--   round sidebar icon  -->
  330.     <a href="/"><img src="SIDEBAR IMAGE URL"/></a>
  331.     </div>
  332.    
  333.     <div class="sidetext">
  334.     <div class="title">characters</div>
  335.    
  336.     <div id="smaller-border"></div>
  337.    
  338.     <div class="links">
  339.         <a href="/">home</a>
  340.         <a href="/ask">ask</a>
  341.         <a href="/">link 3</a>
  342.     </div>
  343.     </div>
  344.    
  345.    <div class="desc">here goes a description if you want it. if not, delete the div</div>
  346. </div>
  347.  
  348.  
  349. <!---               start  boxes                 --->
  350.  
  351.  
  352.  
  353. <!--    START BOX   -->
  354. <div class="box">
  355.  
  356. <!--        principal sideimage       -->
  357. <a href="/tagged/CHAR TAG"><img src="IMAGE URL"/></a>
  358.  
  359. <!--        header icon      -->
  360. <div class="side">
  361. <a href="/tagged/CHAR TAG"><img src="ICON IMAGE URL"/></a>
  362.  
  363. <!--        header       -->
  364. <div class="head">
  365. <span class="headline"><a href="/tagged/CHAR TAG">char name</a></span><br>
  366. <span class="headsubline"> info | info</span>
  367. </div>
  368.  
  369. <!--        hover dropdown links       -->    
  370. <div class="dropdown">
  371.     <span><i class="material-icons" style="color:#ddd">more_horiz</i></span>
  372.     <div class="dropdown-content">
  373.     <div class="droplinks">
  374.     <li><a href="/">LINK 1</a></li>
  375.     <li><a href="/">LINK 2</a></li>
  376.     <li><a href="/">LINK 3</a></li>
  377.     </div>
  378.     </div>
  379. </div>
  380.  
  381. <div id="smaller-border2"></div>
  382.  
  383. <!--    info     /// don't write the first and last lines between <p> </p> or you'll create an extra line break ///          -->
  384. <div class="info">
  385.     <span class="line">line title</span> info
  386.     <p><span class="line">line title</span> info</p>
  387.     <p><span class="line">line title</span> info</p>
  388.     <p><span class="line">line title</span> info</p>
  389.     <p><span class="line">line title</span> info</p>
  390.     <span class="line">line title</span> info
  391. </div>
  392. </div>
  393. </div>
  394. <!--    END BOX   -->
  395.  
  396.  
  397.  
  398.  
  399. <!--    START BOX   -->
  400. <div class="box">
  401.  
  402. <!--        principal sideimage       -->
  403. <a href="/tagged/CHAR TAG"><img src="IMAGE URL"/></a>
  404.  
  405. <!--        header icon      -->
  406. <div class="side">
  407. <a href="/tagged/CHAR TAG"><img src="ICON IMAGE URL"/></a>
  408.  
  409. <!--        header       -->
  410. <div class="head">
  411. <span class="headline"><a href="/tagged/CHAR TAG">char name</a></span><br>
  412. <span class="headsubline"> info | info</span>
  413. </div>
  414.  
  415. <!--        hover dropdown links       -->    
  416. <div class="dropdown">
  417.     <span><i class="material-icons" style="color:#ddd">more_horiz</i></span>
  418.     <div class="dropdown-content">
  419.     <div class="droplinks">
  420.     <li><a href="/">LINK 1</a></li>
  421.     <li><a href="/">LINK 2</a></li>
  422.     <li><a href="/">LINK 3</a></li>
  423.     </div>
  424.     </div>
  425. </div>
  426.  
  427. <div id="smaller-border2"></div>
  428.  
  429. <!--    info     /// don't write the first and last lines between <p> </p> or you'll create an extra breakline ///          -->
  430. <div class="info">
  431.     <span class="line">line title</span> info
  432.     <p><span class="line">line title</span> info</p>
  433.     <p><span class="line">line title</span> info</p>
  434.     <p><span class="line">line title</span> info</p>
  435.     <p><span class="line">line title</span> info</p>
  436.     <span class="line">line title</span> info
  437. </div>
  438. </div>
  439. </div>
  440. <!--    END BOX   -->
  441.  
  442.  
  443.  
  444.  
  445. <!--    START BOX   -->
  446. <div class="box">
  447.  
  448. <!--        principal sideimage       -->
  449. <a href="/tagged/CHAR TAG"><img src="IMAGE URL"/></a>
  450.  
  451. <!--        header icon      -->
  452. <div class="side">
  453. <a href="/tagged/CHAR TAG"><img src="ICON IMAGE URL"/></a>
  454.  
  455. <!--        header       -->
  456. <div class="head">
  457. <span class="headline"><a href="/tagged/CHAR TAG">char name</a></span><br>
  458. <span class="headsubline"> info | info</span>
  459. </div>
  460.  
  461. <!--        hover dropdown links       -->    
  462. <div class="dropdown">
  463.     <span><i class="material-icons" style="color:#ddd">more_horiz</i></span>
  464.     <div class="dropdown-content">
  465.     <div class="droplinks">
  466.     <li><a href="/">LINK 1</a></li>
  467.     <li><a href="/">LINK 2</a></li>
  468.     <li><a href="/">LINK 3</a></li>
  469.     </div>
  470.     </div>
  471. </div>
  472.  
  473. <div id="smaller-border2"></div>
  474.  
  475. <!--    info     /// don't write the first and last lines between <p> </p> or you'll create an extra breakline ///          -->
  476. <div class="info">
  477.     <span class="line">line title</span> info
  478.     <p><span class="line">line title</span> info</p>
  479.     <p><span class="line">line title</span> info</p>
  480.     <p><span class="line">line title</span> info</p>
  481.     <p><span class="line">line title</span> info</p>
  482.     <span class="line">line title</span> info
  483. </div>
  484. </div>
  485. </div>
  486. <!--    END BOX   -->
  487.  
  488.  
  489.  
  490.  
  491.  
  492. <!---               end  boxes                 --->
  493.  
  494. </div>
  495. <!--    dont touch pls <3   -->
  496. <div class="credit"><a href="http://southcodes.tumblr.com" title="southcodes">×</a>
  497. </div>
  498. </body>
  499. </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!