API tools faq
paste
Jyuubi

[Theme] → #02 Utopia

Jyuubi
Jul 22nd, 2012
6,970
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.44 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  
  4. <!--
  5. PLEASE DO NOT REMOVE THIS.
  6. THE REMOVAL OF THIS PART WILL CONSIDER YOU A THIEF.
  7. IF YOU REMOVE CREDIT, MAKE SURE IT'S ON A CREDITS PAGE.
  8.  
  9. THEME: #02 UTOPIA
  10. jyuubi.org | manatopia.org
  11.  
  12. --RULES--
  13. 1) DO NOT REMOVE CREDIT.
  14. 2) DO NOT USE TO MAKE YOUR OWN THEME TO RESDISTRIBUTE.
  15. 3) DO NOT USE TO MAKE YOUR OWN THEME AND REMOVE CREDIT.
  16. 4) IF YOU USE ANYTHING FROM MY THEMES, ALWAYS CREDIT.
  17. 5) DO USE ANY GRAPHICS MADE FOR A PREVIEW.
  18. -->
  19.  
  20. <meta name="color:BackgroundM" content="#fff">
  21. <meta name="color:Content Background" content="#faf3eb">
  22. <meta name="color:Content Text" content="#B6B0A9">
  23. <meta name="color:Content Bold" content="#D4AD9A">
  24. <meta name="color:Content Italic" content="#d3b0b1">
  25. <meta name="color:Content Link" content="#EBAF87">
  26.  
  27. <meta name="color:Nav Background" content="#e7deef">
  28. <meta name="color:Nav Background Hover" content="#ffd6ad">
  29. <meta name="color:Nav Text" content="#B2A7BB">
  30. <meta name="color:Nav Text Hover" content="#D3B291">
  31.  
  32. <meta name="color:Sidebar Title" content="#d3b0b1">
  33. <meta name="color:Sidebar Subtitle" content="#C2AF8E">
  34. <meta name="color:Sidebar Subtitle Background" content="#f6deb5">
  35.  
  36. <meta name="color:Custom Link Background" content="#F5CBB8">
  37. <meta name="color:Custom Link Text" content="#C99F8E">
  38. <meta name="color:Custom Link Text Hover" content="#fff">
  39.  
  40. <meta name="color:Arrows" content="#d3b0b1">
  41.  
  42. <meta name="color:Post Title" content="#d3b0b1">
  43. <meta name="color:Post Blockquote Border" content="#E7E1DB">
  44. <meta name="color:Post Question Background" content="#FFF8F0">
  45.  
  46. <meta name="color:Permalink Tab Background" content="#ffd6ad">
  47. <meta name="color:Permalink Tab Time" content="#CFB090">
  48. <meta name="color:Permalink Tab Notes" content="#CFB090">
  49. <meta name="color:Permalink Tab Tags" content="#d3b0b1">
  50.  
  51. <meta name="image:BackgroundM" content="http://static.tumblr.com/pdgxkke/SlOm1h553/utopia.png">
  52. <meta name="image:Sidebar" content="http://static.tumblr.com/pdgxkke/Q99m1h55h/vanille.gif">
  53.  
  54. <meta name="if:Infinite Scrolling" content="0">
  55. <meta name="if:Larger Posts" content="1">
  56. <meta name="if:Permalink On Hover" content="1">
  57. <meta name="if:Show Tags" content="1">
  58. <meta name="if:Show Captions" content="0">
  59.  
  60. <meta name="text:Sidebar Position" content="50">
  61.  
  62. <meta name="text:Sidebar Title" content="">
  63. <meta name="text:Sidebar Subtitle" content="">
  64.  
  65. <meta name="text:Name 1" content="">
  66. <meta name="text:URL 1" content="http://">
  67. <meta name="text:Name 2" content="">
  68. <meta name="text:URL 2" content="http://">
  69. <meta name="text:Name 3" content="">
  70. <meta name="text:URL 3" content="http://">
  71. <meta name="text:Name 4" content="">
  72. <meta name="text:URL 4" content="http://">
  73. <meta name="text:Name 5" content="">
  74. <meta name="text:URL 5" content="http://">
  75. <meta name="text:Name 6" content="">
  76. <meta name="text:URL 6" content="http://">
  77.  
  78. <head>
  79. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  80. <title>{Title}</title>
  81. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  82. <link rel="shortcut icon" href="{Favicon}">
  83. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  84.  
  85. <style type="text/css">
  86. /* BODY */
  87. body {
  88. background-image: url("{image:BackgroundM}");
  89. background-attachment: fixed;
  90. background-repeat: repeat;
  91. background-color: {color:BackgroundM};
  92. color: {color:Content Text};
  93. }
  94.  
  95. b, strong {
  96. color: {color:Content Bold};
  97. font-weight: normal;
  98. }
  99.  
  100. i, em {
  101. color: {color:Content Italic};
  102. }
  103.  
  104. a {
  105. color: {color:Content Link};
  106. text-decoration: none;
  107. }
  108.  
  109. @font-face {
  110. font-family: "tinytots";
  111. src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
  112. }
  113.  
  114. /* LEFT */
  115. #left {
  116. float: left;
  117. position: fixed;
  118. margin-top: {text:Sidebar Position}px;
  119. margin-left: 5px;
  120. }
  121.  
  122. /* TOP NAV */
  123. #nav {
  124. margin-bottom: 5px;
  125. }
  126.  
  127. #nav a {
  128. background-color: {color:Nav Background};
  129. display: inline-block;
  130. width: 54px;
  131. height: 30px;
  132. line-height: 33px;
  133. font-family: consolas;
  134. font-size: 9px;
  135. color: {color:Nav Text};
  136. text-transform: uppercase;
  137. text-decoration: none;
  138. letter-spacing: 1px;
  139. text-align: center;
  140. -webkit-transition: all 0.5s ease;
  141. -moz-transition: all 0.5s ease;
  142. -o-transition: all 0.5s ease;
  143. margin-left: 2px;
  144. }
  145.  
  146. #nav a:hover {
  147. background-color: {color:Nav Background Hover};
  148. color: {color:Nav Text Hover};
  149. }
  150.  
  151. /* SIDEBAR */
  152. #sidebar {
  153. background-color: {color:Content Background};
  154. width: 225px;
  155. padding: 5px;
  156. margin-top: 1px;
  157. margin-left: 1px;
  158. font-family: tahoma, sans-serif;
  159. font-size: 10px;
  160. text-align: center;
  161. letter-spacing: 1px;
  162. }
  163.  
  164. #sidebar h1 {
  165. font-family: {font:Sidebar Title};
  166. font-size: 16px;
  167. color: {color:Sidebar Title};
  168. font-weight: normal;
  169. letter-spacing: 8px;
  170. text-transform: lowercase;
  171. text-align: left;
  172. margin-left: 5px;
  173. margin: 0;
  174. }
  175.  
  176. #sidebar h2 {
  177. font-family: consolas;
  178. font-size: 9px;
  179. color: {color:Sidebar Subtitle};
  180. font-weight: normal;
  181. letter-spacing: 3px;
  182. text-transform: uppercase;
  183. text-align: right;
  184. margin-top: -3px;
  185. background-color: {color:Sidebar Subtitle Background};
  186. border-top: 1px dotted {color:Sidebar Subtitle};
  187. }
  188.  
  189. #sidebar img {
  190. max-width: 225px;
  191. }
  192.  
  193. /* CUSTOM LINKS */
  194. #sidebar a.custom {
  195. background-color: {color:Custom Link Background};
  196. display: block;
  197. height: 11px;
  198. line-height: 12px;
  199. margin-bottom: 3px;
  200. font-family: consolas;
  201. font-size: 9px;
  202. color: {color:Custom Link Text};
  203. text-transform: uppercase;
  204. text-decoration: none;
  205. letter-spacing: 2px;
  206. text-align: center;
  207. -webkit-transition: all 1s ease;
  208. -moz-transition: all 1s ease;
  209. -o-transition: all 1s ease;
  210. }
  211.  
  212. #sidebar a.custom:hover {
  213. color: {color:Custom Link Text Hover};
  214. }
  215.  
  216. /* PAGINATION */
  217. #pages {
  218. text-align: center;
  219. font-size: 30px;
  220. width: 225px;
  221. }
  222.  
  223. #pages a {
  224. color: {color:Arrows};
  225. text-decoration: none;
  226. }
  227.  
  228. /* POSTS */
  229. .post {
  230. {block:IfLargerPosts}width: 600px;{/block:IfLargerPosts}
  231. {block:IfNotLargerPosts}width: 500px;{/block:IfNotLargerPosts}
  232. margin-left: 255px;
  233. }
  234.  
  235. /* ENTRY */
  236. .entry {
  237. background-color: {color:Content Background};
  238. {block:IfLargerPosts}width: 500px;{/block:IfLargerPosts}
  239. {block:IfNotLargerPosts}width: 400px;{/block:IfNotLargerPosts}
  240. float: left;
  241. margin-bottom: 10px;
  242. font-family: tahoma, sans-serif;
  243. font-size: 12px;
  244. letter-spacing: 1px;
  245. overflow: hidden;
  246. border: 5px solid {color:Content Background};
  247. }
  248.  
  249. .entry h1 {
  250. font-family: lucida console;
  251. font-size: 14px;
  252. color: {color:Post Title};
  253. font-weight: normal;
  254. text-align: center;
  255. letter-spacing: 2px;
  256. text-transform: lowercase;
  257. }
  258.  
  259. .entry h1 a {
  260. color: {color:Post Title};
  261. }
  262.  
  263. .entry blockquote {
  264. border-left: 4px solid {color:Post Blockquote Border};
  265. padding-left: 5px;
  266. margin-left: 5px;
  267. }
  268.  
  269. /* IMAGES */
  270. {block:IfNotLargerPosts}
  271. .entry img {
  272. max-width: 400px;
  273. }
  274. {/block:IfNotLargerPosts}
  275.  
  276. /* QUOTE POST */
  277. .entry h2 {
  278. font-family: tahoma, sans-serif;
  279. font-size: 11px;
  280. color: {color:Post Title};
  281. font-weight: normal;
  282. text-transform: uppercase;
  283. letter-spacing: 2px;
  284. text-align: left;
  285. }
  286.  
  287. .quote {
  288. font-family: georgia;
  289. font-size: 24px;
  290. color: {color:Content Bold};
  291. float: left;
  292. margin-right: 5px;
  293. }
  294.  
  295. /* ASK POST */
  296. .ask {
  297. background-color: {color:Post Question Background};
  298. padding: 3px;
  299. }
  300.  
  301. /* AUDIO */
  302. .player {
  303. background-color: #fff;
  304. {block:IfLargerPosts}width: 500px;{/block:IfLargerPosts}
  305. {block:IfNotLargerPosts}width: 400px;{/block:IfNotLargerPosts}
  306. height: 27px;
  307. opacity: .5;
  308. }
  309.  
  310. /* PERMALINK BOX */
  311. .perma {
  312. background-color: {color:Permalink Tab Background};
  313. font-family: consolas;
  314. font-size: 9px;
  315. color: {color:Permalink Tab Notes};
  316. text-transform: uppercase;
  317. text-align: center;
  318. line-height: 10px;
  319. width: 80px;
  320. float: right;
  321. padding: 2px;
  322. border-radius: 5px;
  323. -moz-border-radius: 5px;
  324. -webkit-border-radius: 5px;
  325. }
  326.  
  327. .perma a {
  328. color: {color:Permalink Tab Time};
  329. text-decoration: none;
  330. }
  331.  
  332. .perma2 {
  333. font-family: consolas;
  334. font-size: 8px;
  335. text-transform: uppercase;
  336. text-align: left;
  337. letter-spacing: 1px;
  338. line-height: 10px;
  339. width: 80px;
  340. height: 10px;
  341. float: right;
  342. margin-top: -5px;
  343. padding: 2px;
  344. }
  345.  
  346. .perma2 a {
  347. color: {color:Permalink Tab Tags};
  348. text-decoration: none;
  349. }
  350.  
  351. /* HOVER */
  352. .show {
  353. opacity: 0;
  354. filter: alpha(opacity=0);
  355. -moz-opacity: 0;
  356. -khtml-opacity: 0;
  357. -webkit-transition: all 1.5s ease;
  358. -moz-transition: all 1.5s ease;
  359. -o-transition: all 1.5s ease;
  360. }
  361.  
  362. .post:hover .show {
  363. opacity: 1;
  364. -moz-opacity: 1;
  365. -khtml-opacity: 1;
  366. }
  367.  
  368. /* PERMALINK PAGE */
  369. .permalink {
  370. font-family: tahoma, sans-serif;
  371. font-size: 10px;
  372. color: {color:Content Text};
  373. text-transform: lowercase;
  374. text-align: center;
  375. {block:IfLargerPosts}width: 510px;{/block:IfLargerPosts}
  376. {block:IfNotLargerPosts}width:410px;{/block:IfNotLargerPosts}
  377. margin-left: 255px;
  378. }
  379.  
  380. .permalink b {
  381. color: {color:Content Bold};
  382. font-weight: normal;
  383. }
  384.  
  385. #date {
  386. color: {color:Content Italic};
  387. }
  388.  
  389. .permalink a {
  390. color: {color:Content Link};
  391. text-decoration: none;
  392. }
  393.  
  394. ol.notes {
  395. padding: 0px;
  396. margin: 15px 0px;
  397. list-style-type: none;
  398. background: transparent;
  399. border: 0px;
  400. letter-spacing: 0px;
  401. }
  402.  
  403. ol.notes li.note {
  404. padding: 1px;
  405. text-align: left;
  406. letter-spacing: 0px;
  407. }
  408.  
  409. .notes img{
  410. width: 10px;
  411. position: relative;
  412. top: 1px;
  413. opacity: .5;
  414. }
  415.  
  416. /* FOLLOW CODE */
  417. iframe#tumblr_controls {
  418. right:3px !important;
  419. position: fixed !important;
  420. -webkit-transition: opacity 0.7s linear;
  421. opacity: 0.2;
  422. -webkit-transition: all 0.8s ease-out;
  423. -moz-transition: all 0.8s ease-out;
  424. transition: all 0.8s ease-out;
  425. }
  426.  
  427. iframe#tumblr_controls:hover {
  428. -webkit-transition: opacity 0.7s linear;
  429. opacity: 1;
  430. -webkit-transition: all 0.4s ease-out;
  431. -moz-transition: all 0.4s ease-out;
  432. transition: all 0.4s ease-out;
  433. }
  434. </style>
  435. <style type="text/css">{CustomCSS}</style>
  436. {block:IfInfiniteScrolling}
  437. <script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>
  438. {/block:IfInfiniteScrolling}
  439. </head>
  440.  
  441. <body>
  442.  
  443. <div id="left">
  444. <div id="nav">
  445. <a href="/">Index</a>
  446. <a href="/archive">Archive</a>
  447. <a href="/ask">Message</a>
  448. <a href="http://jyuubi.org">Theme</a>
  449. </div>
  450.  
  451. <div id="sidebar">
  452. <img src="{image:Sidebar}" alt="">
  453. <h1>{text:Sidebar Title}</h1>
  454. <h2>{text:Sidebar Subtitle}</h2>
  455. {block:IfName1}<a class="custom" href="{text:URL 1}">{text:Name 1}</a>{/block:IfName1}
  456. {block:IfName2}<a class="custom" href="{text:URL 2}">{text:Name 2}</a>{/block:IfName2}
  457. {block:IfName3}<a class="custom" href="{text:URL 3}">{text:Name 3}</a>{/block:IfName3}
  458. {block:IfName4}<a class="custom" href="{text:URL 4}">{text:Name 4}</a>{/block:IfName4}
  459. {block:IfName5}<a class="custom" href="{text:URL 5}">{text:Name 5}</a>{/block:IfName5}
  460. {block:IfName6}<a class="custom" href="{text:URL 6}">{text:Name 6}</a>{/block:IfName6}
  461. {Description}
  462. </div>
  463. {block:IfNotInfiniteScrolling}
  464. {block:Pagination}<div id="pages">
  465. {block:PreviousPage}<a href="{PreviousPage}">&larr;</a> &nbsp;&nbsp;&nbsp; {block:PreviousPage}{block:NextPage}<a href="{NextPage}">&rarr;</a>{block:NextPage}
  466. </div>{/block:Pagination}
  467. {/block:IfNotInfiniteScrolling}
  468. </div>
  469.  
  470. <div class="autopagerize_page_element">
  471. {block:Posts}
  472.  
  473. <div class="post">
  474. <div class="entry">
  475.  
  476. {block:Text}
  477. {block:Title}<h1>{Title}</h1>{/block:Title}
  478. {Body}
  479. {/block:Text}
  480.  
  481. {block:Photo}
  482. <center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"></a>{LinkCloseTag}</center>
  483. {block:HighRes}<font size="1px"><a href="{PhotoURL-HighRes}">high resolution &rarr;</a></font>{/block:HighRes}
  484. {block:IfShowCaptions}{block:Caption}
  485. {Caption}{/block:Caption}{/block:IfShowCaptions}
  486. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  487. {Caption}{/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  488. {/block:Photo}
  489.  
  490. {block:Photoset}
  491. {block:IfNotLargerPosts}{Photoset-400}{block:IfNotLargerPosts}
  492. {block:IfLargerPosts}{Photoset-500}{block:IfLargerPosts}
  493. {block:IfShowCaptions}{block:Caption}
  494. {Caption}
  495. {/block:Caption}{/block:IfShowCaptions}
  496. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  497. {Caption}
  498. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  499. {/block:Photoset}
  500.  
  501. {block:Quote}
  502. <div class="quote">&#10077;</div>
  503. <h2>{Quote}</h2>
  504. {block:Source}<p align="right">{Source} &mdash;</p>{/block:Source}
  505. {/block:Quote}
  506.  
  507. {block:Link}
  508. <h1><a href="{URL}" target="{Target}">{Name}</a></h1>
  509. {block:Description}
  510. {Description}
  511. {/block:Description}
  512. {/block:Link}
  513.  
  514. {block:Chat}
  515. {block:Title}<h1>{Title}</h1>{/block:Title}
  516. {block:Lines}
  517. {block:Label}
  518. <b>{Label}</b>
  519. {/block:Label}
  520. {Line}<br />
  521. {/block:Lines}
  522. {/block:Chat}
  523.  
  524. {block:Audio}
  525. <div class="player">{AudioPlayer}</div>
  526. <i>{FormattedPlayCount}</i> plays
  527. {block:IfShowCaptions}{block:Caption}<br />
  528. {Caption}{/block:Caption}{/block:IfShowCaptions}
  529. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}<br />
  530. {Caption}
  531. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  532. {/block:Audio}
  533.  
  534. {block:Video}
  535. {block:IfLargerPosts}{Video-500}{/block:IfLargerPosts}
  536. {block:IfNotLargerPosts}{Video-400}{/block:IfNotLargerPosts}
  537. {block:IfShowCaptions}{block:Caption}
  538. {Caption}
  539. {/block:Caption}{/block:IfShowCaptions}
  540. {block:IfNotShowCaptions}{block:PermalinkPage}{block:Caption}
  541. {Caption}
  542. {/block:Caption}{/block:PermalinkPage}{/block:IfNotShowCaptions}
  543. {/block:Video}
  544.  
  545. {block:Answer}
  546. <div class="ask">{Asker} <b>sent:</b> {Question}</div>
  547. {Answer}
  548. {/block:Answer}
  549.  
  550. </div>
  551. {block:IndexPage}
  552. {block:IfPermalinkOnHover}<div class="show">{/block:IfPermalinkOnHover}
  553. <p class="perma">{block:Date}<a href="{Permalink}">{TimeAgo}</a>{/block:Date}{block:NoteCount}<br>{NoteCountWithLabel}{/block:NoteCount}</p>
  554. {block:IfShowTags}{block:HasTags}
  555. <p class="perma2">{block:Tags}<a href="{TagURL}">#{Tag}</a><br>{/block:Tags}</p>
  556. {/block:HasTags}{/block:IfShowTags}
  557. {block:IfPermalinkOnHover}</div>{/block:IfPermalinkOnHover}
  558. {/block:IndexPage}
  559. </div>
  560.  
  561. {block:PermalinkPage}
  562. <div class="permalink">
  563. <center><div id="date">{block:Date}{12Hour}:{Minutes} {AmPm} on {DayOfWeek}, {Month} {DayOfMonth}, {Year}{/block:Date}{block:NoteCount} with {NoteCountWithLabel}{/block:NoteCount}</div>
  564. {block:RebloggedFrom}<b>origin:</b> <a href="{ReblogRootURL}">{ReblogRootName}</a>&nbsp;&nbsp;|&nbsp;&nbsp;<b>via:</b> <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}
  565. {block:HasTags}<br /><b>tags &raquo;</b> {block:Tags}<a href="{TagURL}">#{Tag}</a>&nbsp;&nbsp;{/block:Tags}{/block:HasTags}</center>
  566. {block:PostNotes}
  567. {PostNotes}
  568. {/block:PostNotes}
  569. </div>
  570. {/block:PermalinkPage}
  571.  
  572. {/block:Posts}
  573. </div>
  574.  
  575. </body>
  576. </html>
Advertisement
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!