API tools faq
paste
Advertisement
Guest User

the13thdrwho's 22nd theme

a guest
Mar 13th, 2014
120
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.51 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. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4.  
  5. <!--
  6.  
  7. theme 22 by the13thdrwho
  8.  
  9. options:
  10.  
  11. + 500px/400px posts
  12. + background color/image
  13. + 4 custom circle links
  14. + custom top bar opacity
  15. + text/link/background/title colors
  16.  
  17. this is my my first successful try at designing a theme with a top bar rather than sidebar!! important note: 'opacity' basically means how see-through you want the top bar to be. the setting i have in the preview is 0.9, but if you want it to be totally solid, make it 1, and if you want it to be more transparent, decrease the number. i would recommend not going lower than 0.6.
  18.  
  19. please like or reblog the theme post if you're using it :)
  20.  
  21. -->
  22.  
  23. <meta name="color:background" content="#FFFFFF">
  24. <meta name="color:link" content="#AAAAAA">
  25. <meta name="color:hover" content="">
  26. <meta name="color:text" content="#AAAAAA">
  27. <meta name="color:description text" content="#DDDDDD">
  28. <meta name="color:pagination text" content="#111111">
  29. <meta name="color:tags" content="#FFFFFF">
  30. <meta name="color:tags bg" content="#666666">
  31. <meta name="color:scrollbar" content="#EEEEEE">
  32. <meta name="color:border" content="#F5F5F5">
  33. <meta name="color:title" content="#EEEEEE">
  34. <meta name="color:title bg" content="#111111">
  35. <meta name="color:top links" content="#F4F4F4">
  36. <meta name="color:top links hover" content="#111111">
  37.  
  38. <meta name="image:background" content=""/>
  39.  
  40. <meta name="if:500px" content="1">
  41. <meta name="if:400px" content="0">
  42. <meta name="if:background no repeat" content="0">
  43. <meta name="if:custom link titles" content="1">
  44. <meta name="if:sidebar links hover" content="1">
  45. <meta name="if:title border" content="0">
  46.  
  47. <meta name="text:link1" content="">
  48. <meta name="text:link1 url" content="/">
  49. <meta name="text:link2" content="">
  50. <meta name="text:link2 url" content="/">
  51. <meta name="text:link3" content="">
  52. <meta name="text:link3 url" content="/">
  53. <meta name="text:link4" content="">
  54. <meta name="text:link4 url" content="/">
  55. <meta name="text:title opacity" content="1">
  56.  
  57. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  58. <title>{Title}</title> {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  59. <link rel="shortcut icon" href="{Favicon}" />
  60. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  61. <link href='http://fonts.googleapis.com/css?family=Old+Standard+TT' rel='stylesheet' type='text/css'>
  62.  
  63. <script language="JavaScript" src="http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js" type="text/JavaScript"></script>
  64.  
  65. <style>
  66. div#qTip {
  67. padding:4px;
  68. display: none;
  69. text-align:center;
  70. position:absolute;
  71. margin-top:7px;
  72. font-size:8px;
  73. z-index:999000;
  74. font-family:arial;
  75. background-color:{color:title bg};
  76. color:{color:description text};
  77. border:1px solid {color:description text};
  78. text-transform:uppercase;
  79. letter-spacing: 1px;
  80. }
  81. </style>
  82.  
  83. <style type="text/css">
  84.  
  85. a {
  86. color:{color:link};
  87. text-decoration:none;
  88. -moz-transition-duration:0.5s;
  89. -webkit-transition-duration:0.5s;
  90. -o-transition-duration:0.5s;
  91. }
  92. a:hover {
  93. color:{color:hover};
  94. text-decoration:none;
  95. -moz-transition-duration:0.5s;
  96. -webkit-transition-duration:0.5s;
  97. -o-transition-duration:0.5s;
  98. }
  99. body {
  100. background-color:{color:background};
  101. background-image:url('{image:background}');
  102. background-attachment:fixed;
  103. {block:Ifbackgroundnorepeat}
  104. background-repeat:no-repeat;
  105. background-size:cover;
  106. {/block:Ifbackgroundnorepeat}
  107. {block:IfNotbackgroundnorepeat}
  108. {/block:IfNotbackgroundnorepeat}
  109. font-family:calibri;
  110. font-weight:normal;
  111. }
  112. h1 {
  113. font-weight:normal;
  114. font-size:10px;
  115. text-align:center;
  116. font-style:italic;
  117. line-height:50%;
  118. letter-spacing:1px;
  119. color:{color:text};
  120. line-height:110%;
  121. }
  122. h2 {
  123. font-size:12px;
  124. text-align:center;
  125. color:{color:text};
  126. font-weight:bold;
  127. padding:5px;
  128. padding-bottom:2px;
  129. line-height:110%;
  130. }
  131. h2 a {
  132. color:{color:text};
  133. }
  134. blockquote {
  135. border-left:2px solid {color:text};
  136. padding-left:5px;
  137. margin:5px;
  138. }
  139. #themenum {
  140. width:700px;
  141. margin: 0 auto -12px auto;
  142. text-align: center;
  143.  
  144. }
  145. #sidebar {
  146. position:fixed;
  147. width:65px;
  148. height:100%;
  149. margin-top:-50px;
  150. opacity:1;
  151. text-align:center;
  152. z-index:92222;
  153. padding:80px;
  154. color:{color:text};
  155. background-color:transparent;
  156. margin-left:417px;
  157. }
  158. .pagination {
  159. margin-left:0px;
  160. border-left:1px solid {color:border};
  161. color:{color:pagination text};
  162. font-family:arial;
  163. font-size:16px;
  164. letter-spacing:1px;
  165. }
  166. .pagination a {
  167. padding:1px;
  168. color:{color:pagination text};
  169. font-family:arial;
  170. font-size:16px;
  171. letter-spacing:1px;
  172. }
  173. .pagination a:hover {
  174. color:#fff;
  175. background-color:{color:link};
  176. }
  177. #sidebar:hover .pagination {
  178. opacity:1;
  179. -webkit-transition-duration: .5s;
  180. -moz-transition-duration: .5s;
  181. -o-transition-duration: .5s;
  182. -ms-transition-duration: .5s;
  183. }
  184. #top {
  185. text-align:center;
  186. {block:If500px}
  187. width:487px;
  188. {/block:If500px}
  189. {block:If400px}
  190. width:387px;
  191. {/block:If400px}
  192. {block:Ifleftimage}
  193. margin-left:317px;
  194. {/block:Ifleftimage}
  195. {block:IfNotleftimage}
  196. margin-left:217px;
  197. {/block:IfNotleftimage}
  198. padding-right:13px;
  199. letter-spacing:1px;
  200. height:auto;
  201. word-spacing:6px;
  202. padding-top:10px;
  203. padding-bottom:10px;
  204. line-height:110%;
  205. {block:Iftitleborder}
  206. border-top:3px solid #fff;
  207. border-bottom:3px solid #fff;
  208. {/block:Iftitleborder}
  209. {block:IfNottitleborder}
  210. {/block:IfNottitleborder}
  211. background-color:{color:title bg};
  212. color:{color:title};
  213. opacity:{text:title opacity};
  214. {block:If500px}
  215. margin-left:-390px;
  216. {/block:If500px}
  217. {block:If400px}
  218. margin-left:-345px;
  219. {/block:If400px}
  220. margin-top:30px;
  221. font-size:18px;
  222. font-family:arial;
  223. font-family: 'Old Standard TT', serif;
  224. -moz-transition-duration:.7s;
  225. -webkit-transition-duration:.7s;
  226. -o-transition-duration:.7s;
  227. }
  228. #top a {
  229. color:{color:title};
  230. }
  231. #top a:hover {
  232. color:{color:link};
  233. }
  234. #description {
  235. text-align:center;
  236. {block:If500px}
  237. width:469px;
  238. padding-right:10px;
  239. {/block:If500px}
  240. {block:If400px}
  241. width:369px;
  242. padding-right:10px;
  243. {/block:If400px}
  244. padding-left:16px;
  245. letter-spacing:1px;
  246. height:auto;
  247. word-spacing:2px;
  248. padding-top:5px;
  249. background-color:{color:title bg};
  250. color:{color:title};
  251. opacity:.9;
  252. font-size:10px;
  253. font-family:arial;
  254. -moz-transition-duration:.7s;
  255. -webkit-transition-duration:.7s;
  256. -o-transition-duration:.7s;
  257. }
  258. #description a {
  259. color:{color:title};
  260. }
  261. #description a:hover {
  262. color:{color:link};
  263. }
  264. #links {
  265. text-align:center;
  266. {block:If500px}
  267. width:469px;
  268. padding-right:13px;
  269. {/block:If500px}
  270. {block:If400px}
  271. width:369px;
  272. padding-right:13px;
  273. {/block:If400px}
  274. padding-left:8px;
  275. letter-spacing:1px;
  276. height:auto;
  277. word-spacing:2px;
  278. padding-top:10px;
  279. background-color:{color:title bg};
  280. color:{color:title};
  281. opacity:.9;
  282. font-size:0px;
  283. font-family:arial;
  284. -moz-transition-duration:.7s;
  285. -webkit-transition-duration:.7s;
  286. -o-transition-duration:.7s;
  287. }
  288. #links a {
  289. display:inline-block;
  290. width:7px;
  291. height:7px;
  292. background:{color:top links};
  293. margin:-6px 7px;
  294. border-radius:100%;
  295. }
  296. #links a:hover {
  297. background-color:{color:top links hover};
  298. }
  299. ::-webkit-scrollbar {background-color:#fff; height:8px; width:8px;}
  300. ::-webkit-scrollbar-thumb:vertical {background-color:{color:scrollbar}; height:50px}
  301. ::-webkit-scrollbar-thumb:horizontal {background-color:{color:scrollbar};height:8px!important}
  302. #postcontainer {
  303. float:left;
  304. {block:If500px}
  305. margin-left:50px;
  306. {/block:If500px}
  307. {block:If400px}
  308. margin-left:95px;
  309. {/block:If400px}
  310. text-align:justify;
  311. color:{color:text};
  312. margin-bottom: 35px;
  313. z-index:333;
  314. border:1px solid {color:border};
  315. background-color:{color:background};
  316. padding-right:60px;
  317. padding-top:170px;
  318. }
  319. #posts {
  320. {block:If500px}width:500px;{/block:If500px}{block:If400px}width:400px;{block:If400px}
  321. margin-left:56px;
  322. margin-top:30px;
  323. text-align:justify;
  324. font-size:11px;
  325. line-height:90%;
  326. color:{color:text};
  327. z-index:333;
  328. }
  329. #info {
  330. {block:If500px}width:490px;{/block:If500px}{block:If400px}width:390px;{block:If400px}
  331. margin-top:3px;
  332. padding:2px;
  333. padding-left:8px;
  334. font-size:8px;
  335. color:{color:text};
  336. text-transform:uppercase;
  337. font-style:normal;
  338. letter-spacing:1px;
  339. text-align:center;
  340. line-height:150%;
  341. border-bottom:1px solid {color:border};
  342. -moz-transition-duration:0.5s;
  343. -webkit-transition-duration:0.5s;
  344. -o-transition-duration:0.5s;
  345. }
  346. #info a {
  347. color:{color:link};
  348. text-align:right;
  349. letter-spacing:1px;
  350. font-style:normal;
  351. padding:1px;
  352. }
  353. #info a:hover {
  354. color:{color:hover};
  355. background-color:{color:link};
  356. }
  357. .caption {
  358. {block:If500px}width:500px;{/block:If500px}width:400px;{block:If400px}{block:If400px}
  359. text-align:justify;
  360. line-height:120%;
  361. }
  362. .question {
  363. padding:10px;
  364. text-align:left;
  365. color:{color:text};
  366. font-style:italic;
  367. background-color:{color:infobg};
  368. border-bottom:1px solid {color:border};
  369. }
  370. .answer {
  371. text-align:right;
  372. padding:10px;
  373. color:{color:text};
  374. }
  375. .music {
  376. {block:If500px}width:500px;{/block:If500px}width:400px;{block:If400px}{block:If400px}
  377. padding-bottom:10px;
  378. background-color:{color:infobg};
  379. }
  380. .albumart {
  381. float:left;
  382. padding:0px 10px 10px 0px;
  383. }
  384. .albumart img {
  385. width:45px;
  386. height:45px;
  387. }
  388. .playercontainer {
  389. text-align:left;
  390. padding:10px;
  391. background-color:#ffffff;
  392. width:480px;
  393. }
  394. .musicinfo {
  395. padding:10px;
  396. color:{color:text};
  397. }
  398. .postnote {
  399. text-transform:uppercase;
  400. font-style:normal;
  401. letter-spacing:0px;
  402. font-size: 9px;
  403. text-align:left;
  404. line-height:90%;
  405. margin-left:-40px;
  406. }
  407. .postnote li {
  408. list-style-type:none;
  409. border-bottom:1px solid {color:border};
  410. padding:10px 25px 10px 25px;
  411. text-align:left;
  412. margin:0px;
  413. -moz-transition-duration:0.5s;
  414. -webkit-transition-duration:0.5s;
  415. -o-transition-duration:0.5s;
  416. }
  417. .tags {
  418. font-family:calibri;
  419. font-style:normal;
  420. {block:If500px}width:500px;{/block:If500px}{block:If400px}width:400px;{block:If400px}
  421. text-transform:uppercase;
  422. font-style:normal;
  423. background-color:{color:tags bg};
  424. color:{color:tags};
  425. line-height:120%;
  426. font-size:8px;
  427. text-align:right;
  428. padding-top:2px;
  429. padding-bottom:2px;
  430. -moz-transition-duration:0.5s;
  431. -webkit-transition-duration:0.5s;
  432. -o-transition-duration:0.5s;
  433. }
  434. .tags a {
  435. color:{color:tags};
  436. padding:1px;
  437. padding-bottom:2px;
  438. letter-spacing:1px;
  439. }
  440. .tags a:hover {
  441. color:{color:hover};
  442. background-color:{color:link};
  443. }
  444. ul.chat, .chat ol, .chat li {
  445. list-style:none;
  446. margin:0px;
  447. padding:2px;
  448. }
  449. .tab {
  450. text-decoration:underline;
  451. font-weight:700;
  452. background-color:{color:background};
  453. margin-right:5px;
  454. }
  455. {CustomCSS}</style></head>
  456.  
  457. <body>
  458. <div id="themenum">
  459. <div id="sidebar">
  460. <div id="top">{Title};
  461. <div id="description">{Description}
  462. {block:Pagination}
  463. {block:PreviousPage}
  464. <a href="{PreviousPage}">BACK </a>
  465. {/block:PreviousPage}
  466. +
  467. {block:NextPage}
  468. <a href="{NextPage}">FORTH</a>
  469. {/block:NextPage}
  470. {/block:Pagination}
  471. {/block:Ifsidebarpagination}
  472. </div>
  473. <div id="links">
  474. <a href="{text:link1 url}" title="{text:link1}">x</a>
  475. <a href="{text:link2 url}" title="{text:link2}">x</a>
  476. <a href="{text:link3 url}" title="{text:link3}">x</a>
  477. <a href="{text:link4 url}" title="{text:link4}">x</a>
  478. <a href="http://the13thdrwho.tumblr.com" title="theme">x</a>
  479. </div>
  480.  
  481. </div>
  482. </div>
  483.  
  484. <div id="postcontainer">
  485.  
  486. {block:Posts}
  487.  
  488. <div id="posts">
  489.  
  490. {block:Text}{block:Title}<h2>{Title}</h2>{/block:Title}{Body}{/block:Text}
  491.  
  492. {block:Quote}<h2>“{Quote}”</h2><h1>{Source}</h1>{/block:Quote}
  493.  
  494. {block:Link}<a href="{URL}"><h2>{Name}</h2></a>
  495. {block:Description}<p>{Description}</p>{/block:Description}{/block:Link}
  496.  
  497. {block:If500px}{block:Photo}<center><img src="{PhotoURL-500}" title="{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}"/></center>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  498.  
  499. {block:Photoset}<center>{Photoset-500}</center>
  500. {block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  501.  
  502. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}{/block:If500px}
  503.  
  504. {block:If400px}{block:Photo}<center><img src="{PhotoURL-400}" title="{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}"/></center>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  505.  
  506. {block:Photoset}<center>{Photoset-400}</center>
  507. {block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  508.  
  509. {block:Video}{Video-400}{block:Caption}{Caption}{/block:Caption}{/block:Video}{/block:If400px}
  510.  
  511. {block:Chat}<ul class="chat">{block:Title}<h2>{Title}</h2>{/block:Title}{block:Lines}<li>{block:Label}<span class="tab">{Label}</span>{/block:Label}&nbsp;{Line}</li>{/block:Lines}</ul>{/block:Chat}
  512.  
  513.  
  514. {block:Answer}<div class="question">{Asker} asked: {Question}</div><div class="answer">{Answer}</div>{/block:answer}
  515.  
  516. {block:Audio}<div class="music">{block:AlbumArt}<div class="albumart"><img src="{AlbumArtURL}"/></div>{/block:AlbumArt}
  517. <div class="musicinfo">{block:TrackName}<b>Title:</b> {TrackName}<br />{/block:TrackName}{block:Artist}<b>Artist:</b> {Artist}<br />{/block:Artist}
  518. {/block:ExternalAudio}<b>Played:</b> {PlayCount} times</div>
  519. <br><div class="playercontainer">{AudioPlayerWhite}</div></div>
  520. {block:Caption}{Caption}{/block:Caption}<br>{/block:Audio}
  521. {block:Date}<div id="info"><a href="{Permalink}">{TimeAgo}{block:RebloggedFrom}</a> VIA <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}
  522. {block:ContentSource}―<a href="{SourceURL}">{SourceLink}</a>{/block:ContentSource}</div>{/block:Date}
  523. {block:HasTags}
  524. <div class="tags">
  525. {block:Tags} #<a href="{TagURL}">{Tag}</a> {/block:Tags}</div>
  526. {/block:HasTags}
  527. <div class="postnote">
  528. {block:PostNotes}{PostNotes}{/block:PostNotes}
  529. </div>
  530. </div>
  531. {/block:Posts}
  532. </div>
  533. </div>
  534. </div>
  535. </div>
  536. </body>
  537. </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!