API tools faq
paste
Beautifully-Flawless

Theme 16: Shantelle

Beautifully-Flawless
Aug 29th, 2013
221
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.74 KB | None | 0 0
raw download clone embed print report
  1. <!--Theme 16- Shantelle By Vanilla Beaux.
  2. DO NOT REMOVE CREDITS!!DO NOT REMOVE CREDITS!!DO NOT REMOVE CREDITS!!
  3. DO NOT REMOVE CREDITS!!DO NOT REMOVE CREDITS!!DO NOT REMOVE CREDITS!!
  4. DO NOT REMOVE CREDITS!!DO NOT REMOVE CREDITS!!DO NOT REMOVE CREDITS!!
  5. -->
  6.  
  7. <html>
  8. <head>
  9.  
  10. <script type="text/javascript"
  11. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  12.  
  13. <title>{Title}</title>
  14. <link rel="shortcut icon" href="{favicon}">
  15. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  16. {block:Description}<meta name="description"content="{MetaDescription}"/>{/block:Description}
  17.  
  18. <!--Variables-->
  19. <meta name="color:Background" content="#000" />
  20. <meta name="color:Text" content="#000000" />
  21. <meta name="color:Link" content="#888"/>
  22. <meta name="color:Link Hover" content="#ddd"/>
  23. <meta name="color:Posts Border" content="#ddd"/>
  24. <meta name="color:Posts BG" content="#fff"/>
  25. <meta name="color:Title" content="#000"/>
  26. <meta name="color:Sidebar BG" content="#fff"/>
  27. <meta name="color:Sidebar Border" content="#ddd"/>
  28. <meta name="color:Navigation" content="#fff"/>
  29. <meta name="color:Navigation Top Border" content="#fff"/>
  30. <meta name="color:Navigation Hover" content="#ddd"/>
  31. <meta name="color:Nav Box" content="#000"/>
  32.  
  33. <meta name="image:Background" content="" />
  34. <meta name="image:sidebar" content="http://static.tumblr.com/gdh5wux/bkHm7lb29/tumblr_m4to0jv2hn1qmh1kxo1_500.png" />
  35.  
  36. <meta name="text:Link 1 URL" content="/submit" />
  37. <meta name="text:Link 2 URL" content="/faq" />
  38. <meta name="text:Link 3 URL" content="/links" />
  39. <meta name="text:Link 1" content="Submit" />
  40. <meta name="text:Link 2" content="Faq" />
  41. <meta name="text:Link 3" content="More Links" />
  42. <meta name="text:Stats 1" content="INSERT STAT HERE" />
  43. <meta name="text:Stats 2" content="INSERT STAT HERE" />
  44. <meta name="text:Stats 3" content="INSERT STAT HERE" />
  45. <meta name="text:Stats 4" content="Best Viewed on Google Chrome" />
  46.  
  47. <!--Variables-->
  48. <style type="text/css">
  49.  
  50. ::-webkit-scrollbar {width: 9px; height: 4px;background:transparent;}
  51. ::-webkit-scrollbar-thumb { background-color:#ddd;-webkit-box-shadow: inset 0 0 6px #000;-webkit-border-radius: 10px;border-radius: 10px;}
  52.  
  53. #tumblr_controls{position:fixed !important;}
  54.  
  55.  
  56. @font-face{font-family:"tinytots";src:url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');}
  57.  
  58. @font-face{font-family:"oregano";src:url('http://static.tumblr.com/gdh5wux/mmimerymw/oregano-regular.ttf');}
  59.  
  60. @font-face { font-family: "halohandletter"; src: url('http://static.tumblr.com/loouiuu/Ttaloide6/halohandletter.ttf'); }
  61.  
  62. @font-face { font-family: "Existence"; src: url('http://static.tumblr.com/aorjzw7/C1bms9thn/existence-light.otf'); }
  63.  
  64.  
  65.  
  66.  
  67. body {
  68. margin:0px;
  69. background-color:{color:Background};
  70. background-image:url('{image:Background}');
  71. background-attachment: fixed;
  72. background-repeat: repeat;
  73. background-position: center;
  74. }
  75.  
  76. body, div, p, textarea, submit, input {
  77. font-family:"tinytots";
  78. font-size:8px;
  79. line-height:12px;
  80. color:{color:Text};
  81. text-transform:uppercase;
  82. }
  83.  
  84. a:link, a:active, a:visited{
  85. color:{color:Link};
  86. text-decoration: none;
  87. -webkit-transition: color 0.4s ease-out;
  88. -moz-transition: color 0.4s ease-out;
  89. }
  90.  
  91. a:hover{
  92. color:{color:Link Hover};
  93. -webkit-transition: color 0.4s ease-out;
  94. -moz-transition: color 0.4s ease-out;
  95. }
  96.  
  97. div#posts {
  98. float:left;
  99. width:960px;
  100. z-index:99;
  101. margin-left:400px;
  102. margin-top:38px;
  103. }
  104.  
  105. .entry {
  106. float:left;
  107. margin:5px;
  108. padding:3px;
  109. overflow:hidden;
  110. background-color:{color:Posts BG};
  111. {block:IndexPage}
  112. width:300px;
  113. {/block:IndexPage}
  114. {block:PermalinkPage}
  115. width:500px;
  116. {/block:PermalinkPage}
  117. -webkit-transition: opacity 0.9s linear;
  118. -webkit-transition: all 0.9s ease-in-out;
  119. -moz-transition: all 0.9s ease-in-out;
  120. -o-transition: all 0.9s ease-in-out;
  121. }
  122.  
  123. .perma
  124. {
  125. opacity: 0.0;
  126. filter: alpha(opacity = 0);
  127. margin-top: -21px;
  128. width: px;
  129. height: 30px;
  130. line-height: 30px;
  131. font-size: 9px;
  132. position:absolute;
  133. text-align: center;
  134. z-index:800;
  135. color: {color:permalink};
  136.  
  137. }
  138. a.p
  139. {
  140.  
  141. color: {color:permalink};
  142. }
  143. .entry:hover .perma {
  144.  
  145. -webkit-transition: opacity 0.4s linear;
  146. opacity: 1;
  147. -moz-transition: all 0.4s linear;
  148. transition: all 0.4s linear;
  149. filter: alpha(opacity = 100);
  150.  
  151. }
  152.  
  153. select {
  154. font-size: 9px;
  155. width: 100px;
  156. margin-left: 10px;
  157.  
  158. }
  159. option {
  160. font-size: 9px;
  161. text-align: left;
  162.  
  163. }
  164. input[type=button]
  165. {
  166. font-size: 9px;
  167. }
  168.  
  169. .likep {
  170. width: 21px;
  171. height: 20px;
  172. overflow: hidden;
  173. position: relative;
  174. z-index: 99;
  175. position: absolute;
  176. margin-top: 26px;
  177. margin-left: 5px;
  178. }
  179. .rep {
  180. width: 24px;
  181. height: 20px;
  182. overflow: hidden;
  183. position: relative;
  184. z-index: 99;
  185. position: absolute;
  186. margin-top: 26px;
  187. margin-left: 29px;
  188. }
  189. .likep a:hover {
  190. background-position: 0px 0px;
  191. }
  192. .likep a {
  193. background-image: url("http://static.tumblr.com/uiqhh9x/BPnlzww8v/like.png");
  194. background-position: 0px 0px;
  195. display: block;
  196. z-index: 99;
  197. webkit-transition: all 0s linear;
  198. -webkit-transition: all 0s linear;
  199. -moz-transition: all 0s linear;
  200. transition: all 0s linear;
  201. }
  202. .likep img {
  203. width: 21px;
  204. height: 20px;
  205. webkit-transition: all 0.2s linear;
  206. -webkit-transition: all 0.2s linear;
  207. -moz-transition: all 0.2s linear;
  208. transition: all 0.2s linear;
  209. }
  210. .rep img{
  211. width: 24px;
  212. height: 20px;
  213. line-height: 30px;
  214. display: inline;
  215. }
  216.  
  217. .not{
  218. position:absolute;
  219. background:url("http://static.tumblr.com/uiqhh9x/X6Ym17xp2/middle.png");
  220. height:20px;
  221. font-size:11px;
  222. line-height:20px;
  223. color:#fff;
  224. margin-top:26px;
  225. margin-left:56px;
  226. padding-left:4px;
  227. padding-right:4px;
  228. -moz-border-radius:2px;
  229. border-radius:2px;
  230. }
  231. .not a{ color: #fff;font-weight: bold;font-family: Arial, Helvetica, sans-serif;}
  232.  
  233. .entry:hover .not, .entry:hover .rep, .entry:hover .likep {opacity: 0.8;filter: alpha(opacity = 80);}
  234.  
  235. .not:hover , .rep:hover, .likep:hover {opacity: 1!important;filter: alpha(opacity = 100)!important;}
  236.  
  237. #infscr-loading{
  238. bottom: -70px;
  239. position: absolute;
  240. left: 50%;
  241. margin-left:-8px;
  242. width:16px;
  243. height:11px;
  244. overflow:hidden;
  245. margin-bottom: 50px;
  246. }
  247.  
  248. .title{
  249. font-family:'Existence';
  250. text-transform:uppercase;
  251. font-size:23px;
  252. line-height:30px;
  253. color:#555;
  254. text-align:center;
  255. }
  256.  
  257. .quote{
  258. font-family:'oregano';
  259. font-size:15px;
  260. text-transform:none;
  261. line-height:25px;
  262. text-align:right;
  263. color:#aaa;
  264. }
  265.  
  266. .infinite {
  267. align:right;
  268. background:#ddd;
  269. color:black;
  270. margin:3px 0px 5px 50px;
  271. padding:7px;
  272. padding-top: 5px;
  273. position: relative;
  274. border-radius:5px;
  275. }
  276.  
  277. .infinite span {
  278. display:block;
  279. position:absolute;
  280. width:1px;height:1px;
  281. font-size: 8px;
  282. font-family: pixel;
  283. line-height: 1px;
  284. left:-10px;
  285. top:10px;
  286. border-top:5px solid transparent;
  287. border-bottom:5px solid transparent;
  288. border-right:10px solid grey;
  289. }
  290.  
  291. .askborder {float: left;margin: 1px 4px 0 0;padding: 2px; background: #000000;}
  292.  
  293. blockquote{
  294. padding:0px 0px 2px 5px;
  295. margin:0px 0px 2px 10px;
  296. border-left: 7px solid #999999;
  297. }
  298.  
  299. ul, ol, li{list-style:circle; margin:5px; margin-left:10px; padding-left:3px;}
  300. .user_1 .label, .user_4 .label, .user_7 .label, .user_2 .label, .user_5 .label, .user_8 .label, .user_3 .label, .user_6 .label,
  301. .user_9 .label {color:text};}
  302.  
  303. .notes img{width:10px; position:relative; top:3px;}
  304.  
  305. #sidebar{
  306. position:fixed !important;
  307. width: 395px;
  308. height:650px;
  309. margin-top:40px;
  310. margin-left:0px;
  311. font-family:tinytots;
  312. font-size:8px;
  313. background-color:{color:Sidebar BG};
  314. overflow:hidden;
  315. overflow-x:hidden;
  316. border:1px solid {color:Sidebar Border};
  317. }
  318.  
  319. #sidebar img{width:100%; height:250px;}
  320.  
  321. #name{
  322. font-family:"lainie";
  323. font-size:25px;
  324. line-height:20px;
  325. text-transform:none;
  326. color:{color:text};
  327. }
  328.  
  329. #name2{
  330. font-family:"halohandletter";
  331. font-size:30px;
  332. line-height:30px;
  333. text-transform:none;
  334. color:{color:text};
  335. text-align:left;
  336. width:100%;
  337. border-bottom:1px dotted #ddd;
  338. }
  339.  
  340. div.Links a{
  341. font-family:'Existence';
  342. font-size:22px;
  343. line-height:35px;
  344. margin-left:10px;
  345. text-align:center;
  346. text-transform:uppercase;
  347. text-shadow:0px 0px 10px #ddd;
  348. padding-right:10px;
  349. padding-left:10px;
  350. color:{color:Navigation};
  351. }
  352.  
  353. div.Links a:hover{
  354. letter-spacing:2px;
  355. border-top:1px solid {color:Navigation Top Border};
  356. }
  357.  
  358. #linksbox{
  359. position:fixed; !important;
  360. width:100%;
  361. height:35px;
  362. overflow:auto;
  363. color:#fff;
  364. margin-left:0px;
  365. margin-top:0px;
  366. z-index:1000;
  367. border:1px solid #fff;
  368. background-color:{color:Nav Box};
  369. }
  370.  
  371. .heart {display : block; -height: 15px; text-indent : 5px; font-family:tinytots;
  372. font-size:8px; color:#000; text-align:center; vertical-align : left; background:
  373. url('http://www.hellostar.org/wp-admin/images/q1.gif') no-repeat left; padding-left : 10px;
  374. padding-bottom : 2px;}
  375.  
  376. .heart:hover {display : block; color:#000; text-align:center; -height: 15px;text-indent : 5px; vertical-align : left; background : url('http://www.hellostar.org/wp-admin/images/q2.gif') no-repeat left; padding-left : 10px; padding-bottom : 2px;}
  377.  
  378.  
  379. #faves img {
  380. opacity:1;
  381. width:50px;
  382. height:50px;
  383. border-radius:0px;
  384. border:1px dotted #fff;
  385. -webkit-transition-duration:.7s;
  386. }
  387.  
  388. #faves img:hover {
  389. border-radius: 32px;
  390. -webkit-transition: 0.2s ease-in;
  391. border:1px dotted #fff;
  392. opacity:.8;
  393. }
  394.  
  395. #featured img {
  396. width:70px;
  397. height:70px;
  398. border-radius:100px;
  399. border:1px solid #888;
  400. -webkit-transition-duration:.7s;
  401. box-shadow:5px 1px 12px #ddd;
  402. }
  403.  
  404. #portraitpic{
  405. margin-left:2px;
  406. margin-top:0px;
  407. float:left;
  408. border:0px solid #ddd;
  409. padding:2px;
  410. background-color:#fff;
  411. }
  412.  
  413. {CustomCSS}
  414. </style>
  415. <body>
  416.  
  417. <div id="linksbox">
  418. <div id="portraitpic"><a href="/"><img src="{PortraitURL-30}"/></a></div>
  419. <div class="Links">
  420. <a href="/">Home</a>
  421. <a href="/ask">Ask</a>
  422. <a href="{text:Link 1 URL}">{text:Link 1}</a>
  423. <a href="{text:Link 2 URL}">{text:Link 2}</a>
  424. <a href="{text:Link 3 URL}">{text:Link 3}</a>
  425. <a href="http://vanillabeaux.co.vu/">Credits</a>
  426. </div>
  427. </div>
  428.  
  429. <div id="sidebar">
  430. <img src="{image:sidebar}">
  431.  
  432. <div id="name2">About the Blogette</div>
  433. {description}
  434.  
  435. <div id="name2">Jadore</div>
  436. TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE
  437.  
  438. <div id="name2">Stats</div>
  439. <div class="heart">{text:Stats 1}</div>
  440. <div class="heart">{text:Stats 2}</div>
  441. <div class="heart">{text:Stats 3}</div>
  442. <div class="heart">{text:Stats 4}</div>
  443.  
  444. </div>
  445. </div>
  446.  
  447.  
  448. <div id="posts">
  449. {block:Posts}
  450. <div class="entry">
  451.  
  452. {block:IndexPage}
  453. <div class="perma">
  454. <div class="likep"><a id="like{PostID}" href="javascript:likelink('{PostID}','{Permalink}','');"><img src="http://static.tumblr.com/lba83dv/OUUltd958/spacer.gif" width="21" height="20" alt="Like this post" id="likeimage{PostID}"/></a></div> <div class="rep"><a href="{reblogurl}" target="_blank"><img src="http://static.tumblr.com/uiqhh9x/OAClzwwao/reblog.png" width="30"/></a></div>
  455.  
  456. <div class="not"><a id="notes{PostID}" href="{Permalink}">{NoteCount}</a></div></div>
  457. {/block:IndexPage}
  458.  
  459. {block:Text}
  460. {block:Title}
  461. <div class="title">{Title}</div>
  462. {/block:Title}
  463. <span class="entrytext">{Body}</span>
  464. {/block:Text}
  465.  
  466. {block:Link}
  467. <div class="title"><a href="{URL}">{Name}</a></div>
  468. {block:Description}
  469. {Description}
  470. {/block:Description}
  471. {block:Link}
  472.  
  473. {block:Photo}
  474. {block:IndexPage}
  475. {LinkOpenTag}
  476. <div class="photo"><a href="{permalink}">
  477. <img class="photo"src="{PhotoURL-HighRes}"alt="{PhotoAlt}"width="100%"/></a></div>
  478. {LinkCloseTag}
  479. {/block:IndexPage}
  480. {block:PermalinkPage}
  481. {LinkOpenTag}
  482. <a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="500"/></a>
  483. {LinkCloseTag}
  484. {/block:PermalinkPage}
  485. {/block:Photo}
  486.  
  487. {block:Photoset}
  488. {block:IndexPage}
  489. {Photoset-250}
  490. {/block:IndexPage}
  491. {block:PermalinkPage}
  492. <center>
  493. {Photoset-500}
  494. </center>
  495. {/block:PermalinkPage}
  496. {/block:Photoset}
  497.  
  498. {block:Quote}
  499. {Quote}
  500. </span>
  501. {block:Source}
  502. <div class="quote">{Source}</div>
  503. {/block:Source}
  504. {/block:Quote}
  505.  
  506. {block:Chat}
  507. {block:Title}
  508. <span class="title">{Title}</span>
  509. {/block:Title}
  510. <ul class="chat">
  511. {block:Lines}
  512. <li class="user_{UserNumber}">
  513. {block:Label}
  514. <span class="label">{Label}</span>
  515. {/block:Label}
  516. {Line}
  517. </li>
  518. {/block:Lines}
  519. </ul>
  520. {/block:Chat}
  521.  
  522. {block:Audio}
  523. <center>{AudioPlayerWhite}</center>
  524.  
  525. {block:ExternalAudio}{/block:ExternalAudio}
  526. {/block:Audio}
  527.  
  528. {block:Video}
  529. {block:IndexPage}
  530. <center>
  531. {Video-250}
  532. </center>
  533. {/block:IndexPage}
  534. {block:PermalinkPage}
  535. <center>
  536. {Video-500}
  537. </center>
  538. {/block:PermalinkPage}
  539. {block:Video}
  540.  
  541. {block:Answer}
  542. <img src="{AskerPortraitURL-30}"style="width:30px;height:30px;"align="left"class="askborder"><div class="infinite"><span></span>
  543. {Asker}: {Question}&nbsp;</div>
  544. <div style="margin-top: -5px;"><br>{Answer}</div>
  545. {/block:Answer}
  546.  
  547. {block:PermalinkPage}
  548. <center>
  549. <br>
  550. {block:Caption}
  551. {Caption}
  552. {/block:Caption}
  553.  
  554. {block:ContentSource}<a href="{SourceURL}"> </a>{block:ContentSource}
  555.  
  556. {block:RebloggedFrom}
  557. <a href="{ReblogParentURL}"> </a>
  558. <a href="{ReblogRootURL}"> </a>
  559. {/block:RebloggedFrom}
  560.  
  561. {block:NoteCount}
  562. {NoteCountWithLabel}
  563. {/block:NoteCount}
  564.  
  565. {block:HasTags}
  566. &middot;{block:Tags}<a href="TagURL">#{Tag}</a>{/block:Tags}
  567. {/block:hasTags}
  568. </center>
  569. {/block:PermalinkPage}
  570.  
  571.  
  572. {block:PostNotes}
  573. {PostNotes}
  574. {/block:PostNotes}
  575. </div>
  576.  
  577. {/block:Posts}
  578. </div>
  579. </div>
  580.  
  581.  
  582. {block:IndexPage}
  583. {block:Pagination}
  584. <div id="pagination">
  585. {block:NextPage}
  586. <a id="nextPage" href="{NextPage}"></a>
  587. {/block:NextPage}
  588. {block:PreviousPage}
  589. <a href="{PreviousPage}"></a>
  590. {/block:PreviousPage}
  591. </div>
  592. {/block:Pagination}
  593. {/block:IndexPage}
  594.  
  595. {block:IndexPage}
  596. <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
  597. <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>
  598.  
  599. <script type="text/javascript">
  600. $(window).load(function () {
  601. var $content = $('#posts');
  602. $content.masonry({itemSelector: '.entry'}),
  603. $content.infinitescroll({
  604. navSelector : 'div#pagination',
  605. nextSelector : 'div#pagination a#nextPage',
  606. itemSelector : '.entry',
  607. loading: {
  608. finishedMsg: '',
  609. img: 'http://static.tumblr.com/dbek3sy/pX1lrx8xv/ajax-loader.gif'
  610. },
  611. bufferPx : 600,
  612. debug : false,
  613. },
  614. // call masonry as a callback.
  615. function( newElements ) {
  616. var $newElems = $( newElements );
  617. $newElems.hide();
  618. // ensure that images load before adding to masonry layout
  619. $newElems.imagesLoaded(function(){
  620. $content.masonry( 'appended', $newElems, true, function(){$newElems.fadeIn(400);} );
  621.  
  622.  
  623. });
  624. });
  625. });
  626. </script>
  627. {/block:IndexPage}
  628. </div>
  629. </body>
  630. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!