API tools faq
paste
Advertisement
sandragonthemes

Theme #02

sandragonthemes
Feb 22nd, 2013
564
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.78 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html">
  2.  
  3. <!--
  4. This is theme #02 by sandragonthemes.
  5. Please follow the rules and do not remove the credit.
  6. For questions please message me.
  7. -->
  8.  
  9. <html>
  10. <head>
  11. <link rel="shortcut icon" href="{Favicon}">
  12. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  13. {block:Description}
  14. <meta name="description" content="{MetaDescription}" />
  15. {/block:Description}
  16. <link href='http://fonts.googleapis.com/css?family=Rufina' rel='stylesheet' type='text/css'>
  17.  
  18. <!--DEFAULT VARIABLES-->
  19. <meta name="color:Background" content ="#ffffff"/>
  20. <meta name="color:Sidebar" content ="#c6d0d4"/>
  21. <meta name="color:Sidebar border" content ="#6f8798"/>
  22. <meta name="color:Text" content="#ababab"/>
  23. <meta name="color:Link" content="#94adba"/>
  24. <meta name="color:Link Hover" content="#6f8798"/>
  25. <meta name="color:Blogtitle" content="#435a6a"/>
  26. <meta name="color:Blogtitle hover" content="#304757"/>
  27. <meta name="color:Post background" content="#ffffff"/>
  28. <meta name="color:Post border" content="#b3c7cf"/>
  29. <meta name="color:Sidebar text" content="#7c7c7c"/>
  30.  
  31. <meta name="image:Sidebar" content="http://i.imgur.com/ZMPwxtG.gif"/>
  32. <meta name="image:Sidebar Hover" content="http://i.imgur.com/t9HFmeM.gif"/>
  33. <meta name="image:ToTop button" content="http://i.imgur.com/JLX3Tbl.png"/>
  34.  
  35. <meta name="font:Body" content="Garamond"/>
  36.  
  37. <meta name="text: Font size" content="11px"/>
  38. <meta name="text:Link 1" content="http://"/>
  39. <meta name="text:Link 1 Title" content=""/>
  40. <meta name="text:Link 2" content="http://">
  41. <meta name="text:Link 2 Title" content=""/>
  42.  
  43. <script type="text/javascript" src="http://static.tumblr.com/53unaru/kx3lgzker/jquery-1.3.2.min.js" charset="utf-8"></script><script type="text/javascript" src="http://static.tumblr.com/53unaru/4jtlgzkf8/easing.js"></script><script type="text/javascript" src="http://static.tumblr.com/53unaru/y8wlgzkbt/jquery.ui.totop.js"></script><script type="text/javascript">$(document).ready(function() {/*var defaults = {containerID: 'moccaUItoTop', // fading element idcontainerHoverClass: 'moccaUIhover', // fading element hover classscrollSpeed: 1200,easingType: 'linear' };*/$().UItoTop({ easingType: 'easeOutQuart' });});</script>
  44.  
  45. <style type="text/css">
  46. /*SCROLLBAR*/
  47. ::-webkit-scrollbar {
  48. width: 5px;
  49. }
  50.  
  51. ::-webkit-scrollbar-track {
  52. -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
  53. border-radius: 10px;
  54. }
  55.  
  56. ::-webkit-scrollbar-thumb {
  57. border-radius: 10px;
  58. -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.4);
  59. }
  60.  
  61. /*CREDIT*/
  62. #credit{
  63. text-transform: lowercase;
  64. position: fixed;
  65. right: 26px;
  66. bottom: 3px;
  67. text-align: center;
  68. font-size: 9px;
  69. letter-spacing: 1px;
  70. width: 30px;
  71. }
  72.  
  73. #credit a{
  74. color: #c8c8c8;
  75. }
  76.  
  77. #credit a:hover{
  78. color: #b1b1b1;
  79. }
  80.  
  81. /*TO TOP BUTTON*/
  82. #toTop:active, #toTop:focus {outline:none;}
  83.  
  84. #toTop{
  85. display:none;
  86. text-decoration:none;
  87. position:fixed;
  88. bottom: 25px;
  89. left: 208px;
  90. overflow:hidden;
  91. width:16px;
  92. height:11px;
  93. border:none;
  94. text-indent:-999px;
  95. background: url('{image:ToTop button}');
  96. }
  97.  
  98. /*BODY*/
  99. body {
  100. background-color:{color:Background};
  101. font-size: 10px;
  102. font-family:{font:Body};
  103. font-size: {text: Font size};
  104. }
  105.  
  106. a {
  107. color: {color:Link};
  108. font-weight: none;
  109. text-decoration: none;
  110. -webkit-transition: all 0.6s ease-in-out;
  111. -moz-transition: all 0.6s ease-in-out;
  112. -o-transition: all 0.6s ease-in-out;
  113. transition: all 0.6s ease-in-out;
  114. }
  115.  
  116. a:hover {
  117. color: {color:Link Hover};
  118. -webkit-transition: all 0.6s ease-in-out;
  119. -moz-transition: all 0.6s ease-in-out;
  120. -o-transition: all 0.6s ease-in-out;
  121. transition: all 0.6s ease-in-out;
  122. }
  123.  
  124. a img {
  125. border: 0px;
  126. }
  127.  
  128. ul{
  129. list-style-type: none;
  130. padding: 0px;
  131. margin: 0px;
  132. }
  133.  
  134. h1 a{
  135. color: {color:Link};
  136. font-family: 'Rufina', serif;
  137. font-size: 14px;
  138.  
  139. }
  140.  
  141. h1 a:hover{
  142. font-family: 'Rufina', serif;
  143. font-size: 14px;
  144. color: {color:Link Hover};
  145. }
  146.  
  147. h2{
  148. font-weight: none;
  149. width: 500px;
  150. height: 25px;
  151. margin-left: -225px;
  152. margin-top: 250px;
  153. font-family: 'Rufina', serif;
  154. font-size: 18px;
  155. color: {color:Blogtitle};
  156. -webkit-transform: rotate(-90deg);
  157. -moz-transform: rotate(-90deg);
  158. -ms-transform: rotate(-90deg);
  159. -o-transform: rotate(-90deg);
  160. filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4);
  161. overflow: hidden;
  162. -webkit-transition: all 0.4s ease-in-out;
  163. -moz-transition: all 0.4s ease-in-out;
  164. -o-transition: all 0.4s ease-in-out;
  165. transition: all 0.4s ease-in-out;
  166. }
  167.  
  168. h2:hover{
  169. color: {color:Blogtitle Hover};
  170. -webkit-transition: all 0.4s ease-in-out;
  171. -moz-transition: all 0.4s ease-in-out;
  172. -o-transition: all 0.4s ease-in-out;
  173. transition: all 0.4s ease-in-out;
  174. }
  175.  
  176. /*SIDEBAR*/
  177. #sidebar_wrapper {
  178. position: fixed;
  179. width: 200px;
  180. height: 100%;
  181. margin: -8px 0px 0px -8px;
  182. text-align: center;
  183. background-color: {color:Sidebar};
  184. float:left;
  185. font-family:{font:Body};
  186. }
  187.  
  188. #sidebar_border {
  189. width: 30px;
  190. height: 100%;
  191. margin-left: 192px;
  192. margin-top: -8px;
  193. position: fixed;
  194. float:left;
  195. background-color: {color:Sidebar border};
  196. }
  197.  
  198. #sidebar {
  199. width: 170px;
  200. height: 275px;
  201. padding: 15px;
  202. float: left;
  203. font-size: 12px;
  204. color: {color:Sidebar text};
  205. }
  206.  
  207. #sidebar_img{
  208. width: 200px;
  209. height:330px;
  210. margin: -15px 0px 5px -15px;
  211. background-image: url('{image:Sidebar}');
  212. -webkit-transition:all 0.9s;
  213. -moz-transition:all 0.9s;
  214. -ms-transition:all 0.9s;
  215. -o-transition:all 0.9s;
  216. }
  217.  
  218. #sidebar_img:hover{
  219. background-image: url('{image:Sidebar Hover}');
  220. -webkit-transition:all 0.9s;
  221. -moz-transition:all 0.9s;
  222. -ms-transition:all 0.9s;
  223. -o-transition:all 0.9s;
  224. }
  225.  
  226. #sidebar_img img{
  227. width: 200px;
  228. }
  229.  
  230. #desc{
  231. height: 270px;
  232. overflow:auto;
  233. }
  234.  
  235. #linkpage_wrapper{
  236. margin-top:5px;
  237. margin-bottom: 5px;
  238. }
  239.  
  240. #linkpage_wrapper a{
  241. display:block;
  242. color: {color:Blogtitle};
  243. padding:2px;
  244. }
  245. #linkpage_wrapper a:hover{
  246. background-color: {color:Sidebar border};
  247. color: {color:Blogtitle hover};
  248. }
  249.  
  250. #navigation{
  251. margin-top: 5px;
  252. }
  253.  
  254. /*CONTENT*/
  255. .content {
  256. position: absolute;
  257. }
  258.  
  259. .info_wrapper{
  260. opacity:0;
  261. width: 95px;
  262. border-top: 10px solid {color:Sidebar border};
  263. background-color: {color:Sidebar};
  264. margin-top: -11px;
  265. margin-left: 450px;
  266. float:left;
  267. position:absolute;
  268. color: {color:Sidebar text};
  269. padding-left: 4px;
  270. padding-bottom: 4px;
  271. text-align: center;
  272. -webkit-transition:all 0.7s;
  273. -moz-transition:all 0.7s;
  274. -ms-transition:all 0.7s;
  275. -o-transition:all 0.7s;
  276. }
  277.  
  278. .info_wrapper img{
  279. margin: 4px 2px 4px 2px;
  280. }
  281.  
  282. .post {
  283. position: relative;
  284. margin-left: 260px;
  285. margin-top: 20px;
  286. margin-bottom: 20px;
  287. background-color: {color:Post background};
  288. width: 500px;
  289. padding: 10px;
  290. border: 1px solid {color:Post border};
  291. color: {color:Text};
  292. font-family:{font:Body};
  293. }
  294.  
  295. .post table{
  296. width: 500px;
  297. background-color: {color:Sidebar};
  298. color: {color:Sidebar text};
  299. }
  300.  
  301. .post:hover .info_wrapper{
  302. opacity:1;
  303. margin-left: 525px;
  304. -webkit-transition:all 0.7s;
  305. -moz-transition:all 0.7s;
  306. -ms-transition:all 0.7s;
  307. -o-transition:all 0.7s;
  308. }
  309.  
  310. .reblog_btn img{
  311. border: 0px solid {color:Sidebar};
  312. }
  313.  
  314. .reblog_btn{
  315. border: 0px solid {color:Sidebar};
  316. }
  317.  
  318. .tags {
  319. width: 520px;
  320. margin-left: -10px;
  321. padding-top: 5px;
  322. padding-bottom: -3px;
  323. font-size: 10px;
  324. text-align: center;
  325. border-top: 1px solid #ebebeb;
  326. }
  327.  
  328. .tag {
  329. font-size: 10px;
  330. text-align:center;
  331. }
  332.  
  333. blockquote {
  334. font-size: 11px;
  335. padding: 5px;
  336. border-left: 4px solid {color:Sidebar border};
  337. margin: 5px;
  338. }
  339.  
  340. .quote {
  341. font-style: italic;
  342. }
  343.  
  344. .source {
  345. margin-left: 25px;
  346. }
  347.  
  348. .link {
  349. padding: 5px;
  350. font-size: 16px;
  351. font-weight: normal;
  352. font-style: italic;
  353. }
  354.  
  355. .link:hover {
  356. color: {color:Link Hover};
  357. }
  358.  
  359. ul.chat {
  360. margin: 0;
  361. padding: 0;
  362. }
  363.  
  364. .chat li {
  365. list-style-type: none;
  366. margin-left: 0px;
  367. padding: 3px;
  368. }
  369.  
  370. .label {
  371. font-weight: bold;
  372. color: {color:Sidebar text};
  373. }
  374.  
  375. .title {
  376. font-size: 30px;
  377. font-family:{font:Body};
  378. color: {color:Blogtitle};
  379. }
  380.  
  381. {CustomCSS}
  382. </style>
  383. <title>{Title}</title>
  384. </head>
  385. <body>
  386. <!--CONTENT STARTS HERE-->
  387. <div class="content">
  388. {block:Posts}
  389.  
  390. {block:Text}
  391. <div class="post">
  392. <div class="info_wrapper">
  393. {block:RebloggedFrom} <a href="{ReblogParentURL}"><img src="{ReblogParentPortraitURL-24}"/></a> <a href="{ReblogRootURL}"><img src="{ReblogRootPortraitURL-24}"/></a>{/block:RebloggedFrom} <a href="{ReblogURL}"><img class="reblog_btn" src="http://i.imgur.com/9HxCVKR.png"/></a><br>
  394. {block:NoteCount}<a href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount}<br>
  395. {block:Date}{TimeAgo}{/block:Date}
  396. </div>
  397. {block:Title}
  398. <h1><a href="{Permalink}">{Title}</a></h1>
  399. {/block:Title}
  400. {Body}
  401. <div class="tags">{block:Tags}<a href="{TagURL}" class="tag">#{Tag}</a> {/block:Tags}{block:PostNotes} {PostNotes} {/block:PostNotes}</div>
  402. </div>
  403. {/block:Text}
  404.  
  405. {block:Photo}
  406. <div class="post">
  407. <div class="info_wrapper">
  408. {block:RebloggedFrom} <a href="{ReblogParentURL}"><img src="{ReblogParentPortraitURL-24}"/></a> <a href="{ReblogRootURL}"><img src="{ReblogRootPortraitURL-24}"/></a>{/block:RebloggedFrom}<a href="{ReblogURL}"><img class="reblog_btn" src="http://i.imgur.com/9HxCVKR.png"/></a><br>
  409. {block:NoteCount}<a href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount}<br>
  410. {block:Date}{TimeAgo}{/block:Date}
  411. </div>
  412. {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}
  413. {block:Caption}
  414. <div class="caption">{Caption}</div>
  415. {/block:Caption}
  416. <div class="tags">{block:Tags}<a href="{TagURL}" class="tag">#{Tag}</a> {/block:Tags} {block:PostNotes} {PostNotes} {/block:PostNotes}</div>
  417. </div>
  418. {/block:Photo}
  419.  
  420. {block:Photoset}
  421. <div class="post">
  422. <div class="info_wrapper">
  423. {block:RebloggedFrom} <a href="{ReblogParentURL}"><img src="{ReblogParentPortraitURL-24}"/></a> <a href="{ReblogRootURL}"><img src="{ReblogRootPortraitURL-24}"/></a>{/block:RebloggedFrom} <a href="{ReblogURL}"><img class="reblog_btn" src="http://i.imgur.com/9HxCVKR.png"/></a><br>
  424. {block:NoteCount}<a href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount}<br>
  425. {block:Date}{TimeAgo}{/block:Date}
  426. </div>
  427. <center>{Photoset-500}</center>
  428. {block:Caption}
  429. <div class="caption">{Caption}</div>
  430. {/block:Caption}
  431. <div class="tags">{block:Tags}<a href="{TagURL}" class="tag">#{Tag}</a> {/block:Tags} {block:PostNotes} {PostNotes} {/block:PostNotes}</div>
  432. </div>
  433. {/block:Photoset}
  434.  
  435. {block:Quote}
  436. <div class="post">
  437. <div class="info_wrapper">
  438. {block:RebloggedFrom} <a href="{ReblogParentURL}"><img src="{ReblogParentPortraitURL-24}"/></a> <a href="{ReblogRootURL}"><img src="{ReblogRootPortraitURL-24}"/></a>{/block:RebloggedFrom} <a href="{ReblogURL}"><img class="reblog_btn" src="http://i.imgur.com/9HxCVKR.png"/></a><br>
  439. {block:NoteCount}<a href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount}<br>
  440. {block:Date}{TimeAgo}{/block:Date}
  441. </div>
  442. <span class="quote">"{Quote}"</span>
  443. {block:Source}
  444. <div class="source">– {Source}</div>
  445. {/block:Source}
  446. <div class="tags">{block:Tags}<a href="{TagURL}" class="tag">#{Tag}</a> {/block:Tags} {block:PostNotes} {PostNotes} {/block:PostNotes}</div>
  447. </div>
  448. {/block:Quote}
  449.  
  450. {block:Link}
  451. <div class="post">
  452. <div class="info_wrapper">
  453. {block:RebloggedFrom} <a href="{ReblogParentURL}"><img src="{ReblogParentPortraitURL-24}"/></a> <a href="{ReblogRootURL}"><img src="{ReblogRootPortraitURL-24}"/></a>{/block:RebloggedFrom} <a href="{ReblogURL}"><img class="reblog_btn" src="http://i.imgur.com/9HxCVKR.png"/></a><br>
  454. {block:NoteCount}<a href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount}<br>
  455. {block:Date}{TimeAgo}{/block:Date}
  456. </div>
  457. <center><a href="{URL}" class="link" {Target}>{Name} &#8594;</a></center>
  458. {block:Description}
  459. <div class="description">{Description}</div>
  460. {/block:Description}
  461. <div class="tags">{block:Tags}<a href="{TagURL}" class="tag">#{Tag}</a> {/block:Tags} {block:PostNotes} {PostNotes} {/block:PostNotes}</div>
  462. </div>
  463. {/block:Link}
  464.  
  465. {block:Chat}
  466. <div class="post">
  467. <div class="info_wrapper">
  468. {block:RebloggedFrom} <a href="{ReblogParentURL}"><img src="{ReblogParentPortraitURL-24}"/></a> <a href="{ReblogRootURL}"><img src="{ReblogRootPortraitURL-24}"/></a>{/block:RebloggedFrom} <a href="{ReblogURL}"><img class="reblog_btn" src="http://i.imgur.com/9HxCVKR.png"/></a><br>
  469. {block:NoteCount}<a href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount}<br>
  470. {block:Date}{TimeAgo}{/block:Date}
  471. </div>
  472. {block:Title}
  473. <a href="{Permalink}">{Title}</a>
  474. {/block:Title}
  475. <ul class="chat">
  476. {block:Lines}
  477. <li class="{Alt} user_{UserNumber}">
  478. {block:Label}
  479. <span class="label">{Label}</span>
  480. {/block:Label}
  481. {Line}
  482. </li>
  483. {/block:Lines}
  484. </ul>
  485. <div class="tags">{block:Tags}<a href="{TagURL}" class="tag">#{Tag}</a> {/block:Tags} {block:PostNotes} {PostNotes} {/block:PostNotes}</div>
  486. </div>
  487. {/block:Chat}
  488.  
  489. {block:Video}
  490. <div class="post">
  491. <div class="info_wrapper">
  492. {block:RebloggedFrom} <a href="{ReblogParentURL}"><img src="{ReblogParentPortraitURL-24}"/></a> <a href="{ReblogRootURL}"><img src="{ReblogRootPortraitURL-24}"/></a>{/block:RebloggedFrom} <a href="{ReblogURL}"><img class="reblog_btn" src="http://i.imgur.com/9HxCVKR.png"/></a><br>
  493. {block:NoteCount}<a href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount}<br>
  494. {block:Date}{TimeAgo}{/block:Date}
  495. </div>
  496. <center>{Video-500}</center>
  497. {block:Caption}
  498. <div class="caption">{Caption}</div>
  499. {/block:Caption}
  500. <div class="tags">{block:Tags}<a href="{TagURL}" class="tag">#{Tag}</a> {/block:Tags} {block:PostNotes} {PostNotes} {/block:PostNotes}</div>
  501. </div>
  502. {/block:Video}
  503.  
  504. {block:Audio}
  505. <div class="post">
  506. <div class="info_wrapper">
  507. {block:RebloggedFrom} <a href="{ReblogParentURL}"><img src="{ReblogParentPortraitURL-24}"/></a> <a href="{ReblogRootURL}"><img src="{ReblogRootPortraitURL-24}"/></a>{/block:RebloggedFrom}<a href="{ReblogURL}"><img class="reblog_btn" src="http://i.imgur.com/9HxCVKR.png"/></a><br>
  508. {block:NoteCount}<a href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount}<br>
  509. {block:Date}{TimeAgo}{/block:Date}
  510. </div>
  511. {AudioPlayerBlack}
  512. {block:Caption}
  513. <div class="caption">{Caption}</div>
  514. {/block:Caption}
  515. <div class="tags">{block:Tags}<a href="{TagURL}" class="tag">#{Tag}</a> {/block:Tags} {block:PostNotes} {PostNotes} {/block:PostNotes}</div>
  516. </div>
  517. {/block:Audio}
  518.  
  519. {block:Answer}
  520. <div class="post">
  521. <div class="info_wrapper">
  522. {block:RebloggedFrom} <a href="{ReblogParentURL}"><img src="{ReblogParentPortraitURL-24}"/></a> <a href="{ReblogRootURL}"><img src="{ReblogRootPortraitURL-24}"/></a>{/block:RebloggedFrom}<a href="{ReblogURL}"><img class="reblog_btn" src="http://i.imgur.com/9HxCVKR.png"/></a><br>
  523. {block:NoteCount}<a href="{Permalink}">{NoteCount} notes</a>{/block:NoteCount}<br>
  524. {block:Date}{TimeAgo}{/block:Date}
  525. </div>
  526. <table>
  527. <tr>
  528. <td class="askicon"><img src="{AskerPortraitURL-48}"></td>
  529. <td class="ask">{Asker} {text:asker}: {Question}</td>
  530. </tr>
  531. </table>
  532. {Answer}
  533. <div class="tags">{block:Tags}<a href="{TagURL}" class="tag">#{Tag}</a> {/block:Tags} {block:PostNotes} {PostNotes} {/block:PostNotes}</div>
  534. </div>
  535. {/block:Answer}
  536.  
  537. {/block:Posts}
  538. </div><!--end content-->
  539.  
  540. <!--SIDEBAR STARTS HERE-->
  541. <div id="sidebar_wrapper">
  542. <div id="sidebar">
  543. <div id="sidebar_img">
  544. </div>
  545. <div id="desc">{block:Description}{Description}{/block:Description}
  546. <div id="linkpage_wrapper">
  547. {block:HasPages}{block:Pages}<a href="{URL}">{Label}</a>{/block:Pages}{/block:HasPages}
  548. {block:ifLink1Title}<a href="{text:Link 1}">{text:Link 1 Title}</a>{/block:ifLink1Title}
  549. {block:ifLink2Title}<a href="{text:Link 2}">{text:Link 2 Title}</a>{/block:ifLink2Title}
  550. <a href="/ask">Message</a>
  551. <a href="http://sandragonthemes.tumblr.com/">Theme</a>
  552. </div>
  553. <div id="navigation">
  554. {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">&laquo;</a>{/block:PreviousPage}{/block:Pagination}
  555. {block:JumpPagination length="4"}
  556. {block:CurrentPage}{PageNumber}{/block:CurrentPage}
  557. {block:JumpPage}<a href="{URL}">{PageNumber}</a>{/block:JumpPage}
  558. {/block:JumpPagination}
  559. {block:Pagination}{block:NextPage}<a href="{NextPage}">&raquo;</a>{/block:NextPage}{/block:Pagination}</font>
  560. </div>
  561. </div>
  562.  
  563. </div>
  564. </div>
  565. <div id="sidebar_border"><a href="/"><h2>{Title}</h2></a></div>
  566. <!--END SIDEBAR-->
  567. </body>
  568. </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!