Advertisement
cabamsk

theme 02

Apr 23rd, 2013
2,642
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.39 KB | None | 0 0
  1. <html>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.  
  5. <!--
  6.  
  7. Theme 02 by thecowardlypirate.tumblr.com
  8.  
  9. You may edit the theme as much as you like,
  10. but please do not remove or change the credit
  11. or this comment.
  12. Feel free to contact me if you need any help,
  13. and I'll see what I can do.
  14.  
  15. -->
  16.  
  17. <head>
  18. <title>{Title}</title>
  19.  
  20. <meta charset="utf-8">
  21.  
  22. {block:Description}
  23. <meta name="description" content="{MetaDescription}" />{/block:Description}
  24.  
  25. <!-- Colors -->
  26. <meta name="color:Background" content="#f7f7f7"/>
  27. <meta name="color:Sidebar background" content="#ffffff"/>
  28. <meta name="color:Scrollbar" content="#dddddd" />
  29. <meta name="color:Text" content="#999999"/>
  30. <meta name="color:Link" content="#666666"/>
  31. <meta name="color:Link hover" content="#000000"/>
  32. <meta name="color:Border" content="#dddddd"/>
  33. <meta name="color:Menulink color 1" content="#f7f3d4"/>
  34. <meta name="color:Menulink color 2" content="#747848"/>
  35. <meta name="color:Posttitle" content="#747848"/>
  36. <meta name="color:Title shadow" content="#7e8053"/>
  37. <meta name="color:Posts bg" content="#ffffff"/>
  38. <meta name="color:Text sidebar" content="#f7f3d4"/>
  39. <meta name="color:Info bg" content="#f5f4e9"/>
  40. <meta name="color:Date" content="#9d9d65"/>
  41. <meta name="color:Notes" content="#c6c489"/>
  42. <meta name="color:Source" content="#d0d3b9"/>
  43. <meta name="color:Description" content="#ffffff"/>
  44.  
  45.  
  46. <!-- Links and Options -->
  47. <meta name="text:Link1" content="link" />
  48. <meta name="text:Link1 url" content="/" />
  49. <meta name="text:Link2" content="link" />
  50. <meta name="text:Link2 url" content="/" />
  51. <meta name="text:Link3" content="link" />
  52. <meta name="text:Link3 url" content="/" />
  53. <meta name="text:Link4" content="link" />
  54. <meta name="text:Link4 url" content="/" />
  55. <meta name="if:Show Link1" content="1"/>
  56. <meta name="if:Show Link2" content="1"/>
  57. <meta name="if:Show Link3" content="1"/>
  58. <meta name="if:Show Link4" content="1"/>
  59.  
  60. <!-- Images -->
  61. <meta name="image:Sidebar img" content""/>
  62. <meta name="image:Sidebar bg" content""/>
  63. <meta name="image:Background img" content""/>
  64.  
  65.  
  66. <link rel="shortcut icon" href="{Favicon}" />
  67. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  68.  
  69. <link href='http://fonts.googleapis.com/css?family=Oranienbaum|Open+Sans+Condensed:300,700' rel='stylesheet' type='text/css'>
  70.  
  71.  
  72. <!-- Scripts -->
  73. <script type="text/javascript" src="http://csfoto.net/diverse/script.js"></script>
  74. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  75.  
  76.  
  77.  
  78. <!-- Theme CSS -->
  79. <style type="text/css" media="screen">
  80.  
  81. /* Scrollbar */
  82.  
  83. ::-webkit-scrollbar {width: 4px; height:auto; background:{color:background}}
  84. ::-webkit-scrollbar-corner {padding:2px;background:{color:background}}
  85. ::-webkit-scrollbar-button:vertical {height:3px; display: block; background:{color:scrollbar}}
  86. ::-webkit-scrollbar-button:horizontal {width: 3px; height: 3px; display: block; background:{color:scrollbar}}
  87. ::-webkit-scrollbar-thumb:vertical {background:{color:scrollbar};}
  88. ::-webkit-scrollbar-thumb:horizontal {background:{color:background};}
  89. ::-webkit-scrollbar-thumb {background: {color:scrollbar};}
  90.  
  91.  
  92. /* General */
  93.  
  94. body {
  95. background: {color:Background} url({image:Background img}) fixed;
  96. font-family: cambria, serif;
  97. font-size: 10px;
  98. color: {color:Text};
  99. text-align: justify;
  100. }
  101.  
  102. blockquote, blockquote blockquote, blockquote blockquote blockquote, blockquote blockquote blockquote blockquote {
  103. border-left: 1px solid {color:Border};
  104. margin-left: 5px;
  105. padding: 0 7px;
  106. }
  107.  
  108. blockquote img {
  109. max-width: 350px;
  110. }
  111.  
  112.  
  113. /* General links */
  114.  
  115. a:link, a:active, a:visited {
  116. color: {color:Link};
  117. text-decoration: none;
  118. -webkit-transition: all .5s ease-in-out;
  119. -moz-transition: all .5s ease-in-out;
  120. -o-transition: all .5s ease-in-out;
  121. }
  122.  
  123. a:hover {
  124. color: {color:Link hover};
  125. -webkit-transition: all .5s ease-in-out;
  126. -moz-transition: all .5s ease-in-out;
  127. -o-transition: all .5s ease-in-out;
  128. }
  129.  
  130. a img { border-width: 0px; }
  131.  
  132.  
  133. /* Sidebar */
  134.  
  135. #sidebar {
  136. position: fixed;
  137. width: 400px;
  138. height: 100%;
  139. z-index: 1;
  140. margin-left: 100px;
  141. margin-top: -40px;
  142. padding: 150px 0 0 0;
  143. background: {color:Sidebar background} url({image:Sidebar bg});
  144. border-left: 5px solid {color:Border};
  145. border-right: 5px solid {color:Border};
  146. text-align: center;
  147. }
  148.  
  149. #sidebar img {
  150. max-width: 250px;
  151. max-height: 250px;
  152. border-radius: 50%;
  153. margin-bottom: 10px;
  154. border: 1px solid {color:Text sidebar};
  155. padding: 5px;
  156. position: relative;
  157. top: 0;
  158. opacity: 1;
  159. -webkit-transition: all .5s linear;
  160. -moz-transition: all .5s linear;
  161. -o-transition: all .5s linear;
  162. }
  163.  
  164. #sidebar:hover img {
  165. position: relative;
  166. top: -200px;
  167. opacity: 0;
  168. -webkit-transition: all .5s linear;
  169. -moz-transition: all .5s linear;
  170. -o-transition: all .5s linear;
  171. }
  172.  
  173. #blogtitle {
  174. color: {color:Text sidebar};
  175. font-family: 'open sans condensed', sans-serif;
  176. font-size: 24px;
  177. text-shadow: 1px 1px 1px {color:Title shadow};
  178. opacity: 1;
  179. text-transform: uppercase;
  180. letter-spacing: 2px;
  181. -webkit-transition: all .5s ease-in-out;
  182. -moz-transition: all .5s ease-in-out;
  183. -o-transition: all .5s ease-in-out;
  184. }
  185.  
  186. #sidebar:hover #blogtitle {
  187. opacity: 0;
  188. -webkit-transition: all .5s ease-in-out;
  189. -moz-transition: all .5s ease-in-out;
  190. -o-transition: all .5s ease-in-out;
  191. }
  192.  
  193. #menu {
  194. width: 350px;
  195. padding: 0 25px;
  196. margin-bottom: 10px;
  197. opacity: 0;
  198. font-family: 'open sans condensed', sans-serif;
  199. -webkit-transition: all .5s ease-in-out;
  200. -moz-transition: all .5s ease-in-out;
  201. -o-transition: all .5s ease-in-out;
  202. }
  203.  
  204. #sidebar:hover #menu {
  205. opacity: 1;
  206. -webkit-transition: all .5s ease-in-out;
  207. -moz-transition: all .5s ease-in-out;
  208. -o-transition: all .5s ease-in-out;
  209. }
  210.  
  211. #menu a:link, #menu a:visited, #menu a:active {
  212. font-size: 16px;
  213. color: {color:Menulink color 1};
  214. margin: 0 6px;
  215. text-shadow: 10px 0px transparent, -10px 0px transparent;
  216. }
  217.  
  218. #menu a:hover {
  219. color: transparent;
  220. text-shadow: 0px 0px {color:Menulink color 2}, 0px 0px {color:Menulink color 2};
  221. }
  222.  
  223. #pagination {
  224. width: 400px;
  225. text-align: center;
  226. margin: 5px 0;
  227. }
  228.  
  229. #pagination a:link, #pagination a:visited, #pagination a:active {
  230. font-size: 10px;
  231. padding: 3px 5px;
  232. color: {color:Text sidebar};
  233. }
  234.  
  235. #pagination a:hover {
  236. color: {color:Link hover};
  237. }
  238.  
  239. #description {
  240. width: 200px;
  241. margin: 0 auto;
  242. text-align: justify;
  243. padding: 8px 10px 10px;
  244. background: {color:Description};
  245. margin-bottom: 10px;
  246. border-radius: 10px;
  247. box-shadow: 1px 1px 1px {color:Title shadow};
  248. position: relative;
  249. left: -100px;
  250. opacity: 0;
  251. -webkit-transition: all .5s linear;
  252. -moz-transition: all .5s linear;
  253. -o-transition: all .5s linear;
  254. }
  255.  
  256. #sidebar:hover #description {
  257. position: relative;
  258. opacity: .7;
  259. left: 0;
  260. -webkit-transition: all .5s ease-in-out;
  261. -moz-transition: all .5s ease-in-out;
  262. -o-transition: all .5s ease-in-out;
  263. }
  264.  
  265. /* Posts */
  266.  
  267. .post {
  268. width: 500px;
  269. padding: 15px;
  270. background: {color:Posts bg};
  271. border: 1px solid {color:Border};
  272. margin: 40px 0 0 650px;
  273. }
  274.  
  275. .posttitle {
  276. font-size: 18px;
  277. font-family: 'open sans condensed', 'arial narrow', arial, sans-serif;
  278. text-transform: uppercase;
  279. color: {color:Posttitle};
  280. font-weight: 700;
  281. letter-spacing: 2px;
  282. margin-left: 20px;
  283. }
  284.  
  285. .permalink {
  286. background: {color:Info bg};
  287. width: 100px;
  288. height: 80px;
  289. text-transform: uppercase;
  290. font-family: 'Open sans condensed', 'arial narrow', arial, sans-serif;
  291. font-weight: 700;
  292. font-size: 18px;
  293. color: {color:Date};
  294. position: absolute;
  295. border: 2px solid {color:Posts bg};
  296. border-radius: 50%;
  297. text-align: center;
  298. margin-left: 0;
  299. margin-top: -15px;
  300. opacity: 0;
  301. padding-top: 20px;
  302. line-height: 16px;
  303. -webkit-transition: all .5s ease-in-out;
  304. -moz-transition: all .5s ease-in-out;
  305. -o-transition: all .5s ease-in-out;
  306. }
  307.  
  308. .post:hover .permalink {
  309. margin-left: -130px;
  310. opacity: 1;
  311. -webkit-transition: all .5s ease-in-out;
  312. -moz-transition: all .5s ease-in-out;
  313. -o-transition: all .5s ease-in-out;
  314. }
  315.  
  316. a.notecount:link, a.notecount:visited {
  317. color: {color:Notes};
  318. font-size: 14px;
  319. }
  320.  
  321. a.source:link, a.source:visited {
  322. color: {color:Source};
  323. font-size: 12px;
  324. line-height: 12px;
  325. }
  326.  
  327. a.reblog:link, a.reblog:visited {
  328. color: {color:Date};
  329. font-size: 14px;
  330. }
  331.  
  332. a.reblog:hover {
  333. color: {color:Notes};
  334. }
  335.  
  336. .tags {
  337. font-family: 'courier new', arial, sans-serif;
  338. font-size: 8px;
  339. border-top: 1px solid {color:Border};
  340. padding-top: 10px;
  341. margin-top: 15px;
  342. text-align: center;
  343. text-transform: uppercase;
  344. }
  345.  
  346. .permalinkpage {
  347. width: 500px;
  348. }
  349.  
  350. .quote {
  351. font-size: 11px;
  352. color: {color:Title};
  353. }
  354.  
  355. .quotesource {
  356. font-size: 7px;
  357. font-weight: bold;
  358. text-transform: uppercase;
  359. margin-left: 20px;
  360. color: {color:Text};
  361. }
  362.  
  363. ul.chat, .chat ol, .chat li {
  364. list-style: none;
  365. margin: 0;
  366. padding: 2px 0;
  367. }
  368. .user_1 .label, .user_2 .label {
  369. font-weight:bold;
  370. }
  371.  
  372. .question {
  373. padding: 5px 5px 10px;
  374. margin-bottom: 5px;
  375. font-size: 11px;
  376. border-bottom: 1px solid {color:Border};
  377. }
  378.  
  379. .question a:link, .question a:visited {
  380. font-family: 'courier new', 'times new roman', serif;
  381. }
  382.  
  383. .question a:hover {
  384. font-style: italic;
  385. }
  386.  
  387.  
  388. .audio {
  389. height:73px;
  390. margin-bottom:5px;
  391. }
  392.  
  393. .audio img {
  394. width: 100px;
  395. height: 100px;
  396. border-radius: 50px;
  397. float: left;
  398. margin-right: 10px;
  399. margin-bottom: 7px;
  400. }
  401. .audio-player {
  402. margin-bottom: 5px;
  403. }
  404.  
  405. .audio-info {
  406. margin-left: 5px;
  407. }
  408.  
  409. .notes, .notes ol li, .notes li {
  410. font-family: 'times new roman', serif;
  411. font-size: 10px;
  412. opacity: 1;
  413. margin: 0;
  414. }
  415.  
  416. /* Tooltip */
  417. #tt {
  418. position: absolute;
  419. display: block;
  420. background: {color:Posts bg};
  421. text-transform: lowercase;
  422. font-size: 8px;
  423. letter-spacing: 1px;
  424. padding: 10px 17px;
  425. z-index: 2;
  426. }
  427.  
  428. /* Credit */
  429. #credit {
  430. position: absolute;
  431. bottom: 10px;
  432. right: 10px;
  433. font-size: 25px;
  434. position: fixed;
  435. z-index: 3;
  436. color: #000;
  437. }
  438.  
  439. #cred-text {
  440. font-size: 7px;
  441. display: inline;
  442. text-transform: uppercase;
  443. opacity: 0;
  444. -webkit-transition: all .3s ease-in-out;
  445. -moz-transition: all .3s ease-in-out;
  446. -o-transition: all .3s ease-in-out;
  447. }
  448.  
  449. #credit:hover #cred-text {
  450. opacity: 1;
  451. -webkit-transition: all .3s ease-in-out;
  452. -moz-transition: all .3s ease-in-out;
  453. -o-transition: all .3s ease-in-out;
  454. }
  455.  
  456. #credit a:link, #credit a:visited {
  457. color: #000;
  458. opacity: 1;
  459. }
  460.  
  461. #credit a:hover {
  462. opacity: .3;
  463. }
  464.  
  465. </style>
  466.  
  467. <!-- Custom CSS -->
  468. <style type="text/css" media="screen">
  469. {CustomCSS}
  470. </style>
  471.  
  472. <script type="text/javascript"
  473. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  474.  
  475. </head>
  476.  
  477. <body>
  478.  
  479. <div id="sidebar">
  480.  
  481. <img src="{image:Sidebar img}" />
  482. <div id="blogtitle">{Title}</div>
  483.  
  484. <div id="menu">
  485. <a href="/">home</a>
  486. <a href="/ask">ask</a>
  487. {block:HasPages}
  488. {block:Pages}<a href="{URL}">{Label}</a>{/block:Pages}
  489. {/block:HasPages}
  490. {Block:ifShowLink1}<a href="{text:link1 url}">{text:link1}</a>{/Block:ifShowLink1}
  491. {Block:ifShowLink2}<a href="{text:link2 url}">{text:link2}</a>{/Block:ifShowLink2}
  492. {Block:ifShowLink3}<a href="{text:link3 url}">{text:link3}</a>{/Block:ifShowLink3}
  493. {Block:ifShowLink4}<a href="{text:link4 url}">{text:link4}</a>{/Block:ifShowLink4}
  494. </div>
  495.  
  496.  
  497. <div id="description">{Description}</div>
  498.  
  499. <div id="pagination">
  500. {block:Pagination}
  501. {block:PreviousPage}<a href="{PreviousPage}">prev</a>
  502. {/block:PreviousPage}
  503. &nbsp; &nbsp; &nbsp;
  504. {block:NextPage}<a href="{NextPage}">next</a>
  505. {/block:NextPage}
  506. {/block:Pagination}
  507. </div>
  508. </div>
  509.  
  510. {block:Posts}
  511. <div class="post">
  512.  
  513. {block:IndexPage}
  514. <div class="permalink">
  515.  
  516. {block:Date}{ShortMonth} {DayOfMonth}{DayOfMonthSuffix}{/block:Date}<br />
  517. <a class="notecount" href="{Permalink}">{NoteCountWithLabel}<br />
  518. {block:RebloggedFrom}<a class="source" href="{ReblogParentURL}" onmouseover="tooltip.show('{ReblogParentName}');" onmouseout="tooltip.hide();">via</a><span style="font-size: 12px;">&nbsp; ·&nbsp; </span><a class="source" href="{ReblogRootURL}" onmouseover="tooltip.show('{ReblogRootName}');" onmouseout="tooltip.hide();">src</a><br />{/block:RebloggedFrom}<a class="reblog" href="{ReblogURL}" target="_blank">reblog</a>
  519. </div>
  520. {/block:IndexPage}
  521.  
  522. {block:Text}
  523. {block:Title}
  524. <div class="posttitle">{Title}</div>
  525. {/block:Title}
  526. {Body}
  527. {/block:Text}
  528.  
  529.  
  530. {block:Quote}
  531. <div class="quote">{Quote}
  532. <div class="quotesource">- {Source}</div></div>
  533. {/block:Quote}
  534.  
  535.  
  536. {block:Link}
  537. <div class="posttitle"><a href="{URL}">{Name}</a></div>
  538. {block:Description}{Description}{/block:Description}
  539. {/block:Link}
  540.  
  541.  
  542. {block:Photo}<center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
  543. {LinkCloseTag}</center>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  544.  
  545.  
  546. {block:Photoset}<center>{Photoset-500}</center>{block:Caption}{Caption}{/block:Caption}
  547. {/block:Photoset}
  548.  
  549.  
  550. {block:Chat}<ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}
  551. <span class="label">{Label}</span>{/block:Label} {Line}</li>{/block:Lines}</ul>
  552. {/block:Chat}
  553.  
  554.  
  555. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  556.  
  557. {block:Answer}
  558. <div class="question">{Asker}:<br />
  559. {Question}
  560. </div>
  561. <div class="answer">{Answer}</div>
  562. {/block:Answer}
  563.  
  564.  
  565. {block:Audio}<div class="audio">
  566. {block:AlbumArt}<img src="{AlbumArtURL}" style="">{/block:AlbumArt}
  567. <div class="audio-player">{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}</div>
  568.  
  569. <div class="audio-info"><div>{block:TrackName}<b>Title:</b> {TrackName}<BR>{/block:TrackName}
  570. {block:Artist}<b>Artist:</b> {Artist}<BR>{/block:Artist}
  571. {block:Album}<b>Album:</b> {Album}<BR>{/block:Album}
  572. {block:PlayCount}<b>Plays:</b> {PlayCount}<BR>{/block:PlayCount}</div>
  573. </div></div>
  574. {block:Caption}<div style="clear: left;">{Caption}</div>{/block:Caption}
  575. {/block:Audio}
  576.  
  577.  
  578.  
  579.  
  580. {block:HasTags}<div class="tags">{block:Tags}#<a href="{TagURL}">{Tag}</a>
  581. {/block:Tags}
  582. </div>{/block:HasTags}
  583.  
  584.  
  585.  
  586. {block:PermalinkPage}<div class="permalinkpage"><a href="{Permalink}">{NoteCountWithLabel}</a>
  587. {block:RebloggedFrom} / <a href="{ReblogParentURL}"> via</a>{/block:RebloggedFrom}
  588. {block:ContentSource} / <a href="{SourceURL}"> source</a>
  589. {/block:ContentSource}
  590. {block:PostNotes}<div class="notes">{PostNotes}</div>{/block:PostNotes}
  591. </div>
  592. {/block:PermalinkPage}
  593.  
  594.  
  595.  
  596. </div>
  597. {/block:Posts}
  598.  
  599. {block:ContentSource}
  600. <!— {SourceURL}{block:SourceLogo}<img src=”{BlackLogoURL}” width=”{LogoWidth}” height=”{LogoHeight}” alt=”{SourceTitle}” />{/block:SourceLogo}
  601. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} —>{/block:ContentSource}{block:ReblogParent}{/block:ReblogParent}
  602.  
  603. </div>
  604.  
  605. <div id="credit"><div id="cred-text">Theme © morgenstjern</div> <a href="http://morgenstjern.tumblr.com/" target="_blank">★</a></div>
  606.  
  607.  
  608. </body>
  609. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement