ahu419

Theme 007: Charizard

Aug 11th, 2012
429
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.92 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3.  
  4. <html>
  5.  
  6. <head>
  7.  
  8. <!--Theme 007, Charizard, by Alice (metacrisising @ tumblr). Please don't steal, use as base, take bits of code and then credit me for "theme details", or remove credit. Otherwise, we shall get along swimmingly.
  9.  
  10. Nearly everything can be customized in Appearance, so please don't ask me theme questions before you're certain that you've tried everything there.
  11.  
  12. That being said, I welcome theme questions as long as they don't require that I write a completely new code.
  13.  
  14. Default Settings-->
  15.  
  16. <meta name="color:background" content="#ffffff" />
  17. <meta name="color:sidebar" content="#ffffff" />
  18. <meta name="color:post" content="#752f17" />
  19. <meta name="color:linkage" content="#ffffff" />
  20. <meta name="color:linkage hover" content="#5e5d5d" />
  21. <meta name="color:linkage border" content="#f0c9a3" />
  22. <meta name="color:accent" content="#ff7d00" />
  23. <meta name="color:title" content="#cc7144" />
  24. <meta name="color:text" content="#021425" />
  25. <meta name="color:text selection" content="#ffa600" />
  26. <meta name="color:link" content="#7e3f03" />
  27. <meta name="color:link hover" content="#ebbd77" />
  28. <meta name="color:link hover shadow" content="#d8ce7c" />
  29. <meta name="color:link hover shadow the second" content="#eaeec0" />
  30. <meta name="color:text selection shadow" content="#d8ce7c" />
  31. <meta name="color:text selection shadow the second" content="#eaeec0" />
  32. <meta name="color:permalinking" content="#5b5f59" />
  33. <meta name="color:header" content="#ffffff" />
  34. <meta name="color:header border" content="#d30f0f" />
  35. <meta name="color:header border the second" content="#d30f0f" />
  36. <meta name="color:border" content="grey" />
  37. <meta name="color:scrollbar" content="#752f17" />
  38. <meta name="color:subtitle" content="#c95730" />
  39.  
  40.  
  41. <meta name="text:subtitle" content="" />
  42.  
  43. <meta name="font:title" content="georgia" />
  44. <meta name="font:body" content="cambria" />
  45. <meta name="font:tooltip text" content="calibri" />
  46.  
  47.  
  48. <meta name="image:sidebar" content="" />
  49. <meta name="image:background" content="" />
  50. <meta name="image:header background" content="" />
  51.  
  52.  
  53. <meta name="text:Link1" content="/" />
  54. <meta name="text:Link1 Title" content="link 1" />
  55. <meta name="text:Link2" content="/" />
  56. <meta name="text:Link2 Title" content="link 2" />
  57. <meta name="text:Link3" content="/" />
  58. <meta name="text:Link3 Title" content="link 3" />
  59. <meta name="text:Link4" content="/" />
  60. <meta name="text:Link4 Title" content="link 4" />
  61. <meta name="text:Link5" content="/" />
  62. <meta name="text:Link5 Title" content="link 5" />
  63.  
  64.  
  65. <title>{Title}</title>
  66.  
  67. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
  68.  
  69. <script src="http://static.tumblr.com/xgofl0y/O7Fm1ufj3/jquery.style-my-tooltips.js" type="text/javascript"></script>
  70.  
  71. <link href='http://fonts.googleapis.com/css?family=Waiting+for+the+Sunrise|Cedarville+Cursive|Pacifico|Rochester|Homemade+Apple|Cookie' rel='stylesheet' type='text/css'>
  72.  
  73. <link href='http://fonts.googleapis.com/css?family=La+Belle+Aurore|Yesteryear|Marck+Script|Contrail+One|Reenie+Beanie|Open+Sans+Condensed:700,300|Nothing+You+Could+Do|Kaushan+Script&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
  74.  
  75.  
  76. <link rel="shortcut icon" href="{Favicon}"/>
  77. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  78. {block:Description} <meta name="description" content="{MetaDescription}"/> {/block:Description}
  79.  
  80.  
  81. <style type="text/css">
  82.  
  83.  
  84. body {
  85. background-color:{color:background};
  86. background-attachment:fixed;
  87. background-image: url('{image:background}');
  88. font-family:cambria;
  89. font-size:12px;
  90. color:{color:text};
  91. text-wrap:normal
  92. word-wrap:break-word;
  93. margin:0px 0px;
  94. height:100%;
  95. right:7px;
  96. overflow-y:scroll;
  97. overflow-x:hidden;
  98. }
  99.  
  100. html {
  101. overflow-y:auto;
  102. background-color:transparent;
  103. }
  104.  
  105. ::-webkit-scrollbar {
  106. width:7px;
  107. height:auto;
  108. background:{color:background};
  109. }
  110.  
  111. ::-webkit-scrollbar-corner {
  112. background:{color:scrollbar};
  113. }
  114.  
  115. ::-webkit-scrollbar-thumb:vertical {
  116. background:{color:scrollbar};
  117. }
  118.  
  119. ::-webkit-scrollbar-thumb:horizontal {
  120. background:{color:scrollbar};
  121. }
  122.  
  123. ::selection {
  124. text-shadow:2px 0px {color:text selection shadow},
  125. -1px 0px {color:text selection shadow the second};
  126. }
  127.  
  128. ::-moz-selection {
  129. text-shadow:2px 0px {color:text selection shadow},
  130. -1px 0px {color:text selection shadow the second};
  131. }
  132.  
  133. ::-webkit-selection {
  134. text-shadow:2px 0px {color:text selection shadow},
  135. -1px 0px {color:text selection shadow the second};
  136. }
  137.  
  138. a, a:active, a:visited{
  139. text-decoration:none;
  140. color:{color:link};
  141. }
  142.  
  143. a:hover {
  144. color:{color:link hover};
  145. text-shadow:2px 0px {color:link hover shadow},
  146. -1px 0px {color:link hover shadow the second};
  147. }
  148.  
  149. img {
  150. opacity:1;
  151. }
  152.  
  153. img:hover {
  154. border:none;
  155. }
  156.  
  157. #main {
  158. background-color:{color:background};
  159. background-attachment:fixed;
  160. background-image: url('{image:Background}'); position:absolute;
  161. width:1250px;
  162. height:100%;
  163. }
  164.  
  165. #sidebar {
  166. background-color:{color:sidebar};
  167. text-align:left;
  168. position:fixed;
  169. left:730px;
  170. width:160px;
  171. top:77px;
  172. bottom:30px;
  173. height:225px;
  174. font-family:cambria;
  175. font-size:11px;
  176. line-height:12px;
  177. padding:4px 2px 0px 4px;
  178. border-left:1px solid {color:accent};
  179. border-top:1px solid {color:accent};
  180. }
  181.  
  182. #sidebar a {
  183. letter-spacing:1px;
  184. }
  185.  
  186. #simg img {
  187. margin-left:0px;
  188. width:250px;
  189. border:1px solid {color:border};
  190. padding:12px;
  191. margin-bottom:7px;
  192. margin-top:7px;
  193. -webkit-transition: all 0.8s ease;
  194. -moz-transition:all 0.8s ease-out;
  195. -o-transition: all 0.8s ease-in-out;
  196. transition: all 0.8s ease-in-out;
  197. }
  198.  
  199. #title {
  200. font-family:pacifico;
  201. font-size:40px;
  202. line-height:22px;
  203. margin-top:17px;
  204. color:{color:title};
  205. margin-left:50px;
  206. position:relative;
  207. -webkit-transition:all 0.5s ease-out;
  208. -moz-transition:all 0.5s ease-out;
  209. transition:all 0.5s ease-out;
  210. -o-transition: all 0.5s ease-in-out;
  211. }
  212.  
  213. #title a:hover {
  214. -webkit-transition:all 0.5s ease-out;
  215. -moz-transition:all 0.5s ease-out;
  216. transition:all 0.5s ease-out;
  217. -o-transition: all 0.5s ease-in-out;
  218. }
  219.  
  220. .subtitle {
  221. font-family:cookie;
  222. color:{color:subtitle};
  223. position:relative;
  224. font-size:25px;
  225. text-transform:italics;
  226. padding-bottom:5px;
  227. position:relative;
  228. margin-left:60px;
  229. margin-top:10px;
  230. }
  231.  
  232. .portrait {
  233. border:1px solid {color:accent};
  234. position:fixed;
  235. left:500px;
  236. padding:4px;
  237. width:64px;
  238. z-index:1000;
  239. top:5px;
  240. }
  241.  
  242. #header {
  243. top:0px;
  244. left:0px;
  245. height:80px;
  246. position:fixed;
  247. width:600px;
  248. padding-bottom:5px;
  249. border-bottom:2px solid {color:header border};
  250. border-right:2px solid {color:header border the second};
  251. background-color:{color:header};
  252. z-index:999;
  253. background-image: url('{image:header background}')
  254. }
  255.  
  256. #linkage {
  257. position:fixed;
  258. margin-left:625px;
  259. width:50px;
  260. height:100%;
  261. margin-bottom:5px;
  262. border-right:2px solid {color:accent};
  263. padding-top:80px;
  264. }
  265.  
  266. #linkage a {
  267. width:75px;
  268. height:auto;
  269. font-family:cambria;
  270. font-size:12px;
  271. display:block;
  272. text-align:center;
  273. background-color:{color:linkage};
  274. padding:3px;
  275. margin-bottom:6px;
  276. margin-left:9px;
  277. display:inline-block;
  278. border:1px solid {color:linkage border};
  279. }
  280.  
  281. #linkage a:hover {
  282. background-color:{color:linkage hover};
  283. -webkit-transition-duration:.75s;
  284. -moz-transition-duration:.75s;
  285. -o-transition: all 0.75s ease-in-out;
  286. transition: all 0.75s ease-in-out;
  287. text-shadow:none;
  288. }
  289.  
  290. #question {
  291. color:{color:title};
  292. font-size:12px;
  293. padding-bottom:-4px;
  294. line-height:11px;
  295. font-family:{font:title};
  296. text-align:left;
  297. }
  298.  
  299. #asker {
  300. text-transform:uppercase;
  301. font-size:9px;
  302. letter-spacing:1px;
  303. font-family:{font:body};
  304. text-align:center;
  305. padding-top:4px;
  306. border-top:1px solid {color:accent};
  307. text-align:right;
  308. }
  309.  
  310. #answer {
  311. margin-top:0px;
  312. }
  313.  
  314. #content {
  315. position:absolute;
  316. height:auto;
  317. width:590px;
  318. left:10px;
  319. top:65px;
  320. font-family:{font:body};
  321. margin-bottom:10px;
  322. }
  323.  
  324. #post {
  325. padding:17px 27px 22px 17px;
  326. margin-left:20px;
  327. margin-right:20px;
  328. margin-top:45px;
  329. border-top:2px solid {color:post};
  330. border-left:2px solid {color:post};
  331. font-size:11px;
  332. font-family:{font:body};
  333. }
  334.  
  335. #post:hover {
  336. -webkit-transition-duration:1s;
  337. -moz-transition-duration:1s;
  338. -o-transition: all 1s ease-in-out;
  339. transition: all 1s ease-in-out;
  340. }
  341.  
  342.  
  343. .information {
  344. width:150px;
  345. height:100%;
  346. position:relative;
  347. margin-left:0px;
  348. background-color:{color:accent};
  349. }
  350.  
  351.  
  352. .permalinking {
  353. position:relative;
  354. margin-top:11px;
  355. }
  356.  
  357. .permalinking a {
  358. font-family:{font:body};
  359. text-transform:uppercase;
  360. position:relative;
  361. padding:3px;
  362. border:1px solid {color:permalinking};
  363. height:2px;
  364. opacity:.8;
  365. }
  366.  
  367. .permalinking a:hover {
  368. opacity:1;
  369. }
  370.  
  371. .tagging {
  372. position:relative;
  373. margin-top:3px;
  374. }
  375.  
  376. .tagging a {
  377. text-transform:uppercase;
  378. font-size:11px;
  379. letter-spacing:1px;
  380. font-family:{font:body};
  381. position:relative;
  382. padding:4px 9px 4px 0px;
  383. height:2px;
  384. opacity:.8;
  385. }
  386.  
  387. .tagging a:hover {
  388. opacity:1;
  389. }
  390.  
  391. h1{
  392. font-size:18px;
  393. font-weight:700;
  394. color:{color:title};
  395. }
  396.  
  397. .quote {
  398. font-size:14px;
  399. font-family:{font:title};
  400. padding-top:4px;
  401. padding-left:4px;
  402. border-top:1px solid {color:accent};
  403. border-left:1px solid {color:accent};
  404. }
  405.  
  406. .quotesource {
  407. font-family:{font:body};
  408. font-size:9px;
  409. text-transform:uppercase;
  410. padding:2px;
  411. letter-spacing:1px;
  412. text-align:right;
  413. }
  414.  
  415. .user_1 .label {
  416. color:{color:link};
  417. font-weight:bold;
  418. }
  419.  
  420. .user_2 .label {
  421. color:{color:text};
  422. font-weight:bold
  423. }
  424. .user_3 .label {
  425. color:{color:link};
  426. font-weight:bold;
  427. }
  428.  
  429. .user_4 .label {
  430. color:{color:text};
  431. font-weight:bold
  432. }
  433. .user_5 .label {
  434. color:{color:link};
  435. font-weight:bold;
  436. }
  437.  
  438. .user_6 .label {
  439. color:{color:text};
  440. font-weight:bold
  441. }
  442.  
  443. ul.chat, .chat ol, .chat li {
  444. list-style:none;
  445. margin:0px;
  446. padding:0px;
  447. line-height:15px;
  448. }
  449.  
  450. #permalink {
  451. margin-top:5px;
  452. margin-bottom:25px;
  453. margin-left:3px;
  454. border-left:10px solid {color:accent};
  455. line-height:100%;
  456. font-family:calibri;
  457. font-size:11px;
  458. text-align:left;
  459. letter-spacing:1px;
  460. -webkit-transition-duration:1s;
  461. -moz-transition-duration:1s;
  462. -o-transition: all 1s ease-in-out;
  463. transition: all 1s ease-in-out;
  464. position:absolute;
  465. padding-left:3px;
  466. }
  467.  
  468. #note {
  469. text-align:left;
  470. text-transform:uppercase;
  471. font:14px {font:title};
  472. }
  473.  
  474. #pagination {
  475. margin-top:-70px;
  476. position:fixed;
  477. display:block;
  478. }
  479.  
  480. #pagination a {
  481. width:50px;
  482. height:50px;
  483. font-family:calibri;
  484. text-align:center;
  485. font-size:40px;
  486. opacity:1;
  487. text-shadow:2px 0px {color:link hover shadow}, -2px 0px {color:link hover shadow the second};
  488. }
  489.  
  490. #notes {
  491. font-weight:normal;
  492. }
  493.  
  494. #notes li {
  495. padding-bottom:3px;
  496. padding-top:3px;
  497. border-bottom:1px dotted {color:text};
  498. }
  499.  
  500. #notes li img.avatar {
  501. vertical-align:-4px;
  502. margin-right:5px;
  503. width:16px;
  504. height:16px;
  505. }
  506.  
  507. #division {
  508. border-top:1px solid {color:accent};
  509. }
  510.  
  511. blockquote {
  512. border-left:2px solid {color:link};
  513. padding-left:3px;
  514. margin:0px 2px 0px 10px;
  515. }
  516.  
  517. #audentryprob {
  518. display:block;
  519. height:auto;
  520. min-height:135px;
  521. position:relative;
  522. }
  523.  
  524. .audentry {
  525. position:relative;
  526. width:490px;
  527. background-color:{color:background};
  528. padding:5px;
  529. min-height:135px;
  530. {block:IndexPage}overflow:hidden;{/block:IndexPage};
  531. }
  532.  
  533. .audioplayersquare {
  534. position:absolute;
  535. z-index:3;
  536. top:5px;
  537. left:5px;
  538. background:white;
  539. opacity:0.7;
  540. filter:alpha(opacity=70);
  541. }
  542.  
  543.  
  544. .audioplayer {
  545. width:20px;
  546. height:30px;
  547. overflow:hidden;
  548. margin:15px 24px 15px 16px;
  549. }
  550.  
  551. .audiodata {
  552. text-transform:uppercase;
  553. height:15px;
  554. }
  555.  
  556. .audiocaption {
  557. color:{color:link};
  558. }
  559.  
  560. #credit {
  561. position:fixed;
  562. bottom:2px;
  563. padding:4px;
  564. right:2px;
  565. color:{color:link};
  566. opacity:0.4;
  567. font-family:open sans condensed;
  568. font-size:20px;
  569. }
  570.  
  571. #credit:hover {
  572. opacity:0.8;
  573. color:{color:link};
  574. }
  575.  
  576. iframe#tumblr_controls {
  577. top:2px !important;
  578. right:4px !important;
  579. position:fixed !important;
  580. }
  581.  
  582.  
  583. </style>
  584. </head>
  585.  
  586.  
  587. <body>
  588. <div id="main">
  589. <div class="portrait"><img src="{PortraitURL-64}"></div>
  590. <div id="header">
  591. <div id="title"><a href="/">{Title}</a></div>
  592. <div class="subtitle">{text:subtitle}</div>
  593. </div>
  594.  
  595. <div id="linkage">
  596. <div id="pagination">{block:PreviousPage}<a href="{PreviousPage}">«</a>
  597. {/block:PreviousPage}{block:NextPage} <a href="{NextPage}">»</a>{/block:NextPage}</div>
  598. <a href="/">refresh</a>
  599. {block:AskEnabled}
  600. <a href="/ask">mailbox</a>{/block:AskEnabled}
  601. {block:SubmissionsEnabled}<a href="/submit">submissions</a> {/block:SubmissionsEnabled}
  602. <a href="/archive">history</a>
  603. {block:ifLink1}<a href="{text:Link1}">{text:Link1 Title}</a>{/block:ifLink1}
  604. {block:ifLink2}<a href="{text:Link2}">{text:Link2 Title}</a>{/block:ifLink2}
  605. {block:ifLink3}<a href="{text:Link3}">{text:Link3 Title}</a>{/block:ifLink3}
  606. {block:ifLink4}<a href="{text:Link4}">{text:Link4 Title}</a>{/block:ifLink4}
  607. {block:ifLink5}<a href="{text:Link5}">{text:Link5 Title}</a>{/block:ifLink5}
  608. <div id="simg">
  609. <img src="{image:sidebar}"></div>
  610. </div>
  611.  
  612. <div id="sidebar">
  613. {Description}
  614. </div>
  615.  
  616. <div id="content">
  617.  
  618. {block:Posts}
  619. <div class="information"></div>
  620. <div id="post">
  621. {block:Text}
  622. {block:Title}
  623. <h1><a href="{Permalink}">{Title}</a></h1>
  624. {/block:Title}
  625. {Body}
  626. {/block:Text}
  627.  
  628. {block:Photo}
  629. {block:Title}
  630. <h1><a href="{Permalink}">{Title}</a></h1>
  631. {/block:Title}
  632. <center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>
  633. {block:Caption}
  634. <div class="caption">{Caption}</div>
  635. {/block:Caption}
  636. {/block:Photo}
  637.  
  638. {block:Photoset}
  639. <center>{Photoset-500}</center>
  640. {block:Caption}
  641. <div class="caption">{Caption}</div>
  642. {/block:Caption}
  643. {/block:Photoset}
  644.  
  645. {block:Quote}
  646. {block:Title}
  647. <h1><a href="{Permalink}">{Title}</a></h1>
  648. {/block:Title}
  649. <div class="quote">"{Quote}"</div>
  650. {block:Source}<br>
  651. <div class="quotesource">- {Source}</div>
  652. {/block:Source}
  653. {/block:Quote}
  654.  
  655. {block:Link}
  656. <center><h1><a href="{URL}" class="link" {Target}>{Name}</a></h1></center>
  657. {block:Description}
  658. <div class="description">{Description}</div>
  659. {/block:Description}
  660.  
  661. {/block:Link}
  662. {block:Chat}
  663. {block:Title}
  664. <h1><a href="{Permalink}">{Title}</a></h1>
  665. {/block:Title}
  666. <ul class="chat">
  667. {block:Lines}
  668. <li class="user_{UserNumber}">
  669. {block:Label}
  670. <span class="label">
  671. {Label}
  672. </span>
  673. {/block:Label}
  674. &nbsp;{Line}</li>
  675. {/block:Lines}
  676. </ul>
  677. {/block:Chat}
  678.  
  679. {block:Answer}
  680. <div id="question">{Question}</div><br>
  681. <div id="asker">- {Asker}</div><br>
  682. <div id="answer">{Answer}</div>
  683. {/block:Answer}
  684.  
  685. {block:Video}
  686. {block:Title}
  687. <h1><a href="{Permalink}">{Title}</a></h1>
  688. {/block:Title}
  689. <center>{Video-500}</center>
  690. {block:Caption}
  691. <div class="caption">{Caption}</div>
  692. {/block:Caption}
  693. {/block:Video}
  694.  
  695. {block:Audio}
  696. <div id="audentryprob">
  697. <div class="audentry">
  698. <img src="http://static.tumblr.com/2lqtwbf/hLRlz1vgy/2.png" alt="default album art" width="120" height="120" style="position:absolute; vertical-align:middle;" />
  699. {block:AlbumArt}
  700. <img width="120" height="120" src="{AlbumArtURL}" style="position:absolute;" />
  701. {/block:AlbumArt}
  702.  
  703. <div class="audioplayersquare">
  704. <div class="audioplayer">{AudioPlayerWhite}</div></div>
  705. <table style="float:right;" width="360px" cellspacing="1px" cellpadding="0">
  706. {block:TrackName}
  707. <tr>
  708. <td class="audiodata"><b>Song: </b>{TrackName}</td>
  709. </tr>
  710. {/block:TrackName}
  711. {block:Artist}
  712. <tr>
  713. <td class="audiodata"><b>Artist: </b> {Artist}</td>
  714. </tr>
  715. {/block:Artist}
  716. {block:Album}
  717. <tr>
  718. <td class="audiodata"><b>Album: </b>{Album}</td>
  719. </tr>
  720. {/block:Album}
  721. <tr>
  722. <td class="audiodata">Played {FormattedPlayCount} times</td>
  723. </tr>
  724. {block:ExternalAudio}
  725. <tr>
  726. <td class="audiodata"><a href="{ExternalAudioURL}" target="_blank">Source</a></td>
  727. </tr>
  728. {/block:ExternalAudio}
  729. {block:Caption}<tr>
  730. <td class="audiocaption">{Caption}</td></tr>
  731. {/block:Caption}
  732. </table>
  733. </div>
  734. </div>{/block:Audio}
  735. <br>
  736.  
  737. <div id="division"></div>
  738. <br>
  739. <div class="tagging">
  740. {block:HasTags}{block:Tags}<a href="/tagged/{Tag}">{Tag}</a> {/block:Tags}{/block:HasTags}</div>
  741. <div class="permalinking">
  742. <a href="{Permalink}">{block:Date}{DayOfMonthWithZero} {Month} '{ShortYear} ({TimeAgo})</a>{/block:Date} {block:NoteCount}<a href="{Permalink}">{NoteCount}</a>{/block:NoteCount} {block:RebloggedFrom}<a href="{ReblogParentURL}">via</a>{/block:RebloggedFrom} {block:ContentSource}<a href="{SourceURL}">source</a></a>{/block:ContentSource} <a href="{ReblogURL}"target="_blank">reblog</a>
  743. </div>
  744. </div>
  745. <br>
  746.  
  747.  
  748. {/block:Posts}
  749.  
  750. <a href="http://metacrisising.tumblr.com"><div id="credit">metacrisising</div></a>
  751. <br><br>
  752. {block:PostNotes}<div id="notes">{PostNotes}{/block:PostNotes}
  753. </div>
  754. </div>
  755. </div>
  756. </div>
  757.  
  758. </body>
  759.  
  760. </html>
  761.  
  762. <!--Nothing more to see here!-->
Advertisement
Add Comment
Please, Sign In to add comment