Advertisement
ialkhachi

American Apparel Theme #01

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