farflunghopes

2(XII)

May 4th, 2013
561
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.07 KB | None | 0 0
  1. <!--- Theme #24 '2(XII)' by Brianna @ farflunghopes.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 background image REPEAT and POSITION can be changed under the appearance options. Select or deslect 'BackgroundImageRepeat' and enter the position in 'bgimgposition'.
  14. - The sidebar image is 140px wide by 200px tall. A small image will be stretched and a larger one compressed.
  15. - There are four extra links available. Add them under the appearance options.
  16. - The BODY font SIZE can be changed under the appearance options. DO NOT add 'px' after the number.
  17. - The 'highlight' and 'highlighttext' color options refer to the background and text color that appears when you click and drag the cursor.
  18.  
  19. Enjoy!
  20.  
  21. --->
  22.  
  23. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  24. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  25. <head><title>{Title}</title>
  26. <link rel="shortcut icon" href="{Favicon}">
  27. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  28. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  29.  
  30. <link href='http://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister' rel='stylesheet' type='text/css'>
  31.  
  32. <link href='http://fonts.googleapis.com/css?family=Allura' rel='stylesheet' type='text/css'>
  33.  
  34. <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400italic,400' rel='stylesheet' type='text/css'>
  35.  
  36. <meta name="color:background" content="#ffffff"/>
  37. <meta name="color:sidebar1" content="#CCCCCC">
  38. <meta name="color:sidebar2" content="#444444">
  39. <meta name="color:sidebar3" content="#999999">
  40. <meta name="color:sidebar4" content="#555555">
  41. <meta name="color:text" content="#888888"/>
  42. <meta name="color:sidetext" content="#000000">
  43. <meta name="color:borders" content="#888888">
  44. <meta name="color:postborder" content="#888888">
  45. <meta name="color:link" content="#333333"/>
  46. <meta name="color:linkhover" content="#999999">
  47. <meta name="color:tags" content="#FFFFFF">
  48. <meta name="color:tagshover" content="#777777">
  49. <meta name="color:infolink" content="#555555">
  50. <meta name="color:infolinkhover" content="#999999">
  51. <meta name="color:sidelink" content="#444444">
  52. <meta name="color:sidelinkhover" content="#CCCCCC">
  53. <meta name="color:scrollbarbackground" content="#DDDDDD">
  54. <meta name="color:scrollbar" content="#999999">
  55. <meta name="color:highlight" content="#DDDDDD">
  56. <meta name="color:highlighttext" content="#111111">
  57.  
  58. <meta name="font:sidebar" content="">
  59. <meta name="font:body" content="">
  60.  
  61. <meta name="image:sidebar" content=""/>
  62. <meta name="image:background" content="">
  63. <meta name="image:sidebarbackground" content="">
  64.  
  65. <meta name="text:bodyfontsize" content="11">
  66. <meta name="text:bgimgposition" content="bottom right" />
  67. <meta name="text:link1" content="/">
  68. <meta name="text:link1name" content="link 1">
  69. <meta name="text:link2" content="/">
  70. <meta name="text:link2name" content="link 2">
  71. <meta name="text:link3" content="/">
  72. <meta name="text:link3name" content="link 3">
  73. <meta name="text:link4" content="/">
  74. <meta name="text:link4name" content="link 4">
  75.  
  76. <meta name="if:BackgroundImageRepeat" content="" />
  77. <meta name="if:400pxPosts" content="">
  78.  
  79. <style type="text/css">
  80.  
  81. iframe#tumblr_controls {right:3px !important; position: fixed important; !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;}
  82. 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;}
  83.  
  84. ::-webkit-scrollbar {
  85. width: 7px;
  86. background-color:{color:scrollbarbackground};
  87. }
  88.  
  89. ::-webkit-scrollbar-thumb {
  90. width:7px;
  91. background-color:{color:scrollbar};
  92. }
  93.  
  94. ::selection {
  95. background: {color:highlight};
  96. color: {color:highlighttext};
  97. }
  98.  
  99. body {
  100. background-color:{color:background};
  101. color:{color:text};
  102. font-size:{text:bodyfontsize}px;
  103. font-family:{font:body};
  104. background-image:url('{image:background}');
  105. background-attachment:fixed;
  106. word-spacing:1px;
  107. text-align:justify;
  108. background-position:{text:bgimgposition};
  109. {block:IfBackgroundImageRepeat}
  110. background-repeat:repeat;
  111. {/block:IfBackgroundImageRepeat}
  112. {block:IfNotBackgroundImageRepeat}
  113. background-repeat:no-repeat;
  114. {/block:IfNotBackgroundImageRepeat}
  115. }
  116.  
  117. a {
  118. color:{color:link};
  119. text-decoration:none;
  120. outline:none;
  121. -moz-outline-style:none;
  122. -webkit-transition: all 0.6s ease-out;
  123. -o-transition: all 0.6s ease-out;
  124. -webkit-transition: all 0.6s ease-out;
  125. -moz-transition: all 0.6s ease-out;
  126. }
  127.  
  128. a:hover {
  129. text-decoration:line-through;
  130. color:{color:linkhover};
  131. -webkit-transition: all 0.6s ease-out;
  132. -o-transition: all 0.6s ease-out;
  133. -webkit-transition: all 0.6s ease-out;
  134. -moz-transition: all 0.6s ease-out;
  135. }
  136.  
  137. a:tip:title {
  138. background-color:{color:background;}
  139. }
  140.  
  141. blockquote {
  142. padding-left:3px;
  143. border-left:2px solid;
  144. }
  145.  
  146. blockquote blockquote {
  147. padding-left:3px;
  148. border-left:2px solid;
  149. }
  150.  
  151. h1 {
  152. font-size:15px;
  153. font-family: 'Roboto Condensed', sans-serif;
  154. }
  155.  
  156. #theme {
  157. margin-top:20px;
  158. width:100%;
  159. margin-left:0%;
  160. }
  161.  
  162. #entries {
  163. {block:IfNot400pxPosts}
  164. width:500px;
  165. margin-left:335px;
  166. {/block:IfNot400pxPosts}
  167. {block:If400pxPosts};
  168. width:400px;
  169. margin-left:385px;
  170. {/block:If400pxPosts}
  171. }
  172.  
  173. #post {
  174. {block:IfNot400pxPosts}
  175. width:500px;
  176. {/block:IfNot400pxPosts}
  177. {block:If400pxPosts};
  178. width:400px;
  179. {/block:If400pxPosts}
  180. padding:10px;
  181. background-color:{color:background};
  182. overflow:hidden;
  183. padding-bottom:20px;
  184. border-bottom:1px solid {color:postborder};
  185. }
  186.  
  187. #sidebar1 {
  188. height:100%;
  189. margin-top:-20px;
  190. position:fixed;
  191. margin-left:-10px;
  192. width:120px;
  193. background-color:{color:sidebar1};
  194. background-image:url('{image:sidebarbackground}');
  195. }
  196.  
  197. #sidebar2 {
  198. margin-top:-20px;
  199. width:175px;
  200. height:100%;
  201. position:fixed;
  202. margin-left:110px;
  203. text-align:center;
  204. background-color:{color:sidebar2};
  205. border-left:20px solid {color:borders};
  206. border-right:1px solid {color:postborder};
  207. }
  208.  
  209. #sidebar3 {
  210. position:fixed;
  211. right:70px;
  212. width:170px;
  213. height:100%;
  214. margin-top:-20px;
  215. background-color:{color:sidebar3};
  216. border-right:10px solid {color:borders};
  217. border-left:1px solid {color:postborder};
  218. }
  219.  
  220. #sidebar4 {
  221. position:fixed;
  222. right:0px;
  223. width:70px;
  224. height:100%;
  225. margin-top:-20px;
  226. background-color:{color:sidebar4};
  227. border-left:1px solid {color:borders};
  228. background-image:url('{image:sidebarbackground}');
  229. }
  230.  
  231. #sidebarimage {
  232. margin-top:100px;
  233. margin-left:-80px;
  234. width:196px;
  235. -webkit-transition: all 0.6s ease-out;
  236. -o-transition: all 0.6s ease-out;
  237. -webkit-transition: all 0.6s ease-out;
  238. -moz-transition: all 0.6s ease-out;
  239. }
  240.  
  241. #sidebarimage img {
  242. width:140px;
  243. height:200px;
  244. padding:0px;
  245. border:10px solid {color:borders};
  246. }
  247.  
  248. #link {
  249. position:absolute;
  250. bottom:57%;
  251. margin-left:90px;
  252. padding-bottom:2px;
  253. padding-right:10px;
  254. width:70px;
  255. -webkit-transition: all 0.6s ease-out;
  256. -o-transition: all 0.6s ease-out;
  257. -webkit-transition: all 0.6s ease-out;
  258. -moz-transition: all 0.6s ease-out;
  259. }
  260.  
  261. #link a {
  262. padding:1px;
  263. margin-bottom:2px;
  264. display:block;
  265. font-size:8px;
  266. padding-top:2px;
  267. padding-bottom:2px;
  268. padding-left:5px;
  269. font-family:georgia;
  270. font-style:italic;
  271. text-align:left;
  272. width:40px;
  273. color:{color:sidelink};
  274. overflow:hidden;
  275. -webkit-transition: all 0.6s ease-out;
  276. -o-transition: all 0.6s ease-out;
  277. -webkit-transition: all 0.6s ease-out;
  278. -moz-transition: all 0.6s ease-out;
  279. }
  280.  
  281. #link a:hover {
  282. margin-left:10px;
  283. text-decoration:none;
  284. color:{color:sidelinkhover};
  285. -webkit-transition: all 0.6s ease-out;
  286. -o-transition: all 0.6s ease-out;
  287. -webkit-transition: all 0.6s ease-out;
  288. -moz-transition: all 0.6s ease-out;
  289. }
  290.  
  291. .text {
  292. margin-top:0px;
  293. margin-left:10px;
  294. padding-top:5px;
  295. padding-bottom:1px;
  296. text-align:justify;
  297. line-height:12px;
  298. font-size:10px;
  299. color:{color:sidetext};
  300. letter-spacing:0px;
  301. font-family:{font:sidebar};
  302. word-spacing:0px;
  303. width:130px;
  304. border-bottom:1px solid {color:borders};
  305. -webkit-transition: all 0.6s ease-out;
  306. -o-transition: all 0.6s ease-out;
  307. -webkit-transition: all 0.6s ease-out;
  308. -moz-transition: all 0.6s ease-out;
  309. }
  310.  
  311. #pagination {
  312. padding-bottom:5px;
  313. width:130px;
  314. margin-top:5px;
  315. margin-left:10px;
  316. text-align:center;
  317. color:{color:link};
  318. font-size:8px;
  319. font-family:georgia;
  320. }
  321.  
  322. #pagination a {
  323. color:{color:sidetext};
  324. }
  325.  
  326. #pagination a:hover {
  327. color:{color:tagshover};
  328. }
  329.  
  330. #info {
  331. {block:IfNot400pxPosts}
  332. margin-left:580px;
  333. {/block:IfNot400pxPosts}
  334. {block:If400pxPosts}
  335. margin-left:530px;
  336. {/block:If400pxPosts}
  337. position:absolute;
  338. width:150px;
  339. font-size:10px;
  340. text-align:right;
  341. font-family:georgia;
  342. letter-spxing:1px;
  343. word-spacing:1px;
  344. padding:10px;
  345. margin-top:0px;
  346. font-size:8px;
  347. border:5px solid {color:borders};
  348. background-color:{color:background};
  349. }
  350.  
  351. #info a{
  352. color:{color:infolink};
  353. }
  354.  
  355. #info a:hover {
  356. text-decoration:none;
  357. color:{color:infolinkhover};
  358. }
  359.  
  360. #tags {
  361. text-align:center;
  362. margin-top:5px;
  363. padding-left:0px;
  364. font-size:8px;
  365. padding-bottom:7px;
  366. padding-top:5px;
  367. font-style:italic;
  368. text-transform:none;
  369. border-top:1px dotted {color:postborder};
  370. }
  371.  
  372. #tags a {
  373. color:{color:tags};
  374. }
  375.  
  376. #tags a:hover {
  377. text-decoration:none;
  378. color:{color:tagshover};
  379. }
  380.  
  381. #credit {
  382. position:fixed;
  383. bottom:5px;
  384. left:5px;
  385. padding:0px 10px 0px 5px;
  386. font-size:12px;
  387. border:1px solid {color:borders};
  388. font-family: 'Allura', cursive;
  389. -webkit-transition: all 0.3s ease-out;
  390. -o-transition: all 0.3s ease-out;
  391. -webkit-transition: all 0.3s ease-out;
  392. -moz-transition: all 0.3s ease-out;
  393.  
  394. }
  395.  
  396. #credit:hover {
  397. bottom:3px;
  398. left:3px;
  399. border:3px double {color:borders};
  400. -webkit-transition: all 0.3s ease-out;
  401. -o-transition: all 0.3s ease-out;
  402. -webkit-transition: all 0.3s ease-out;
  403. -moz-transition: all 0.3s ease-out;
  404. }
  405.  
  406. .quotation {
  407. font-family: 'Love Ya Like A Sister', cursive;
  408. font-size:38px;
  409. margin-top:10px;
  410. }
  411.  
  412. .portrait {
  413. float:left;
  414. padding-right:5px;
  415. }
  416.  
  417. #asker {
  418. margin-top:5px;
  419. font-size:15px;
  420. border-bottom:1px dotted {color:borders};
  421. padding-bottom:5px;
  422. font-family: 'Roboto Condensed', sans-serif;
  423. }
  424.  
  425. #question {
  426. margin-top:-7px;
  427. border-bottom:1px solid {color:text};
  428. padding-bottom:7px;
  429. }
  430.  
  431. .audio {
  432. margin-right:5px;
  433. width:70px;
  434. float:left;
  435. }
  436.  
  437. .hidden {
  438. width:70px;
  439. height:73px;
  440. }
  441.  
  442. .pull {
  443. margin-left:-7px;
  444. margin-top:-6px;
  445. }
  446.  
  447. .tumblr_audio_player {
  448. margin:0px;
  449. padding:0px;
  450. width:500px;
  451. height:50px;
  452. }
  453.  
  454. .player {
  455. width:35px;
  456. height:37px;
  457. margin-left:10px;
  458. margin-top:10px;
  459. background-color:#999;
  460. overflow:hidden;
  461. position:absolute;
  462. opacity:0.7;
  463. background-color:#fff;
  464. border:7px solid #ECECEC;
  465. -webkit-transition: all 0.3s ease-out;
  466. -o-transition: all 0.3s ease-out;
  467. -webkit-transition: all 0.3s ease-out;
  468. -moz-transition: all 0.3s ease-out;
  469. }
  470.  
  471. .player:hover {
  472. opacity:1;
  473. -webkit-transition: all 0.3s ease-out;
  474. -o-transition: all 0.3s ease-out;
  475. -webkit-transition: all 0.3s ease-out;
  476. -moz-transition: all 0.3s ease-out;
  477. }
  478.  
  479. .caption {
  480. margin-top:18px;
  481. }
  482.  
  483. .audio img{
  484. max-width: 70px;
  485. height: auto;
  486. }
  487.  
  488. .song {
  489. margin-left:70px;
  490. margin-top:-61px;
  491. text-transform:uppercase;
  492. font-family: 'Roboto Condensed', sans-serif;
  493. font-size:12px;
  494. padding-bottom:13px;
  495. }
  496.  
  497. .quote {
  498. margin-top:-35px;
  499. }
  500.  
  501. {CustomCSS}</style>
  502.  
  503. </head><body>
  504.  
  505. <div id="theme">
  506. <div id="sidebar1"></div>
  507.  
  508. <div id="sidebar2">
  509.  
  510. <div id="sidebarimage"><img src="{image:sidebar}"></div>
  511.  
  512. <div id="link">
  513. <center>
  514. <a href="/">home</a>
  515. <a href="/ask">askbox</a>
  516. {block:ifLink1Name}
  517. <a href="{text:link1}">{text:link1name}</a>
  518. {/block:ifLink1Name}
  519. {block:ifLink2Name}
  520. <a href="{text:link2}">{text:link2name}</a>
  521. {/block:ifLink2Name}
  522. {block:ifLink3Name}
  523. <a href="{text:link3}">{text:link3name}</a>
  524. {/block:ifLink3Name}
  525. {block:ifLink4Name}
  526. <a href="{text:link4}">{text:link4name}</a>
  527. {/block:ifLink4Name}
  528. </center></div>
  529.  
  530. <div class="text">
  531. {Description}<p>
  532. </div>
  533.  
  534. <div id="pagination">{block:PreviousPage}<a href="{PreviousPage}"><big>←</big></a>{/block:PreviousPage}&nbsp;
  535. {block:JumpPagination length="5"}
  536. {block:CurrentPage}
  537. <strong>{PageNumber}</strong>&nbsp;&nbsp;
  538. {/block:CurrentPage}
  539. {block:JumpPage}
  540. <a href="{URL}">{PageNumber}</a>&nbsp;&nbsp;
  541. {/block:JumpPage}
  542. {/block:JumpPagination}
  543. {block:NextPage}<a href="{NextPage}"><big>→</big></a>{/block:NextPage}</div>
  544. </div>
  545.  
  546. <div id="sidebar4"></div>
  547. <div id="sidebar3"></div>
  548.  
  549. <a href="http://farflunghopes.tumblr.com"><div id="credit">T</div></a>
  550.  
  551. <div id="entries">
  552.  
  553. {block:Posts}<div id="post">
  554.  
  555. <div id="info">
  556. {block:Date}<a href="{Permalink}">{TimeAgo} | ({ShortMonth} {DayOfMonth}, {ShortYear})</a><br>{/block:Date}<a href="{Permalink}">{NoteCountWithLabel}</a> | <a href="{ReblogURL}">reblog</a>{block:RebloggedFrom}<br><a href="{ReblogParentURL}">{ReblogParentName}</a> {block:ContentSource}(© <a href="{SourceURL}">{ReblogRootName}</a>){/block:ContentSource}{/block:RebloggedFrom}
  557.  
  558. </div>
  559.  
  560. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  561.  
  562. {block:Photo}<center>{LinkOpenTag}{block:If400pxPosts}<img src="{PhotoURL-500}" width="400">{/block:If400pxPosts}{block:IfNot400pxPosts}<img src="{PhotoURL-500}">{/block:IfNot400pxPosts}{LinkCloseTag}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  563.  
  564. {block:Photoset}{block:If400pxPosts}{Photoset-400}{/block:If400pxPosts}{block:IfNot400pxPosts}{Photoset-500}{/block:IfNot400pxPosts}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  565.  
  566. {block:Quote}<div class="quotation">"</div><div class="quote">&nbsp&nbsp&nbsp&nbsp&nbsp{Quote}"</div>{block:Source}<br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp—{Source}{/block:Source}{/block:Quote}
  567.  
  568. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  569.  
  570. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}</h1>{block:Lines}{block:Label}<strong>{Label}&nbsp</strong>{/block:Label}{Line}<br>{/Block:Lines}{/block:Chat}
  571.  
  572. {block:Audio}
  573. {block:AlbumArt}
  574. <div class="audio">
  575. <img src="{AlbumArtURL}">
  576. </div>
  577. {/block:AlbumArt}
  578. <div class="hidden">
  579. <div class="player">
  580. <div class="pull">
  581. {AudioPlayerWhite}
  582. </div>
  583. </div>
  584. </div>
  585. <div class="song">
  586. {block:TrackName}
  587. {TrackName}
  588. {/block:TrackName}
  589. {block:Artist}
  590. <br />
  591. {Artist}
  592. {/block:Artist}
  593. <br />
  594. {PlayCountWithLabel}
  595. </div>
  596. {block:Caption}
  597. <div class="caption">
  598. {Caption}
  599. </div>
  600. {/block:Caption}
  601. {/block:Audio}
  602. {block:Video}{block:If400pxPosts}{Video-400}{/block:If400pxPosts}{block:IfNot400pxPosts}{Video-500}{/block:IfNot400pxPosts}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  603.  
  604. {block:Answer}<div class="portrait"><img src="{AskerPortraitURL-48}"></div><div id="asker">{Asker}:</div><br><div id="question">{Question}</div><br>{Answer}{/block:Answer}
  605.  
  606. {block:HasTags}<div id="tags">&nbsp;&nbsp;-&nbsp;&nbsp;{block:Tags}<a href="{TagURL}">{Tag}</a>&nbsp;&nbsp;-&nbsp;&nbsp;{/block:Tags}</div>{/block:HasTags}
  607.  
  608. </div>
  609.  
  610. <br><br><br>
  611. {block:PostNotes}{PostNotes}{/block:PostNotes}
  612. {/block:Posts}</div>
  613. </div>
  614.  
  615. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment