Advertisement
farflunghopes

cotton

Jan 10th, 2013
582
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 34.20 KB | None | 0 0
  1. <!--- Theme #15 'Cotton' by Brianna @ colorfulmetaphors.tumblr.com
  2.  
  3. Rules:
  4. 1. Do not remove the credit from the code or the theme. You may MOVE it, but leave it on the FIRST page of your blog, ie: it must be visible on the main page.
  5. 2. Do not redistribute this theme.
  6. 3. Do not steal this theme. Taking a portion of the code and adding it to your own theme/others' counts as stealing. If you want to learn how to do something, ask, and I will do my best to help you.
  7. 4. Do not use this theme as a base code.
  8. 5. If you have any problems, find glitches, or just need help, please ask me! That's not really a rule, but I'd love to help.
  9.  
  10. Help:
  11. - Theme looks best in Google Chrome.
  12. - SAVE and REFRESH the page before changing appearance options.
  13. - The title is the home link.
  14. - There are eight extra links available. Add them under the appearance options.
  15. - The description has a set minimum height to keep it from running off the page. To increase or decrease it, under #description change the min-height:###px.
  16. - There are three post sizes. For 250 DEselect both 400 and 500.
  17. - The jump pagination is hidden by default. To have it visible, DEselect 'HiddenJumpPages' in the appearance options.
  18.  
  19. !!!IMPORTANT!!!
  20. - DO NOT SELECT BOTH 400 AND 500!
  21. - A repeating background image is not recommended. The title will look bad. If you want a background image, try to keep it out of the top right corner.
  22.  
  23. - The background image REPEAT and POSITION can be changed under the appearance options. Select or deslect 'BackgroundImageRepeat' and enter the position in 'bgimgposition'.
  24. - The BODY font SIZE can be changed under the appearance options. DO NOT add 'px' after the number.
  25. - The 'highlight' and 'highlighttext' color options refer to the background and text color that appears when you click and drag the cursor.
  26.  
  27. Enjoy!
  28.  
  29. --->
  30.  
  31. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  32. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  33. <head><title>{Title}</title>
  34. <link rel="shortcut icon" href="{Favicon}">
  35. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  36. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  37.  
  38. <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
  39.  
  40. <link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
  41.  
  42. <link href='http://fonts.googleapis.com/css?family=Montez' rel='stylesheet' type='text/css'>
  43.  
  44. <link href='http://fonts.googleapis.com/css?family=Alegreya+Sans' rel='stylesheet' type='text/css'>
  45.  
  46. <link href='http://fonts.googleapis.com/css?family=Allura' rel='stylesheet' type='text/css'>
  47.  
  48. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  49. <script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  50. <script>
  51. (function($){
  52. $(document).ready(function(){
  53. $("[title]").style_my_tooltips();
  54. });
  55. })(jQuery);
  56. </script>
  57.  
  58. <script type="text/javascript" src="http://static.tumblr.com/d0qlne1/DiAl6ekb7/jquery-1.4.2.min.js"></script>
  59.  
  60. <script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>
  61.  
  62. {block:IndexPage}
  63. {block:IfNot400pxPosts}
  64. {block:IfNot500pxPosts}
  65. <script type="text/javascript">
  66. $(window).load(function () {
  67. $('#entries').masonry({
  68. itemSelector : "#post",
  69. },
  70. function() { $('#entries').masonry({ appendedContent: $(this) }); }
  71. );
  72. });
  73. </script>
  74. {/block:IfNot500pxPosts}
  75. {/block:IfNot400pxPosts}
  76. {/block:IndexPage}
  77.  
  78. <meta name="color:background" content="#ffffff"/>
  79. <meta name="color:description bg" content="#AAAAAA"/>
  80. <meta name="color:text" content="#888888"/>
  81. <meta name="color:blockquotes" content="#999999"/>
  82. <meta name="color:description" content="#000000"/>
  83. <meta name="color:sidebar" content="#222222"/>
  84. <meta name="color:jump links" content="#555555"/>
  85. <meta name="color:jump links hover" content="#999999"/>
  86. <meta name="color:link" content="#333333"/>
  87. <meta name="color:link hover" content="#999999"/>
  88. <meta name="color:tags" content="#FFFFFF"/>
  89. <meta name="color:tags hover" content="#777777"/>
  90. <meta name="color:tags bg" content="#AAAAAA"/>
  91. <meta name="color:infolink" content="#555555"/>
  92. <meta name="color:infolink hover" content="#999999"/>
  93. <meta name="color:sidelink hover" content="#CCCCCC"/>
  94. <meta name="color:sidelink1" content="#999999"/>
  95. <meta name="color:sidelink2" content="#888888"/>
  96. <meta name="color:sidelink3" content="#777777"/>
  97. <meta name="color:sidelink4" content="#555555"/>
  98. <meta name="color:sidelink5" content="#444444"/>
  99. <meta name="color:sidelink6" content="#333333"/>
  100. <meta name="color:sidelink7" content="#222222"/>
  101. <meta name="color:sidelink8" content="#111111"/>
  102. <meta name="color:sidelink9" content="#000000"/>
  103. <meta name="color:title" content="#222222"/>
  104. <meta name="color:title hover" content="#333333"/>
  105. <meta name="color:posts" content="#222222"/>
  106. <meta name="color:scrollbar background" content="#DDDDDD"/>
  107. <meta name="color:scrollbar" content="#999999"/>
  108. <meta name="color:highlight" content="#DDDDDD"/>
  109. <meta name="color:highlight text" content="#111111"/>
  110.  
  111. <meta name="font:sidebar" content=""/>
  112. <meta name="font:body" content=""/>
  113.  
  114. <meta name="image:sidebar" content=""/>
  115. <meta name="image:background" content=""/>
  116.  
  117. <meta name="text:body font size" content="11"/>
  118. <meta name="text:bg img position" content="bottom left" />
  119. <meta name="text:link1" content="/"/>
  120. <meta name="text:link1name" content="link 1"/>
  121. <meta name="text:link2" content="/"/>
  122. <meta name="text:link2name" content="link 2"/>
  123. <meta name="text:link3" content="/"/>
  124. <meta name="text:link3name" content="link 3"/>
  125. <meta name="text:link4" content="/"/>
  126. <meta name="text:link4name" content="link 4"/>
  127. <meta name="text:link5" content="/"/>
  128. <meta name="text:link5name" content="link 5"/>
  129. <meta name="text:link6" content="/"/>
  130. <meta name="text:link6name" content="link 6"/>
  131. <meta name="text:link7" content="/"/>
  132. <meta name="text:link7name" content="link 7"/>
  133. <meta name="text:link8" content="/"/>
  134. <meta name="text:link8name" content="link 8"/>
  135.  
  136. <meta name="if:BackgroundImageRepeat" content="" />
  137. <meta name="if:400pxPosts" content=""/>
  138. <meta name="if:500pxPosts" content=""/>
  139. <meta name="if:HiddenJumpPages" content="1"/>
  140.  
  141. <style type="text/css">
  142.  
  143. iframe#tumblr_controls {right:3px !important; position: fixed !important;-webkit-transition: opacity 0.7s linear;opacity: 0.2;-webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;}
  144. iframe#tumblr_controls:hover{-webkit-transition: opacity 0.7s linear;opacity: 1;-webkit-transition: all 0.4s ease-out;-moz-transition: all 0.4s ease-out;transition: all 0.4s ease-out;}
  145.  
  146. ::-webkit-scrollbar {
  147. width: 7px;
  148. background-color:{color:scrollbar background};
  149. }
  150.  
  151. ::-webkit-scrollbar-thumb {
  152. width:7px;
  153. background-color:{color:scrollbar};
  154. }
  155.  
  156. ::selection {
  157. background: {color:highlight};
  158. color: {color:highlight text};
  159. }
  160.  
  161. #s-m-t-tooltip {
  162. z-index: 9999;
  163. background:{color:background};
  164. font-size: 9px;
  165. text-transform:uppercase;
  166. letter-spacing:1px;
  167. color:{color:text};
  168. max-width: 150px;
  169. padding: 5px 10px 5px 10px;
  170. display: block;
  171. margin: 17px 0px 0px -10px;
  172. box-shadow:3px 3px 5px;
  173. font-family: 'Alegreya Sans', sans-serif;
  174. }
  175.  
  176. body {
  177. background-color:{color:background};
  178. color:{color:text};
  179. font-size:{text:body font size}px;
  180. line-height:13px;
  181. font-family:{font:body};
  182. background-image:url('{image:background}');
  183. background-attachment:fixed;
  184. background-position:{text:bg img position};
  185. {block:IfBackgroundImageRepeat}
  186. background-repeat:repeat;
  187. {/block:IfBackgroundImageRepeat}
  188. {block:IfNotBackgroundImageRepeat}
  189. background-repeat:no-repeat;
  190. {/block:IfNotBackgroundImageRepeat}
  191. }
  192.  
  193. a {
  194. color:{color:link};
  195. text-decoration:none;
  196. outline:none;
  197. -moz-outline-style:none;
  198. -webkit-transition: all 0.6s ease-out;
  199. -o-transition: all 0.6s ease-out;
  200. -webkit-transition: all 0.6s ease-out;
  201. -moz-transition: all 0.6s ease-out;
  202. }
  203.  
  204. a:hover {
  205. color:{color:link hover};
  206. -webkit-transition: all 0.6s ease-out;
  207. -o-transition: all 0.6s ease-out;
  208. -webkit-transition: all 0.6s ease-out;
  209. -moz-transition: all 0.6s ease-out;
  210. }
  211.  
  212. blockquote {
  213. padding:1px 10px 1px 10px;
  214. border-left:1px solid {color:text};
  215. margin-left:10px;
  216. font-size:9px;
  217. word-wrap:break-word;
  218. background-color:{color:blockquotes};
  219. {block:IndexPage}
  220. {block:If500pxPosts}
  221. width:460px;
  222. {/block:If500pxPosts}
  223. {block:If400pxPosts}
  224. width:360px;
  225. {/block:If400pxPosts}
  226. {block:IfNot400pxPosts}
  227. {block:IfNot500pxPosts}
  228. width:210px;
  229. {/block:IfNot500pxPosts}
  230. {/block:IfNot400pxPosts}
  231. {/block:IndexPage}
  232. {block:PermalinkPage}
  233. width:460px;
  234. {/block:PermalinkPage}
  235. }
  236.  
  237. blockquote blockquote {
  238. padding:5px 5px 5px 5px;
  239. border-left:1px solid {color:text};
  240. background-color:{color:blockquotes};
  241. {block:IndexPage}
  242. {block:If500pxPosts}
  243. min-width:250px;
  244. width:auto;
  245. {/block:If500pxPosts}
  246. {block:If400pxPosts}
  247. min-width:200px;
  248. width:auto;
  249. {/block:If400pxPosts}
  250. {block:IfNot400pxPosts}
  251. {block:IfNot500pxPosts}
  252. min-width:100px;
  253. max-width:200px;
  254. width:auto;
  255. {/block:IfNot500pxPosts}
  256. {/block:IfNot400pxPosts}
  257. {/block:IndexPage}
  258. {block:PermalinkPage}
  259. min-width:250px;
  260. width:auto;
  261. {/block:PermalinkPage}
  262. }
  263.  
  264. blockquote img {
  265. {block:IndexPage}
  266. {block:If500pxPosts}
  267. max-width:430px;
  268. {/block:If500pxPosts}
  269. {block:If400pxPosts}
  270. max-width:330px;
  271. {/block:If400pxPosts}
  272. {block:IfNot400pxPosts}
  273. {block:IfNot500pxPosts}
  274. max-width:180px;
  275. {/block:IfNot500pxPosts}
  276. {/block:IfNot400pxPosts}
  277. {/block:IndexPage}
  278. {block:PermalinkPage}
  279. max-width:430px;
  280. {/block:PermalinkPage}
  281. }
  282.  
  283. h1 {
  284. font-size:17px;
  285. text-align:left;
  286. line-height:130%;
  287. }
  288.  
  289. h2 {
  290. text-align:center;
  291. font-style:italic;
  292. font-size:15px;
  293. }
  294.  
  295. #theme {
  296. margin:auto;
  297. {block:IndexPage}
  298. {block:If500pxPosts}
  299. width:870px;
  300. {/block:If500pxPosts}
  301. {block:If400pxPosts}
  302. width:770px;
  303. {/block:If400pxPosts}
  304. {block:IfNot400pxPosts}
  305. {block:IfNot500pxPosts}
  306. width:925px;
  307. {/block:IfNot500pxPosts}
  308. {/block:IfNot400pxPosts}
  309. {/block:IndexPage}
  310. {block:PermalinkPage}
  311. width:870px;
  312. {/block:PermalinkPage}
  313. }
  314.  
  315. #entries {
  316. padding-top:50px;
  317. {block:IndexPage}
  318. {block:If500pxPosts}
  319. width:510px;
  320. {/block:If500pxPosts}
  321. {block:If400pxPosts}
  322. width:410px;
  323. {/block:If400pxPosts}
  324. {block:IfNot400pxPosts}
  325. {block:IfNot500pxPosts}
  326. width:580px;
  327. {/block:IfNot500pxPosts}
  328. {/block:IfNot400pxPosts}
  329. {/block:IndexPage}
  330. {block:PermalinkPage}
  331. width:510px;
  332. {/block:PermalinkPage}
  333. }
  334.  
  335. #post {
  336. word-wrap:break-word;
  337. margin-bottom:50px;
  338. {block:IndexPage}
  339. {block:If500pxPosts}
  340. width:500px;
  341. {/block:If500pxPosts}
  342. {block:If400pxPosts}
  343. width:400px;
  344. {/block:If400pxPosts}
  345. {block:IfNot400pxPosts}
  346. {block:IfNot500pxPosts}
  347. width:250px;
  348. margin:15px;
  349. float:left;
  350. box-shadow: 2px 2px 3px 1px;
  351. padding:5px;
  352. {/block:IfNot500pxPosts}
  353. {/block:IfNot400pxPosts}
  354. {/block:IndexPage}
  355. {block:PermalinkPage}
  356. width:500px;
  357. {/block:PermalinkPage}
  358. }
  359.  
  360. #right {
  361. text-align:left;
  362. position:fixed;
  363. margin-top:-10px;
  364. padding-top:50px;
  365. padding-left:30px;
  366. width:250px;
  367. border-left:50px solid {color:sidebar};
  368. height:100%;
  369. {block:IndexPage}
  370. {block:If500pxPosts}
  371. margin-left:530px;
  372. {/block:If500pxPosts}
  373. {block:If400pxPosts}
  374. margin-left:430px;
  375. {/block:If400pxPosts}
  376. {block:IfNot400pxPosts}
  377. {block:IfNot500pxPosts}
  378. margin-left:595px;
  379. {/block:IfNot500pxPosts}
  380. {/block:IfNot400pxPosts}
  381. {/block:IndexPage}
  382. {block:PermalinkPage}
  383. margin-left:530px;
  384. {/block:PermalinkPage}
  385. }
  386.  
  387. #dark {
  388. margin-left:-30px;
  389. margin-top:10px;
  390. margin-bottom:10px;
  391. height:3px;
  392. width:280px;
  393. background-color:{color:title};
  394. }
  395.  
  396. #title {
  397. right:0px;
  398. position:absolute;
  399. max-width:250px;
  400. font-style:italic;
  401. max-height:13px;
  402. word-wrap:break-word;
  403. overflow:hidden;
  404. font-size:20px;
  405. letter-spacing:1px;
  406. text-align:right;
  407. margin-top:-23px;
  408. background-color:{color:background};
  409. padding:5px 3px 7px 5px;
  410. font-family: 'Montez', cursive;
  411. }
  412.  
  413. #title a {
  414. color:{color:title};
  415. }
  416.  
  417. #title a:hover {
  418. color:{color:title hover};
  419. text-shadow:1px 2px 1px;
  420. }
  421.  
  422. .minus a {
  423. text-align:center;
  424. height:20px;
  425. position:absolute;
  426. margin-top:-21px;
  427. margin-left:-30px;
  428. font-weight:bold;
  429. display:inline-block;
  430. width:30px;
  431. font-size:25px;
  432. color:{color:background};
  433. }
  434.  
  435. #sidebarimage {
  436. width:235px;
  437. margin-top:25px;
  438. -webkit-transition: all 0.6s ease-out;
  439. -o-transition: all 0.6s ease-out;
  440. -webkit-transition: all 0.6s ease-out;
  441. -moz-transition: all 0.6s ease-out;
  442. }
  443.  
  444. #sidebarimage img {
  445. width:235px;
  446. padding:7px;
  447. border:1px solid {color:sidebar};
  448. box-shadow: 0px 0px 4px 3px {color:infolink};
  449. }
  450.  
  451. #link {
  452. padding-left:30px;
  453. margin-left:-30px;
  454. margin-top:25px;
  455. text-align:left;
  456. width:255px;
  457. height:19.5px;
  458. overflow:hidden;
  459. background-color:{color:sidebar};
  460. font-size:9px;
  461. -webkit-transition: all 0.6s ease-out;
  462. -o-transition: all 0.6s ease-out;
  463. -webkit-transition: all 0.6s ease-out;
  464. -moz-transition: all 0.6s ease-out;
  465. }
  466.  
  467. #link a {
  468. margin-left:-1px;
  469. margin-right:-1px;
  470. width:28.5px;
  471. height:1px;
  472. display:inline-block;
  473. font-size:8px;
  474. font-style:italic;
  475. text-align:center;
  476. background-color:{color:background};
  477. -webkit-transition: all 0.6s ease-out;
  478. -o-transition: all 0.6s ease-out;
  479. -webkit-transition: all 0.6s ease-out;
  480. -moz-transition: all 0.6s ease-out;
  481. }
  482.  
  483. #link a:hover {
  484. height:21px;
  485. margin-top:-25px;
  486. background-color:{color:sidelink hover};
  487. -webkit-transition: all 0.6s ease-out;
  488. -o-transition: all 0.6s ease-out;
  489. -webkit-transition: all 0.6s ease-out;
  490. -moz-transition: all 0.6s ease-out;
  491. }
  492.  
  493. .plus a {
  494. margin-left:250px;
  495. text-align:center;
  496. height:17px;
  497. padding-top:3px;
  498. margin-top:-20px;
  499. font-weight:bold;
  500. display:inline-block;
  501. width:32.5px;
  502. font-size:20px;
  503. position:absolute;
  504. color:{color:sidebar};
  505. }
  506.  
  507. #description {
  508. margin-top:27px;
  509. width:213px;
  510. {block:IfSidebarImage}
  511. max-height:105px;
  512. {/block:IfSidebarImage}
  513. {block:IfNotSidebarImage}
  514. max-height:450px;
  515. {/block:IfNotSidebarImage}
  516. padding:15px 20px 17px 20px;
  517. text-align:justify;
  518. line-height:120%;
  519. font-size:10px;
  520. overflow:auto;
  521. word-wrap:break-word;
  522. background-color:{color:description bg};
  523. font-family:{font:sidebar};
  524. color:{color:description};
  525. border-bottom:1px solid {color:sidebar};
  526. }
  527.  
  528. #description a {
  529. font-size:7px;
  530. text-transform:uppercase;
  531. text-decoration:underline;
  532. word-spacing:3px;
  533. }
  534.  
  535. #pagination {
  536. {block:IfHiddenJumpPages}
  537. opacity:0;
  538. {/block:IfHiddenJumpPages}
  539. width:50px;
  540. line-height:250%;
  541. margin-left:-80px;
  542. text-align:right;
  543. position:absolute;
  544. -webkit-transition: all 0.6s ease-out;
  545. -o-transition: all 0.6s ease-out;
  546. -webkit-transition: all 0.6s ease-out;
  547. -moz-transition: all 0.6s ease-out;
  548. }
  549.  
  550. {block:IfHiddenJumpPages}
  551. #right:hover #pagination {
  552. opacity:1;
  553. -webkit-transition: all 0.6s ease-out;
  554. -o-transition: all 0.6s ease-out;
  555. -webkit-transition: all 0.6s ease-out;
  556. -moz-transition: all 0.6s ease-out;
  557. }
  558. {/block:IfHiddenJumpPages}
  559.  
  560. #pagination a {
  561. text-align:center;
  562. color:{color:jump links};
  563. display:block;
  564. font-size:15px;
  565. font-family: 'Alegreya Sans', sans-serif;
  566. }
  567.  
  568. #pagination a:hover {
  569. color:{color:jump links hover};
  570. }
  571.  
  572. #info {
  573. margin-top:10px;
  574. text-align:left;
  575. border-bottom:1px solid {color:posts};
  576. font-family: 'Quicksand', sans-serif;
  577. {block:IndexPage}
  578. {block:If500pxPosts}
  579. width:530px;
  580. margin-bottom:25px;
  581. {/block:If500pxPosts}
  582. {block:If400pxPosts}
  583. width:430px;
  584. margin-bottom:25px;
  585. {/block:If400pxPosts}
  586. {block:IfNot400pxPosts}
  587. {block:IfNot500pxPosts}
  588. width:250px;
  589. margin-bottom:10px;
  590. {/block:IfNot500pxPosts}
  591. {/block:IfNot400pxPosts}
  592. {block:IndexPage}
  593. {block:PermalinkPage}
  594. width:530px;
  595. margin-bottom:25px;
  596. {/block:PermalinkPage}
  597. }
  598.  
  599. #info a{
  600. color:{color:infolink};
  601. }
  602.  
  603. #info a:hover {
  604. color:{color:infolink hover};
  605. }
  606.  
  607. #date {
  608. font-size:18px;
  609. padding-bottom:3px;
  610. text-shadow:-2px 2px 2px {color:infolink};
  611. }
  612.  
  613. #from {
  614. font-size:8px;
  615. font-family:georgia;
  616. font-style:italic;
  617. }
  618.  
  619. #tags {
  620. padding-left:2px;
  621. font-size:8px;
  622. padding:5px;
  623. text-align:left;
  624. margin-top:15px;
  625. font-family:;
  626. background-color:{color:tags bg};
  627. border-bottom:1px solid {color:posts};
  628. font-family: 'Droid Sans', sans-serif;
  629. }
  630.  
  631. #tags a {
  632. color:{color:tags};
  633. }
  634.  
  635. #tags a:hover {
  636. color:{color:tags hover};
  637. }
  638.  
  639. #credit {
  640. position:fixed;
  641. bottom:0px;
  642. left:0px;
  643. padding:4px 10px 4px 5px;
  644. text-decoration:none;
  645. font-size:11px;
  646. background-color:{color:sidebar};
  647. color:{color:background};
  648. font-family: 'Allura', cursive;
  649. -webkit-transition: all 0.3s ease-out;
  650. -o-transition: all 0.3s ease-out;
  651. -webkit-transition: all 0.3s ease-out;
  652. -moz-transition: all 0.3s ease-out;
  653.  
  654. }
  655.  
  656. .quote {
  657. padding-left:50px;
  658. padding-right:50px;
  659. font-size:12px;
  660. line-height:110%;
  661. text-align:center;
  662. font-family: 'Droid Sans', sans-serif;
  663. }
  664.  
  665. .face {
  666. float:right;
  667. width:37px;
  668. height:30px;
  669. padding-left:5px;
  670. border-left:1px solid {color:posts};
  671. }
  672.  
  673. .face img {
  674. border:7px solid {color:posts};
  675. }
  676.  
  677. .question {
  678. padding:10px;
  679. background-color:{color:blockquotes};
  680. min-height:30px;
  681. {block:IndexPage}
  682. {block:If400pxPosts}
  683. width:380px;
  684. {/block:If400pxPosts}
  685. {block:If500pxPosts}
  686. width:480px;
  687. {/block:If500pxPosts}
  688. {block:IfNot400pxPosts}
  689. {block:IfNot500pxPosts}
  690. width:230px;
  691. {/block:IfNot500pxPosts}
  692. {/block:IfNot400pxPosts}
  693. {/block:IndexPage}
  694. {block:PermalinkPage}
  695. width:480px;
  696. {/block:PermalinkPage}
  697. }
  698.  
  699. .words {
  700. text-align:justify;
  701. line-height:150%;
  702. }
  703.  
  704. .audio {
  705. margin-right:5px;
  706. width:70px;
  707. float:left;
  708. }
  709.  
  710. .hidden {
  711. width:70px;
  712. height:73px;
  713. }
  714.  
  715. .tumblr_audio_player {
  716. margin:0px;
  717. padding:0px;
  718. width:500px;
  719. height:50px;
  720. }
  721.  
  722. .pull {
  723. margin-left:5px;
  724. margin-top:-5px;
  725. }
  726.  
  727. .player {
  728. width:35px;
  729. height:37px;
  730. margin-left:10px;
  731. margin-top:10px;
  732. overflow:hidden;
  733. position:absolute;
  734. opacity:0.7;
  735. background-color:#fff;
  736. z-index:8888;
  737. border:7px solid #ECECEC;
  738. -webkit-transition: all 0.3s ease-out;
  739. -o-transition: all 0.3s ease-out;
  740. -webkit-transition: all 0.3s ease-out;
  741. -moz-transition: all 0.3s ease-out;
  742. }
  743.  
  744. .player:hover {
  745. opacity:1;
  746. -webkit-transition: all 0.3s ease-out;
  747. -o-transition: all 0.3s ease-out;
  748. -webkit-transition: all 0.3s ease-out;
  749. -moz-transition: all 0.3s ease-out;
  750. }
  751.  
  752. .caption {
  753. margin-top:20px;
  754. }
  755.  
  756. .audio img{
  757. max-width: 70px;
  758. height: auto;
  759. }
  760.  
  761. .song {
  762. margin-left:70px;
  763. margin-top:-55px;
  764. text-transform:uppercase;
  765. font-size:10px;
  766. padding-bottom:13px;
  767. font-family: 'Droid Sans', sans-serif;
  768. }
  769.  
  770. .link {
  771. padding:15px;
  772. background-color:{color:tags bg};
  773. border:1px solid {color:posts};
  774. border-radius:20px;
  775. font-size:15px;
  776. font-style:italic;
  777. }
  778.  
  779. .link a {
  780. color:{color:tags};
  781. }
  782.  
  783. .link a:hover {
  784. text-shadow:1px 1px 1px;
  785. }
  786.  
  787. ol.notes {
  788. padding:0px;
  789. margin-left:10px;
  790. list-style-type:decimal;
  791. font-style:italic;
  792. border-bottom: solid 1px {color:posts};
  793. width:480px;
  794. }
  795.  
  796. ol.notes li.note {
  797. border-top: solid 1px {color:posts};
  798. padding: 10px;
  799. font-family: 'Droid Sans', sans-serif;
  800. font-size:9px;
  801. }
  802.  
  803. ol.notes li.note img.avatar {
  804. vertical-align: -4px;
  805. margin-right: 10px;
  806. width: 16px;
  807. height: 16px;
  808. }
  809.  
  810. ol.notes li.note blockquote {
  811. border-color: {color:text};
  812. padding: 4px 10px;
  813. margin: 10px 0px 0px 25px;
  814. }
  815.  
  816. ol.notes li.note blockquote a {
  817. text-decoration: none;
  818. }
  819.  
  820. {CustomCSS}</style></head><body>
  821. <div id="theme">
  822.  
  823. <div id="right">
  824. {block:Pagination}
  825. <div id="pagination">
  826. {block:JumpPagination length="15"}
  827. {block:JumpPage}
  828. <a href="{URL}">{PageNumber}</a>
  829. {/block:JumpPage}
  830. {/block:JumpPagination}
  831. </div>
  832. {/block:Pagination}
  833.  
  834. <div id="dark">
  835. </div>
  836. <div id="title">
  837. <a href="/">
  838. {Title}
  839. </a>
  840. </div>
  841.  
  842. {block:IfSidebarImage}
  843. <div id="sidebarimage">
  844. <img src="{image:sidebar}">
  845. </div>
  846. {/block:IfSidebarImage}
  847. <div id="link">
  848. <a style="border-top:20px solid {color:sidelink1};" title="askbox" href="/ask"></a>
  849. {block:IfLink1Name}
  850. <a style="border-top:20px solid {color:sidelink2};" title="{text:link1name}" href="{text:link1}"></a>
  851. {/block:IfLink1Name}
  852. {block:IfLink2Name}
  853. <a style="border-top:20px solid {color:sidelink3};" title="{text:link2name}" href="{text:link2}"></a>
  854. {/block:IfLink2Name}
  855. {block:IfLink3Name}
  856. <a style="border-top:20px solid {color:sidelink4};" title="{text:link3name}" href="{text:link3}"></a>
  857. {/block:IfLink3Name}
  858. {block:IfLink4Name}
  859. <a style="border-top:20px solid {color:sidelink5};" title="{text:link4name}" href="{text:link4}"></a>
  860. {/block:IfLink4Name}
  861. {block:IfLink5Name}
  862. <a style="border-top:20px solid {color:sidelink6};" title="{text:link5name}" href="{text:link5}"></a>
  863. {/block:IfLink5Name}
  864. {block:IfLink6Name}
  865. <a style="border-top:20px solid {color:sidelink7};" title="{text:link6name}" href="{text:link6}"></a>
  866. {/block:IfLink6Name}
  867. {block:IfLink7Name}
  868. <a style="border-top:20px solid {color:sidelink8};" title="{text:link7name}" href="{text:link7}"></a>
  869. {/block:IfLink7Name}
  870. {block:IfLink8Name}
  871. <a style="border-top:20px solid {color:sidelink9};" title="{text:link8name}" href="{text:link8}"></a>
  872. {/block:IfLink8Name}
  873. </div>
  874. {block:Pagination}
  875. {block:PreviousPage}
  876. <div class="minus">
  877. <a href="{PreviousPage}">-</a>
  878. </div>
  879. {/block:PreviousPage}
  880. {block:NextPage}
  881. <div class="plus">
  882. <a href="{NextPage}">+</a>
  883. </div>
  884. {/block:NextPage}
  885. {/block:Pagination}
  886. <div id="description">
  887. {Description}
  888. </div>
  889. </div>
  890.  
  891. <a target="blank" title="theme by colorfulmetaphors" href="http://colorfulmetaphors.tumblr.com/">
  892. <div id="credit">
  893. T
  894. </div>
  895. </a>
  896.  
  897. <div id="entries">
  898. {block:Posts}
  899.  
  900. <div id="post">
  901. {block:IndexPage}
  902. <div id="info">
  903. {block:Date}
  904. <div id="date">
  905. <a href="{Permalink}">
  906. {Month}&nbsp;
  907. {DayofMonth}{DayofMonthSuffix},&nbsp;
  908. {Year}
  909. </a>
  910. </div>
  911. {/block:Date}
  912. <div id="from">
  913. {block:RebloggedFrom}
  914. {block:ContentSource}
  915. &copy;&nbsp;
  916. <a href="{SourceURL}">{ReblogRootName}</a>,&nbsp;
  917. {/block:ContentSource}
  918. via&nbsp;
  919. <a href="{ReblogParentURL}">{ReblogParentName}</a>&nbsp;&nbsp;-&nbsp;
  920. {/block:RebloggedFrom}
  921. {NoteCountWithLabel}&nbsp;&nbsp;-&nbsp;
  922. <a href="{ReblogURL}">reblog post</a>
  923. </div>
  924. </div>
  925. {/block:IndexPage}
  926.  
  927. {block:PermalinkPage}
  928. <div id="info">
  929. {block:Date}
  930. <div id="date">
  931. <a href="{Permalink}">
  932. {Month}&nbsp;
  933. {DayofMonth}{DayofMonthSuffix},&nbsp;
  934. {Year}
  935. </a>
  936. </div>
  937. {/block:Date}
  938. </div>
  939. {/block:PermalinkPage}
  940.  
  941. {block:Text}
  942. {block:Title}
  943. <h1>{Title}</h1>
  944. {/block:Title}
  945. {Body}
  946. {/block:Text}
  947.  
  948. {block:Photo}
  949. <center>{LinkOpenTag}
  950. {block:IndexPage}
  951. {block:If400pxPosts}
  952. <img src="{PhotoURL-500}" width="400">
  953. {/block:If400pxPosts}
  954. {block:If500pxPosts}
  955. <img src="{PhotoURL-500}">
  956. {/block:If500pxPosts}
  957. {block:IfNot400pxPosts}
  958. {block:IfNot500pxPosts}
  959. <img src="{PhotoURL-500}" width="250">
  960. {/block:IfNot500pxPosts}
  961. {/block:IfNot400pxPosts}
  962. {/block:IndexPage}
  963. {block:PermalinkPage}
  964. <img src="{PhotoURL-500}">
  965. {/block:PermalinkPage}
  966. {LinkCloseTag}</center>
  967. {block:Caption}
  968. {Caption}
  969. {/block:Caption}
  970. {/block:Photo}
  971.  
  972. {block:Photoset}
  973. {block:IndexPage}
  974. {block:If400pxPosts}
  975. {Photoset-400}
  976. {/block:If400pxPosts}
  977. {block:If500pxPosts}
  978. {Photoset-500}
  979. {/block:If500pxPosts}
  980. {block:IfNot400pxPosts}
  981. {block:IfNot500pxPosts}
  982. {Photoset-250}
  983. {/block:IfNot500pxPosts}
  984. {/block:IfNot400pxPosts}
  985. {/block:IndexPage}
  986. {block:PermalinkPage}
  987. {Photoset-500}
  988. {/block:PermalinkPage}
  989. {block:Caption}
  990. {Caption}
  991. {/block:Caption}
  992. {/block:Photoset}
  993.  
  994. {block:Quote}
  995. <div class="quote">
  996. {Quote}
  997. </div>
  998. {block:Source}
  999. <div style="text-align:center; font-family: 'Droid Sans', sans-serif; padding-top:5px">— {Source} —
  1000. </div>
  1001. {/block:Source}
  1002. {/block:Quote}
  1003.  
  1004. {block:Link}
  1005. <div class="link">
  1006. <a target="blank" href="{URL}" {Target}>-----&nbsp;{Name}</a>
  1007. </div>
  1008. {block:Description}
  1009. {Description}
  1010. {/block:Description}
  1011. {/block:Link}
  1012.  
  1013. {block:Chat}
  1014. {block:Title}
  1015. <h1>
  1016. {Title}
  1017. </h1>
  1018. {/block:Title}
  1019. {block:Lines}
  1020. {block:Label}
  1021. <strong>{Label}&nbsp;</strong>
  1022. {/block:Label}
  1023. {Line}<br />
  1024. {/block:Lines}
  1025. {/block:Chat}
  1026.  
  1027. {block:Audio}
  1028. {block:AlbumArt}
  1029. <div class="audio">
  1030. <img src="{AlbumArtURL}">
  1031. </div>
  1032. {/block:AlbumArt}
  1033. <div class="hidden">
  1034. <div class="player">
  1035. <div class="pull">
  1036. {AudioPlayerWhite}
  1037. </div>
  1038. </div>
  1039. </div>
  1040. <div class="song">
  1041. {block:TrackName}
  1042. {TrackName}
  1043. {/block:TrackName}
  1044. {block:Artist}
  1045. <br />{Artist}
  1046. {/block:Artist}
  1047. <br />{PlayCountWithLabel}
  1048. </div>
  1049. {block:Caption}
  1050. <div class="caption">
  1051. {Caption}
  1052. </div>
  1053. {/block:Caption}
  1054. {/block:Audio}
  1055.  
  1056. {block:Video}
  1057. {block:IndexPage}
  1058. {block:If400pxPosts}
  1059. {Video-400}
  1060. {/block:If400pxPosts}
  1061. {block:If500pxPosts}
  1062. {Video-500}
  1063. {/block:If500pxPosts}
  1064. {block:IfNot400pxPosts}
  1065. {block:IfNot500pxPosts}
  1066. {Video-250}
  1067. {/block:IfNot500pxPosts}
  1068. {/block:IfNot400pxPosts}
  1069. {/block:IndexPage}
  1070. {block:PermalinkPage}
  1071. {Video-500}
  1072. {/block:PermalinkPage}
  1073. {block:Caption}
  1074. {Caption}
  1075. {/block:Caption}
  1076. {/block:Video}
  1077.  
  1078. {block:Answer}
  1079. <div class="question">
  1080. <div class="words">
  1081. <a href="{AskerURL}" title="{AskerName}">
  1082. <div style="float:right;margin-left:5px;padding-left:5px;border-left:1px solid {color:posts};height:30px;">
  1083. <img src="{AskerPortraitURL-16}" border="7px solid {color:posts}">
  1084. </div>
  1085. </a>
  1086. {Question}
  1087. </div>
  1088. </div>
  1089. <br />
  1090. {Answer}
  1091. {/block:Answer}
  1092.  
  1093. {block:IndexPage}
  1094. {block:HasTags}
  1095. <div id="tags">
  1096. <span style="font-style:italic;">
  1097. {block:Tags}
  1098. &nbsp;&nbsp;
  1099. <a href="{TagURL}">
  1100. -&nbsp;{Tag}
  1101. </a>
  1102. &nbsp;&nbsp;
  1103. {/block:Tags}
  1104. </span>
  1105. </div>
  1106. {/block:HasTags}
  1107. {/block:IndexPage}
  1108.  
  1109. {block:PermalinkPage}
  1110. <div id="tags">
  1111. <span style="font-size:10px;">
  1112. {block:RebloggedFrom}
  1113. {block:ContentSource}
  1114. &copy;&nbsp;
  1115. <a href="{SourceURL}">{ReblogRootName}</a>,&nbsp;
  1116. {/block:ContentSource}
  1117. via&nbsp;
  1118. <a href="{ReblogParentURL}">{ReblogParentName}</a>
  1119. {/block:RebloggedFrom}
  1120. <br />
  1121. {TimeAgo}&nbsp;-&nbsp;
  1122. {NoteCountWithLabel}&nbsp;-&nbsp;
  1123. <a href="{ReblogURL}">reblog post</a>
  1124. </span>
  1125. {block:HasTags}
  1126. <br /><br />
  1127. <span style="font-size:8px;text-transform:uppercase;">
  1128. tagged&nbsp;as:&nbsp;
  1129. </span>
  1130. <span style="text-transform:uppercase;font-style:italic;">
  1131. {block:Tags}
  1132. <a href="{TagURL}">
  1133. &nbsp;{Tag}&nbsp;
  1134. </a>
  1135. {/block:Tags}
  1136. </span>
  1137. {/block:HasTags}
  1138. </div>
  1139. {/block:PermalinkPage}
  1140. </div>
  1141.  
  1142. {block:PostNotes}
  1143. {PostNotes}
  1144. {/block:PostNotes}
  1145. {/block:Posts}
  1146.  
  1147. </div>
  1148. </div>
  1149.  
  1150. </body>
  1151.  
  1152. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement