API tools faq
paste
Advertisement
0fficialvanessa

Theme Base

0fficialvanessa
May 19th, 2013
520
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.99 KB | None | 0 0
raw download clone embed print report
  1. <!-- Theme Base - Mxrandakerr
  2. If you need to know anything else feel free to message me! :) -->
  3.  
  4. <html lang="en">
  5. <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  6. <html xmlns="http://www.w3.org/1999/xhtml">
  7. <head>
  8.  
  9.  
  10. <script type="text/javascript"
  11. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  12.  
  13. <!--DEFAULT VARIABLES-->
  14. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  15.  
  16. <meta name="color:background" content="#fff"/>
  17. <meta name="color:link" content="#eeb2cc"/>
  18. <meta name="color:text" content="#777"/>
  19. <meta name="color:title" content="#000"/>
  20. <meta name="color:hover" content="#696969"/>
  21. <meta name="color:text shadow" content="#aaa"/>
  22. <meta name="color:scrollbar" content="#777"/>
  23.  
  24. <meta name="image:sidebar" content="1"/>
  25. <meta name="image:background" content="1"/>
  26.  
  27. <meta name="text:link one" content=""/>
  28. <meta name="text:link one title" content="Link"/>
  29. <meta name="text:link two" content=""/>
  30. <meta name="text:link two title" content="Link"/>
  31. <meta name="text:link three" content=""/>
  32. <meta name="text:link three title" content="Link"/>
  33. <meta name="text:link four" content=""/>
  34. <meta name="text:link four title" content="Link"/>
  35.  
  36.  
  37. <style type="text/css">
  38.  
  39.  
  40. iframe#tumblr_controls {right:2px !important; position: fixed !important;-webkit-transition: opacity 0.7s linear;opacity: 0.05;-webkit-transition: all 0.8s ease-out;-moz-
  41.  
  42. transition: all 0.8s ease-out;transition: all 0.8s ease-out;}
  43.  
  44. iframe#tumblr_controls:hover{-webkit-transition: opacity 0.7s linear;opacity: 0.8;-webkit-transition: all 0.4s ease-out;-moz-transition: all 0.4s ease-out;transition: all 0.4s ease-out;}
  45.  
  46. p {
  47. margin:0px;
  48. margin-top:0px;
  49. }
  50.  
  51. /*BODY
  52. Change only the font size, line height, and font family!*/
  53.  
  54. body {
  55. margin: 5px;
  56. font-family: calibri;
  57. line-height:10px;
  58. font-size:10px;
  59. background-attachment: fixed;
  60. background-repeat: repeat;
  61. color:{color:text};
  62. background-color: {color:Background};
  63. background-image:url({image:Background});
  64. }
  65.  
  66.  
  67. a:link, a:active, a:visited{
  68. text-decoration: none;
  69. -webkit-transition: all 0.6s ease-out;
  70. -moz-transition: all 0.6s ease-out;
  71. -o-transition: all 0.6s ease-out;
  72. transition: all 0.6s ease-out;
  73. color:{color:link};
  74. }
  75.  
  76. a:hover {
  77. text-decoration: none;
  78. -webkit-transition: all 0.3s ease-out;
  79. -moz-transition: all 0.3s ease-out;
  80. -o-transition: all 0.3s ease-out;
  81. transition: all 0.3s ease-out;
  82. cursor: url(http://i.imgur.com/2qleX.jpg), auto;
  83. color: {color:Hover};
  84. text-shadow:0px 0px 2px {color:text shadow};
  85. }
  86.  
  87. div#center{
  88. margin:auto;
  89. position:relative;
  90. width:1000px;
  91. background-color:;
  92. overflow:auto;
  93. overflow-y:hidden;
  94. }
  95.  
  96. /*THE ENTRIES
  97. Size, padding, borders, etc*/
  98. /* Under 270 for 2 Column & 3 Column! 480-500 for 1 Column!*/
  99.  
  100. .entry {
  101. float:left;
  102. display: block;
  103. margin:5px;
  104. overflow:hidden;
  105. border:1px solid #ddd;
  106. padding:4px;
  107. width:230px;
  108. {block:PermalinkPage}
  109. width:450px;
  110. text-align:left;
  111. line-height:10px;
  112. {/block:PermalinkPage}
  113. background:white;
  114. }
  115.  
  116. /*THE ENTRY HOVERED PERMALINK
  117. Size, text, height, colors, etc*/
  118. /* Make the Width the same or less, for your ENTRIES!*/
  119.  
  120. .entry .perma{
  121. width:226px;
  122. height:auto;
  123. margin-left:0px;
  124. position: absolute;
  125. line-height: 14px;
  126. overflow:hidden;
  127. padding:2px;
  128. text-align:center;
  129. top:2px;
  130. background:white;
  131. word-spacing:2px;
  132. letter-spacing:1px;
  133. opacity: 0.0;
  134. border-bottom:2px solid #777;
  135. -webkit-transition: all .7s ease;
  136. -moz-transition: all .7s ease;
  137. -o-transition: all .7s ease;
  138. transition: all .7s ease;
  139. }
  140.  
  141. .entry:hover .perma{
  142. overflow:visible;
  143. opacity:1;
  144. }
  145.  
  146. /* THE BIGGEST WIDTH FOR YOUR ENTRY IMAGES
  147. So make it the same size as you did for Entry*/
  148.  
  149. .entry img{
  150. max-width:230px;
  151. }
  152.  
  153. /* POSTS
  154. Width, and Position!*/
  155. /* Keep it at 500px for 2 Column, Make it between 500px-550px for 3 Column,
  156. 490px-550px for 1 Column!*/
  157.  
  158. #posts {
  159. width:500px;
  160. margin-top:1px;
  161. z-index:99;
  162. margin-left:260px;
  163. right:auto;
  164. background:transparent;
  165. margin-right:auto;
  166. position:relative;
  167. overflow-y: hidden;
  168. }
  169.  
  170. /* SIDEBAR CUSTOMIZING
  171. Width, Height, Background, Positioning, etc*/
  172. /* All I can say is change background color, margin-left and top!*/
  173.  
  174. #sidebar{
  175. position:fixed !important;
  176. width:auto;
  177. background:white;
  178. height:auto;
  179. margin-top:150px;
  180. margin-left:0px;
  181. text-align:center;
  182. }
  183.  
  184. /* LINKS
  185. Width, Height, and Background!*/
  186. /* Margin-Top is from the Sidebar! */
  187.  
  188. #links{
  189. position:fixed !important;
  190. width:200px;
  191. background:white;
  192. height:auto;
  193. margin-top:14px;
  194. text-align:center;
  195. font-family:"Lala";
  196. font-size:14px;
  197. }
  198.  
  199. /* DESCRIPTION
  200. Width, height, overflow, background, text-align!*/
  201. /* OVERFLOW HIDDEN.. means scrollbar included, if you don't want that just delete the word "Hidden" and leave it blank!*/
  202.  
  203. #description{
  204. position:fixed !important;
  205. width:200px;
  206. background:white;
  207. height:30px;
  208. text-align:center;
  209. overflow:hidden;
  210. }
  211.  
  212. /* TITLES FOR ENTRIES
  213. Import some fonts, I already have some inserted for you so you can kinda see what to do!*/
  214. /* line height is same as what your font-size will be! Keep it around 16px-28px*/
  215.  
  216. .title{
  217. line-height: 18px;
  218. font-weight: normal;
  219. font-family:"Lala";
  220. font-size:18px;
  221. color:{color:Title}
  222. }
  223.  
  224. @font-face {font-family: "Good Time"; src: url('http://static.tumblr.com/9wzbixa/PUwmj3iyh/kgalwaysagoodtime.ttf'); }
  225. @font-face{font-family: "Lala"; src: url('http://static.tumblr.com/vpzhdvv/6d7m90v7t/111.woff'); }
  226. @font-face{font-family: "Ginette"; src: url('http://static.tumblr.com/9wzbixa/ZKKmj2im3/ginette.ttf'); }
  227. @font-face{font-family: "Brain Flower"; src: url('http://static.tumblr.com/9wzbixa/qvjmifp1n/brain_flower.ttf'); }
  228.  
  229. /* PERMALINKS. THINGS THAT SAY 'NOTES' AT THE BOTTOM OF ENTRIES
  230. Just change the text-align to left, center, or right!*/
  231.  
  232. .permalink{
  233. text-transform: normal;
  234. display: block;
  235. text-align: right;
  236. text-decoration: none;
  237. background:{color:background};
  238. }
  239.  
  240. #audio {
  241. width:200px;
  242. height:auto;
  243. min-height:60px;
  244. padding-bottom:0px;
  245. }
  246. .cover {
  247. position:absolute;
  248. z-index:1;
  249. width:60px;
  250. height:60px;
  251. }
  252. .cover img {
  253. float:left;
  254. width:60px;
  255. height:60px;
  256. }
  257. .playbox {
  258. opacity:0.6;
  259. width:27px;
  260. height:30px;
  261. overflow:hidden;
  262. position:absolute;
  263. z-index:1000;
  264. margin-left:17px;
  265. margin-top:17px;
  266. text-align:center;
  267. }
  268. .info {
  269. margin-left:73px;
  270. margin-top:4px;
  271. line-height:14px;
  272. }
  273.  
  274. /* QUESTION/ANSWER
  275. Change the width to around what your Entry size is!*/
  276. /* You'll need to mess around with it, because it can't be exactly what you Entry size is! */
  277.  
  278. #asked {
  279. padding:13px;
  280. width:413px;
  281. text-align:left;
  282. margin-left:50px;
  283. background:{color:background};
  284. }
  285.  
  286. #infscr-loading{
  287. bottom: -70px;
  288. position: absolute;
  289. left: 50%;
  290. margin-left:-8px;
  291. width:16px;
  292. height:11px;
  293. overflow:hidden;
  294. margin-bottom: 50px;
  295. }
  296.  
  297. ::-webkit-scrollbar {
  298. width: 4px;
  299. height: 4px;
  300. border-left:0px solid #ccc;
  301. background-color:{color:background};
  302. }
  303.  
  304. ::-webkit-scrollbar-thumb {
  305. background: {color:scrollbar};
  306. }
  307.  
  308. ::-webkit-scrollbar {
  309. width: 5px;
  310. height: 5px;
  311. background: #dddddd;
  312. }
  313.  
  314. ::-webkit-scrollbar-thumb {
  315. background-color:{color:scrollbar};
  316. }
  317.  
  318. #postnotes{
  319. text-align: justify;}
  320.  
  321. #postnotes blockquote{
  322. border: 0px;}
  323.  
  324. /* BLOCKQUOTES
  325. Just change it to either solid, dotted, or dashed!*/
  326.  
  327. blockquote{
  328. padding:0px 0px 2px 5px;
  329. margin:0px 0px 2px 10px;
  330. border-left: 1px dotted #555555;
  331. }
  332.  
  333. blockquote p, ul{
  334. margin:0px;
  335. padding:0px;
  336. }
  337.  
  338. a img{border: 0px;}
  339.  
  340.  
  341. ul, ol, li{list-style:none; margin:0px; padding:0px;}
  342.  
  343. .user_1 .label, .user_2 .label, .user_3 .label, .user_4 .label, .user_5 .label, .user_6 .label,
  344. .user_7 .label, .user_8 .label, .user_9 .label {color:{color:text};}
  345.  
  346. .notes img{width:10px; position:relative; top:3px;}
  347. <--ses-->
  348. small{font-size: 90%;}
  349.  
  350. {CustomCSS}
  351.  
  352. </style>
  353.  
  354. {block:IndexPage}
  355. <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
  356. <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>
  357.  
  358. <script type="text/javascript">
  359. $(window).load(function(){
  360. var $wall = $('#posts');
  361. $wall.imagesLoaded(function(){
  362. $wall.masonry({
  363. itemSelector: '.entry, .entry_photo',
  364. isAnimated : false
  365. });
  366. });
  367.  
  368. $wall.infinitescroll({
  369. navSelector : '#pagination',
  370. nextSelector : '#pagination a',
  371. itemSelector : '.entry, .entry_photo',
  372. bufferPx : 2000,
  373. debug : false,
  374. errorCallback: function() {
  375. $('#infscr-loading').fadeOut('normal');
  376. }},
  377. function( newElements ) {
  378. var $newElems = $( newElements );
  379. $newElems.hide();
  380. $newElems.imagesLoaded(function(){
  381. $wall.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} );
  382. });
  383. }); $('#posts').show(500);
  384. });
  385. </script>
  386.  
  387.  
  388. {/block:IndexPage}
  389.  
  390.  
  391. <title>{title}</title>
  392.  
  393. <link rel="shortcut icon" href="{Favicon}" />
  394. <meta name="viewport" content="width=820" />
  395. </head>
  396.  
  397. <body>
  398. <div class="wrapper">
  399. <div class="header">
  400. </div>
  401.  
  402. <div id="cage">
  403. <div id="center">
  404.  
  405. <!---->
  406. <!-- CHANGE THE STYLE,
  407. Width, & Height to what you want your sidebar photo to be-->
  408.  
  409. <div id="sidebar">
  410. <a href="/"><img src="{image:sidebar}" style="width:200px;height:200px;"></a>
  411. <div id="description">
  412. {Description}</div>
  413. <div id="links">
  414. <a href="{text:link one}">{text:link one title}</a> &middot
  415. <a href="{text:link two}">{text:link two title}</a> &middot
  416. <a href="{text:link three}">{text:link three title}</a></div>
  417. </div>
  418. <!------------------------------------->
  419.  
  420.  
  421. <div class="left">
  422. <div id="posts">
  423. {block:Posts}
  424. <div class="entry">
  425.  
  426. {block:Text}{block:Title}<span class="title">{Title}</span>{/block:Title}<span class="body">{Body}</span><p align=right><span class="permalink"><a
  427.  
  428. href="{Permalink}"><a href="{Permalink}"><a href="{Permalink}">{notecountwithlabel}</a></a><br>{/block:HasTags}</span></align>
  429. {/block:Text}
  430.  
  431. {block:Answer}
  432.  
  433. <div id="asked">{Asker} asked: {Question}</div> <img src="{AskerPortraitURL-40}" style="margin-top:-40px; position:absolute;"><p>
  434.  
  435. {Answer}
  436.  
  437. {/block:Answer}
  438.  
  439. {block:Link}<a href="{URL}" class="title">{Name}</a>{block:Description}<div class="body">{Description}</div>{/block:Description} <p align=right><span
  440.  
  441. class="permalink"><a href="{Permalink}">{notecountwithlabel}</a> <a href="{Permalink}"></span></align>{block:Link}
  442.  
  443. {block:Photo}
  444. {block:IndexPage}
  445. <center>
  446. <div class="perma">
  447. <a href="{Permalink}">{timeago}</a> - <a href="{Permalink}">{notecountwithlabel}</a> <br>
  448. <a href="{ReblogURL}" target="_blank"> Reblog </a>
  449. </div>
  450.  
  451. <div class="photo"><a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="100%"/></a></div>
  452. {/block:IndexPage}
  453. {block:PermalinkPage}
  454. {LinkOpenTag}<div class="photo"><a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="100%"/></a></div>
  455.  
  456. {LinkCloseTag}
  457. {/block:PermalinkPage}
  458. {/block:Photo}
  459.  
  460. {block:Photoset}
  461. {block:IndexPage}
  462. <center>
  463.  
  464. <div class="perma">
  465. <div class="perma">
  466. <a href="{Permalink}">{timeago}</a> - <a href="{Permalink}">{notecountwithlabel}</a> <br>
  467. <a href="{ReblogURL}" target="_blank"> Reblog </a> </div>
  468.  
  469. {Photoset-250}</center>
  470. {/block:IndexPage}
  471. {block:PermalinkPage}
  472. <center>
  473. {Photoset-500}</center>
  474. {/block:PermalinkPage}
  475. {/block:Photoset}
  476.  
  477. {block:Quote}<span class="title">"{Quote}"</span> — {block:Source}<b>{Source}</b>{/block:Source}<br><p align=right><span class="permalink"><a
  478.  
  479. href="{Permalink}">{notecountwithlabel}</a> <a href="{Permalink}"> </span>{/block:Quote}
  480.  
  481. {block:Chat}{block:Title}<span class="title">{Title}</span>{/block:Title}
  482. <ul class="chat">
  483. {block:Lines}
  484. <li class="user_{UserNumber}">
  485. {block:Label}
  486. <span class="label">{Label}</span>
  487. {/block:Label}
  488.  
  489. {Line}
  490. </li>
  491. {/block:Lines}
  492. <p align=right><span class="permalink"><a href="{Permalink}">{notecountwithlabel}</a> <a href="{Permalink}">
  493. {/block:Chat}
  494.  
  495. {block:Audio}
  496. <div id="audio"><div class="cover"><img src="http://static.tumblr.com/k9utpfa/tcom8wpif/default_cover_m.jpg"></div>{block:AlbumArt}<div class="cover"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}<div class="playbox">{block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}</div><div class="info"><b>Artist:</b> <span{block:Artist} style="display:none;"{/block:Artist}>Unknown</span>{block:Artist}{Artist}{/block:Artist}<br><b>Title:</b> <span{block:TrackName} style="display:none;"{/block:TrackName}>Unknown</span>{block:TrackName}{TrackName}{/block:TrackName}<br><b>Album:</b> <span{block:Album} style="display:none;"{/block:Album}>Unknown</span>{block:Album}{Album}{/block:Album}{block:PlayCount}<br><b>Plays:</b> {FormattedPlayCount}{/block:PlayCount}</div></div>
  497. {block:IndexPage}
  498. {/block:IndexPage}
  499. {/block:Audio}
  500.  
  501. {block:Video}
  502. {block:IndexPage}
  503. <center>
  504. <div class="perma">
  505. <a href="{ReblogURL}" target="_blank"> reblog </a> </div>
  506. {Video-250}</center>
  507. {/block:IndexPage}
  508. {block:PermalinkPage}
  509. <center>
  510. {Video-400}</center>
  511. {/block:PermalinkPage}
  512. {block:Video}
  513.  
  514.  
  515. {block:PostNotes}<div align="middle">{caption}</div>
  516. <center>
  517.  
  518. {block:NoteCount}{NoteCountWithLabel}<br>{/block:NoteCount}
  519.  
  520. {block:HasTags}
  521. tags: {block:Tags}<a href="{TagURL}">{Tag}. </a>{/block:Tags}<br> {/block:HasTags}
  522. {block:RebloggedFrom}
  523. reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a><br>
  524. posted by <a href="{ReblogRootURL}">{ReblogRootName}</a>
  525.  
  526. {/block:RebloggedFrom}
  527. </center></span>
  528. <br>
  529. <div id="postnotes">{PostNotes}</div><br>
  530.  
  531. <center>{block:ContentSource}
  532. <br><a href="{SourceURL}">
  533. {lang:Source}:
  534. {block:SourceLogo}
  535. <img src="{BlackLogoURL}" width="{LogoWidth}"
  536. height="{LogoHeight}" alt="{SourceTitle}" />
  537. {/block:SourceLogo}
  538. {block:NoSourceLogo}
  539. {SourceLink}
  540. {/block:NoSourceLogo}
  541. </a>
  542. {/block:ContentSource}</center>
  543.  
  544. {/block:PostNotes}
  545. </div>
  546. {/block:Posts}
  547. </div></div>
  548.  
  549. {block:IndexPage}
  550. {block:Pagination}
  551. <div id="pagination">
  552. {block:NextPage}
  553. <a id="nextPage" href="{NextPage}"></a>
  554. {/block:NextPage}
  555. {block:PreviousPage}
  556. <a href="{PreviousPage}"></a>
  557. {/block:PreviousPage}
  558. </div>
  559. {/block:Pagination}
  560. {/block:IndexPage}
  561. </body>
  562. </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!