API tools faq
paste
Advertisement
emilyowl

theme #1: vita [SIDEBAR]

emilyowl
Feb 27th, 2014
529
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.34 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4.  
  5. <!--
  6.  
  7. © KRASIVAYAS (@ALLISONARGENS)
  8.  
  9. theme #1: V I T A
  10. (sidebar version)
  11.  
  12. rules:
  13. don't move, delete, or edit the credit
  14. don't use my theme as a base code
  15. don't steal parts of my code
  16. don't steal my themes or claim them as your own
  17.  
  18. -->
  19.  
  20.  
  21. <title>{Title}</title>
  22.  
  23. <link rel="shortcut icon" href="{Favicon}">
  24. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  25. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  26.  
  27. <!--Default Variables-->
  28.  
  29. <meta name="image:Sidebar Image" content=""/>
  30.  
  31. <meta name="color:background" content="#ffffff"/>
  32. <meta name="color:text" content="#aaaaaa"/>
  33. <meta name="color:link" content="#000000"/>
  34. <meta name="color:blogtitle" content="#2f2b2b"/>
  35. <meta name="color:texttitle" content="#4f4d4d"/>
  36. <meta name="color:colorhoverlink" content="#feee02"/>
  37. <meta name="color:scrollbar" content="#cecece"/>
  38.  
  39.  
  40. <meta name="color:link1" content="#594f4f"/>
  41. <meta name="color:link2" content="#547980"/>
  42. <meta name="color:link3" content="#45ada8"/>
  43. <meta name="color:link4" content="#9de0ad"/>
  44. <meta name="color:link5" content="#e5fcc2"/>
  45.  
  46. <meta name="text:link1 url" content=""/>
  47. <meta name="text:link2 url" content=""/>
  48. <meta name="text:link3 url" content=""/>
  49. <meta name="text:link4 url" content=""/>
  50. <meta name="text:link5 url" content=""/>
  51.  
  52. <meta name="text:link1" content=""/>
  53. <meta name="text:link2" content=""/>
  54. <meta name="text:link3" content=""/>
  55. <meta name="text:link4" content=""/>
  56. <meta name="text:link5" content=""/>
  57.  
  58.  
  59.  
  60. <meta name="if:500px" content="1"/>
  61. <meta name="if:400px" content="0"/>
  62.  
  63. <meta name="if:underlinehover" content="1"/>
  64. <meta name="if:colorhover" content="0"/>
  65.  
  66.  
  67. <!-- jquery for tooltips-->
  68.  
  69.  
  70. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  71.  
  72. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  73.  
  74. <script>
  75.  
  76. (function($){
  77.  
  78. $(document).ready(function(){
  79.  
  80. $("a[title]").style_my_tooltips({
  81.  
  82. tip_follows_cursor:true,
  83.  
  84. tip_delay_time:30,
  85.  
  86. tip_fade_speed:300,
  87.  
  88. attribute:"title"
  89.  
  90. });
  91.  
  92. });
  93.  
  94. })(jQuery);
  95.  
  96. </script>
  97.  
  98.  
  99.  
  100.  
  101.  
  102.  
  103. <!--CSS customization here. -->
  104.  
  105. <style type="text/css">
  106.  
  107.  
  108. #s-m-t-tooltip{
  109. position:absolute;
  110. padding:1px;
  111. margin-top:15px;
  112. margin-left:15px;
  113. z-index:9999;
  114. background:{color:background};
  115. }
  116.  
  117.  
  118.  
  119.  
  120.  
  121. ::-webkit-scrollbar{
  122. height: 5px;
  123. width: 9px;
  124. -webkit-border-radius: 0px;
  125. background-color:{color:background}
  126. }
  127.  
  128. ::-webkit-scrollbar-thumb{
  129. background-color:{color:scrollbar};
  130. }
  131.  
  132. ::-webkit-scrollbar-track{
  133. background-color:{color:background};
  134. }
  135.  
  136.  
  137.  
  138.  
  139.  
  140. /*basics*/
  141. blockquote {
  142. padding:5px 0 5px 30px;
  143. border-left:1px solid {color:text};
  144. margin-left:30px;
  145. }
  146.  
  147. body {
  148. background:{color:background};
  149. color:{color:text};
  150. font-family:arial;
  151. font-size:11px;
  152. text-align:justify;
  153. margin:0;
  154. line-height:16px;
  155. }
  156.  
  157. a {
  158. color:{color:link};
  159. text-decoration:none;
  160. }
  161.  
  162. a:hover {
  163. {block:ifunderlinehover}
  164. text-decoration:underline;
  165. {/block:ifunderlinehover}
  166.  
  167. {block:ifcolorhover}
  168. text-shadow:2px 1px {color:colorhoverlink};
  169. {/block:ifcolorhover}
  170. }
  171.  
  172. img{
  173. opacity:1;
  174. border:none;
  175. text-decoration:none
  176. }
  177.  
  178. small {
  179. font-size:9px;
  180. }
  181.  
  182. big {
  183. font-size:12px;
  184. }
  185.  
  186.  
  187. #title {
  188. font-size:13px;
  189. line-height:18px;
  190. font-weight:bold;
  191. margin-bottom:10px;
  192. text-transform:uppercase;
  193. text-align:left;
  194. color:{color:texttitle};
  195. }
  196.  
  197.  
  198.  
  199.  
  200.  
  201. /*sidebar*/
  202. #sidebar {
  203. text-align:right;
  204. position:fixed;
  205. margin-left:-225px;
  206. margin-top:250px;
  207. width:200px;
  208. }
  209.  
  210. #sidebarim {
  211. margin-bottom:-18px
  212. }
  213.  
  214. #sidebarim img {
  215. width:200px
  216. }
  217.  
  218. #blogtitle {
  219. font-size:43px;
  220. font-weight:bold;
  221. line-height:85%;
  222. margin-bottom:5px;
  223. color:{color:blogtitle};
  224. }
  225.  
  226. #blogtitle a {
  227. text-decoration:none;
  228. text-shadow:none;
  229. }
  230.  
  231. #links {
  232. line-height:16px;
  233. text-transform:lowercase;
  234. font-size:12px;
  235. font-weight:bold;
  236. }
  237.  
  238. #links a {
  239. margin-right:5px;
  240. display:inline-block;
  241. margin-bottom:5px;
  242. }
  243.  
  244. #description {
  245. margin:20px 0;
  246. }
  247.  
  248.  
  249.  
  250.  
  251.  
  252.  
  253. /*pagination*/
  254. #pagination {
  255. margin:20px 0;
  256. text-transform:lowercase;
  257. font-size:13px;
  258. text-align:right;
  259. }
  260.  
  261. #pagination a {
  262. padding:0 5px;
  263. }
  264.  
  265.  
  266.  
  267.  
  268.  
  269.  
  270.  
  271. /*container*/
  272. #con {
  273. left:50%;
  274. margin-left:-250px;
  275. position:absolute;
  276. }
  277.  
  278.  
  279.  
  280.  
  281.  
  282. /*rightlinks*/
  283. .side1 a {
  284. text-decoration:none;
  285. text-shadow:none;
  286. }
  287.  
  288. .side11 {
  289. display:block;
  290. padding:5px;
  291. background-color:{color:link1};
  292. color:transparent;
  293. height:70px;
  294. width:13px;
  295. float:left;
  296. margin: 5px 0 20px 0;
  297. text-align: center;
  298. font-size: 8px;
  299. padding: 1px;
  300. line-height: 10px;
  301. margin-top:-350px;
  302. -webkit-transition: all 0.7s ease;
  303. -moz-transition: all 0.7s ease;
  304. -o-transition: all 0.7s ease;
  305. -ms-transition: all 0.7s ease;
  306. transition: all 0.7s ease;
  307.  
  308. {block:if500px}
  309. margin-left:750px;
  310. {/block:if500px}
  311.  
  312. {block:if400px}
  313. margin-left:650px;
  314. {/block:if400px}
  315. }
  316.  
  317. .side11:hover {
  318. color:{color:link};
  319. background-color:#ffffff;
  320. }
  321.  
  322. .side12 {
  323. display:block;
  324. padding:5px;
  325. background-color:{color:link2};
  326. color:transparent;
  327. height:70px;
  328. width:13px;
  329. float:left;
  330. margin: 5px 0 20px 0;
  331. text-align: center;
  332. font-size: 8px;
  333. padding: 1px;
  334. line-height: 10px;
  335. margin-top:-280px;
  336. -webkit-transition: all 0.7s ease;
  337. -moz-transition: all 0.7s ease;
  338. -o-transition: all 0.7s ease;
  339. -ms-transition: all 0.7s ease;
  340. transition: all 0.7s ease;
  341.  
  342. {block:if500px}
  343. margin-left:750px;
  344. {/block:if500px}
  345.  
  346. {block:if400px}
  347. margin-left:650px;
  348. {/block:if400px}
  349. }
  350.  
  351. .side12:hover {
  352. color:{color:link};
  353. background-color:#ffffff;
  354. }
  355.  
  356. .side13 {
  357. display:block;
  358. padding:5px;
  359. background-color:{color:link3};
  360. color:transparent;
  361. height:70px;
  362. width:13px;
  363. float:left;
  364. margin: 5px 0 20px 0;
  365. text-align: center;
  366. font-size: 8px;
  367. padding: 1px;
  368. line-height: 10px;
  369. margin-top:-210px;
  370. -webkit-transition: all 0.7s ease;
  371. -moz-transition: all 0.7s ease;
  372. -o-transition: all 0.7s ease;
  373. -ms-transition: all 0.7s ease;
  374. transition: all 0.7s ease;
  375.  
  376. {block:if500px}
  377. margin-left:750px;
  378. {/block:if500px}
  379.  
  380. {block:if400px}
  381. margin-left:650px;
  382. {/block:if400px}
  383. }
  384.  
  385. .side13:hover {
  386. color:{color:Link};
  387. background-color:#ffffff;
  388. }
  389.  
  390. .side14 {
  391. display:block;
  392. padding:5px;
  393. background-color:{color:link4};
  394. color:transparent;
  395. height:70px;
  396. width:13px;
  397. float:left;
  398. margin: 5px 0 20px 0;
  399. text-align: center;
  400. font-size: 8px;
  401. padding: 1px;
  402. line-height: 10px;
  403. margin-top:-140px;
  404. -webkit-transition: all 0.7s ease;
  405. -moz-transition: all 0.7s ease;
  406. -o-transition: all 0.7s ease;
  407. -ms-transition: all 0.7s ease;
  408. transition: all 0.7s ease;
  409.  
  410. {block:if500px}
  411. margin-left:750px;
  412. {/block:if500px}
  413.  
  414. {block:if400px}
  415. margin-left:650px;
  416. {/block:if400px}
  417. }
  418.  
  419. .side14:hover {
  420. color:{color:link};
  421. background-color:#ffffff;
  422. }
  423.  
  424. .side15 {
  425. display:block;
  426. padding:5px;
  427. background-color:{color:link5};
  428. color:transparent;
  429. height:70px;
  430. width:13px;
  431. float:left;
  432. margin: 5px 0 20px 0;
  433. text-align: center;
  434. font-size: 8px;
  435. padding: 1px;
  436. line-height: 10px;
  437. margin-top:-70px;
  438. -webkit-transition: all 0.7s ease;
  439. -moz-transition: all 0.7s ease;
  440. -o-transition: all 0.7s ease;
  441. -ms-transition: all 0.7s ease;
  442. transition: all 0.7s ease;
  443.  
  444. {block:if500px}
  445. margin-left:750px;
  446. {/block:if500px}
  447.  
  448. {block:if400px}
  449. margin-left:650px;
  450. {/block:if400px}
  451. }
  452.  
  453. .side15:hover {
  454. color:{color:link};
  455. background-color:#ffffff;
  456. }
  457.  
  458.  
  459.  
  460.  
  461. /*posts*/
  462. #entries {
  463. margin-top:55px;
  464.  
  465. {block:if500px}
  466. width:500px;
  467. {/block:if500px}
  468.  
  469. {block:if400px}
  470. width:400px;
  471. {/block:if400px}
  472. }
  473.  
  474.  
  475.  
  476. #posts {
  477. {block:IndexPage}
  478. margin-bottom:100px;
  479. {/block:IndexPage}
  480. {block:PermalinkPage}
  481. margin-bottom:50px;
  482. {/block:PermalinkPage}
  483.  
  484. {block:if500px}
  485. width:500px;
  486. {/block:if500px}
  487.  
  488. {block:if400px}
  489. width:400px;
  490. {/block:if400px}
  491. }
  492.  
  493. #posts img {
  494. {block:if500px}
  495. max-width:500px;
  496. {/block:if500px}
  497.  
  498. {block:if400px}
  499. max-width:400px;
  500. {/block:if400px}
  501. }
  502.  
  503. #posts img, #posts li, #posts blockquote {
  504. max-width: 100%;
  505. }
  506.  
  507. .caption {
  508. width:100%;
  509. margin-top:10px;
  510. }
  511.  
  512.  
  513.  
  514.  
  515. /*quote*/
  516. #titlequote{
  517. text-align:right;
  518. font-size:16px;
  519. line-height:18px;
  520. font-weight:bold;
  521. }
  522.  
  523. #source {
  524. margin-top:15px;
  525. margin-left:15px;
  526. }
  527.  
  528.  
  529.  
  530.  
  531. /*audio*/
  532. .player {
  533. width:25px;
  534. height:25px;
  535. overflow:hidden;
  536. position:absolute;
  537. background:white;
  538. }
  539.  
  540. .audioinfo {
  541. margin-left:50px;
  542. text-transform:uppercase;
  543. letter-spacing:3px;
  544. text-align:right;
  545. }
  546.  
  547.  
  548.  
  549.  
  550. /*asks*/
  551. .q {
  552. margin-bottom:10px;
  553. height: auto;
  554. background-color: #f2f2f2;
  555. padding: 10px;
  556. }
  557.  
  558. .as {
  559. font-weight:bold;
  560. font-size:16px;
  561. margin-bottom:3px;
  562. text-transform:lowercase;
  563. }
  564.  
  565. .a {
  566. margin-top:10px;
  567. }
  568.  
  569. #asktitle {
  570. font-size:13px;
  571. line-height:18px;
  572. font-weight:bold;
  573. margin-bottom:10px;
  574. text-transform:uppercase;
  575. color:#ffffff;
  576. }
  577.  
  578.  
  579. /*chat*/
  580. .chat ol {
  581. padding:0;
  582. list-style:none;
  583. }
  584.  
  585. .line {
  586. padding:4px 0;
  587. }
  588.  
  589. .label {
  590. font-weight:bold;
  591. color:{color:link};
  592. }
  593.  
  594.  
  595.  
  596.  
  597. /*permalink and notes*/
  598. #permalink {
  599. margin-top:5px;
  600. font-size:9px;
  601. text-transform:uppercase;
  602. }
  603.  
  604. #permalink a {
  605. margin-right:10px;
  606. }
  607.  
  608. .viasource {
  609. float:right;
  610. margin-right:-5px;
  611. }
  612.  
  613. .tags {
  614. word-break:normal;
  615. font-size:9px;
  616. margin-top:-3px;
  617. text-transform:none;
  618. text-align:left;
  619.  
  620. {block:if500px}
  621. max-width:500px;
  622. {/block:if500px}
  623.  
  624. {block:if400px}
  625. max-width:400px;
  626. {/block:if400px}
  627. }
  628.  
  629. .pagenotes {
  630. {block:IndexPage}
  631. display: none!important;
  632. {/block:IndexPage}
  633. width:400px;
  634. text-align:left;
  635. }
  636.  
  637. .pagenotes img {
  638. display:none!important;
  639. }
  640.  
  641. .pagenotes li {
  642. list-style-type:none;
  643. padding:5px 0px;
  644. text-align:left;
  645. margin:0 0 0 -40px;
  646. }
  647.  
  648.  
  649.  
  650. /*credit*/
  651. #credit {
  652. font-size:8px;
  653. letter-spacing:1px;
  654. bottom:8px;
  655. right:8px;
  656. text-align:right;
  657. position:fixed;
  658. padding:1px 3px 1px 3px;
  659. font-weight:bold;
  660. -webkit-transition: all 0.5s ease;
  661. -moz-transition: all 0.5s ease;
  662. -ms-transition: all 0.5s ease;
  663. -o-transition: all 0.5s ease;
  664. transition: all 0.5s ease;
  665. border: 1px solid white;
  666. }
  667.  
  668. #credit a {
  669. text-decoration:none;
  670. text-shadow:none;
  671. }
  672.  
  673. #credit:hover {
  674. border: 1px solid #454141;
  675. }
  676.  
  677.  
  678.  
  679. {CustomCSS}
  680.  
  681.  
  682.  
  683. </style>
  684.  
  685.  
  686.  
  687. </head>
  688.  
  689. <body>
  690.  
  691. <div id="con">
  692.  
  693. <div id="sidebar">
  694. <div id="blogtitle"><div class="blogtitleclick"><a href="/">{Title}</a></div></div>
  695.  
  696.  
  697. <div id="sidebarim"><img src="{image:Sidebar Image}"></div>
  698.  
  699.  
  700. <div id="description">{Description}</div>
  701.  
  702.  
  703.  
  704. <div id="pagination">
  705. {block:Pagination}
  706. {block:PreviousPage}
  707. <a href="{PreviousPage}">&larr; previous </a>
  708. {/block:PreviousPage}
  709.  
  710.  
  711. {block:NextPage}
  712. <a href="{NextPage}">next &rarr;</a>
  713. {/block:NextPage}
  714. {/block:Pagination}
  715. </div>
  716.  
  717.  
  718.  
  719. <div class="side1">
  720. <a class="side11" title="{text:link1}" href="{text:link1 url}">I.</a>
  721. <a class="side12" title="{text:link2}" href="{text:link2 url}">II.</a>
  722. <a class="side13" title="{text:link3}" href="{text:link3 url}">III.</a>
  723. <a class="side14" title="{text:link4}" href="{text:link4 url}">IV.</a>
  724. <a class="side15" title="{text:link5}" href="{text:link5 url}">V.</a>
  725. </div>
  726.  
  727. </div>
  728.  
  729.  
  730.  
  731.  
  732. <div id="entries">
  733.  
  734. {block:Posts}
  735. <div id="posts">
  736.  
  737.  
  738. {block:Quote}
  739.  
  740.  
  741. <div id="titlequote">“{Quote}”</div>
  742. {block:Source}<div id="source">&mdash; {Source}</div>{/block:Source}
  743. {/block:Quote}
  744.  
  745.  
  746.  
  747. {block:Text}
  748.  
  749. {block:Title}
  750. <div id="title">{Title}</div>{/block:Title}
  751. {Body}
  752. {/block:Text}
  753.  
  754. {block:Link}
  755. <div id="title"><a href="{URL}">{Name}</a></div>{block:Description}{Description}{/block:Description}
  756. {/block:Link}
  757.  
  758. {block:Chat}
  759. {block:Title}
  760. <h1>{Title}</h1>
  761. {/block:Title}
  762. <div class="chat">
  763. <ol>{block:Lines}
  764. <li class="line {Alt}">
  765. {block:Label}
  766. <span class="label">
  767. {Label}</span>
  768. {/block:Label}{Line}</li>
  769. {/block:Lines}
  770. </ol></div>
  771. {/block:Chat}
  772.  
  773. {block:Photo}
  774. {LinkOpenTag}
  775. {block:if500px}
  776. <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  777. {/block:if500px}
  778.  
  779. {block:if400px}
  780. <img src="{PhotoURL-400}" alt="{PhotoAlt}"/>
  781. {/block:if400px}
  782. {LinkCloseTag}
  783. {/block:Photo}
  784.  
  785. {block:Photoset}
  786. {block:if500px}
  787. {Photoset-500}
  788. {/block:if500px}
  789.  
  790. {block:if400px}
  791. {Photoset-400}
  792. {/block:if400px}
  793. {/block:Photoset}
  794.  
  795. {block:Video}
  796. {block:if500px}
  797. {Video-500}
  798. {/block:if500px}
  799.  
  800. {block:if400px}
  801. {Video-400}
  802. {/block:if400px}
  803. {/block:Video}
  804.  
  805. {block:Audio}
  806. <div class="player">{AudioPlayerWhite}</div>
  807. <div class="audioinfo">
  808. {block:TrackName}{TrackName}{/block:TrackName}{block:Artist}<br>{Artist}{/block:Artist}
  809. </div>
  810. {/block:Audio}
  811.  
  812. {block:Answer}
  813. <div class="q">
  814. <div class="as">{Asker} said: </div>
  815. {Question}</div>
  816. <div class="a">{Answer}</div>
  817. {/block:Answer}
  818.  
  819. {block:Caption}<div class="caption">{Caption}</div>{/block:Caption}
  820.  
  821. {block:Date}
  822. <div id="permalink">
  823. <a href="{Permalink}" >{ShortMonth} {DayofMonth} // {12Hour}:{Minutes} {AmPm}</a>{block:NoteCount}<a href="{Permalink}">+ {NoteCount}</a>{/block:NoteCount}
  824.  
  825. {block:RebloggedFrom}<div class="viasource"><a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>{block:ContentSource}<a href="{ReblogRootURL}" title="{ReblogRootName}">source</a>{/block:ContentSource}</div>{/block:RebloggedFrom}
  826.  
  827. {block:HasTags}<div class="tags">{block:Tags}<a href="{TagUrl}">#{Tag}</a>{/block:Tags}</div>{/block:HasTags}
  828. </div>
  829. {/block:Date}
  830.  
  831. </div>
  832.  
  833.  
  834. {block:PostNotes}
  835. <div class="pagenotes">
  836. {PostNotes}
  837. </div>
  838. {/block:PostNotes}
  839.  
  840.  
  841. {/block:Posts}
  842.  
  843.  
  844.  
  845.  
  846.  
  847.  
  848. </div>
  849.  
  850. </div>
  851.  
  852.  
  853. {block:ContentSource}
  854. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  855. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  856. {/block:SourceLogo}
  857. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  858. {/block:ContentSource}
  859.  
  860.  
  861. <div id="credit"><a href="http://krasivayas.tumblr.com">ET</a> </div>
  862.  
  863.  
  864. </body> </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!