Advertisement
narruldthemes

personal theme 1

Dec 13th, 2013
834
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.70 KB | None | 0 0
  1. <!-- THEME BY NARRULD do not copy or remove credit -->
  2.  
  3.  
  4.  
  5. <script type="text/javascript"
  6. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  7.  
  8.  
  9. <!-- COLORS -->
  10. <meta name="color:background" content="#f7f7f7"/>
  11. <meta name="color:link" content="#c2bebe">
  12. <meta name="color:text" content="#777"/>
  13. <meta name="color:title" content="#fd8585"/>
  14. <meta name="color:hover" content="#a3a3a0"/>
  15. <meta name="color:border" content="#e4e4e4">
  16. <meta name="color:sidebg" content="#3c3b3b">
  17.  
  18.  
  19. <!--SIDEBAR AND BACKGROUND IMAGES-->
  20. <meta name="image:sidebar" content="1"/>
  21. <meta name="image:background" content="1"/>
  22. <meta name="if:2columns" content="0" />
  23.  
  24. <!--IF YOU DON'T WANT A TITLE REMOVE THE FIRST META-->
  25. <meta name="text:sidetitle" content="" />
  26. <meta name="text:Link1" content="/" />
  27. <meta name="text:Link1 Title" content="" />
  28. <meta name="text:Link2" content="/" />
  29. <meta name="text:Link2 Title" content="" />
  30. <meta name="text:Link3" content="/" />
  31. <meta name="text:Link3 Title" content="" />
  32.  
  33. <link href='http://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
  34. <style type="text/css">
  35.  
  36.  
  37. ::-webkit-scrollbar {width: 9px; height: 3px; background: #FFFFFF;}
  38.  
  39. ::-webkit-scrollbar-thumb {background-color:{color:background} ; border: 0px solid #f8f8f8;}
  40.  
  41.  
  42.  
  43.  
  44. 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-
  45.  
  46. transition: all 0.8s ease-out;transition: all 0.8s ease-out;}
  47.  
  48. 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;}
  49.  
  50. p {
  51. margin:0px;
  52. margin-top:0px;
  53. }
  54.  
  55.  
  56. body {
  57. padding:10px;
  58. margin: 1px;
  59. color:{color:text};
  60. font-family: candara;
  61. line-height:10px;
  62. font-size:10px;
  63. background-color: {color:Background};
  64. background-image:url({image:Background});
  65. background-attachment: fixed;
  66. background-repeat: repeat;
  67. }
  68.  
  69.  
  70.  
  71.  
  72.  
  73. a:link, a:active, a:visited{
  74. text-decoration: none;
  75. -webkit-transition: color 0.3s ease-out;
  76. -moz-transition: color 0.3s ease-out;
  77. transition: color 0.3s ease-out;
  78. color:{color:link};
  79. }
  80.  
  81. a:hover {
  82. text-decoration: none;
  83. font-style:;
  84. color: {color:Hover};
  85. }
  86.  
  87. /* DON'T MAKE THE WIDTH NUMBER TOO BIG OR ELSE YOU'LL HAVE A HORIZONTAL SCROLLBAR */
  88.  
  89. div#center{
  90. margin:auto;
  91. position:relative;
  92. width:1340px;
  93. overflow:auto;
  94. overflow-y:hidden;
  95. }
  96.  
  97.  
  98. /* EDIT ENTRY SETTINGS HERE */
  99.  
  100. .entry {
  101. padding:10px;
  102. border-radius:2px;
  103. border:1px solid {color:border};
  104. float:left;
  105. margin:2px;
  106. overflow:hidden;
  107. width:270px; /*MAKE IT SMALLER FOR MORE COLUMNS AND BIGGER FOR LESS*/
  108. {block:PermalinkPage}
  109. width:450px;
  110. text-align:left;
  111. line-height:10px;
  112. {/block:PermalinkPage}
  113. background:white;
  114. }
  115.  
  116.  
  117.  
  118. /*EDIT POSTS HERE*/
  119.  
  120. #posts {
  121. width:1000px;{block:if2columns}width:800px;{/block:if2columns}
  122. margin-top:50px;
  123. margin-left:320px;
  124. right:auto;
  125. background:transparent;
  126. margin-right:auto;
  127. overflow-y: hidden;
  128. position:inherit;
  129. }
  130.  
  131.  
  132. /*EDIT SIDEBAR HERE*/
  133.  
  134.  
  135. #sidebar {
  136. z-index:99999;
  137. margin-left:0px;
  138. margin-top:0px;
  139. position:fixed;
  140. background:transparent;
  141. }
  142.  
  143. #sidebar img {
  144. position:fixed;
  145. width:200px;
  146. height:150px;
  147. margin-top:200px;
  148. margin-left:80px;
  149. border:1px solid {color:border};
  150. background: white;
  151. padding:3px;
  152. opacity:1;
  153. -moz-transition-duration:1s;
  154. -webkit-transition-duration:1s;
  155. -o-transition-duration:1s;
  156. }
  157.  
  158. #sidebar img:hover {
  159. position:center;
  160. border:1px solid {color:border};
  161. padding:3px;
  162. -moz-transition-duration:1s;
  163. -webkit-transition-duration:1s;
  164. -o-transition-duration:1s;
  165. }
  166.  
  167. /*EDIT SIDEBAR TITLE HERE NOTE: IF YOU DON'T WANT THE TITLE TO APPEAR DELETE THIS AND GO TO THE <BODY> TAG AND DELETE <div class="sidetitle">{text:sidetitle}</div> */
  168.  
  169. .sidetitle{
  170. width:200px;
  171. font-size:35px;
  172. font-family:"satisfy";
  173. text-align:center;
  174. height:auto;
  175. letter-spacing:-2px;
  176. word-spacing:0px;
  177. margin-left:70px;
  178. margin-top:365px;
  179. padding-bottom:10px;
  180. padding-right:5px;
  181. color:{color:title};
  182. position:fixed;
  183. -moz-transition-duration:1s;
  184. -webkit-transition-duration:1s;
  185. -o-transition-duration:1s;
  186. }
  187.  
  188. #sidebar .sidetitle {
  189. opacity: 1;
  190. -webkit-transition: all .7s ease;
  191. -moz-transition: all .7s ease;
  192. -o-transition: all .7s ease;
  193. transition: all .7s ease;
  194. margin-left:70px;
  195. margin-top:375px;
  196. -webkit-transition:.6s linear;
  197. -webkit-transition: all .6s linear;
  198. -moz-transition: all .6s linear;
  199. transition: all .6s linear;
  200. }
  201.  
  202.  
  203. #sidebar:hover .sidetitle{
  204. opacity: 0;
  205. margin-top:375px;
  206. margin-left:120px;
  207. z-index:10;
  208. -webkit-animation:flip 1s;
  209. -moz-animation:flip 1s;
  210. -ms-animation:flip 1s;
  211. }
  212.  
  213.  
  214.  
  215. .links {
  216. z-index:2;
  217. font-family:candara;
  218. width:155px;
  219. font-size:12px;
  220. opacity:1;
  221. letter-spacing:1px;
  222. text-transform:lowercase;
  223. padding-top:5px;
  224. padding-bottom:7px;
  225. margin-top:370px;
  226. margin-left:80px;
  227. opacity:1;
  228. position:fixed;
  229. font-style:none;
  230. -moz-transition-duration:1s;
  231. -webkit-transition-duration:1s;
  232. -o-transition-duration:1s;
  233. }
  234.  
  235.  
  236.  
  237. .links a{
  238. height:5px;
  239. padding:2px;
  240. float:center;
  241. margin-left:1px;
  242. color:{color:link};
  243. letter-spacing:0px;
  244. text-decoration:none;
  245. -moz-transition-duration:1s;
  246. -webkit-transition-duration:1s;
  247. -o-transition-duration:1s;
  248. }
  249.  
  250. .links a:hover{
  251. text-shadow:1px 2px 3px #ffffff;
  252. color:{color:title};
  253. text-decoration:underline;
  254. -moz-transition-duration:1s;
  255. -webkit-transition-duration:1s;
  256. -o-transition-duration:1s;
  257. }
  258.  
  259. #sidebar .links {
  260. opacity: 0;
  261. -webkit-transition: all .7s ease;
  262. -moz-transition: all .7s ease;
  263. -o-transition: all .7s ease;
  264. transition: all .7s ease;
  265. margin-left:57px;
  266. margin-top:370px;
  267. -webkit-transition:.6s linear;
  268. -webkit-transition: all .6s linear;
  269. -moz-transition: all .6s linear;
  270. transition: all .6s linear;
  271. }
  272.  
  273.  
  274. #sidebar:hover .links{
  275. opacity: 1;
  276. margin-top:370px;
  277. margin-left:107px;
  278. z-index:10;
  279. -webkit-animation:flip 1s;
  280. -moz-animation:flip 1s;
  281. -ms-animation:flip 1s;
  282. }
  283.  
  284.  
  285. .desc {
  286. position:fixed;
  287. margin-top:397px;
  288. margin-left:90px;
  289. text-align:justify;
  290. font-size:12px;
  291. font-family:candara;
  292. width:180px;
  293. height:auto;
  294. color:{color:text};
  295. letter-spacing:0px;
  296. line-height:100%;
  297. background-color:transparent;
  298. opacity:1;
  299. text-transform:none;
  300. -moz-transition-duration:0.7s;
  301. -webkit-transition-duration:0.7s;
  302. -o-transition-duration:0.7s;
  303. }
  304.  
  305. .desc a{
  306. color:{color:text};
  307. }
  308.  
  309.  
  310. /*CUSTOMIZE TITLE OF ENTRIES HERE*/
  311. .title{
  312. line-height: 12px;
  313. color:{color:Title};
  314. font-weight: normal;
  315. }
  316.  
  317.  
  318. /*EDIT PERMALINK OF POSTS AND STUFF HERE*/
  319.  
  320. .permalink {
  321. color:black;
  322. font-size:12px;
  323. opacity: 0;
  324. width:265px;
  325. height:15px;
  326. padding-bottom:0px;
  327. padding-left:5px;
  328. padding-top:5px;
  329. background-color: #fff;
  330. position: absolute;
  331. bottom:10px;
  332. text-align:center;
  333. text-transform:uppercase;
  334. font-family:candara;
  335. letter-spacing:0px;
  336. line-height:12px;
  337. border-top:1px solid {color:border};
  338. border-bottom:1px solid {color:border};
  339. display:block;
  340. -webkit-transition-duration: .75s;
  341. }
  342.  
  343. .entry:hover .permalink {
  344. position: absolute;
  345. bottom:20px;
  346. width:265px;
  347. opacity:1;
  348. z-index:99;
  349. padding-top:5px;
  350. padding-bottom:0px;
  351. -moz-transition-duration:0.7s;
  352. -webkit-transition-duration:0.7s;
  353. -o-transition-duration:0.7s;
  354. }
  355.  
  356.  
  357.  
  358.  
  359. /* SCROLLBAR */
  360.  
  361. #infscr-loading{
  362. bottom: -70px;
  363. position: absolute;
  364. left: 50%;
  365. margin-left:-8px;
  366. width:16px;
  367. height:11px;
  368. overflow:hidden;
  369. margin-bottom: 50px;
  370. }
  371.  
  372. /* BLOCKQUOTES AND STUFF */
  373.  
  374. #postnotes{
  375. text-align: justify;}
  376.  
  377. #postnotes blockquote{
  378. border: 1px;}
  379.  
  380. blockquote{
  381. padding:0px 0px 2px 5px;
  382. margin:0px 0px 2px 5px;
  383. border-left: 1px solid {color:border};
  384. }
  385.  
  386. blockquote p, ul{
  387. margin:0px;
  388. padding:0px;
  389. }
  390.  
  391. a img{border: 0px;}
  392.  
  393.  
  394. ul, ol, li{list-style:none; margin:0px; padding:0px;}
  395.  
  396. .user_1 .label, .user_2 .label, .user_3 .label, .user_4 .label, .user_5 .label, .user_6 .label,
  397. .user_7 .label, .user_8 .label, .user_9 .label {color:{color:text};}
  398.  
  399. .notes img{width:10px; position:relative; top:3px;}
  400. <--ses-->
  401. small{font-size: 90%;}
  402.  
  403. /* --- EDIT CREDIT HERE ---*/
  404.  
  405. #credit{
  406. font-size: 10px;
  407. font-style:none;
  408. letter-spacing: 0px;
  409. float: center;
  410. position: fixed;
  411. bottom: 10px;
  412. right: 10px;
  413. text-transform:none;
  414. font-family:new york;
  415. -moz-transition-duration:0.7s;
  416. -webkit-transition-duration:0.7s;
  417. -o-transition-duration:0.7s;
  418. }
  419.  
  420. #credit a{
  421. color: #fff;
  422. background:{color:border};
  423. padding:5px;
  424. -moz-transition-duration:0.7s;
  425. -webkit-transition-duration:0.7s;
  426. -o-transition-duration:0.7s;
  427. }
  428.  
  429. #credit a:hover{
  430. color:{color:border};
  431. background:{color:background};
  432. -moz-transition-duration:0.7s;
  433. -webkit-transition-duration:0.7s;
  434. -o-transition-duration:0.7s;
  435. }
  436.  
  437. l {color: #aaa;}
  438.  
  439. {CustomCSS}
  440.  
  441. </style>
  442.  
  443. <!-- INFINITE SCROLL THING -->
  444.  
  445. {block:IndexPage}
  446. <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
  447. <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>
  448.  
  449. <script type="text/javascript">
  450. $(window).load(function(){
  451. var $wall = $('#posts');
  452. $wall.imagesLoaded(function(){
  453. $wall.masonry({
  454. itemSelector: '.entry, .entry_photo',
  455. isAnimated : false
  456. });
  457. });
  458.  
  459. $wall.infinitescroll({
  460. navSelector : '#pagination',
  461. nextSelector : '#pagination a',
  462. itemSelector : '.entry, .entry_photo',
  463. bufferPx : 2000,
  464. debug : false,
  465. errorCallback: function() {
  466. $('#infscr-loading').fadeOut('normal');
  467. }},
  468. function( newElements ) {
  469. var $newElems = $( newElements );
  470. $newElems.hide();
  471. $newElems.imagesLoaded(function(){
  472. $wall.masonry( 'appended', $newElems,{isAnimated: false}, function(){$newElems.fadeIn('slow');} );
  473. });
  474. }); $('#posts').show(500);
  475. });
  476. </script>
  477.  
  478.  
  479. {/block:IndexPage}
  480.  
  481.  
  482. <title>{title}</title>
  483.  
  484. <link rel="shortcut icon" href="{Favicon}" />
  485. <meta name="viewport" content="width=820" />
  486.  
  487.  
  488.  
  489. </head>
  490.  
  491. <body>
  492. <BODY onselectstart="return false;" ondragstart="return false;">
  493. <div class="wrapper">
  494. <div class="header">
  495. </div>
  496. <div id="cage">
  497. <div id="center">
  498.  
  499. <!--SIDEBAR STUFF--> <!--REMOVE <div class="sidetitle">{text:sidetitle}</div> IF YOU DON'T WANT A TITLE-->
  500.  
  501. <div id="sidebar"><div class="sidetitle">{text:sidetitle}</div>
  502. <center>
  503. <a href="/"><img src="{image:sidebar}" width=10%></a>
  504. <div class="links">
  505. <a href="/">home</a>
  506. <a href="/ask">msg</a>
  507. {block:ifLink1}<a href="{text:Link1}">{text:Link1 Title}</a>{/block:ifLink1}
  508. {block:ifLink2}<a href="{text:Link2}">{text:Link2 Title}</a>{/block:ifLink2}
  509. {block:ifLink3}<a href="{text:Link3}">{text:Link3 Title}</a>{/block:ifLink2}
  510. </div>
  511. <div class="desc">
  512. {Description}
  513. </center>
  514. </div>
  515.  
  516. <div class="left">
  517. <div id="posts">
  518. {block:Posts}
  519. <div class="entry">
  520.  
  521. {block:Text}{block:Title}<span class="title">{Title}</span>{/block:Title}<span class="body">{Body}</span><p align=right>
  522. <!--EDIT THE PERMALINK STUFF ON TEXT POSTS-->
  523. <a href="{Permalink}"> <a href="{Permalink}">{DayOfMonthWithZero} {ShortMonth} - </a><a href="{Permalink}">{NoteCount} notes - </a><a href="{ReblogURL}" target="_blank"> reblog </a>
  524. {/block:Text}
  525.  
  526. {block:Link}<a href="{URL}" class="title">{Name}</a>{block:Description}<div class="body">{Description}</div>{/block:Description} <p align=right><span
  527. class="permalink"><a href="{Permalink}"><a href="{Permalink}"></a> <a href="{Permalink}">{DayOfMonthWithZero} {ShortMonth}</a><a href="{Permalink}">{NoteCount} notes {notecountwithlabel}</a> <a href="{Permalink}"></span></align>{block:Link}
  528.  
  529.  
  530. <!--EDIT THE PERMALINK STUFF ON PHOTOS-->
  531. {block:Photo}
  532. {block:IndexPage}
  533. <center>
  534. <div class="permalink">
  535. <a href="{Permalink}"> <a href="{Permalink}">{DayOfMonthWithZero} {ShortMonth} - </a><a href="{Permalink}">{NoteCount} notes </a><a href="{ReblogURL}" target="_blank"> - reblog </a> </div>
  536. <div class="photo"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="100%"/></a></div>
  537. {/block:IndexPage}
  538. {block:PermalinkPage}
  539. {LinkOpenTag}<div class="photo"><a href="{permalink}"><img class="photo" src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="100%"/></a></div>
  540.  
  541. {LinkCloseTag}
  542. {/block:PermalinkPage}
  543. {/block:Photo}
  544. {block:Photoset}
  545. {block:IndexPage}
  546. <center>
  547. <!--EDIT THE PERMALINK STUFF ON PHOTOSETS-->
  548. <div class="permalink">
  549. <a href="{Permalink}"> <a href="{Permalink}">{DayOfMonthWithZero} {ShortMonth} - </a><a href="{Permalink}">{NoteCount} notes -</a><a href="{ReblogURL}" target="_blank"> reblog </a> </div>
  550. {Photoset-250}</center>
  551. {/block:IndexPage}
  552. {block:PermalinkPage}
  553. <center>
  554. {/block:PermalinkPage}
  555. {/block:Photoset}
  556.  
  557. {block:Quote}<span class="title">"{Quote}"</span> — {block:Source}<b>{Source}</b>{/block:Source}<br><p align=right>
  558. <!--EDIT THE PERMALINK STUFF ON QUOTES-->
  559. <a href="{Permalink}"> <a href="{Permalink}">{DayOfMonthWithZero} {ShortMonth} - </a><a href="{Permalink}">{NoteCount} notes-</a><a href="{ReblogURL}" target="_blank"> reblog </a> <a
  560. </span>{/block:Quote}
  561.  
  562. {block:Chat}{block:Title}<span class="title">{Title}</span>{/block:Title}
  563. <ul class="chat">
  564. {block:Lines}
  565. <li class="user_{UserNumber}">
  566. {block:Label}
  567. <span class="label">{Label}</span>
  568. <div class="permalink">
  569. <a href="{Permalink}"> <a href="{Permalink}">{DayOfMonthWithZero} {ShortMonth} - </a><a href="{Permalink}">{NoteCount} notes - </a><a href="{ReblogURL}" target="_blank"> reblog </a> </div>
  570. {/block:Label}
  571.  
  572. {Line}
  573. </li>
  574. {/block:Lines}
  575. <!--EDIT THE PERMALINK STUFF ON CHATS-->
  576. <div class="permalink">
  577. <a href="{Permalink}"> <a href="{Permalink}">{DayOfMonthWithZero} {ShortMonth} - </a><a href="{Permalink}">{NoteCount} notes -</a><a href="{ReblogURL}" target="_blank"> reblog </a> </div>
  578. {/block:Chat}
  579.  
  580. {block:Audio}
  581. <div style="width:200px; height:30px;">
  582. {AudioPlayerBlack}
  583. </div>
  584. <!--EDIT THE PERMALINK STUFF ON AUDIO POSTS-->
  585. <div class="permalink">
  586. <a href="{Permalink}"> <a href="{Permalink}">{DayOfMonthWithZero} {ShortMonth} - </a><a href="{Permalink}">{NoteCount} notes -</a><a href="{ReblogURL}" target="_blank"> reblog </a> </div>
  587. {/block:Audio}
  588.  
  589. {block:Video}
  590. {block:IndexPage}
  591. <center>
  592. <!--EDIT THE PERMALINK STUFF ON VIDEO POSTS-->
  593. <div class="permalink">
  594. <a href="{Permalink}"> <a href="{Permalink}">{DayOfMonthWithZero} {ShortMonth} - </a><a href="{Permalink}">{NoteCount} notes -</a><a href="{ReblogURL}" target="_blank"> reblog </a> </div>
  595. {Video-250}</center>
  596. {/block:IndexPage}
  597. {block:PermalinkPage}
  598. <center>
  599. {Video-400}</center>
  600. {/block:PermalinkPage}
  601. {block:Video}
  602.  
  603. <!--EDIT QUESTIONS AND ANSWERS ONLY HERE-->
  604. {block:Answer}
  605. <img src="{AskerPortraitURL-30}" align="left" style="margin-right:3px; border: 1px solid {color:border};"/>
  606. <div style="font-family:candara; font-size:20px; margin-top:5px; font-style:none;"> <b>{Asker} </div> <div style="font-family:candara; font-style:italic">- {Question}</b> </div>
  607. <br>
  608. <div style="font-family:candara; text-transform:none;">{Answer} </div>
  609. {/block:Answer}
  610.  
  611.  
  612. {block:PostNotes}<div align="middle">{caption}</div>
  613. <center>
  614.  
  615. {block:NoteCount}{NoteCountWithLabel}<br>{/block:NoteCount}
  616.  
  617. {block:HasTags}
  618. tags: {block:Tags}<a href="{TagURL}">{Tag}. </a>{/block:Tags}<br> {/block:HasTags}
  619. {block:RebloggedFrom}
  620. reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a><br>
  621. posted by <a href="{ReblogRootURL}">{ReblogRootName}</a>
  622.  
  623. {/block:RebloggedFrom}
  624. </center></span>
  625. <br>
  626. <div id="postnotes">{PostNotes}</div><br>
  627.  
  628. <center>{block:ContentSource}
  629. <br><a href="{SourceURL}">
  630. {lang:Source}:
  631. {block:SourceLogo}
  632. <img src="{BlackLogoURL}" width="{LogoWidth}"
  633. height="{LogoHeight}" alt="{SourceTitle}" />
  634. {/block:SourceLogo}
  635. {block:NoSourceLogo}
  636. {SourceLink}
  637. {/block:NoSourceLogo}
  638. </a>
  639. {/block:ContentSource}</center>
  640.  
  641. {/block:PostNotes}
  642. </div>
  643. {/block:Posts}
  644. </div></div>
  645.  
  646.  
  647.  
  648. {block:IndexPage}
  649. {block:Pagination}
  650. <div id="pagination">
  651. {block:NextPage}
  652. <a id="nextPage" href="{NextPage}"></a>
  653. {/block:NextPage}
  654. {block:PreviousPage}
  655. <a href="{PreviousPage}"></a>
  656. {/block:PreviousPage}
  657. </div>
  658. {/block:Pagination}
  659. {/block:IndexPage}
  660.  
  661. <div style="position:fixed;bottom:2px; right:3px; font-size:11px; letter-spacing:1px; font-family:calibri;backgroun-color:#fff;;padding:4px;"><a href="http://narruld.tumblr.com/"><l>theme</l></a></center></div>
  662.  
  663.  
  664. </body>
  665. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement