API tools faq
paste
darianella

"It's Lonely" tumblr theme HTML code

darianella
Aug 14th, 2012
1,067
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 15.10 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <!--INFORMATION:
  5.        ~resizing left sidebar image
  6.        ~standalone sidebar image
  7.        ~show/hide descriptions
  8.        ~six custom links
  9.        ~DO NOT steal any bit of this, please
  10.        ~DO NOT remove theme source
  11.        ~Ten links are allowed
  12.        ~NO IFRINGEMENT or CODE THEFT intended! ALL RESEMBLENCE IS PURELY COINCIDENTAL.
  13.        ~like the main post if you use, please! I want to see!
  14.    love, Darian-->
  15.  
  16.  
  17. <link href='http://fonts.googleapis.com/css?family=Sunshiney' rel='stylesheet' type='text/css'>
  18.  
  19. <link href='http://fonts.googleapis.com/css?family=Loved+by+the+King' rel='stylesheet' type='text/css'>
  20.  
  21. <head><title>{Title}</title>
  22. <link rel="shortcut icon" href="{Favicon}">
  23. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  24. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  25.  
  26. <meta name="color:title" content="#ffffff" />
  27.     <meta name="color:background" content="#ffffff" />
  28.     <meta name="color:scrollbar" content="#ff0000" />
  29.     <meta name="color:post" content="#ffffff" />
  30.     <meta name="color:text" content="#000000" />
  31.     <meta name="color:textlink" content="#ff0000" />
  32.     <meta name="color:hover" content="#ffffff" />
  33.     <meta name="color:navlink" content="#ff0000" />
  34.     <meta name="color:customlink" content="#ff0000" />
  35.     <meta name="color:bold" content="#000000" />
  36.     <meta name="color:italic" content="#ff0000" />
  37.     <meta name="color:sidebar" content="#000000" />
  38.     <meta name="color:sidebar2" content="#ff0000" />
  39.     <meta name="color:descriptionback" content="#ffffff" />
  40.     <meta name="color:permalink" content="#ff0000" />
  41.     <meta name="color:quote" content="#000000" />
  42.    
  43.     <meta name="image:sidebar" content=""/>
  44.     <meta name="image:background" content=""/>
  45.     <meta name="image:sidebar2" content="" />
  46.    
  47.     <meta name="if:show descriptions" content="0"/>
  48.    
  49.     <meta name="text:Link1" content="" />
  50.     <meta name="text:Link1 URL" content="/"/>
  51.     <meta name="text:Link2" content="" />
  52.     <meta name="text:Link2 URL" content="/"/>
  53.     <meta name="text:Link3" content="" />
  54.     <meta name="text:Link3 URL" content="/"/>
  55.     <meta name="text:Link4" content="" />
  56.     <meta name="text:Link4 URL" content="/"/>
  57.     <meta name="text:Link5" content="" />
  58.     <meta name="text:Link5 URL" content="/"/>
  59.     <meta name="text:Link6" content="" />
  60.     <meta name="text:Link6 URL" content="/"/>
  61.  
  62. <style type="text/css">
  63.  
  64. @font-face{
  65.     font-family: 'Sunshiney', cursive;
  66. }
  67.  
  68. /*basics*/
  69.  
  70.  
  71. iframe{
  72.     opacity: 1;
  73.     filter:alpha(opacity=100);
  74.     -moz-opacity: 1;
  75.     -khtml-opacity: 1;
  76. }
  77.  
  78. body {
  79.     background-image:url('{image:background}');
  80.     background-attachment: fixed;
  81.     background-repeat: repeat;
  82.     background-color: {color:background};
  83.     margin-top:0px;
  84.     font-family:verdana;
  85.     font-size:10px;
  86. }
  87.  
  88. ::-webkit-scrollbar {
  89. width: 4px;
  90. height: 4px;
  91. }
  92.  
  93. ::-webkit-scrollbar-thumb {
  94. background-color: #000000;
  95. -webkit-border-radius: 1ex;
  96. background: {color:scrollbar};
  97. }
  98.  
  99. p{
  100.     font-family: verdana;
  101.     font-size: 10px;
  102.     color:{color:text};
  103.     padding: 10px;
  104. }
  105.  
  106. p strong {
  107.     color:{color:bold}
  108. }
  109.  
  110. p em {
  111.     color:{color:italic}
  112. }
  113.  
  114. a {
  115.     color:{color:textlink};
  116.     text-decoration:none;
  117.     -webkit-transition: all 0.5s linear;
  118.     -moz-transition: all 0.5s linear;
  119.     -o-transition: all 0.5s linear;
  120. }
  121.  
  122. a:hover {
  123.     color:{color:hover};
  124.     font-weight:bold;
  125. }
  126.  
  127. img{
  128.     border:none;
  129. }
  130.  
  131. ul {
  132.     font-size: 9px;
  133.     font-family:verdana;
  134.     color:{color:text};
  135.     margin-right:30px
  136. }
  137.  
  138. blockquote {
  139.     font-size: 9px;
  140.     font-family:verdana;
  141.     color:{color:text};
  142.     margin-right:45px
  143. }
  144.  
  145. blockquote blockquote{
  146.     padding-left:7px;
  147.     border-left:1.5px dotted #C7C7C7;
  148. }
  149.  
  150. h1 {
  151.     font-family: 'Sunshiney', cursive;
  152.     font-size:25pt;
  153.     position: fixed;
  154.     color: {color:title};
  155. }
  156.  
  157. pre{
  158.     font-size:8px;
  159.     max-width:480px;
  160.     overflow:auto;
  161.     background-color:#bcbbbb;
  162.     padding:5px;
  163. }
  164.  
  165. /*sidebar one*/
  166. #bar{
  167.     position:fixed;
  168.     width:7px;
  169.     height:400px;
  170.     margin-left:200px;
  171.     background-color:{color:sidebar};
  172.     top:0;
  173. }
  174.  
  175. .nav {
  176.     display: block;
  177.     width: 150px;
  178.     height: 10px;
  179.     font-family: monospace;
  180.     font-size: 8px;
  181.     text-decoration: none;
  182.     text-transform: lowercase;
  183.     text-align: center;
  184.     letter-spacing: 2px;
  185.     margin-bottom: 2px;
  186.     -webkit-transition: all 0.5s ease-in-out;
  187.     -moz-transition: all 0.5s ease-in-out;
  188.     -o-transition: all 0.5s ease-in-out;
  189.     -ms-transition: all 0.5s ease-in-out;
  190.     transition: all 0.5s ease-in-out;
  191.     background-color:{color:navlink};
  192. }
  193.  
  194. .nav:hover{
  195.     width:200px;
  196. }
  197.  
  198. .nav a:hover {
  199.     opacity:1;
  200.     background-color: {color:hover};
  201. }
  202.  
  203. #nav{
  204.     position:absolute;
  205.     margin-top:300px;
  206.     margin-left:-150px;
  207. }
  208.  
  209. .sideimage {
  210.     position:fixed;
  211.     margin-top:360px;
  212.     margin-left:-100px;
  213.     width: 125px;
  214.     height:125px;
  215.     -webkit-border-radius: 500px;
  216.     border-radius: 500px;
  217.     border-color:none;
  218.     background-color:black;
  219.     background-image:url({image:sidebar});
  220.     -webkit-transition: all 0.6s ease;
  221.     -moz-transition: all 0.6s ease;
  222.     -o-transition: all 0.6s ease;
  223. }
  224.  
  225. .sideimage:hover {
  226.     margin-top:385px;
  227.     -moz-transform: scale(1.3);
  228.     -webkit-transform: scale(1.3);
  229.     -o-transform: scale(1.3);
  230.     transform: scale(1.3);
  231.     -ms-transform: scale(1.3);
  232.     filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
  233.     M11=2, M12=-0, M21=0, M22=2);
  234.     -webkit-transition: all .6s ease-out;
  235.     -moz-transition: all .6s ease-out;
  236.     -o-transition: all .6s ease-out;
  237.     transition: all .6s ease-out;
  238. }
  239.  
  240. #desc{
  241.     width:130px;
  242.     margin-top:10px;
  243.     margin-left:-150px;
  244.     height:auto;
  245.     background-color:{color:descriptionback};
  246.     padding:10px;
  247.     font-family:verdana;
  248.     font-size:9px;
  249.     text-align:justify;
  250.     opacity:0.5;
  251.     -webkit-transition: all .6s ease-out;
  252.     -moz-transition: all .6s ease-out;
  253.     -o-transition: all .6s ease-out;
  254.     transition: all .6s ease-out;
  255. }
  256.  
  257. #desc:hover{
  258.     opacity:0.9;
  259. }
  260.  
  261. /*sidebar two*/
  262. #bar2 {
  263.     position:fixed;
  264.     width:7px;
  265.     height:180px;
  266.     margin-left:200px;
  267.     bottom:0px;
  268.     background-color:{color:sidebar2};
  269. }
  270.  
  271. .custom {
  272.     display: block;
  273.     width: 150px;
  274.     height: 10px;
  275.     font-family: monospace;
  276.     font-size: 8px;
  277.     color: {color:customtext};
  278.     text-decoration: none;
  279.     text-transform: lowercase;
  280.     text-align: center;
  281.     letter-spacing: 2px;
  282.     margin-bottom: 2px;
  283.     -webkit-transition: all 0.5s ease-in-out;
  284.     -moz-transition: all 0.5s ease-in-out;
  285.     -o-transition: all 0.5s ease-in-out;
  286.     -ms-transition: all 0.5s ease-in-out;
  287.     transition: all 0.5s ease-in-out;
  288.     background-color:{color:customlink};
  289. }
  290.  
  291. .custom:hover{
  292.     width:200px;
  293.     margin-left:-35px;
  294. }
  295.  
  296. #custom{
  297.     margin-top:0px;
  298.     margin-left:-150px;
  299. }
  300.  
  301. #pagination{
  302.     position:fixed;
  303.     width: 150px;
  304.     height:20px;
  305.     margin-left:-150px;
  306.     margin-top:40px;
  307.     font-family:verdana;
  308.     font-size: 15px;
  309.     text-align:center;
  310.     background-color:{color:sidebar2};
  311. }
  312.  
  313. /*sideimage*/
  314. #sideimage{
  315.     position:fixed;
  316.     max-width:400px;
  317.     max-height:600px;
  318.     margin-left: 850px;
  319.     bottom:0px;
  320. }
  321.  
  322. #main{
  323.     position:fixed;
  324.     width:300px;
  325.     margin-left:850px;
  326.     margin-top: 80px;
  327.     max-width:300px;
  328.     height:auto;
  329.     padding:10px;
  330.     font-family: 'Loved by the King', cursive;
  331.     font-size: 30px;
  332.     text-align:center;
  333.     color:{color:title};
  334. }
  335.  
  336. /*posts*/
  337.  
  338. #postmargin{
  339.     margin-top:10px;
  340.     margin-left:300px;
  341.     width:600px;
  342. }
  343.  
  344.  
  345. .posts {
  346.     width:500px;
  347.     margin-bottom: 30px;
  348.     background:{color:post};
  349.     -webkit-transition: all 0.7s linear;
  350.     -moz-transition: all 0.7s linear;
  351.     -o-transition: all 0.7s linear;
  352.     opacity:0.8;
  353. }
  354.  
  355. .posts:hover{
  356.     opacity:1;
  357. }
  358.  
  359. #tags {
  360.     width: 512px;
  361.     margin-left: -10px;
  362.     margin-top: 10px;
  363.     margin-bottom: -10px;
  364.     text-transform: lowercase;
  365.     padding: 2px;
  366.     font-size: 8px;
  367.     font-family: verdana;
  368.     padding-left: 6px;
  369.     padding-bottom: 4px;
  370.     letter-spacing: 1px;
  371.     background-color: {color:permalink};
  372.     text-align: left;
  373.     line-height: 10px;
  374. }
  375.  
  376. #quote {
  377.     font-family: 'Sunshiney', cursive;
  378.     font-size:20px;
  379.     color:{color:quote};
  380.     padding-left:20px;
  381.     padding-right:20px;
  382.     padding-top:20px;
  383.     line-height:25px;
  384. }
  385.  
  386.  
  387. #title {
  388.    font-family: 'Sunshiney', cursive;
  389.     font-size:20px;
  390.     color:{color:quote};
  391.     padding-left:20px;
  392.     padding-right:20px;
  393.     padding-top:10px;
  394.     line-height:24px;
  395. }
  396.  
  397. #audioplayer {
  398.     width:30px;
  399.     height:30px;
  400.     overflow:hidden;
  401.     position:absolute;
  402.     margin-top:50px;
  403.     margin-left:45px;
  404.     margin-bottom:45px;
  405.     border-radius:100px;
  406.     z-index:999;
  407. }
  408.  
  409. #musicinfo{
  410.     font-family:verdana;
  411.     color:{color:text};
  412.     font-size:10px;
  413.     margin-top:-80px;
  414.     margin-left:125px;
  415.     border-left:2px solid {color:sidebar};
  416.     padding-left:10px;
  417.     line-height:15px;
  418.     margin-bottom:45px;
  419.     }
  420.  
  421. #musicinfotitles{
  422.     font-style:bold;
  423. }
  424.  
  425. #audiocaption{
  426.     padding-left:10px;
  427.     padding-right:10px;
  428. }
  429.  
  430. #albumart{
  431.     padding-top:10px;
  432.     margin-left:10px;
  433. }
  434.  
  435. #askz {
  436.     padding: 5px;
  437.     margin-left:10px;
  438.     margin-right:10px;
  439.     margin-top:5px;
  440.     padding-bottom: 15px;
  441.     line-height: 140%;
  442.     border-bottom: 1px solid {color:text};
  443.     color:{color:question};
  444. }
  445.  
  446.  
  447. .askicon {
  448.     float: left;
  449.     border: 2px solid {color:sidebar};
  450.     margin-right: 3px;
  451.     margin-left: -5px;
  452. }
  453.  
  454. #answer {
  455.     padding: 4px;
  456.     text-align: left;
  457.     font-family:verdana;
  458.     color:{color:text};
  459.     margin-left:30px;
  460. }
  461.  
  462. #qask{
  463.     padding-top:10px;
  464.     padding-left:10px;
  465.     font-size:11px;
  466.     font-style:italic;
  467. }
  468.  
  469.  
  470. .grayscale {
  471.   -webkit-filter: grayscale(100%);
  472.   -moz-filter: grayscale(100%);
  473.   -ms-filter: grayscale(100%);
  474.   -o-filter: grayscale(100%);
  475.  
  476.  
  477. }
  478.  
  479. .posts:hover .grayscale{
  480.     -webkit-filter: grayscale(0%);
  481.   -moz-filter: grayscale(0%);
  482.   -ms-filter: grayscale(0%);
  483.   -o-filter: grayscale(0%);
  484. }
  485.  
  486. ol.notes{
  487.     max-width:415px;
  488.     padding:0px;
  489.     margin 0px 0px;
  490.     list-style-type:none;
  491.     border-bottom:solid 1px #ccc;
  492.     font-size:8 px;
  493. }
  494.  
  495. ol.notes li.note{
  496.     border-top:1px dotted #cccccc;
  497.     padding:0px;
  498.     font-size:8px;
  499. }
  500.  
  501. ol.notes li.note img{
  502.     padding:0 px !important;
  503. }
  504.  
  505. ol.notes li.note img.avatar{
  506.     vertical-align:-15px;
  507.     margin-right:5px;
  508.     width:16px;
  509.     height:16px;
  510.     border-radius:100px;
  511. }
  512.  
  513. ol.notes li.note a img.avatar{
  514.     padding:0px;
  515.     border-width:0 px;
  516.     border:none;
  517. }
  518.  
  519. ol.notes li.note img{
  520.     padding:0 px;
  521.     border-width:0 px;
  522.     border:none;
  523. }
  524.  
  525. ol.notes li.note span.action{
  526.     font-weight:bold;
  527.     color:gray;
  528. }
  529.  
  530. ol.notes li.note.answer_content{
  531.     font-weight:normal;
  532. }
  533.  
  534. ol.notes li.note.blockquote{
  535.     padding:1 px 1 px;margin:1px 0px 0px 1px;
  536. }
  537.  
  538. ol.notes li.note.blockquote a{
  539.     text-decoration:none;
  540. }
  541.  
  542. {CustomCSS}</style></head><body>
  543.  
  544.  
  545.  
  546. <div id="bar">
  547. <div id="nav">
  548. <a href="/" class="nav">home</a>
  549. <a href="/ask" class="nav">message</a>
  550. <a href="/archive" class="nav">history</a>
  551. <a href="http://redfox-themes.tumblr.com" class="nav">theme</a></div>
  552. <div class="sideimage"></div>
  553. <div id="desc">{description}</div>
  554. </div>
  555.  
  556. <div id="bar2">
  557. <div id="custom">
  558. {block:IfLink1}<a href="{text:Link1 URL}" class="custom">{text:Link1}</a>{/block:IfLink1}
  559. {block:IfLink2}<a href="{text:Link2 URL}" class="custom">{text:Link2}</a>{/block:IfLink2}
  560. {block:IfLink3}<a href="{text:Link3 URL}" class="custom">{text:Link3}</a>{/block:IfLink3}
  561. {block:IfLink4}<a href="{text:Link4 URL}" class="custom">{text:Link4}</a>{/block:IfLink4}
  562. {block:IfLink5}<a href="{text:Link5 URL}" class="custom">{text:Link5}</a>{/block:IfLink5}
  563. {block:IfLink6}<a href="{text:Link6 URL}" class="custom">{text:Link6}</a>{/block:IfLink6}
  564. </div>
  565. {block:Pagination}<div id="pagination">
  566. {block:PreviousPage}<a href="{PreviousPage}">&#171;</a>{/block:PreviousPage}
  567. {block:NextPage}<a href="{NextPage}">&#187;</a>{/block:NextPage}
  568. </div>{/block:Pagination}
  569. </div>
  570.  
  571. <div id="main">{title}</div>
  572. <img src="{image:sidebar2}" id="sideimage"/>
  573.  
  574. <div id="postmargin">{block:Posts}<div class="posts">
  575.  
  576.  
  577. {block:Text}<center><div id="title">{block:Title}{Title}{/block:Title}</div></center>{Body}{/block:Text}
  578.  
  579. {block:Photo}<center>{LinkOpenTag}<img src="{PhotoURL-500}" width="500">{LinkCloseTag}</center>{Block:IfShowDescriptions}{block:Caption}{Caption}{/block:Caption}{/Block:IfShowDescriptions}{/block:Photo}{/Block:IfNotMonochromePosts}
  580.  
  581.  
  582. <div align="center">{block:Photoset}{Photoset-500}{Block:IfShowDescriptions}{block:Caption}{Caption}{/block:Caption}{/Block:IfShowDescriptions}{/block:Photoset}</div>
  583.  
  584. {block:Quote}<div id="quote">{Quote}</div><p align="right">{block:Source}—{Source}{/block:Source}</p>{/block:Quote}
  585.  
  586. {block:Link}<div id="title" align="center"><t><a href="{URL}" {Target}>{Name}</a></t></div>{block:Description}{Description}{/block:Description}{/block:Link}
  587.  
  588. {block:Chat}<div id="title" align="center">{block:Title}<t>{Title}</t>{/block:Title}</div><p>{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}</p>{/block:Chat}
  589.  
  590. {block:Audio}
  591. <div id="audioplayer">{AudioPlayerWhite} </div>      
  592. <div id="albumart">{block:AlbumArt}<img src="{AlbumArtURL}" width="100">{/block:AlbumArt}</div>
  593. <div id="musicinfo">
  594. <b>Song:</b> {block:TrackName}{TrackName}{/block:TrackName}<br/>
  595. <b>Artist:</b> {block:Artist}{Artist}{/block:Artist}<br/>
  596. <b>Album:</b> {block:Album}{Album}{/block:Album}
  597. </div>{Block:IfShowDescriptions}
  598. {block:caption}<div id="audiocaption">{caption}</div>{/block:caption}{/Block:IfShowDescriptions}
  599. {/block:Audio}
  600.  
  601. {block:Video}{Video-500}{Block:IfShowDescriptions}{block:Caption}{Caption}{/block:Caption}{/Block:IfShowDescriptions}{/block:Video}
  602.  
  603. {block:Answer}
  604. <div id="askz"><img src="{AskerPortraitURL-30}" class="askicon"><div id="qask">{Asker} said—</div><br>{Question}</div>
  605. <div id="answer">{Answer}</div>
  606. {/block:Answer}
  607.  
  608. <div id="tags">
  609. {block:Date}Posted: <a href="{Permalink}">{TimeAgo}</a> on {/block:Date}
  610. <a href="{Permalink}">{DayOfMonthWithZero}/{MonthNumber}/{ShortYear}</a> at {12Hour}:{Minutes}{AmPm}
  611. {block:NoteCount}<br>{block:RebloggedFrom}<a href="{ReblogRootURL}">origin</a> ·  <a href="{ReblogParentURL}">via</a>{/block:RebloggedFrom}{/block:NoteCount}
  612. {block:NoteCount}with <a href="{Permalink}"> {NoteCountWithLabel}</a> (<a href="{ReblogURL}">Reblog</a>){/block:NoteCount}
  613. {block:HasTags}<br>Tags: {block:Tags}#<a href="/tagged/{Tag}">{Tag}</a> {/block:Tags}{/block:HasTags}
  614. </div>
  615.  
  616. </div>
  617.  
  618. <div class="notes">{block:PostNotes}<a name="notes">{PostNotes}</a>{/block:PostNotes}</div>
  619.  
  620. {/block:Posts}</div>
  621.  
  622. </body></html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!