elisewhite

Theme 01 with 2 Update Tabs for santaclauseimpala

Nov 10th, 2013
122
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.95 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head><title>{Title}</title>
  4. <link rel="shortcut icon" href="{Favicon}">
  5. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  6. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  7.  
  8. <!---------------------------------------------------------------------
  9. ----------------- THEME BY ELISE WHITE (MISSCAPALDI) ------------------
  10. -------- PLEASE DO NOT REMOVE THE CREDIT OR USE AS A BASE CODE --------
  11. ------------------- THANKS AND HAVE A LOVELY DAY ;) -------------------
  12. ---------------------------------------------------------------------->
  13.  
  14. <meta name="color:Background" content="#ffffff"/>
  15. <meta name="color:Text" content="#838282"/>
  16. <meta name="color:Link" content="#b8b8b8"/>
  17. <meta name="color:Link Hover" content="#F2F2F2"/>
  18. <meta name="color:Chat Odd" content="#D6D5D5">
  19. <meta name="color:Chat Even" content="#D6D5D5">
  20. <meta name="color:Post Background" content="#F6F5F5">
  21. <meta name="color:Info Background" content="#f5f5f5"/>
  22. <meta name="color:Image Border" content="#F2F2F2"/>
  23. <meta name="color:Scrollbar" content="#D6D5D5">
  24. <meta name="color:Updates Tab" content="#D6D5D5">
  25.  
  26. <meta name="image:Sidebar" content=""/>
  27. <meta name="image:titletab" content=""/>
  28.  
  29. <meta name="text:link1" content="" />
  30. <meta name="text:link1 url" content="/">
  31. <meta name="text:link2" content="" />
  32. <meta name="text:link2 url" content="/">
  33. <meta name="text:link3" content="" />
  34. <meta name="text:link3 url" content="/">
  35. <meta name="text:link4" content="" />
  36. <meta name="text:link4 url" content="/">
  37. <meta name="text:link5" content="" />
  38. <meta name="text:link5 url" content="/">
  39.  
  40. <script language="JavaScript" src="http://dl.dropbox.com/u/3173073/GothicDarkness/qTip.js" type="text/JavaScript"></script>
  41.  
  42. <link href='http://fonts.googleapis.com/css?family=Noto+Sans|Crimson+Text:400italic' rel='stylesheet' type='text/css'>
  43.  
  44. <style type="text/css">
  45.  
  46. ::-webkit-scrollbar-thumb {
  47. background-color: {color:scrollbar};
  48. border: 2px solid {color:background};
  49. height:auto;
  50. }
  51.  
  52. ::-webkit-scrollbar {
  53. height:auto;
  54. width:11px;
  55. background-color:{color:scrollbar};
  56. border:5px solid {color:background};
  57. }
  58.  
  59. div#qTip {
  60. padding: 2px;
  61. display: none;
  62. text-align: center;
  63. position: absolute;
  64. font-style:italic;
  65. font-size:8px;
  66. line-height:10px;
  67. font-family:cambria;
  68. text-transform:uppercase;
  69. z-index: 1000;
  70. background: white;
  71. border:1px solid;
  72. border-color:#ebebeb;
  73. color:#A1A1A1;
  74. letter-spacing: 1px;
  75. }
  76.  
  77. body {
  78. background:{color:background};
  79. margin:0px;
  80. color:{color:text};
  81. font-family:Calibri;
  82. font-size:10px;
  83. line-height:100%;
  84. }
  85.  
  86. a {
  87. text-decoration:none;
  88. outline:none;
  89. -moz-outline-style:none;
  90. color:{color:link};
  91. -moz-transition-duration:1s;
  92. -webkit-transition-duration:1s;
  93. -o-transition-duration:1s;
  94. }
  95. a:hover {
  96. color:{color:Link Hover};
  97. -moz-transition-duration:1s;
  98. -webkit-transition-duration:1s;
  99. -o-transition-duration:1s;
  100. }
  101.  
  102. img {
  103. border:none;
  104. }
  105.  
  106. blockquote {
  107. padding-left:5px;
  108. border-left:2px solid;
  109. }
  110.  
  111. blockquote blockquote {
  112. padding-left:5px;
  113. border-left:2px solid;
  114. font-size:10px;
  115. }
  116.  
  117. h1 {
  118. font-size:9px;
  119. font-family: 'Noto Sans', sans-serif;
  120. font-weight:normal;
  121. text-transform:uppercase;
  122. text-align:center;
  123. margin-bottom:15px;
  124. letter-spacing:1px;
  125. }
  126.  
  127. #entries {
  128. padding:10px;
  129. width:500px;
  130. margin-left:500px;
  131. margin-top:40px;
  132. }
  133.  
  134. #post {
  135. width:500px;
  136. padding-bottom:20px;
  137. }
  138.  
  139. .albumcover {
  140. position: relative;
  141. z-index: 1;
  142. height: 80px;
  143. float:left;
  144. border:1px solid {color:image border};
  145. padding:4px;
  146. }
  147.  
  148. .playbutton {
  149. width:20px;
  150. height:30px;
  151. overflow: hidden;
  152. position: relative;
  153. z-index: 99;
  154. margin: 15px 24px 13px 16px;
  155. }
  156.  
  157. .musicbin {
  158. background-color: #fff;
  159. position: absolute;
  160. z-index: 99;
  161. margin-top: 15px;
  162. margin-left: 15px;
  163. opacity: 0.2;
  164. -webkit-transition: opacity 0.5s linear;
  165. -webkit-transition: all 0.5s linear;
  166. -moz-transition: all 0.5s linear;
  167. -o-transition: all 0.5s linear;
  168. }
  169. .musicbin:hover {
  170. opacity:0.5;
  171. }
  172.  
  173. .musicinfo {
  174. padding-top:20px;
  175. font-size:12px;
  176. margin-left: 100px;
  177. text-align:center;
  178. background: {color:Post Background};
  179. margin-top:5px;
  180. min-height:70px;
  181. }
  182.  
  183. .quote {
  184. padding:5px 5px 15px 5px;
  185. text-align:center;
  186. font-size:14px;
  187. letter-spacing:1px;
  188. font-family: 'Crimson Text', serif;
  189. font-style:italic;
  190. }
  191.  
  192. .linkpost {
  193. text-align:center;
  194. padding: 0px 15px 0px 15px;
  195. }
  196.  
  197.  
  198. #updates {
  199. text-align: center;
  200. font-size: 9px;
  201. position:fixed;
  202. left:10px;
  203. top:0px;
  204. z-index:999;
  205. width:180px;
  206. }
  207.  
  208. #updates:hover #update {
  209. opacity:1;
  210. -webkit-transition: all .7s ease-in-out;
  211. -moz-transition: all .7s ease-in-out;
  212. -o-transition: all .7s ease-in-out;
  213. }
  214.  
  215. #update {
  216. position:fixed;
  217. font-size:9.5px;
  218. font-family:calibri;
  219. padding: 5px 0 5px 0;
  220. width:125px;
  221. opacity:0;
  222. margin-left:90px;
  223. margin-top:30px;
  224. -webkit-transition: all .7s ease-in-out;
  225. -moz-transition: all .7s ease-in-out;
  226. -o-transition: all .7s ease-in-out;
  227. }
  228.  
  229. #updatestab img {
  230. float:left;
  231. padding: 6px 0px 8px 0px;
  232. width: 100px;
  233. margin-top:-10px;
  234. margin-left:-10px;
  235. }
  236.  
  237. #updatesbottom {
  238. text-align: center;
  239. font-size: 9px;
  240. position:fixed;
  241. left:40px;
  242. bottom:5px;
  243. z-index:999;
  244. width:180px;
  245. -webkit-transition: all .7s ease-in-out;
  246. -moz-transition: all .7s ease-in-out;
  247. -o-transition: all .7s ease-in-out;
  248. }
  249.  
  250. #updatesbottom:hover {
  251. bottom:180px;
  252. -webkit-transition: all .7s ease-in-out;
  253. -moz-transition: all .7s ease-in-out;
  254. -o-transition: all .7s ease-in-out;
  255. }
  256.  
  257. #updatebottom {
  258. position:fixed;
  259. font-size:9.5px;
  260. font-family:calibri;
  261. padding-top:5px;
  262. width:180px;
  263. height:340px;
  264. -webkit-transition: all .7s ease-in-out;
  265. -moz-transition: all .7s ease-in-out;
  266. -o-transition: all .7s ease-in-out;
  267. }
  268.  
  269. #updatestabbottom {
  270. opacity:0.8;
  271. padding: 0px;
  272. font-family: 'Times', serif;
  273. font-style:italic;
  274. font-size: 16px;
  275. line-height:100%;
  276. color:{color:Updates Tab};
  277. letter-spacing:2px;
  278. font-weight:bold;
  279. }
  280.  
  281. #sidebar {
  282. width:150px;
  283. position:fixed;
  284. margin-left:250px;
  285. margin-top:90px;
  286. }
  287.  
  288. #sidebarimage {
  289. width: 170px;
  290. height:400px;
  291. }
  292. #sidebarimage img {
  293. width:150px;
  294. height:330px;
  295. border:1px solid {color:image border};
  296. padding:5px;
  297. }
  298.  
  299.  
  300. #sidebar:hover #links {
  301. opacity:.9;
  302. margin-top:-240px;
  303. -moz-transition-duration:1s;
  304. -webkit-transition-duration:1s;
  305. -o-transition-duration:1s;
  306. }
  307. #sidebar:hover #description {
  308. opacity:.9;
  309. margin-top:-210px;
  310. -moz-transition-duration:1s;
  311. -webkit-transition-duration:1s;
  312. -o-transition-duration:1s;
  313. }
  314. #sidebar:hover #title {
  315. opacity:1;
  316. -moz-transition-duration:1s;
  317. -webkit-transition-duration:1s;
  318. -o-transition-duration:1s;
  319. }
  320. #sidebar:hover #pagination {
  321. opacity:1;
  322. -moz-transition-duration:1s;
  323. -webkit-transition-duration:1s;
  324. -o-transition-duration:1s;
  325. }
  326.  
  327. #title {
  328. display:block;
  329. width:160px;
  330. opacity:0;
  331. letter-spacing:2px;
  332. font-family: 'Noto Sans', sans-serif;
  333. margin-left:auto;
  334. margin-right:auto;
  335. font-size:8px;
  336. text-transform:uppercase;
  337. color:gray;
  338. text-align:center;
  339. margin-top:-12px;
  340. -moz-transition-duration:1s;
  341. -webkit-transition-duration:1s;
  342. -o-transition-duration:1s;
  343. }
  344.  
  345. #links {
  346. position:absolute;
  347. letter-spacing:0px;
  348. position:fixed;
  349. font-family:times;
  350. width:150px;
  351. opacity:0;
  352. margin-top:-260px;
  353. margin-left:6px;
  354. background-color:#fff;
  355. font-size:10px;
  356. text-transform:uppercase;
  357. text-align:center;
  358. line-height:170%;
  359. -moz-transition-duration:1s;
  360. -webkit-transition-duration:1s;
  361. -o-transition-duration:1s;
  362. }
  363.  
  364. #links a{
  365. display:inline-block;
  366. width:15px;
  367. line-height:130%;
  368. margin-left:3px;
  369. color:{color:link};
  370. letter-spacing:0px;
  371. padding-left:3px;
  372. padding-right:3px;
  373. text-decoration:none;
  374. -moz-transition-duration:1s;
  375. -webkit-transition-duration:1s;
  376. -o-transition-duration:1s;
  377. }
  378.  
  379. #links a:hover {
  380. text-align:center;
  381. text-decoration:underline;
  382. background-color:#E9E9E9;
  383. color: {color:link hover};
  384. padding-left:3px;
  385. padding-right:3px;
  386. -moz-transition-duration:1s;
  387. -webkit-transition-duration:1s;
  388. -o-transition-duration:1s;
  389. }
  390.  
  391. #description {
  392. position:absolute;
  393. text-align:center;
  394. opacity:0;
  395. width:141px;
  396. padding:5px;
  397. border: 1px solid #ffffff;
  398. background-color: #ffffff;
  399. color: {color:text};
  400. margin-left:3px;
  401. margin-top:-190px;
  402. font-family:calibri;
  403. text-transform:none;
  404. font-style:none;
  405. font-size:10px;
  406. line-height:100%;
  407. -moz-transition-duration:1s;
  408. -webkit-transition-duration:1s;
  409. -o-transition-duration:1s;
  410. }
  411.  
  412. #pagination {
  413. display:block;
  414. opacity:0;
  415. font-size:10px;
  416. text-transform:lowercase;
  417. margin-top:-55px;
  418. letter-spacing:1px;
  419. font-style:normal;
  420. color:gray;
  421. margin-left:10px;
  422. -moz-transition-duration:1s;
  423. -webkit-transition-duration:1s;
  424. -o-transition-duration:1s;
  425. }
  426.  
  427. #pagination a {
  428. color: {color:link};
  429. }
  430.  
  431. #pagination a:hover {
  432. color: {color:link hover};
  433. }
  434.  
  435. #info {
  436. font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  437. width:491px;
  438. margin-top:10px;
  439. padding:5px;
  440. word-spacing:1px;
  441. font-size:7px;
  442. color:{color:text};
  443. text-transform:uppercase;
  444. font-style:normal;
  445. text-align:left;
  446. background: {color:Info Background};
  447. -moz-transition-duration:0.5s;
  448. -webkit-transition-duration:0.5s;
  449. -o-transition-duration:0.5s;
  450. }
  451. #info a {
  452. margin-right:2px;
  453. color:{color:link};
  454. font-style:normal;
  455. }
  456. #info a:hover {
  457. color:{color:link hover};
  458. }
  459.  
  460. .tags {
  461. font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
  462. width:495px;
  463. text-transform:normal;
  464. line-height:120%;
  465. font-size:9px;
  466. text-align:center;
  467. opacity:0;
  468. padding-top:5px;
  469. padding-bottom:15px;
  470. -moz-transition-duration:1s;
  471. -webkit-transition-duration:1s;
  472. -o-transition-duration:1s;
  473. }
  474. .tags a{
  475. color:{color:link};
  476. -moz-transition-duration:.5s;
  477. -webkit-transition-duration:.5s;
  478. -o-transition-duration:.5s;
  479. }
  480. .tags a:hover{
  481. color:{color:link hover};
  482. -moz-transition-duration:.5s;
  483. -webkit-transition-duration:.5s;
  484. -o-transition-duration:.5s;
  485. }
  486. #post:hover .tags{
  487. opacity:1;
  488. -moz-transition-duration:1s;
  489. -webkit-transition-duration:1s;
  490. -o-transition-duration:1s;
  491. }
  492.  
  493. #asker {
  494. float:right;
  495. margin-left:5px;
  496. }
  497. #asker img{
  498. border:1px solid {color:image border};
  499. padding:2px;
  500. }
  501.  
  502. #answerer {
  503. float:left;
  504. margin-right:5px;
  505. }
  506. #answerer img{
  507. border:1px solid {color:image border};
  508. padding:2px;
  509. }
  510.  
  511. .chat .label {
  512. text-transform:uppercase;
  513. font-weight:bold;
  514. }
  515.  
  516. .line_odd .label {color: {color:Chat Odd}}
  517. .line_even .label {color: {color:Chat Even}}
  518.  
  519.  
  520. #credit {
  521. font-size:9px;
  522. font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
  523. font-style:italic;
  524. letter-spacing:1px;
  525. }
  526.  
  527. #credit a {
  528. background-color:#fff;
  529. padding:5px;
  530. border-top:1px solid #e9e9e9;
  531. border-bottom:1px solid #e9e9e9;
  532. position:fixed;
  533. right:15px;
  534. bottom:10px;
  535. -moz-transition-duration:1s;
  536. -webkit-transition-duration:1s;
  537. -o-transition-duration:1s;
  538. }
  539.  
  540. #credit a:hover {
  541. color:#fff;
  542. background-color:#747474;
  543. -moz-transition-duration:1s;
  544. -webkit-transition-duration:1s;
  545. -o-transition-duration:1s;
  546. }
  547.  
  548. {CustomCSS}</style></head><body>
  549.  
  550. <!--------------------------------------------
  551. TOP UPDATES TAB
  552. --------------------------------------------->
  553.  
  554. <div id="updates">
  555. <div id="updatestab"><img src="{image:titletab}" /></div>
  556. <div id="update"> <center>
  557. Hello! This is where you'll put your updates! I think it looks best if you have a fairly large amount of content to put here, but it's up to you :)
  558. </center></div>
  559. </div>
  560.  
  561. <!--------------------------------------------
  562. BOTTOM UPDATES TAB
  563. --------------------------------------------->
  564.  
  565. <div id="updatesbottom">
  566. <div id="updatestabbottom">UPDATES<img src="http://24.media.tumblr.com/96a19e409e4505d124f687e48f031312/tumblr_mw2s94kfyI1rv5n8go1_250.png" style="padding-top:5px;"></div>
  567. <div id="updatebottom"> <center>
  568. <h1>Currently Working On:</h1>
  569. TEXT HERE<br><br>
  570. <h1>Currently Watching:</h1>
  571. TEXT HERE<br><br>
  572. <h1>Currently Reading:</h1>
  573. TEXT HERE<br><br>
  574. </center></div>
  575. </div>
  576.  
  577. <!--------------------------------------------
  578. SIDEBAR
  579. --------------------------------------------->
  580.  
  581. <div id="sidebar">
  582.  
  583. <div id="title">{Title}</div>
  584.  
  585. <div id="sidebarimage"><img src="{image:Sidebar}"></div>
  586.  
  587. <div id="links">
  588. <a href="{text:link1 url}" title="{text:link1}">I.</a>
  589. <a href="{text:link2 url}" title="{text:link2}">II.</a>
  590. <a href="{text:link3 url}" title="{text:link3}">III.</a>
  591. <a href="{text:link4 url}" title="{text:link4}">IV.</a>
  592. <a href="{text:link5 url}" title="{text:link5}">V.</a>
  593. </div>
  594.  
  595. <div id="description">{description}</div>
  596.  
  597. <div id="pagination">
  598. {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}" title="previous page" style="float:left;">back</a>{/block:PreviousPage}{/block:Pagination}
  599.  
  600. {block:Pagination}{block:NextPage}<a href="{NextPage}" title="next page" style="float:right;">next</a>{/block:NextPage}{/block:Pagination}{/block:Pagination}
  601. </div>
  602.  
  603.  
  604. </div>
  605.  
  606. <!--------------------------------------------
  607. POST TYPES
  608. --------------------------------------------->
  609.  
  610. <div id="entries">{block:Posts}<div id="post">
  611.  
  612. <!---------- TEXT POSTS ---------->
  613.  
  614. {block:Text}
  615. <h1>{block:Title}{Title}{/block:Title}</h1>{Body}
  616. {/block:Text}
  617.  
  618. <!---------- PHOTO POSTS ---------->
  619.  
  620. {block:Photo}
  621. {LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}
  622. {block:Caption}{Caption}{/block:Caption}
  623. {/block:Photo}
  624.  
  625. <!---------- PHOTOSET POSTS ---------->
  626.  
  627. {block:Photoset}
  628. {Photoset-500}
  629. {block:Caption}{Caption}{/block:Caption}
  630. {/block:Photoset}
  631.  
  632. <!---------- QUOTE POSTS ---------->
  633.  
  634. {block:Quote}
  635. <div class="quote">{Quote}</div>
  636. {block:Source}<div style="text-align:right; margin-right:15px;">{Source}</div>{/block:Source}
  637. {/block:Quote}
  638.  
  639. <!---------- LINK POSTS ---------->
  640.  
  641. {block:Link}
  642. <div class="linkpost">
  643. <h1><a href="{URL}" {Target}>{Name}</a></h1>
  644. {block:Description}{Description}{/block:Description}
  645. </div>
  646. {/block:Link}
  647.  
  648. <!---------- CHAT POSTS ---------->
  649.  
  650. {block:Chat}
  651. {block:Title}<h1>{Title}</h1>{/block:Title}
  652. <div class="chat">{block:Lines}<div class="line_{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label}
  653. {Line}<br /></div>{/block:Lines}</div>
  654. {/block:Chat}
  655.  
  656. <!---------- AUDIO POSTS ---------->
  657.  
  658. {block:Audio}
  659. <div class="musicbin"><div class="playbutton">{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}</div></div>
  660. {block:AlbumArt}<img src="{AlbumArtURL}" class="albumcover">{/block:AlbumArt}
  661. <div class="musicinfo">
  662. {block:TrackName}<div style="font-size:11px; padding:5px!imporant; text-transform:uppercase; margin-bottom: 15px; font-weight:bold; letter-spacing:1px;">{TrackName}</div>{/block:Trackname}
  663. {block:Artist}<div style="font-size:10px; margin-bottom: 2px;">{Artist}{/block:Artist}
  664. {block:Album} - {Album}</div>{/block:Album}
  665. {block:PlayCount}<div style="font-style:normal; font-size:8px; text-transform:uppercase; letter-spacing:1px;">{PlayCount} plays</div> {/block:PlayCount}
  666. </div>
  667. <div style="margin-top:20px;">{block:caption}{Caption}{/block:caption}</div>
  668. {/block:Audio}
  669.  
  670. <!---------- VIDEO POSTS ---------->
  671.  
  672. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  673.  
  674. <!---------- ANSWER POSTS ---------->
  675.  
  676. {block:Answer}
  677. <div id="asker"><img src="{AskerPortraitURL-48}"></div>
  678. <div style="text-align:right; font-size:11px;">{Asker} asked:</div>
  679. <div style="background:{color:Post Background}; padding:15px 5px 15px 5px; margin-top:5px; margin-right:59px; min-height:10px; text-align:right;">{Question}</div>
  680. <br>
  681. <div id="answerer"><img src="{PortraitURL-48}"></div>
  682. <div style="text-align:left; font-size:11px;">{Name} replied:</div>
  683. <div style="background:{color:Post Background}; padding:5px 5px 5px 5px; margin-top:5px; margin-left:59px; min-height:10px; text-align:left;">{Answer}</div>
  684. {/block:Answer}
  685.  
  686. <!--------------------------------------------
  687. POST INFO
  688. --------------------------------------------->
  689.  
  690. {block:Date}
  691. <div id="info">
  692. <a href="{Permalink}">{TimeAgo}</a>{/block:Date}{block:NoteCount} with <a href="{Permalink}">{NoteCountWithLabel}</a> {/block:NoteCount} {block:RebloggedFrom} via <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}
  693. {block:ContentSource}<div style="float:right;"><a href="{SourceURL}">source</a></div>{/block:ContentSource}</div>
  694. {block:HasTags}
  695. <div class="tags">{block:Tags} <a href="{TagURL}">&nbsp; -{Tag}</a>&nbsp; {/block:Tags}</div>{/block:HasTags}
  696. <div class="postnote">
  697. {block:PostNotes}{PostNotes}{/block:PostNotes}
  698. </div>
  699. </div>
  700. {/block:Posts}
  701.  
  702. <!--------------------------------------------
  703. CREDIT - YOU MAY EDIT BUT YOU MAY NOT REMOVE
  704. --------------------------------------------->
  705.  
  706. <div id="credit"><a href="http://misscapaldi.tumblr.com">elise white</div>
  707.  
  708. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment