Advertisement
sandragonthemes

Theme #17

Oct 31st, 2013
1,795
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.84 KB | None | 0 0
  1. <!doctype html>
  2.  
  3. <!--
  4. This is theme #17 by sandragonthemes.
  5. Please follow the rules and do not remove the credit.
  6. If you have questions or feedback please send me a message.
  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.  
  17. <link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
  18.  
  19. <!--DEFAULT VARIABLES-->
  20. <meta name="if:Submissions" content="1"/>
  21.  
  22. <meta name="image:Sidebar image" content="http://i.imgur.com/dE2xtBo.png"/>
  23.  
  24. <meta name="color:Link" content="#565656"/>
  25. <meta name="color:Link Hover" content="#979797"/>
  26.  
  27. <meta name="text:Link 1" content="http://"/>
  28. <meta name="text:Link 1 Title" content=""/>
  29. <meta name="text:Link 2" content="http://">
  30. <meta name="text:Link 2 Title" content=""/>
  31. <meta name="text:Link 3" content="http://">
  32. <meta name="text:Link 3 Title" content=""/>
  33. <meta name="text:Link 4" content="http://">
  34. <meta name="text:Link 4 Title" content=""/>
  35. <meta name="text:Link 5" content="http://">
  36. <meta name="text:Link 5 Title" content=""/>
  37.  
  38. <style type="text/css">
  39. {CustomCSS}
  40. /*SCROLLBAR*/
  41. ::-webkit-scrollbar-thumb{
  42. background-color: #979797;
  43. border: 2px solid #ffffff;
  44. height:auto;
  45. }
  46.  
  47. ::-webkit-scrollbar {
  48. height:11px;
  49. width:11px;
  50. background-color: #000;
  51. border: 5px solid #fff;
  52. }
  53.  
  54. ::selection {
  55. background-color:#979797;
  56. }
  57.  
  58.  
  59. /*BODY*/
  60. body{
  61. height:100%;
  62. font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
  63. font-size:9.5px;
  64.  
  65. }
  66.  
  67. h1{
  68. font-weight:normal;
  69. }
  70.  
  71. h2{
  72. text-align:center;
  73. font-size:12px;
  74. font-weight:normal;
  75. }
  76.  
  77. a{
  78. color: {color:Link};
  79. font-weight: none;
  80. text-decoration: none;
  81. }
  82.  
  83. a:hover{
  84. color: {color:Link Hover};
  85. }
  86.  
  87. ul{
  88. list-style-type: none;
  89. padding: 0px;
  90. margin: 0px;
  91. }
  92.  
  93. /*SIDEBAR*/
  94. #blogtitle{
  95. width:200px;
  96. padding-left:25px;
  97. padding-right:25px;
  98. margin-left:-65px;
  99. text-align:center;
  100. font-size:12px;
  101. text-transform:uppercase;
  102. letter-spacing:1px;
  103. }
  104.  
  105. #blogtitle:first-letter{
  106. font-size:20px;
  107. font-family: 'Tangerine', cursive;
  108. }
  109.  
  110. #sidebar_wrapper{
  111. width:250px;
  112. height:102%;
  113. margin-top:-8px;
  114. margin-left:-8px;
  115. background-color:#000;
  116. position:fixed;
  117. }
  118.  
  119. #desc_link{
  120. width:120px;
  121. padding:65px;
  122. position:absolute;
  123. text-align:justify;
  124. color:#fff;
  125. margin-left:-1px;
  126. }
  127.  
  128. #desc_link p{
  129. margin-bottom:20px;
  130. }
  131.  
  132. #desc_link li{
  133. text-align:center;
  134. letter-spacing:1px;
  135. margin:5px;
  136. padding-bottom:2px;
  137. background-color:#232323;
  138. }
  139.  
  140. #desc_link li a{
  141. text-transform:lowercase;
  142. color:#fff;
  143. }
  144.  
  145. #desc_link li a:hover{
  146. color:#000;
  147. }
  148.  
  149. #img_nav{
  150. width:110px;
  151. margin:200px 0 0 195px;
  152. text-align:center;
  153. position:absolute;
  154. }
  155.  
  156. #img_nav img{
  157. width:100px;
  158. height:100px;
  159. -webkit-border-radius: 60px;
  160. -moz-border-radius: 60px;
  161. border-radius: 60px;
  162. border:5px solid #fff;
  163. }
  164.  
  165. #img_nav a{
  166. font-size:31px;
  167. font-weight:normal;
  168. }
  169.  
  170. /*INFO*/
  171. hr.info_line{
  172. background-color: #000;
  173. height:1px;
  174. border:0px;
  175. margin-top:15px;
  176. }
  177.  
  178. #info{
  179. width:200px;
  180. margin:0 auto;
  181. border:2px solid #fff;
  182. margin-top:-14px;
  183. padding-bottom:2px;
  184. background-color:#000;
  185. color:#fff;
  186. text-align:center;
  187. }
  188.  
  189. #info a{
  190. color:#fff;
  191. }
  192.  
  193. #info a:hover{
  194. color:#979797;
  195. }
  196.  
  197. /*TAGS*/
  198. #tags{
  199. text-align:center;
  200. opacity:0;
  201. -webkit-transition:all 0.3s;
  202. -moz-transition:all 0.3s;
  203. -ms-transition:all 0.3s;
  204. -o-transition:all 0.3s;
  205. }
  206.  
  207. #tags a{
  208. margin-left:2px;
  209. margin-right:2px;
  210. }
  211.  
  212. /*CONTENT*/
  213. #container{
  214. width:100%;
  215. height:100%;
  216. }
  217.  
  218. #content{
  219. width:600px;
  220. height:100%;
  221. margin-left: 320px;
  222. }
  223.  
  224. .post{
  225. width:500px;
  226. padding: 20px;
  227. margin-bottom:10px;
  228. }
  229.  
  230. .post:hover #tags{
  231. margin-right:0px;
  232. opacity:1;
  233. -webkit-transition:all 0.3s;
  234. -moz-transition:all 0.3s;
  235. -ms-transition:all 0.3s;
  236. -o-transition:all 0.3s;
  237. }
  238.  
  239. /*ASKS*/
  240. #question{
  241. width:500px;
  242. }
  243.  
  244. #ask{
  245. text-align:right;
  246. padding-right:2px;
  247. }
  248.  
  249. #askicon{
  250. width:38px;
  251. }
  252.  
  253. #askicon img{
  254. padding:3px;
  255. border: 1px solid #979797;
  256. }
  257.  
  258. hr.asker_line{
  259. position:relative;
  260. background-color: #979797;
  261. height:1px;
  262. border:0px;
  263. margin-top:10px;
  264. }
  265.  
  266. #asker{
  267. position:absolute;
  268. background-color:#fff;
  269. padding-left:3px;
  270. padding-right:3px;
  271. margin-top:-14px;
  272. }
  273.  
  274. #answer{
  275. padding-top:2px;
  276. }
  277.  
  278. #answerer{
  279. width:500px;
  280. text-align:right;
  281. margin-bottom:3px;
  282. }
  283.  
  284. #answerer p{
  285. text-align:left;
  286. }
  287.  
  288. /*AUDIO*/
  289. #audio_wrapper{
  290. position:relative;
  291. width:500px;
  292. height:112px;
  293. text-align:left;
  294. }
  295.  
  296. #audio_wrapper img{
  297. width:100px;
  298. height:100px;
  299. padding:3px;
  300. border: 1px solid #979797;
  301. float:left;
  302. }
  303.  
  304. #track_info{
  305. margin-left:10px;
  306. float:left;
  307. line-height:160%;
  308. }
  309.  
  310. .audioverlay {
  311. margin-top: 32px;
  312. margin-left: 31px;
  313. background-color: #e4e4e4;
  314. position: absolute;
  315. opacity: 0.6;
  316. z-index: 10;
  317. }
  318.  
  319. .audioarrow {
  320. width: 20px;
  321. height: 30px;
  322. overflow: hidden;
  323. margin: 8px 17px 6px 9px;
  324. }
  325.  
  326. #audio_cap{
  327. width:500px;
  328. text-align: left;
  329. }
  330.  
  331. .label {
  332. font-weight: bold;
  333. }
  334.  
  335. .quote {
  336. font-style: italic;
  337. }
  338.  
  339. blockquote {
  340. padding-left:5px;
  341. margin:0px 4px 0px 10px;
  342. border-left: 2px solid #979797;
  343. }
  344.  
  345. {CustomCSS}
  346. </style>
  347.  
  348. <title>{Title}</title>
  349. </head>
  350. <body>
  351.  
  352. <div id="container">
  353. <!--SIDEBAR STARTS HERE-->
  354. <div id="sidebar_wrapper">
  355. <div id="desc_link">
  356. <p id="blogtitle">{Title}</p>
  357. <p>{block:Description}{Description}{/block:Description}</p>
  358. <ul>
  359. <li><a href="/">Home</a></li>
  360. {block:ifLink1Title}<li><a href="{text:Link 1}" title="{text:Link 1 Title}">{text:Link 1 Title}</a></li>{/block:ifLink1Title}
  361. {block:ifLink2Title}<li><a href="{text:Link 2}" title="{text:Link 2 Title}">{text:Link 2 Title}</a></li>{/block:ifLink2Title}
  362. {block:ifLink3Title}<li><a href="{text:Link 3}" title="{text:Link 3 Title}">{text:Link 3 Title}</a></li>{/block:ifLink3Title}
  363. {block:ifLink4Title}<li><a href="{text:Link 4}" title="{text:Link 4 Title}">{text:Link 4 Title}</a></li>{/block:ifLink4Title}
  364. {block:ifLink5Title}<li><a href="{text:Link 5}" title="{text:Link 5 Title}">{text:Link 5 Title}</a></li>{/block:ifLink5Title}
  365. {block:IfSubmissions}<li><a href="/submit">Submit</a></li>{/block:IfSubmissions}
  366. <li><a href="/ask">Mail</a></li>
  367. <li><a href="http://sandragonthemes.tumblr.com">Theme</a></li>
  368. </ul>
  369. </div>
  370. <div id="img_nav">
  371. <img src="{image:Sidebar image}" alt="sidebar image" />
  372. {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">↤</a>{/block:PreviousPage}
  373. {block:NextPage}<a href="{NextPage}">↦</a>{/block:NextPage}{/block:Pagination}
  374.  
  375. </div>
  376. </div>
  377.  
  378.  
  379. <!--CONTENT STARTS HERE-->
  380. <div id="content">
  381. {block:Posts}
  382. <div class="post">
  383. {block:Text}
  384. {block:Title}
  385. <h1><a href="{Permalink}">{Title}</a></h1>
  386. {/block:Title}
  387. {Body}
  388. {/block:Text}
  389.  
  390. {block:Photo}
  391. {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}
  392. {block:Caption}
  393. <div class="caption">{Caption}</div>
  394. {/block:Caption}
  395. {/block:Photo}
  396.  
  397. {block:Photoset}
  398. <center>{Photoset-500}</center>
  399. {block:Caption}
  400. <div class="caption">{Caption}</div>
  401. {/block:Caption}
  402. {/block:Photoset}
  403.  
  404. {block:Quote}
  405. <span class="quote">"{Quote}"</span>
  406. {block:Source}
  407. {block:Source}<p>-{Source}</p>{/block:Source}
  408. {/block:Source}
  409. {/block:Quote}
  410.  
  411. {block:Link}
  412. <h2><a href="{URL}" class="link" {Target}>{Name}</a></h2>
  413. {block:Description}
  414. <div class="description">{Description}</div>
  415. {/block:Description}
  416. {/block:Link}
  417.  
  418. {block:Chat}
  419.  
  420. {block:Title}
  421. <h1><a href="{Permalink}">{Title}</a></h1>
  422. {/block:Title}
  423. <ul class="chat">
  424. {block:Lines}
  425. <li class="{Alt} user_{UserNumber}">
  426. {block:Label}
  427. <span class="label">{Label}</span>
  428. {/block:Label}
  429. {Line}
  430. </li>
  431. {/block:Lines}
  432. </ul>
  433. {/block:Chat}
  434.  
  435. {block:Video}
  436. <center>{Video-500}</center>
  437. {block:Caption}
  438. <div class="caption">{Caption}</div>
  439. {/block:Caption}
  440. {/block:Video}
  441.  
  442. {block:Audio}
  443. <div id="audio_wrapper">
  444. <div class="audioverlay"><div class="audioarrow">
  445. {block:AudioPlayer}{AudioPlayerGrey}{/block:AudioPlayer}
  446. </div></div>
  447. {block:AlbumArt}<img src="{AlbumArtURL}"/>{/block:AlbumArt}
  448.  
  449. <ul id="track_info">
  450. {block:TrackName}<li><b>Title:</b> {TrackName}</li>{/block:TrackName}
  451. {block:Artist}<li><b>Artist:</b> {Artist}</li>{/block:Artist}
  452. {block:Album}<li><b>Album:</b> {Album}</li>{/block:Album}
  453. {block:PlayCount}<li><b>Plays:</b> {FormattedPlayCount}</li>{/block:PlayCount}
  454. </ul>
  455. </div>
  456. <div id="audio_cap">{block:Caption}{Caption}{/block:Caption}</div>
  457. {/block:Audio}
  458.  
  459. {block:Answer}
  460. <table id="question">
  461. <tr>
  462. <td id="ask">{Question}</td>
  463. <td id="askicon"><img src="{AskerPortraitURL-30}"></td>
  464. </tr>
  465. </table>
  466. <hr class="asker_line">
  467. <div id="asker">asked by: {Asker}</div>
  468. <p id="answer">{Answer}</p>
  469. <div id="answerer">{block:Answerer}answered by: {Answerer}
  470. <p>{Replies}</p>
  471. {/block:Answerer}</div>
  472.  
  473. {/block:Answer}
  474.  
  475. <!--INFO-->
  476. <hr class="info_line"/>
  477. <div id="info">
  478. {block:Date}<a href="{Permalink}">&nbsp;{DayOfMonthWithZero}.{MonthNumberWithZero}</a> | {/block:Date}
  479. {block:NoteCount}<a href="{Permalink}">{NoteCount} &hearts;</a> | {/block:NoteCount}
  480. {block:RebloggedFrom}<a href="{ReblogParentURL}">Via</a> | {/block:RebloggedFrom}
  481. {block:ContentSource}<a href="{SourceURL}">©</a> | {/block:ContentSource}
  482. <a href="{ReblogURL}" target="_blank" title="Reblog this post">Reblog</a>
  483. </div>
  484. <!--TAGS-->
  485. <div id="tags">{block:HasTags}{block:Tags}<a href="{TagURL}">{Tag}</a> {/block:Tags}{/block:HasTags}</div>
  486.  
  487. </div><!--end posts-->
  488. {block:PostNotes}{PostNotes}{/block:PostNotes}
  489. {/block:Posts}
  490. </div><!--end content-->
  491.  
  492. </div><!--end container-->
  493. </body>
  494. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement