API tools faq
paste
Advertisement
teuwoo

Theme #002 - Voice Of My Heart Ver.2

teuwoo
Oct 7th, 2012
1,264
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.56 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. <head>
  4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  5. <script src="http://use.edgefonts.net/parisienne.js"></script>
  6. <script src="http://use.edgefonts.net/lobster-two.js"></script>
  7. <title>{Title}</title>
  8. <link rel="shortcut icon" href="{Favicon}">
  9. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  10. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  11.  
  12. <!--- THEME #002 - VOICE OF MY HEART
  13. hahHAHAHAAH well all my inspirit-ness is pouring out in this theme right?
  14.  
  15. I'm probably obsessed. Most likely obsessed.
  16. ...Yeah I'm obsessed.
  17.  
  18. Anyway, thanks for using my theme, I won't remind you about the rules but seriously don't steal my coding because I spent my whole evening, just the day before school started again after break, to finish this. And besides, all you'll see in the coding is Sunggyu and Dongwoo and Myungsoo anyway lol
  19.  
  20. This is a theme for Kian (infinite-stress.tumblr.com) and Christine (supersnazzy.tumblr.com), and although they don't have to (and most likely won't) use it, it's just... Dedicated to them.
  21. (I'm using it as an excuse for making it so Infinite-based okay)
  22.  
  23. I need to shut up
  24.  
  25. Okay bye
  26.  
  27. Love you guys
  28.  
  29. -Jisu
  30. --->
  31.  
  32. <meta name="color:Background" content="#ffffff"/>
  33. <meta name="color:Text" content="#838282"/>
  34. <meta name="color:Title" content="#5a5a5a"/>
  35. <meta name="color:Description" content="#b4b4b4"/>
  36. <meta name="color:Scrollbar" content="#d3d3d3"/>
  37. <meta name="color:Borders" content="#ededed"/>
  38. <meta name="color:Bold" content="#faafaf"/>
  39. <meta name="color:Italic" content="#b3defc"/>
  40. <meta name="color:Selection" content="#FFF3F1"/>
  41. <meta name="color:Link" content="#7c7c7c"/>
  42. <meta name="color:PostInfo" content="#F6E8DE"/>
  43. <meta name="color:Link Hover" content="#b8b8b8"/>
  44. <meta name="image:sidebar" content="http://24.media.tumblr.com/tumblr_mbiuljqGnt1r8qk07o1_400.jpg"/>
  45. <meta name="image:Background" content=""/>
  46. <meta name="if:ShowTags" content="1"/>
  47. <meta name="if:BigPosts" content="1"/>
  48. <meta name="if:PictureFading" content="0"/>
  49. <meta name="if:Captions" content="0"/>
  50. <meta name="text:Link" content="" />
  51.  
  52. <style type="text/css">
  53.  
  54. @font-face { font-family: "caviardreams"; src: url('http://static.tumblr.com/4yxykdm/xXTlrecqr/caviardreams.ttf'); }
  55.  
  56. iframe#tumblr_controls {
  57. top:0px !important;
  58. right:3px !important;
  59. position: fixed !important;
  60. opacity: 0.5;
  61. -webkit-transition: all 0.6s ease;}
  62.  
  63. iframe#tumblr_controls:hover{
  64. opacity: 1;
  65. -webkit-transition: all 0.6s ease;
  66. }
  67.  
  68.  
  69.  
  70. ::-webkit-scrollbar-thumb:vertical {
  71. background-color:{color:Scrollbar};
  72. height:30px;
  73. }
  74.  
  75. ::-webkit-scrollbar {
  76. background-color: {color:background};
  77. height:5px;
  78. width:5px;
  79. }
  80.  
  81. ::-moz-selection {
  82. background: {color:selection};
  83. }
  84. ::selection {
  85. background: {color:selection};
  86. }
  87.  
  88. body {
  89. background: {color:background} url('{image:background}') repeat fixed;
  90. margin:0px;
  91. height:100%;
  92. width:100%;
  93. margin:0px;
  94. color:{color:text};
  95. font-family:Calibri;
  96. font-size:10px;
  97. line-height:100%;
  98. }
  99.  
  100. b {
  101. font-weight: bold;
  102. color:{color:bold};
  103. }
  104.  
  105. i {
  106. font-style:italic;
  107. color:{color:italic};
  108. }
  109.  
  110. a:link, a:active, a:visited {
  111. color: {color:link};
  112. text-decoration:none;
  113. -webkit-transition: all 0.6s ease;
  114. }
  115.  
  116. a:hover {
  117. color:{color:link hover};
  118. -webkit-transition: all 0.6s ease;
  119. }
  120.  
  121. img {
  122. border:none;
  123. }
  124.  
  125. blockquote {
  126. padding-left:5px;
  127. border-left:2px solid;
  128. }
  129.  
  130. blockquote blockquote {
  131. padding-left:5px;
  132. border-left:2px solid;
  133. }
  134.  
  135.  
  136. h1 {
  137. font-size:15px;
  138. font-family: calibri;
  139. font-weight:100;
  140. margin-top: -1px;
  141. line-height:15px;
  142. }
  143.  
  144. {block:IndexPage}
  145.  
  146. {block:IfBigPosts}
  147. #entries {
  148. padding:10px;
  149. width:500px;
  150. margin-left:500px;
  151. margin-top:40px;
  152. }
  153.  
  154. {block:IfNotPictureFading}
  155. #post {
  156. width:500px;
  157. margin-bottom:50px;
  158. }
  159. {/block:IfNotPictureFading}
  160.  
  161. {block:IfPictureFading}
  162. #post {
  163. width:500px;
  164. margin-bottom:50px;
  165. opacity:0.6;
  166. -webkit-transition: all 0.4s ease-in-out 0s;
  167. -moz-transition: all 0.4s ease-in-out 0s;
  168. -o-transition: all 0.4s ease-in-out 0s;
  169. -ms-transition: all 0.4s ease-in-out 0s;
  170. transition: all 0.4s ease-in-out 0s;
  171. }
  172.  
  173. #post:hover {
  174. width:500px;
  175. margin-bottom:50px;
  176. opacity:1;
  177. -webkit-transition: all 0.4s ease-in-out 0s;
  178. -moz-transition: all 0.4s ease-in-out 0s;
  179. -o-transition: all 0.4s ease-in-out 0s;
  180. -ms-transition: all 0.4s ease-in-out 0s;
  181. transition: all 0.4s ease-in-out 0s;
  182. }
  183. {/block:IfPictureFading}
  184.  
  185. {/block:IfBigPosts}
  186.  
  187. {block:IfNotBigPosts}
  188. #entries {
  189. padding:10px;
  190. width:400px;
  191. margin-left:500px;
  192. margin-top:40px;
  193. }
  194.  
  195. {block:IfNotPictureFading}
  196. #post {
  197. width:400px;
  198. margin-bottom:50px;
  199. }
  200. {/block:IfNotPictureFading}
  201.  
  202. {block:IfPictureFading}
  203. #post {
  204. width:400px;
  205. margin-bottom:50px;
  206. opacity:0.6;
  207. -webkit-transition: all 0.4s ease-in-out 0s;
  208. -moz-transition: all 0.4s ease-in-out 0s;
  209. -o-transition: all 0.4s ease-in-out 0s;
  210. -ms-transition: all 0.4s ease-in-out 0s;
  211. transition: all 0.4s ease-in-out 0s;
  212. }
  213.  
  214. #post:hover {
  215. width:400px;
  216. margin-bottom:50px;
  217. opacity:1;
  218. -webkit-transition: all 0.4s ease-in-out 0s;
  219. -moz-transition: all 0.4s ease-in-out 0s;
  220. -o-transition: all 0.4s ease-in-out 0s;
  221. -ms-transition: all 0.4s ease-in-out 0s;
  222. transition: all 0.4s ease-in-out 0s;
  223. }
  224. {/block:IfPictureFading}
  225.  
  226. {/block:IfNotBigPosts}
  227.  
  228. {/block:IndexPage}
  229.  
  230. {block:PermalinkPage}
  231.  
  232. #entries {
  233. padding:10px;
  234. width:500px;
  235. margin-left:500px;
  236. margin-top:40px;
  237. }
  238.  
  239. #post {
  240. width:500px;
  241. margin-bottom:10px;
  242. }
  243. {/block:PermalinkPage}
  244.  
  245. #sidebar {
  246. width:250px;
  247. position:fixed;
  248. margin-left:200px;
  249. margin-top:100px;
  250. -webkit-transition: all .7s ease-in-out;
  251. -moz-transition: all .7s ease-in-out;
  252. -o-transition: all .7s ease-in-out;
  253. -ms-transition: all .7s ease-in-out;
  254. transition: all .7s ease-in-out;
  255. }
  256.  
  257. #title {
  258. font-size:20px;
  259. text-align:center;
  260. margin-bottom:15px;
  261. font-family: parisienne, serif;
  262. padding-bottom:2px;
  263. border-bottom: 1px solid {color:Borders};
  264. color: {color:Title};
  265. }
  266.  
  267. #myung {
  268. font-family: cambria;
  269. letter-spacing:1px;
  270. margin-top:-10px;
  271. margin-bottom:5px;
  272. text-align:center;
  273. }
  274.  
  275. .myungsoo {
  276. display:inline-block;
  277. padding-left:2px;
  278. padding-right:2px;
  279. padding-bottom:2px;
  280. margin-left:5px;
  281. margin-right:5px;
  282. border: 1px solid {color:Borders};
  283. }
  284.  
  285. #sidebarimage {
  286. width 250px;
  287. -webkit-transition: all .7s ease-in-out;
  288. -moz-transition: all .7s ease-in-out;
  289. -o-transition: all .7s ease-in-out;
  290. -ms-transition: all .7s ease-in-out;
  291. transition: all .7s ease-in-out;
  292. }
  293.  
  294. #sidebarimage img {
  295. width:228px;
  296. padding:10px;
  297. border: 1px solid {color:Borders};
  298. }
  299.  
  300. #description {
  301. padding:5px;
  302. text-align:center;
  303. font-family: calibri;
  304. font-size:10px;
  305. margin-top:-2px;
  306. border-bottom: 1px solid {color:Borders};
  307. color:{color:Description}
  308. }
  309.  
  310. #pagination {
  311. font-size:9px;
  312. text-align:center;
  313. margin-top:15px;
  314. margin-left:-15px;
  315. }
  316.  
  317. .current_page,
  318. .jump_page:hover {
  319.  
  320. padding: 1px 5px 3px 5px;
  321. color: {color:link hover};
  322. font-family: calibri;
  323. font-weight: normal !important;
  324. font-size: 9px;
  325.  
  326. }
  327.  
  328. .jump_page {
  329.  
  330. padding: 1px 5px 3px 5px;
  331. color: {color:Link};
  332. font-family: calibri;
  333. font-weight: normal !important;
  334. font-size: 9px;
  335.  
  336. }
  337.  
  338. #info {
  339. margin-left:400px;
  340. }
  341.  
  342. #asker {
  343. float:left;
  344. margin-right:5px;
  345. padding:8px;
  346. border:1px solid {color:Borders};
  347. background:{color:Background};
  348. }
  349.  
  350. #sunggyu {
  351. margin-left: 480px;
  352. margin-top: 5px;
  353. -webkit-transition: all 0.9s ease;
  354. -moz-transition: all 0.9s;
  355. opacity:0;
  356. padding:10px;
  357. position:absolute;
  358. display: inline-block;
  359. background-color:{color:PostInfo};
  360. }
  361.  
  362. #post:hover #sunggyu {
  363. opacity:1;
  364. margin-left: 512px;
  365. -webkit-transition: all 0.9s ease;
  366. -moz-transition: all 0.9s ease;
  367. }
  368.  
  369. #dongwoo {
  370. -webkit-transform: scale(0);
  371. margin-left: 480px;
  372. margin-top: 40px;
  373. -webkit-transition: all 0.9s ease;
  374. -moz-transition: all 0.9s;
  375. opacity:0;
  376. padding:10px;
  377. position:absolute;
  378. display: inline-block;
  379. background-color:{color:PostInfo};
  380. }
  381.  
  382. #post:hover #dongwoo {
  383. opacity:1;
  384. margin-left:512px;
  385. -webkit-transform: scale(1);
  386. -webkit-transition: all 0.9s ease;
  387. }
  388.  
  389. {CustomCSS}
  390.  
  391. </style>
  392. </head>
  393. <body>
  394. <div id="sidebar">
  395.  
  396. <div id="title">{Title}</div>
  397.  
  398. <div id="myung">
  399. <a href="/"><div class="myungsoo">home</div></a>
  400. <a href="/ask"><div class="myungsoo">ask</div></a>
  401. <a href="{text:Link}"><div class="myungsoo">links</div></a>
  402. <a href="http://teuwoo.tumblr.com/"><div class="myungsoo">theme</div></a>
  403. </div>
  404.  
  405. <div id="sidebarimage"><img src="{image:sidebar}"></div>
  406.  
  407. <div id="description">{Description}</div>
  408.  
  409. <div id="pagination">
  410. {block:Pagination}
  411. {block:PreviousPage}<a href="{PreviousPage}">«</a>{/block:PreviousPage}
  412.  
  413. {block:JumpPagination length="3"}
  414. {block:CurrentPage}
  415.  
  416. <span class="current_page">{PageNumber}</span>
  417.  
  418. {/block:CurrentPage}
  419.  
  420. {block:JumpPage}
  421.  
  422. <a class="jump_page" href="{URL}">{PageNumber}</a>
  423.  
  424. {/block:JumpPage}
  425. {/block:JumpPagination}
  426.  
  427. {block:NextPage}<a href="{NextPage}">»</a>{/block:NextPage}{/block:Pagination}
  428. </div>
  429.  
  430. </div>
  431. <div id="entries">{block:Posts}<div id="post">
  432.  
  433. {block:Indexpage}
  434. <div id="sunggyu">
  435. <a href="{Permalink}">{NoteCount}</a>
  436. </div>
  437. {/block:indexpage}
  438. {block:IfShowTags}{block:HasTags}{block:Indexpage}
  439. <div id="dongwoo">
  440. tagged:{block:Tags}<br>#{Tag}{/block:Tags}
  441. </div>
  442. {/block:indexpage} {/block:HasTags}{/block:IfShowTags}
  443.  
  444. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  445.  
  446. {block:Photo}
  447. {block:IndexPage}
  448. {block:IfNotBigPosts}
  449. {LinkOpenTag}<img src="{PhotoURL-400}">{LinkCloseTag}
  450. {block:IfCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfCaptions}
  451. {/block:IfNotBigPosts}
  452. {block:IfBigPosts}{LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}{block:IfCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfCaptions}{/block:IfBigPosts}
  453. {/block:IndexPage}
  454. {block:permalinkpage}
  455. <img src="{PhotoURL-500}">
  456. {block:Caption}{Caption}{/block:Caption}
  457. {/block:permalinkpage}
  458. {/block:Photo}
  459.  
  460. {block:Answer}<div id="asker"><img src="{AskerPortraitURL-40}"></div><div style="width:300px;">{Asker}:</div><br><div style="border-bottom:1px solid {color:Borders}; margin-top:-10px;">{Question}</div><br><div style="margin-top:-10px;">{Answer}</div>{/block:Answer}
  461.  
  462. {block:Photoset}
  463. {block:IndexPage}
  464. {block:IfNotBigPosts}{Photoset-400}{block:IfCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfCaptions}{/block:IfNotBigPosts}
  465. {block:IfBigPosts}{Photoset-500}{block:IfCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfCaptions}{/block:IfBigPosts}
  466. {/block:IndexPage}
  467. {block:PermalinkPage}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}
  468. {/block:Photoset}
  469.  
  470. {block:ContentSource}
  471. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  472. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  473. {/block:SourceLogo}
  474. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  475. {/block:ContentSource}
  476.  
  477. {block:RebloggedFrom} <!-- {ReblogParentName} {ReblogParentTitle} {ReblogParentURL} --> {/block:RebloggedFrom}
  478.  
  479. {block:Quote}{Quote}{/block:Quote}
  480.  
  481. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  482.  
  483. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}
  484.  
  485. {block:Audio}{AudioPlayerWhite}{/block:Audio}
  486.  
  487. {block:Video}
  488. {block:IndexPage}{block:IfNotBigPosts}{Video-400}{block:IfCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfCaptions}{/block:IfNotBigPosts}
  489. {block:IfBigPosts}{Video-500}{block:IfCaptions}{block:Caption}{Caption}{/block:Caption}{/block:IfCaptions}{/block:IfBigPosts}{/block:IndexPage}
  490. {block:PermalinkPage}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:PermalinkPage}
  491. {/block:Video}
  492.  
  493. </div>
  494.  
  495. <script type="text/javascript">
  496. jQuery(document).ready(function() {
  497. jQuery(".sub").hide();
  498. //toggle the componenet with class msg_body
  499. jQuery(".cthrough").click(function()
  500. {
  501. jQuery(this).next(".sub").slideToggle(500);
  502. });});
  503. </script>
  504.  
  505. {block:PermalinkPage}
  506. <div style="border-top:1px solid {color:borders}; padding-top:1px;">
  507. Posted {Month} {DayOfMonth} {Year} {block:RebloggedFrom}from <a href="{ReblogParentURL}"> {ReblogParentName}</a>{/block:RebloggedFrom}{block:NoteCount} with {NoteCountWithLabel}.{/block:NoteCount}<br>{block:ContentSource} Source: <a href="{SourceURL}">{SourceTitle}</a>{/block:ContentSource}<br>{block:HasTags} Tagged: {/block:HasTags}{block:Tags}#<a href="{TagURL}"> {Tag} </a>{/block:Tags}
  508. {block:PostNotes}
  509. <div style="margin-top:20px;">
  510. <a href="#" class="cthrough" style="cursor:help; margin-left:210px; letter-spacing:3px;">SHOW NOTES</a>
  511. <div class="sub">
  512. {PostNotes}
  513. </div>
  514. </div>
  515. {/block:PostNotes}
  516.  
  517. {/block:PermalinkPage}
  518. {/block:Posts}
  519. </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!