Advertisement
nofacesface

Two Hearts 2.0 Theme

May 19th, 2013
737
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.45 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <!--THEME BY NO-FACES-FACE
  5. steal and I'll find you and punch you in the throat (◡‿◡✿)
  6. -->
  7.  
  8. <head>
  9. <meta name="color:Link" content="#000"/>
  10. <meta name="color:Hover" content="#cccccc"/>
  11. <meta name="color:Background" content="#ccc"/>
  12. <meta name="color:description" content="#000" />
  13. <meta name="color:Text" content="#000" />
  14. <meta name="color:Title" content="#000" />
  15. <meta name="color:Border" content="#000" />
  16. <meta name="color:sidebarbg" content="#fafafa" />
  17. <meta name="color:Circle BG" content="#fff" />
  18. <meta name="color:Circle BG" content="#fff" />
  19. <meta name="color:Button" content="#fff">
  20. <meta name="color:Button hover" content="#ccc">
  21.  
  22. <meta name="image:Circle" content="http://static.tumblr.com/cbjpgjf/3mTmn0ufu/3.gif"/>
  23. <meta name="image:Circle2" content="http://static.tumblr.com/cbjpgjf/7FTmn0ugm/4.gif"/>
  24. <meta name="image:sidebar bg" content="http://static.tumblr.com/cbjpgjf/OgLmn1coj/cubes.png"/>
  25. <meta name="image:Background" content="http://static.tumblr.com/cbjpgjf/jvOmn1cp8/use_your_illusion.png" />
  26.  
  27. <meta name="text:link 1 title" content="refresh"/>
  28. <meta name="text:link 2 title" content="message"/>
  29. <meta name="text:link 3 title" content="past"/>
  30. <meta name="text:link 4 title" content="submit"/>
  31. <meta name="text:link 5 title" content="link five"/>
  32.  
  33. <meta name="text:link 1" content="/"/>
  34. <meta name="text:link 2" content="/ask"/>
  35. <meta name="text:link 3" content="/archive"/>
  36. <meta name="text:link 4" content="/submit"/>
  37. <meta name="text:link 5" content="/"/>
  38.  
  39. <meta name="if:Caption" content="0"/>
  40.  
  41. <title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}</title> {block:Description}<meta name="description"
  42. content="{MetaDescription}" />{/block:Description}
  43. <link rel="shortcut icon" href="{Favicon}">
  44.  
  45.  
  46. <script language="JavaScript" src="http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js" type="text/JavaScript"></script>
  47.  
  48. <style>
  49. div#qTip {
  50. padding-bottom: 8px;
  51. padding-right: 4px;
  52. padding-top: 4px;
  53. padding-left: 4px;
  54. display: none;
  55. text-align: center;
  56. position: absolute;
  57. font-size:16px;
  58. line-height:10px;
  59. font-family:bamq;
  60. z-index: 1000;
  61. border: 1px solid #fff;
  62. background-color:#000;
  63. color: #fff;
  64. text-transform:uppercase;
  65. letter-spacing: 2px;
  66. }
  67. </style>
  68.  
  69.  
  70. <style type="text/css">
  71.  
  72.  
  73. ::-webkit-scrollbar {width: 5px;height:5px;background:#ffffff;}
  74. ::-webkit-scrollbar-thumb {background:{color:Hover};}
  75.  
  76.  
  77.  
  78. /* GENERAL */
  79.  
  80.  
  81. @font-face {
  82. font-family: "bamq";
  83. src: url('http://static.tumblr.com/cbjpgjf/qismn186w/vetka.otf');
  84. }
  85.  
  86. @font-face {
  87. font-family: "q4";
  88. src: url('http://fonts.googleapis.com/css?family=Quattrocento:400');
  89. }
  90.  
  91. body{
  92. margin:0px;
  93. font-family: q4;
  94. font-size: 12px;
  95. line-height: 12px;
  96. color: {color:text};
  97. }
  98.  
  99.  
  100.  
  101. body {
  102. background-color: {color:Background};
  103.  
  104. background-image: url({image:Background});
  105. margin: 0;
  106. word-wrap: break-word;
  107. background-attachment: fixed;
  108.  
  109. }
  110.  
  111.  
  112. a:link, a:active, a:visited{text-decoration: none;color: {color:Link};
  113. -webkit-transition: all 0.7s ease;transition: all 0.7s ease;
  114. -moz-transition: all 0.7s ease;-o-transition: all 0.7s ease;}
  115.  
  116. a:hover{color:{color:Hover};}
  117.  
  118. /* POSTS */
  119.  
  120. #center{margin:auto;position:relative;width:400px;}
  121. #content{width:500px;margin:0px -150px;
  122. }
  123. #entry{margin:50px;width:400px;padding: 8px;
  124. opacity: 0.7px;
  125. -webkit-transition: opacity 0.6s linear;
  126. -webkit-transition: all 0.6s ease-in-out;
  127. -moz-transition: all 0.6s ease-in-out;
  128. -o-transition: all 0.6s ease-in-out;
  129. }
  130. #entry {
  131.  
  132. opacity: 1;
  133.  
  134. -webkit-filter:grayscale(100%);}
  135.  
  136. #entry:hover {
  137.  
  138. opacity: 1;
  139.  
  140. -webkit-filter:none;
  141.  
  142. -webkit-transition: opacity 0.6s linear;
  143.  
  144. -webkit-transition: all 0.6s ease-in-out;
  145.  
  146. -moz-transition: all 0.6s ease-in-out;
  147.  
  148. -o-transition: all 0.6s ease-in-out;
  149.  
  150. }
  151.  
  152.  
  153.  
  154. /* SIDEBAR */
  155.  
  156. #sidebar {
  157. float: right;
  158. width:260px;
  159. height: 120%;
  160. position:fixed;
  161. margin-left:-400px;
  162. background-color: {color:sidebarbg};
  163. margin-top:-50px;
  164. background-image:url('{image:sidebar bg}');
  165. }
  166.  
  167.  
  168. #butts {
  169. position:fixed; top:430px; left:125px; width:160px; height:160px; -webkit-border-radius: 500px; -moz-border-radius: 500px; -o-border-radius: 500px; padding:10px;}
  170. #butts img {
  171. -webkit-border-radius: 500px; -moz-border-radius: 500px; -o-border-radius: 500px; width:160px; height:160px;}
  172.  
  173. .blogtitle {font-family:bamq; font-size:35px; text-transform:uppercase; letter-spacing:1px; line-height:30px; margin-top: 80px; color:{color:Title}; text-align: center;}
  174. .blogtitle:hover {
  175. -webkit-transition: all 0.5s ease-in-out;
  176. -moz-transition: all 0.5s ease-in-out;
  177. -o-transition: all 0.5s ease-in-out;
  178. transition: all 0.5s ease-in-out;
  179. color: {color:titlehover};}
  180.  
  181. #description {font-family:q4; font-size:9px; padding: 2px; text-transform:none; letter-spacing:1px; margin-left: 5px; width: 200px; line-height:12px; color:{color:description};}
  182.  
  183. #booty {
  184. position:fixed; background-color:{color:Circle BG};
  185. height:90px; width:90px; padding:30px;
  186. -webkit-border-radius: 500px;
  187. -moz-border-radius: 500px;
  188. -o-border-radius: 500px;
  189. top:430px; left:125px;
  190. padding-top:60px;
  191. padding-left:60px;
  192. opacity:0;
  193. -webkit-transition: all 0.5s ease-in-out;
  194. -moz-transition: all 0.5s ease-in-out;
  195. -o-transition: all 0.5s ease-in-out;
  196. transition: all 0.5s ease-in-out;
  197. color:{color:Circle Text};}
  198.  
  199. #booty:hover {opacity:0.9; -webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
  200.  
  201. .butts2 {
  202. position:fixed; top:220px; left:125px; width:160px; height:160px; -webkit-border-radius: 500px; -moz-border-radius: 500px; -o-border-radius: 500px; padding:10px;}
  203. .butts2 img {
  204. -webkit-border-radius: 500px; -moz-border-radius: 500px; -o-border-radius: 500px; width:160px; height:160px;}
  205.  
  206. .booty2 {
  207. position:fixed; background-color:{color:Circle BG};
  208. height:90px; width:90px; padding:30px;
  209. -webkit-border-radius: 500px;
  210. -moz-border-radius: 500px;
  211. -o-border-radius: 500px;
  212. top:220px; left:125px;
  213. padding-top:60px;
  214. padding-left:60px;
  215. opacity:0;
  216. -webkit-transition: all 0.5s ease-in-out;
  217. -moz-transition: all 0.5s ease-in-out;
  218. -o-transition: all 0.5s ease-in-out;
  219. transition: all 0.5s ease-in-out;
  220. color:{color:Circle Text};}
  221.  
  222. .booty2:hover {opacity:0.9; -webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
  223.  
  224. #navigation{
  225. font-family: q4;
  226. font-size: 9px;
  227. line-height: 20px;
  228. padding:3px;
  229. position:fixed;
  230. margin-top:-30px;
  231. width:140px;
  232. margin-left:-30px;
  233. text-align: center;
  234. }
  235.  
  236.  
  237. div.button a{
  238. text-align: center;
  239. margin:0px;
  240. padding:0px 0px;
  241. color: {color:text};
  242. background-color:{color:button};
  243. margin-top:2px;
  244. position:relative;
  245. width: 120px;
  246. display: block;
  247. }
  248. div.button a:hover{
  249. color:{color:text} ;
  250. background-color: {color:button hover};
  251. }
  252.  
  253. .pagination {
  254. margin-top:10px;
  255. font-size: 22px;
  256. font-family: bamq;
  257. width: 120px;
  258. text-align: center;
  259. padding: 3px 0;
  260. color: #000;
  261. text-decoration: none;
  262. }
  263.  
  264. .pagination:hover {
  265. color: {color:Hover};
  266. }
  267.  
  268.  
  269.  
  270.  
  271. .links a {
  272. font-family: bamq;
  273. font-size: 10px;
  274. text-decoration:none;
  275. padding: -1px;
  276. text-align: center;
  277. color: {color: Link};
  278.  
  279.  
  280. }
  281.  
  282. .links a:hover {
  283. text-decoration:none;
  284. color: {color: Hover};
  285. }
  286.  
  287.  
  288. .links {display:block;text-align:center}
  289.  
  290.  
  291. /* TITLES */
  292.  
  293. .title a{color:{color:Title};}
  294. .title {font-family:bamq;
  295. font-size:20px;
  296. font-style:none;
  297. margin:0px 0px 0px 0px;
  298. color:#000;}
  299.  
  300. .quote {
  301. padding:10px;
  302. font-size:11px;
  303. text-transform:none;
  304. color: {color:Text};}
  305.  
  306. .source {
  307. font-size: 9px;
  308. text-align:right;
  309. font-style:none;
  310. font-weight:none;
  311. text-transform:none;}
  312.  
  313. .answer {margin:10px;}
  314.  
  315. /* PERMALINKS */
  316.  
  317. #entry:hover .perma {
  318. opacity:1;
  319. margin-left:0px;
  320. width: 400px;
  321. overflow: hidden;
  322. -webkit-transition: all 0.9s ease;
  323. -moz-transition: all 0.9s ease;
  324. background-color: rgba(255,255,255,0.8);}
  325.  
  326. {block:PermalinkPage}
  327. width:400px;
  328. margin-left:50px;
  329. {/block:PermalinkPage}
  330.  
  331. .perma a {
  332. color:{color:Link};
  333. font-size:18px;
  334. font-family: bamq;
  335. text-transform:normal;}
  336.  
  337. .perma a:hover {
  338. color:{color:Hover};
  339. }
  340.  
  341.  
  342. .perma {
  343. margin-left:0px;
  344. text-transform: normal;
  345. position:absolute;
  346. font-size: 9px;
  347. width: 400px;
  348. text-transform: uppercase;
  349. line-height:10px;
  350. text-align:center;
  351. overflow:hidden;
  352. margin-top:0px;
  353. opacity:0;
  354. padding: 8px;
  355. -webkit-transition: all 0.9s ease;
  356. -moz-transition: all 0.9s;
  357. }
  358.  
  359.  
  360.  
  361.  
  362. .tagsperma {
  363. text-transform:lowercase;
  364. }
  365.  
  366.  
  367. .tagsperma a {
  368. margin-top: -20px;
  369. {color:Link};
  370. font-size:9px;
  371. line-height:9px;
  372. transition-duration: 0.60s;
  373. -moz-transition-duration: 0.60s;
  374. -webkit-transition-duration: 0.60s;
  375. -o-transition-duration: 0.60s;
  376. }
  377.  
  378. .tagsperma a:hover {
  379. color:{color:Hover};
  380. }
  381.  
  382.  
  383.  
  384.  
  385. #permalink{
  386. {block:PermalinkPage}
  387. text-align:center;
  388. margin-top:10px;
  389. padding:0px;
  390. font-size:8px;
  391. text-transform:lowercase;
  392. color: #000;
  393. {/block:PermalinkPage}
  394. }
  395.  
  396. #c img{width:45%;}
  397. #c{position:fixed;right:-30px;bottom:10px;}
  398.  
  399. #cr img{width:45%;}
  400. #cr{position:fixed;right:-30px;bottom:10px; opacity: 0;
  401. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  402. -o-transition: 0.5s ease;-moz-transition: 0.5s ease;}
  403. #cr:hover { opacity: 1;
  404. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  405. -o-transition: 0.5s ease;-moz-transition: 0.5s ease;}
  406.  
  407.  
  408. /* AUDIO */
  409.  
  410. .artcover {position:absolute;}
  411. .artcover img {width:70px;height:70px;float:left;}
  412. .audioplayer {width:20px;padding:3px 5px 5px 3px;overflow:hidden;}
  413. .audioinfo {margin-left:75px;border-left:2px solid #CCC;padding:5px;}
  414. .i{display:block;padding:6px 3px;line-height:8px;}
  415. .player{position:absolute;background:#FFF;width:30px;height:30px;
  416. opacity:0.45;padding:20px;overflow:hidden;
  417. -webkit-transition: 0.5s ease;transition: 0.5s ease;
  418. -o-transition: 0.5s ease;-moz-transition: 0.5s ease;}
  419. .player:hover{opacity:0.75;}
  420.  
  421. /* TEXT */
  422.  
  423. i, em{color:#000;}
  424. b, strong{color:#000;}
  425. ul,ol{margin:0px;margin-left:-10px;}
  426. p{padding:0px;margin:10px;}
  427. u{text-decoration:none;color:#fff;}
  428. blockquote {margin:2px; margin-left:10px;
  429. padding:2px;border-left:2px solid #CCC;}
  430.  
  431. /* MISC */
  432.  
  433. iframe#tumblr_controls {
  434. top: 0% !important;
  435. right:0% !important;
  436. opacity:0.3;
  437. position: fixed !important;
  438. filter:alpha(opacity=30);
  439. -webkit-transition: all 0.7s ease;
  440. -moz-transition: all 0.7s ease;
  441. -o-transition: all 0.7s ease;
  442. }
  443. iframe#tumblr_controls:hover{
  444. top: 0% !important;
  445. right:0% !important;
  446. opacity:0.8;
  447. position: fixed !important;
  448. filter:alpha(opacity=80);
  449. -webkit-transition: all 0.7s ease;
  450. -moz-transition: all 0.7s ease;
  451. -o-transition: all 0.7s ease;
  452. }
  453.  
  454. .l .odd{display:block;padding:5px 5px;}
  455. .l .even{display:block;padding:5px 5px;}
  456.  
  457. #s-m-t-tooltip{display:inline-block;position:absolute;max-width:300px;
  458. margin:15px;padding:3px 10px 3px 10px;z-index:99;border:1px solid #AAA;
  459. border-radius:10px;border-top-left-radius:0px;background:#000;}
  460.  
  461. ::selection {color: {color:Hover};}
  462. ::-moz-selection {color: {color:Hover};}
  463. ::-webkit-selection{color: {color:Hover};}
  464.  
  465. img{ margin-bottom:-3px;}
  466.  
  467. /* POSTNOTES */
  468.  
  469. ol.notes a{letter-spacing:1px;}
  470. ol.notes {
  471. list-style:none;
  472. font-size:10px;
  473. margin-top:20px;
  474. text-transform:none;}
  475.  
  476. ol.notes li.note img.avatar {
  477. vertical-align:-5px;
  478. margin-right:5px;
  479. width:20px;
  480. padding:4px;
  481. border:1px solid #EEE;}
  482.  
  483. ol.notes li.note {margin:5px 0px 10px -20px;}
  484. ol.notes li.note span.action {font-style: normal;}
  485. ol.notes li.note .answer_content {font-weight: normal;}
  486. ol.notes li.note blockquote {padding:4px 10px;margin: 10px 0px 0px 25px;}
  487.  
  488.  
  489. </style>
  490. </head>
  491. <body>
  492.  
  493. <div id="center">
  494.  
  495. <div id="sidebar">
  496.  
  497. <div class="blogtitle"><a href="/">{Title}</a></div>
  498.  
  499. <div id="butts"><img src="{image:Circle}"></div>
  500.  
  501. <div id="booty">
  502.  
  503. <div id="navigation"><div class="button">
  504. <a href="{text:link 1}" class="class1" title="{text:link 1 title}">I</a>
  505. <a href="{text:link 2}" class="class1" title="{text:link 2 title}">II</a>
  506. <a href="{text:link 3}" class="class1" title="{text:link 3 title}">III</a>
  507. <a href="{text:link 4}" class="class1" title="{text:link 4 title}">IV</a>
  508. <a href="{text:link 5}" class="class1" title="{text:link 5 title}">V</a>
  509. </div></div>
  510.  
  511.  
  512. </div>
  513.  
  514. <div class="butts2"><img src="{image:Circle2}"></a></div>
  515.  
  516. <div class="booty2"><div class="pagination">
  517. {block:PreviousPage}<a href="{PreviousPage}">previous</a>{/block:PreviousPage}
  518. {block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage}
  519. </div></div>
  520.  
  521. <div style="overflow:auto; margin-top: 15px; margin-left:10px; width: 230px; height: 60px; border: text-align: center;"><div id="description">{Description}</div></div>
  522.  
  523. </div>
  524.  
  525.  
  526.  
  527. <div id="content">
  528. {block:Posts}
  529.  
  530.  
  531. <div id="entry">
  532.  
  533. {block:IndexPage}
  534.  
  535. <div class="perma">
  536. <a href="{Permalink}"> {NoteCount}</a>
  537. <br><a href="{ReblogURL}" target="_blank" title="Reblog">reblog</a>
  538.  
  539.  
  540.  
  541. {block:HasTags}{/block:HasTags}
  542. <div class="tagsperma">{block:HasTags}<br>{block:Tags}<a href="{TagURL}">#{Tag}</a><br>{/block:Tags}{/block:HasTags} </div>
  543.  
  544. </span></div>
  545.  
  546. {/block:IndexPage}
  547.  
  548. {block:Text}
  549. <div class="title">{Title}</div>{Body}
  550. {/block:Text}
  551.  
  552. {block:Link}
  553. <a href="{URL}"><span class="title">{Name} &raquo;</span></a>
  554. {block:Description}{Description}{/block:Description}
  555. {/block:Link}
  556.  
  557. {block:Photo}
  558. <a href="{Permalink}"><img src="{PhotoURL-400}" alt="{PhotoAlt}"/></a>
  559. {block:ifCaption}{block:Caption}{Caption}{/block:Caption}{/block:ifCaption}
  560. {/block:Photo}
  561.  
  562. {block:Photoset}
  563. {Photoset-400}
  564. {block:ifCaption}{block:Caption}{Caption}{/block:Caption}{/block:ifCaption}
  565. {/block:Photoset}
  566.  
  567. {block:Quote}
  568. <div class="quote">{Quote}<div class="source">{Source}</div></div>
  569. {/block:Quote}
  570.  
  571. {block:Chat}
  572. <div class="title">{Title}</div>{block:Lines}
  573. <div class="l {Alt}"><div class="{Alt} user_{UserNumber}">
  574. {block:Label}<b>{Label} </b>{/block:Label}
  575. {Line}</div></div>{/block:Lines}
  576. {/block:Chat}
  577.  
  578. {block:Audio}
  579. {block:AlbumArt}
  580. <div class="artcover"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}
  581. <div class="player"><div class="audioplayer">{AudioPlayerWhite}</div></div>
  582. <div class="audioinfo">
  583. <div class="i"><b>TITLE:</b>
  584. <span{block:TrackName} style="display:none;"{block:TrackName}>Unknown</span>{block:TrackName}{TrackName}{/block:TrackName}</div>
  585.  
  586. <div class="i"><b>ARTIST:</b>
  587. <span{block:Artist} style="display:none;"{block:Artist}>Unknown</span> {block:Artist}{Artist}{/block:Artist}</div>
  588.  
  589. <div class="i"><b>PLAYS:</b>
  590. <span{block:PlayCount} style="display: none;"{block:PlayCount}>Unknown</span> {block:PlayCount}{PlayCount}{/block:PlayCount}</div></div>{block:ifCaption}{block:Caption}{Caption}{/block:Caption}{/block:ifCaption}
  591. {/block:Audio}
  592.  
  593. {block:Video}
  594. {Video-400}
  595. {block:ifCaption}{block:Caption}{Caption}{/block:Caption}{/block:ifCaption}
  596. {/block:Video}
  597.  
  598. {block:Answer}
  599. <div class="quote">{Question} → <b>{Asker}</b></div>
  600. <div class="answer">{Answer}</div>
  601. {/block:Answer}
  602.  
  603. <div id="permalink">
  604. <div class="tags">
  605. {block:IfShowTags}
  606. {block:HasTags}
  607. {block:Tags}<span style="border-top:1px dashed {color:post border};"</span>
  608. <a href="{TagURL}">#{Tag}</a>
  609. {/block:Tags}
  610. {/block:HasTags}
  611. {/block:IfShowTags}
  612. </div></div>
  613. {/block:IndexPage}
  614.  
  615. {block:PermalinkPage}
  616. <div id="permalink">
  617. {block:Date}posted
  618. <a href="{Permalink}">{Month} {DayOfMonthWithZero}</a>{/block:Date}
  619. {block:NoteCount}with
  620. <a href="{Permalink}">{NoteCountWithLabel}</a>{block:NoteCount}
  621. {block:RebloggedFrom}
  622. | via: <a href="{ReblogParentURL}">{ReblogParentName}</a> source: <a href="{ReblogRootURL}">{ReblogRootName}</a>
  623. {/block:RebloggedFrom}
  624.  
  625. <div class="tags">
  626. {block:HasTags}
  627. Tagged:
  628. {block:Tags}<a href="{TagURL}">#{Tag}</a>
  629. {/block:Tags}
  630. {/block:HasTags}
  631. </div></div>
  632. {/block:PermalinkPage}
  633.  
  634.  
  635. {block:PostNotes}
  636. {PostNotes}
  637. {/block:PostNotes}
  638. </div>
  639. {/block:Posts}
  640.  
  641. </div>
  642.  
  643.  
  644.  
  645. <div id="c">
  646. <img src="http://static.tumblr.com/cbjpgjf/fMTmo7ks9/ugfhkld.gif"></a>
  647. </div>
  648.  
  649. <div id="cr">
  650. <a title="credit" href="http://no-faces-face.tumblr.com">
  651. <img src="http://static.tumblr.com/cbjpgjf/CiJmo7k1u/asdsdtghjgbuergbraek.gif"></a>
  652. </div>
  653.  
  654.  
  655.  
  656.  
  657. </body>
  658. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement