API tools faq
paste
Advertisement
chillinobrien

Theme 05

chillinobrien
Oct 4th, 2014
1,900
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.43 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.  
  3. <!-----------------------------------------------------------------------
  4.  
  5. * THEME #05 by saaraa @ cyantists.tumblr.com
  6.  
  7. - terms of use: http://cyantists.tumblr.com/terms
  8.  
  9. - I am no longer offering support for this theme
  10.  
  11. - enjoy!
  12.  
  13. ------------------------------------------------------------------------>
  14.  
  15. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  16. <head>
  17.  
  18. <title>{Title}</title>
  19. <link rel="shortcut icon" href="{Favicon}">
  20. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  21. {block:Description}
  22. <meta name="description" content="{MetaDescription}" />
  23. {/block:Description}
  24.  
  25.  
  26. <meta name="if:White Tumblr Controls" content="1" />
  27.  
  28. <meta name="image:Background" content="" />
  29. <meta name="image:Sidebar" content="" />
  30.  
  31. <meta name="color:Background" content="#f8f8f8" />
  32. <meta name="color:Post Background" content="#fff" />
  33. <meta name="color:Accent 1" content="#fc175c" />
  34. <meta name="color:Accent 2" content="#1ebff5" />
  35. <meta name="color:Accent 3" content="#ffd617" />
  36. <meta name="color:Main" content="#a8a8a8" />
  37. <meta name="color:Bold" content="#959595" />
  38.  
  39. <meta name="text:Link 1 Name" content="home" />
  40. <meta name="text:Link 1 URL" content="/url" />
  41. <meta name="text:Link 2 Name" content="ask" />
  42. <meta name="text:Link 2 URL" content="/url" />
  43. <meta name="text:Link 3 Name" content="past" />
  44. <meta name="text:Link 3 URL" content="/url" />
  45. <meta name="text:Link 4 Name" content="tags" />
  46. <meta name="text:Link 4 URL" content="/url" />
  47. <meta name="text:Link 5 Name" content="links" />
  48. <meta name="text:Link 5 URL" content="/url" />
  49.  
  50. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  51.  
  52. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  53. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  54. <script>
  55. (function($){
  56. $(document).ready(function(){
  57. $("[title]").style_my_tooltips({
  58. tip_follows_cursor:true,
  59. tip_delay_time:300,
  60. tip_fade_speed:300
  61. }
  62. );
  63. });
  64. })(jQuery);
  65. </script>
  66.  
  67. <link href='http://fonts.googleapis.com/css?family=Leckerli+One' rel='stylesheet' type='text/css'>
  68.  
  69. <style type="text/css">
  70.  
  71. ::selection {background:{color:Accent 1}; color:#fff;}
  72. ::-webkit-selection {background:{color:Accent 1}; color:#fff;}
  73. ::-moz-selection {background:{color:Accent 1}; color:#fff;}
  74. ::-o-selection {background:{color:Accent 1}; color:#fff;}
  75.  
  76. ::-webkit-scrollbar {width:5px; background:{color:Post Background};}
  77.  
  78. ::-webkit-scrollbar-thumb {height:auto; background:{color:Accent 1};}
  79. ::-webkit-scrollbar-thumb:hover {background:{color:Accent 2};}
  80.  
  81. body {background-color:{color:Background}; background-attachment:fixed;
  82. background-image:url('{image:Background}'); color:{color:Main};
  83. font-family:arial; font-size:11px; text-align:justify; margin:0;
  84. background-repeat:no-repeat;}
  85.  
  86. html {overflow-y:scroll;}
  87.  
  88. iframe#tumblr_controls {
  89. right:3px !important; position:fixed !important; opacity:0.5;
  90. {block:IfWhiteTumblrControls}
  91. filter:invert(1); -webkit-filter:invert(1); -o-filter:invert(1);
  92. -moz-filter:invert(1); -ms-filter:invert(1);
  93. {/block:IfWhiteTumblrControls}}
  94.  
  95. iframe#tumblr_controls:hover {opacity:1;}
  96.  
  97. a:link, a:active, a:visited {text-decoration:none; color:{color:Bold};}
  98.  
  99. i, em {color:{color:Accent 1}; padding-left:3px;}
  100.  
  101. b, strong {color:{color:Bold};}
  102.  
  103. small {font-size:10px;}
  104.  
  105. big {font-size:12px;}
  106.  
  107. sup, sub {font-size:10px;}
  108.  
  109. ul, ol {padding:2px 0px 2px 20px; margin-left:12px;}
  110.  
  111. pre {font-variant:small-caps; text-transform:lowercase;
  112. padding:5px 0px 5px 5px;}
  113.  
  114. blockquote {padding:2px 0px 2px 20px; border-left:2px solid {color:Main};
  115. margin-left:20px;}
  116.  
  117. #container {position:absolute; width:880px; top:0px; margin:auto; left:0;
  118. right:0;}
  119.  
  120. #sidebar {position:fixed; margin-top:180px; margin-left:0px; width:180px;
  121. background:{color:Post Background};
  122. border:20px solid {color:Post Background};}
  123.  
  124. #s-image {width:180px; cursor:pointer; background:{color:Accent 1};}
  125.  
  126. #s-image img {width:180px; display:block;}
  127.  
  128. #sidebar:hover #s-image {background:{color:Accent 2};}
  129.  
  130. #sidebar:hover #s-image:hover {background:{color:Accent 3};}
  131.  
  132. #image {width:180px; pointer-events:none;}
  133.  
  134. #links {width:180px; line-height:8px; font-size:7px; letter-spacing:1px;
  135. text-transform:uppercase; font-family:Tahoma; font-style:italic;
  136. height:20px;}
  137.  
  138. #link1, #link2, #link3, #link4, #link5 {display:inline-block; width:26px;
  139. overflow:hidden; padding:6px 5px 5px 5px; margin-left:-3px;}
  140.  
  141. #links a:link, #links a:active, #links a:visited, #pagination a:link,
  142. #pagination a:active, #pagination a:visited {color:{color:Main};}
  143. #links a:hover {color:{color:Accent 3};}
  144.  
  145. .gray {width:180px; height:1px; background:#ddd;}
  146.  
  147. .yellow {width:36px; height:1px; background:{color:Accent 1};
  148. margin-top:-1px;}
  149.  
  150. #sidebar:hover .yellow {background:{color:Accent 2};}
  151.  
  152. #yl {width:180px;}
  153.  
  154. #sidebar:hover #yl:hover .yellow {background:{color:Accent 3};}
  155.  
  156. #description, #pagination {width:180px; padding-top:6px; font-size:7px;
  157. font-family:Tahoma; letter-spacing:1px; color:{color:Main};
  158. text-align:justify; text-transform:uppercase; line-height:10px;}
  159.  
  160. #description a:link, #description a:active, #description a:visited {
  161. color:{color:Accent 1};}
  162.  
  163. #sidebar:hover #description a:link, #sidebar:hover #description a:active, #sidebar:hover #description a:visited {color:{color:Accent 2};}
  164.  
  165. #sidebar:hover #description a:hover{color:{color:Accent 3};}
  166.  
  167. #pagination {word-spacing:10px; text-align:center;}
  168.  
  169. .current_page {font-style:italic;}
  170.  
  171. #entries {width:540px; float:right; margin-top:60px;}
  172.  
  173. #post {background:{color:Post Background}; width:500px; padding:20px;
  174. margin-bottom:60px;}
  175.  
  176. #caption {width:480px; padding:10px 10px 0px 10px; margin-top:4px;}
  177.  
  178. #caption img {max-width:100%;}
  179.  
  180. #audiopost {position:justify; width:500px; height:85px;}
  181.  
  182. .albumart {position:absolute; z-index:1; width:85px; height:85px;}
  183.  
  184. .albumart img {width:85px; height:85px; float:left;}
  185.  
  186. .playbox {background-color:#000; position:absolute; z-index:1000;
  187. margin-top:29px; margin-left:31px; opacity:0.6;}
  188.  
  189. .playbutton {width:27px; height:28px; overflow:hidden; position:relative;
  190. z-index:1000;}
  191.  
  192. #audioinfo {margin-top:0px; width:415px; height:85px; overflow:hidden;
  193. margin-bottom:10px; padding-left:85px; text-align:center;
  194. letter-spacing:1px; vertical-align:middle; display:table-cell;}
  195.  
  196. .audio-details {cursor:default;}
  197.  
  198. .bubble {width:400px; position:relative; background:{color:Accent 1};
  199. margin:0; padding:10px; color:#fff; -moz-border-radius:10px;
  200. -webkit-border-radius:10px; box-shadow: 0px 0 1px rgba(0,0,0,0);
  201. -webkit-box-shadow: 0px 0 1px rgba(0,0,0,0);
  202. -moz-box-shadow: 0px 0 1px rgba(0,0,0,0);}
  203.  
  204. .bubble:after {position:absolute; display:block; content:"";
  205. border-color:{color:Accent 1} transparent transparent transparent;
  206. border-style: solid; border-width:15px 15px 0px; height:0; width:0;
  207. position:absolute; right:-15px; top:10px;}
  208.  
  209. #post:hover .bubble {background:{color:Accent 2};}
  210.  
  211. #post:hover .bubble:after {
  212. border-color:{color:Accent 2} transparent transparent transparent;}
  213.  
  214. #post:hover .bubble:hover {background:{color:Accent 3};}
  215.  
  216. #post:hover .bubble:hover:after {
  217. border-color:{color:Accent 3} transparent transparent transparent;}
  218.  
  219. .asker, .asker a:link, .asker a:active, .asker a:visited {color:#fff;
  220. font-weight:bold; text-transform:lowercase;}
  221.  
  222. #s-m-t-tooltip {z-index:999999; background:{color:Accent 1};
  223. max-width:200px; font-size:7px; letter-spacing:1px; color:#fff;
  224. text-transform:uppercase; font-family:Tahoma; line-height:8px;
  225. padding:5px; display:block; margin: 24px 14px 7px 12px;
  226. -webkit-box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.1);
  227. -moz-box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.1);
  228. box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.1);}
  229.  
  230. #t-l-q { font-family: 'Leckerli One', cursive; font-size:20px;
  231. line-height:1.1; color:{color:Bold};}
  232.  
  233. a.trackname:link, a.trackname:active, a.trackname:visited {
  234. font-size:18px; font-family: 'Leckerli One', cursive;}
  235.  
  236. #t-l-q a:link, #t-l-q a:active, #t-l-q a:visited, a.trackname:link,
  237. a.trackname:active, a.trackname:visited {color:{color:Accent 1};}
  238.  
  239. #post:hover #t-l-q, #post:hover #t-l-q a:link,
  240. #post:hover #t-l-q a:active, #post:hover #t-l-q a:visited,
  241. #post:hover a.trackname:link, #post:hover a.trackname:active,
  242. #post:hover a.trackname:visited {color:{color:Accent 2};}
  243.  
  244. #post:hover #t-l-q a:hover, #post:hover a.trackname:hover {
  245. color:{color:Accent 3};}
  246.  
  247. #post-info, #post-tags {width:500px; line-height:8px; font-size:7px;
  248. letter-spacing:1px; text-align:center; text-transform:uppercase;
  249. font-family:Tahoma; margin-top:15px;}
  250.  
  251. #post-tags {margin-top:10px; text-align:justify; {block:IndexPage}
  252. opacity:0; margin-top:0px; line-height:0px;{/block:IndexPage}}
  253.  
  254. #post:hover #post-tags {{block:IndexPage}opacity:1; margin-top:10px;
  255. line-height:8px;{/block:IndexPage}}
  256.  
  257. a:hover:nth-of-type(odd), #pagination a:hover:nth-of-type(odd),
  258. #post-info a:hover:nth-of-type(odd), #post-tags a:hover:nth-of-type(odd), #post-notes a:hover:nth-of-type(odd), #caption a:hover:nth-of-type(odd)
  259. {color:{color:Accent 2};}
  260. a:hover:nth-of-type(even), #pagination a:hover:nth-of-type(even),
  261. #post-info a:hover:nth-of-type(even),
  262. #post-tags a:hover:nth-of-type(even),
  263. #post-notes a:hover:nth-of-type(even), #caption a:hover:nth-of-type(even)
  264. {color:{color:Accent 3};}
  265.  
  266. #post-notes {
  267. width:480px;margin-top:4px; background:{color:Post Background}; padding:0px 10px;
  268. border-top:10px solid {color:Post Background}; border-bottom:10px solid {color:Post Background};
  269. font-size:7px; letter-spacing:1px; text-transform:uppercase;
  270. font-family:Tahoma; }
  271.  
  272. ol.notes {padding:0px; margin:3px 0px; list-style-type:none;
  273. border-bottom: solid 1px {color:Background};}
  274.  
  275. ol.notes li.note {border-top:solid 1px {color:Background}; padding:5px;}
  276.  
  277. ol.notes li.note img.avatar {vertical-align:-5px; width:18px;}
  278.  
  279. ol.notes li.note span.action {font-weight:bold; margin-left:5px; }
  280.  
  281. ol.notes li.note .answer_content {font-weight:normal;}
  282.  
  283. ol.notes li.note blockquote a {text-decoration:none;}
  284.  
  285. /*** PLEASE DO NOT ALTER OR REMOVE ***/
  286. #credit {position:fixed; bottom:10px; right:10px; z-index:9999; width:10px; background:{color:Post Background}; text-align:center; overflow-x:hidden; letter-spacing:1px; font-size:10px; padding:1px 4px 2px 4px;} #credit a:link, #credit a:active, #credit a:visited {color:{color:Main}; font-variant:small-caps;} #credit:hover {width:84px;} #credit:hover a:link, #credit:hover a:active, #credit:hover a:visited {color:{color:Accent 1};}
  287. /*** THANK YOU ***/
  288.  
  289. iframe#tumblr_controls, iframe#tumblr_controls:hover, a:link, a:active, a:visited, a:hover, #s-image, #sidebar:hover #s-image, #sidebar:hover #s-image:hover, .yellow, #sidebar:hover .yellow, #sidebar:hover #yl:hover .yellow, .bubble, .bubble:after, #post:hover .bubble, #post:hover .bubble:after, #post:hover .bubble:hover, #post:hover .bubble:hover:after, #t-l-q, a.trackname:link, a.trackname:active, a.trackname:visited, #t-l-q a:link, #t-l-q a:active, #t-l-q a:visited, #post:hover #t-l-q, #post:hover #t-l-q a:link, #post:hover #t-l-q a:active, #post:hover #t-l-q a:visited, #post:hover a.trackname:link, #post:hover a.trackname:active, #post:hover a.trackname:visited, #post:hover #t-l-q a:hover, #post:hover a.trackname:hover, #post-tags, #post:hover #post-tags, #credit, #credit:hover {
  290. transition:all 0.4s ease-in-out;
  291. -webkit-transition-duration:all 0.4s ease-in-out;
  292. -o-transition-transition:all 0.4s ease-in-out;
  293. -moz-transition-durartion:all 0.4s ease-in-out;
  294. -ms-transition-durartion:all 0.4s ease-in-out;}
  295.  
  296. {CustomCSS}
  297.  
  298. </style>
  299.  
  300. <script>
  301. $(document).ready(function(){
  302.  
  303. $('#link1').mouseenter(function(){
  304. $('.yellow').animate({
  305. marginLeft:"0px",
  306. }, 100, function() {
  307. // Animation complete.
  308. });
  309. });
  310.  
  311. $('#link2').mouseenter(function(){
  312. $('.yellow').animate({
  313. marginLeft:"36px",
  314. }, 100, function() {
  315. // Animation complete.
  316. });
  317. });
  318.  
  319. $('#link3').mouseenter(function(){
  320. $('.yellow').animate({
  321. marginLeft:"72px",
  322. }, 100, function() {
  323. // Animation complete.
  324. });
  325. });
  326.  
  327. $('#link4').mouseenter(function(){
  328. $('.yellow').animate({
  329. marginLeft:"108px",
  330. }, 100, function() {
  331. // Animation complete.
  332. });
  333. });
  334.  
  335. $('#link5').mouseenter(function(){
  336. $('.yellow').animate({
  337. marginLeft:"144px",
  338. }, 100, function() {
  339. // Animation complete.
  340. });
  341. });
  342.  
  343. $('#sidebar').mouseleave(function(){
  344. $('.yellow').animate({
  345. marginLeft:"0px",
  346. }, 100, function() {
  347. // Animation complete.
  348. });
  349. });
  350.  
  351. });
  352. </script>
  353.  
  354. </head>
  355.  
  356. <body>
  357.  
  358. <div id="container">
  359.  
  360. <div id="sidebar">
  361.  
  362. <a href="/"><div id="s-image"><div id="image"><img src="{image:Sidebar}"></div></div></a>
  363.  
  364. <div id="yl">
  365.  
  366. <div class="gray" style="margin-top:6px;"></div><div class="yellow"></div>
  367. <div id="links">
  368. <a href="{text:Link 1 URL}">
  369. <div id="link1" style="margin-left:0px;">{text:Link 1 Name}</div>
  370. </a>
  371. <a href="{text:Link 2 URL}">
  372. <div id="link2" style="margin-left:-3px;">{text:Link 2 Name}</div>
  373. </a>
  374. <a href="{text:Link 3 URL}">
  375. <div id="link3" style="margin-left:-3px;">{text:Link 3 Name}</div>
  376. </a>
  377. <a href="{text:Link 4 URL}">
  378. <div id="link4" style="margin-left:-4px;">{text:Link 4 Name}</div>
  379. </a>
  380. <a href="{text:Link 5 URL}">
  381. <div id="link5" style="margin-left:-4px;">{text:Link 5 Name}</div>
  382. </a>
  383. </div>
  384. <div class="gray"></div><div class="yellow"></div>
  385.  
  386. </div>
  387.  
  388. <div id="description">{Description}</div>
  389.  
  390. {block:Pagination}<div id="pagination"><center>
  391. {block:PreviousPage}
  392. <a href="{PreviousPage}" class="jump_page">&laquo;</a>
  393. {/block:PreviousPage}
  394. {block:JumpPagination length="8"}
  395. {block:CurrentPage}
  396. <span class="current_page">{PageNumber}</span>
  397. {/block:CurrentPage}
  398. {block:JumpPage}
  399. <a class="jump_page" href="{URL}">{PageNumber}</a>
  400. {/block:JumpPage}
  401. {/block:JumpPagination}
  402. {block:NextPage}
  403. <a href="{NextPage}" class="jump_page">&raquo;</a>
  404. {/block:NextPage}
  405. </center></div>{/block:Pagination}
  406.  
  407. </div>
  408.  
  409. <div id="entries">
  410.  
  411. {block:Posts}
  412.  
  413. <div id="post">
  414.  
  415. {block:Text}
  416. {block:Title}<center><div id="t-l-q">
  417. <a href="{Permalink}">{Title}</a>
  418. </div></center>{/block:Title}
  419. <div id="caption">{Body}</div>
  420. {/block:Text}
  421.  
  422. {block:Photo}
  423. {LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}
  424. {block:Caption}<div id="caption">{Caption}</div>{/block:Caption}
  425. {/block:Photo}
  426.  
  427. {block:Photoset}
  428. {Photoset-500}
  429. {block:Caption}<div id="caption">{Caption}</div>{/block:Caption}
  430. {/block:Photoset}
  431.  
  432. {block:Quote}
  433. <div id="t-l-q">{Quote}</div>
  434. {block:Source}<div id="caption">—{Source}</div>{/block:Source}
  435. {/block:Quote}
  436.  
  437. {block:Link}
  438. <center><div id="t-l-q"><a href="{URL}" {Target}>{Name} &raquo;</a></div></center>
  439. {block:Description}
  440. <div id="caption">{Description}</div>
  441. {/block:Description}
  442. {/block:Link}
  443.  
  444. {block:Chat}
  445. {block:Title}<center><div id="t-l-q">
  446. <a href="{Permalink}">{Title}</a>
  447. </div></center>{/block:Title}
  448. {block:Lines}<div id="caption">
  449. {block:Label}<b>{Label}</b>{/block:Label} {Line}<br>
  450. </div>{/block:Lines}
  451. {/block:Chat}
  452.  
  453. {block:Audio}
  454.  
  455. <div id="audiopost">
  456.  
  457. <img src="http://s.iosfans.com/?u=http://i165.photobucket.com/albums/u61/deveelryuk/carrierrequests/noartplaceholder.png" class="albumart" />
  458.  
  459. {block:AlbumArt}
  460. <img src="{AlbumArtURL}" class="albumart" />
  461. {/block:AlbumArt}
  462.  
  463. {block:AudioPlayer}
  464. <div class="playbox">
  465. <div class="playbutton">{AudioPlayerBlack}</div>
  466. </div>
  467. {/block:AudioPlayer}
  468.  
  469. <div id="audioinfo">
  470. <a class="trackname" href="{Permalink}">
  471. {block:TrackName}{TrackName}{/block:TrackName}
  472. </a>
  473.  
  474. <div class="audio-details">
  475. {block:Artist}{Artist}{/block:Artist}
  476. {block:Album}&nbsp;-&nbsp;{Album}{/block:Album}
  477. &nbsp;&nbsp;({PlayCountWithLabel})
  478. </div>
  479. </div>
  480.  
  481. </div>
  482.  
  483. {block:Caption}
  484. <div id="caption">{Caption}</div>
  485. {/block:Caption}
  486.  
  487. {/block:Audio}
  488.  
  489. {block:Video}
  490. {Video-500}
  491. {block:Caption}<div id="caption">{Caption}</div>{/block:Caption}
  492. {/block:Video}
  493.  
  494.  
  495. {block:Answer}
  496. <div class="post"><br>
  497. <div class="askerportrait"><img style="border-radius:50px; float:right;" src="{AskerPortraitURL-40}" align="left" /></div><div class="bubble"><span class="asker">{Asker} asked:</span> {Question}</div>
  498. <div id="caption">{Answer}</div>
  499. </div>
  500. {/block:Answer}
  501.  
  502. {block:Date}<div id="post-info">
  503. posted on <a href="{Permalink}" target="blank">{DayOfMonth}{DayOfMonthSuffix} {Month}{block:NoteCount}</a>, with: <a href="{Permalink}" target="blank">{NoteCountWithLabel}</a>{/block:NoteCount}{block:RebloggedFrom} &bull; <a href="{ReblogParentURL}" title"{ReblogParentName}" target="blank">via</a>{block:ContentSource} ; <a href="{SourceURL}" title="{ReblogRootName}" target="blank">src</a>{/block:ContentSource}{/block:RebloggedFrom} &bull; <a href="{ReblogURL}" target="blank">reblog</a>
  504. </div>{/block:Date}
  505.  
  506. {block:HasTags}
  507. <div id="post-tags">
  508. {block:Tags}
  509. <a href="{TagURL}">#{Tag}&nbsp;</a>
  510. {/block:Tags}
  511. </div>
  512. {/block:HasTags}
  513.  
  514. {block:PostNotes}<div id="post-notes">{PostNotes}</div>{/block:PostNotes}
  515.  
  516. </div>
  517.  
  518. {/block:Posts}
  519.  
  520. </div>
  521.  
  522. </div>
  523.  
  524. <!--- PLEASE DO NOT ALTER OR REMOVE --->
  525. <div id="credit"><a href="http://cyantists.tumblr.com/">c.&nbsp;&nbsp;cyantists</a></div>
  526. <!--- THANK YOU --->
  527.  
  528. </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!