API tools faq
paste
Advertisement
Amanduhh7

Design and Code Theme

Amanduhh7
Feb 6th, 2015
271
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.72 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <!--[if IE 8]><html class="lt-ie10 lt-ie9"> <![endif]-->
  3. <!--[if IE 9]><html class="lt-ie10"> <![endif]-->
  4. <!--[if gt IE 9]><!--> <html> <!--<![endif]-->
  5. <head>
  6.  
  7. <!--DO NOT REMOVE THE CREDIT-->
  8. <!--DO NOT REMOVE THE CREDIT-->
  9. <!--DO NOT REMOVE THE CREDIT-->
  10. <!--DO NOT REMOVE THE CREDIT-->
  11.  
  12. <meta name="if:Sidebar" content="0">
  13. <meta name="image:header" content"">
  14. <meta name="image:sidebar" content="">
  15. <meta name="image:newesttheme" content="">
  16. <meta name="image:randomtheme" content="">
  17. <meta name="text:NewestThemeURL" content="Newest Theme URL">
  18. <meta name="text:Newest Theme" content="Newest Theme">
  19. <meta name="text:RandomThemeURL" content="Random Theme URL">
  20. <meta name="text:Random Theme" content="Random Theme">
  21. <meta name="color:posttitle" content="#ffffff">
  22. <meta name="text:Custom Link One" content="Link One">
  23. <meta name="text:Custom Link One URL" content="Link One URL">
  24. <meta name="text:Custom Link Two" content="Link Two">
  25. <meta name="text:Custom Link Two URL" content="Link Two URL">
  26. <meta name="text:Custom Link Three" content="Link Three">
  27. <meta name="text:Custom Link Three URL" content="Link Three URL">
  28. <meta name="text:Custom Link Four" content="Link Four">
  29. <meta name="text:Custom Link Four URL" content="Link Four URL">
  30. <meta name="text:Custom Link Five" content="Link Five">
  31. <meta name="text:Custom Link Five URL" content="Link Five URL">
  32. <meta name="text:Custom Link Six" content="Link Six">
  33. <meta name="text:Custom Link Six URL" content="Link Six URL">
  34. <meta name="text:Custom Link Seven" content="Link Seven">
  35. <meta name="text:Custom Link Seven URL" content="Link Seven URL">
  36. <meta name="text:Custom Link Eight" content="Link Eight">
  37. <meta name="text:Custom Link Eight URL" content="Link Eight URL">
  38. <meta name="text:Custom Link Nine" content="Link Nine">
  39. <meta name="text:Custom Link Nine URL" content="Link Nine URL">
  40. <meta name="text:Custom Link Ten" content="Link Ten">
  41. <meta name="text:Custom Link Ten URL" content="Link Ten URL">
  42.  
  43.  
  44. <script type="text/javascript"
  45. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  46.  
  47. <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/iBElrgjim/jquerymasonry.js"></script>
  48.  
  49. <script type="text/javascript" src="http://static.tumblr.com/dbek3sy/Qyblrgjfn/jqueryinfintescroll.js"></script>
  50. <script type="text/javascript">
  51. $(window).load(function () {
  52. var $content = $('#content');
  53. $content.masonry({itemSelector: '.posts'}),
  54. $content.infinitescroll({
  55. navSelector : 'div#pagination',
  56. nextSelector : 'div#pagination a#nextPage',
  57. itemSelector : '.posts',
  58. loading: {
  59. finishedMsg: '',
  60. img: 'http://static.tumblr.com/dbek3sy/pX1lrx8xv/ajax-loader.gif'
  61. },
  62. bufferPx : 600,
  63. debug : false,
  64. },
  65. // call masonry as a callback.
  66. function( newElements ) {
  67. var $newElems = $( newElements );
  68. $newElems.hide();
  69. // ensure that images load before adding to masonry layout
  70. $newElems.imagesLoaded(function(){
  71. $content.masonry( 'appended', $newElems, true, function(){$newElems.fadeIn(300);} );});});});</script>
  72.  
  73.  
  74. <style type="text/css">
  75. /* Colors */
  76. body {
  77. background-color:white;
  78. width:90%;
  79. }
  80.  
  81. a{color:#000000;}
  82.  
  83. #title{
  84. font-size:50px;
  85. text-align:center;
  86. font-family:georgia;
  87. }
  88.  
  89. #navcontainer{
  90. position:fixed;
  91. margin-left:200px;
  92. margin-top:-172px;
  93. background-color:#eaeaea;
  94. height:100%;
  95. width:200px;
  96. border-left:5px solid gray;
  97. border-right:5px solid gray;
  98. box-shadow:-15px 2px 2px 2px black;
  99. }
  100.  
  101. #navcontainer ul{float:left; margin-left:-40px; width:200px;}
  102.  
  103. #navcontainer li{
  104. list-style-type:none;
  105. border-bottom:2px solid black;
  106. padding:5px;
  107. text-align:center;
  108. }
  109.  
  110. #navcontainer li a{
  111. text-decoration:none;
  112. color:black;
  113. font-family:georgia;
  114. }
  115.  
  116. #navcontainer li a:hover{
  117. color:white;
  118. }
  119.  
  120. #navcontainer li:hover{
  121. background-color:black;
  122. }
  123.  
  124. #description{
  125. text-align:center;
  126. font-size:12px;
  127. padding:5px;
  128. }
  129.  
  130. #sidebar2{
  131. position:fixed;
  132. float:right;
  133. width:300px;
  134. margin-top:-60px;
  135. margin-left:-320px;
  136. border-right:20px solid gray;
  137. outline:5px solid gray;
  138. text-align:center;
  139. font-size:20px;
  140. font-weight:bold;
  141. padding:5px;
  142. text-decoration:underline;
  143. background-color:#eaeaea;
  144. transition:1s ease-in-out;
  145. -webkit-transition:1s ease-in-out;
  146. }
  147.  
  148. #sidebar2:hover{
  149. margin-left:10px;
  150. }
  151.  
  152. #sidebar2 img{
  153. margin-top:10px;
  154. width:300px;
  155. height:200px;
  156. }
  157.  
  158.  
  159. #content{
  160. position:absolute;
  161. width:530px;
  162. margin-top:100px;
  163. margin-left:580px;
  164. background-color:#eaeaea;
  165. border:10px solid gray;
  166. outline:5px solid black;
  167.  
  168. }
  169.  
  170. #content .posts{
  171. width:500px;
  172. margin:5px;
  173. padding:10px;
  174. float:left;
  175. background-color:white;
  176.  
  177.  
  178. }
  179.  
  180. .posttitle{
  181. color:{color:posttitle};
  182. font-size:30px;
  183. text-align:center;
  184. font-family:georgia;
  185. }
  186.  
  187. .posttext{
  188. font-size:12px;
  189. }
  190.  
  191. p{
  192. font-size:12px;
  193. }
  194.  
  195. .pagination {
  196. display: none;
  197. }
  198.  
  199. #info{
  200. width:500px;
  201. border-bottom:1px solid black;
  202. }
  203.  
  204. #date{
  205. text-align:center;
  206. }
  207. #date a{
  208. text-decoration:none;
  209. color:black;
  210. font-size:12px;
  211. }
  212.  
  213. .reblog{
  214. float:left;
  215. }
  216.  
  217. .notes{
  218. float:right;
  219. font-size:12px;
  220. }
  221.  
  222.  
  223. ol.notes {list-style: none;width:400px;margin-left:10px; float:left;}
  224. ol.notes a {color:#444; text-decoration:none;}
  225. ol.notes li.note {
  226. margin-bottom: 2px;
  227. padding: 2px;
  228. text-transform: lowercase;
  229. line-height: 20px;
  230. width:400px;
  231. border-bottom:1px solid gray;}
  232. ol.notes li.note img.avatar {
  233. vertical-align: -2px;
  234. margin-right: 10px;
  235. width:16px;
  236. height: 16px;}
  237. ol.notes li.note .answer_content {font-weight: normal;}
  238. ol.notes li.note blockquote {display: none;}
  239.  
  240. /*Update Tab--*/
  241. #slidercontainer{
  242. float:right;
  243. position:fixed;
  244. width:100px;
  245. height:auto;
  246.  
  247. margin-top:10px;
  248.  
  249. }
  250.  
  251. #slidercontainer:hover .slide1{
  252. margin-left:-100px;
  253. -webkit-transform:rotate(-90deg);
  254. }
  255.  
  256. #slidercontainer:hover .slide2{
  257. margin-right:-100px;
  258. -webkit-transform:rotate(90deg);
  259. }
  260.  
  261. #slidercontainer .slide1{
  262. width:50px;
  263. height:100px;
  264. float:left;
  265. border-top-left-radius:150px;
  266. border-bottom-left-radius:150px;
  267. -webkit-transition:all 1s ease-in-out;
  268. -moz-transition:all 1s ease-in-out;
  269. -o-transition:all 1s ease-in-out;
  270. transition:all 1s ease-in-out;
  271. }
  272.  
  273. #slidercontainer .slide2{
  274. width:50px;
  275. height:100px;
  276. float:right;
  277. border-top-right-radius:150px;
  278. border-bottom-right-radius:150px;
  279. -webkit-transition:all 1s ease-in-out;
  280. -moz-transition:all 1s ease-in-out;
  281. -o-transition:all 1s ease-in-out;
  282. transition:all 1s ease-in-out;
  283. }
  284.  
  285. #slidercontainer .update{
  286. position:absolute;
  287. color:black;
  288. margin-top:50px;
  289. margin-left:20px;
  290. width:100px;
  291. text-align:center;
  292. visibility:hidden;
  293.  
  294. }
  295.  
  296. #slidercontainer:hover .update{
  297. visibility:visible;
  298. margin-top:70px;
  299. border-right:1px solid black;
  300. border-left:1px solid black;
  301. -webkit-transition:all 1s ease-in-out;
  302. -moz-transition:all 1s ease-in-out;
  303. -o-transition:all 1s ease-in-out;
  304. transition:all 1s ease-in-out;
  305. }
  306.  
  307.  
  308. #slidercontainer .updateword{
  309. width:100px;
  310. position:fixed;
  311. color:{color:update};
  312. border:2px solid black;
  313. padding:5px;
  314. font-size:30px;
  315. margin-top:0px;
  316. margin-left:10px;
  317. text-align:center;
  318. }
  319.  
  320. #slidercontainer:hover .updateword{
  321. visibility:hidden;
  322. z-index:999;
  323. }
  324. /*Update Tab*/
  325.  
  326. /* Custom CSS */
  327. {CustomCSS}
  328. </style>
  329. </head>
  330. <body>
  331. <!--Begin Update Tab-->
  332. <div id="slidercontainer">
  333. <div class="slide1">
  334.  
  335. </div>
  336.  
  337.  
  338.  
  339.  
  340. <div class="updateword">
  341. +
  342. </div>
  343.  
  344.  
  345.  
  346.  
  347. <!--Change your updates here--><!--Change your updates here-->
  348. <div class="update">
  349. <div style="color:gray;">Update One</div>
  350. <div style="font-size:12px;">Update go here.</div>
  351. ----------<br>
  352. <div style="color:gray;">Update Two</div>
  353. <div style="font-size:12px;">Update go here.</div>
  354. ----------<br>
  355. <div style="color:gray;">Update Three</div>
  356. <div style="font-size:12px;">Update go here.</div>
  357. ----------<br>
  358. <div style="color:gray;">Update Four</div>
  359. <div style="font-size:12px;">Update go here.</div>
  360. </div>
  361.  
  362. <!--Change your updates here--><!--Change your updates here-->
  363.  
  364. <div class="slide2">
  365.  
  366. </div>
  367.  
  368.  
  369. </div>
  370. <!--End Update Tab-->
  371.  
  372.  
  373. <div id="header">
  374. {block:HideTitle}<div id="title">{Title}</div>{/block:HideTitle}
  375. {block:HideHeaderImage}<center><img src="{image:header}"></center>{/block:HideHeaderImage}
  376. </div>
  377.  
  378. <div id="navcontainer">
  379. <img src="{image:sidebar}" width="200" height=:200 style="margin-top:100px;">
  380. <div id="nav">
  381. <div id="description"{Description}</div>&nbsp;&nbsp;&nbsp;&nbsp;-------------------------------
  382. <ul>
  383. <li><a href="/">Home</a></li>
  384. <li><a href="/ask">Message</a></li>
  385. <li><a href="{text:Custom Link One URL}">{text:Custom Link One}</a></li>
  386. <li><a href="{text:Custom Link Two URL}">{text:Custom Link Two}</a></li>
  387. <li><a href="{text:Custom Link Three URL}">{text:Custom Link Three}</a></li>
  388. <li><a href="{text:Custom Link Four URL}">{text:Custom Link Four}</a></li>
  389. <li><a href="{text:Custom Link Five URL}">{text:Custom Link Five}</a></li>
  390. <li><a href="{text:Custom Link Six URL}">{text:Custom Link Six}</a></li>
  391. <li><a href="{text:Custom Link Seven URL}">{text:Custom Link Seven}</a></li>
  392. <li><a href="{text:Custom Link Eight URL}">{text:Custom Link Eight}</a></li>
  393. <li><a href="{text:Custom Link Nine URL}">{text:Custom Link Nine}</a></li>
  394. <li><a href="{text:Custom Link Ten URL}">{text:Custom Link Ten}</a></li>
  395. <li><a href="http://www.slapdashthemes.tumblr.com">Theme</a>
  396. </ul>
  397. </div>
  398. </div>
  399.  
  400. {block:IfNotSidebar}<div id="sidebar2">
  401. <a href="{text:NewestThemeurl}">{text:Newest Theme}</a>
  402. <img src="{image:newesttheme}">
  403. <a href="{text:RandomThemeurl}">{text:Random Theme}</a>
  404. <img src="{image:randomtheme}">
  405. </div>
  406. {/block:IfNotSidebar}
  407. <!--start content-->
  408. <div id="content">
  409. {block:Posts}
  410.  
  411. <div class="posts">
  412.  
  413. {block:Text}
  414. <a href="{Permalink}" style="text-decoration:none; color:gray;"><div class="posttitle">{Title}</div></a>
  415. <div style="font-size:12px;">{Body}</div></a>
  416. {/block:Text}
  417.  
  418. {block:Photo}
  419. <a href="{Permalink}"><img src="{PhotoURL-500}" width="500" ALT=""></a>
  420. {block:Caption}<div class="postcaption">{Caption}</div>{/block:Caption}
  421. {/block:Photo}
  422.  
  423. {block:Photoset}
  424. {block:Photos}
  425. <a href="{Permalink}"><img src="{PhotoURL-500}" width="{PhotoWidth-250}"></a>
  426. {block:Caption}<div class="postcaption">{Caption}</div>{/block:Caption}
  427. {/block:Photos}
  428. {block:Caption}<div class="postcaption">{Caption}</div>{/block:Caption}
  429. {/block:Photoset}
  430.  
  431. {block:Quote}
  432. <div class="quote"><b>"{Quote}"</b></div>
  433. <br>
  434. <div class="quotesource">~{Source}</div>
  435. {/block:Quote}
  436.  
  437. {block:Chat}
  438. {block:Title}<div class="posttitle">{Title}</div>{/block:Title}
  439. <ul>
  440. <div class="chat">{block:Lines}<li>{block:Label}<strong>{Label}</strong>{/block:Label}{Line}</li>{/block:Lines}</div>
  441. </ul>
  442. {/block:Chat}
  443.  
  444. {block:Link}
  445. <a href="{URL}"style="text-decoration:none; color:gray;"><div class="posttitle link">{Name}</div></a>
  446. {block:Description}<div class="postdescription">{Description}</div>{/block:Description}
  447. {/block:Link}
  448.  
  449. {block:Answer}
  450. <div class="answer"><img src="{AskerPortraitURL-30}" alt=""><div class="ask">{Asker}</div>
  451. <br><br> <b>{Question}</b>
  452. <br><br>
  453. {block:Answerer}
  454. <img src="{AnswererPortraitURL-16}" alt="">
  455. <div class="ask">{Answerer}</div>
  456. <div class="answerer">{Answer}</div>
  457. {/block:Answerer}
  458. <br><br>
  459. {Replies}
  460. </div>
  461. {/block:Answer}
  462.  
  463. {block:Video}
  464. {VideoEmbed-250}
  465. {PlayCountWithLabel}
  466. {block:Caption}<div class="postcaption">{Caption}</div>{/block:Caption}
  467. {/block:Video}
  468.  
  469. {block:Audio}
  470. {block:AudioEmbed}{AudioEmbed-250}{/block:AudioEmbed}
  471. {block:AudioPlayer}{AudioPlayerWhite}{/block:AudioPlayer}
  472. {block:PlayCount}{PlayCount}{/block:PlayCount}
  473. {block:Caption}<div class="postcaption">{Caption}</div>{/block:Caption}
  474. {/block:Audio}
  475.  
  476.  
  477.  
  478. <div style="font-size:12px;">{block:RebloggedFrom}<a href="{ReblogParentURL}">VIA {ReblogParentName} </a> / <a href="{ReblogRootURL}">SOURCE {ReblogRootName} </a>{/block:RebloggedFrom}</div>
  479.  
  480.  
  481.  
  482. <div id="info"> <div id="date">
  483. <div class="reblog"><a href="{ReblogURL}">Reblog</a> <a href="{ReblogURL}" target="_blank"></a></div>
  484. {block:Date}<a href="{Permalink}">{DayOfMonth} {Month} {Year}</a>{/block:Date}
  485. {block:NoteCount}
  486. <div class="notes"><img src="{image:notes}">{NoteCountWithLabel}</div>
  487. {/block:Notecount}
  488. {/block:Date}
  489.  
  490. </div>
  491. </div>
  492.  
  493.  
  494.  
  495.  
  496. {block:PostNotes}{PostNotes}{/block:PostNotes}
  497. <!--End posts--></div><!--End posts-->
  498.  
  499. {/block:Posts}
  500.  
  501.  
  502.  
  503.  
  504.  
  505.  
  506. {block:IndexPage}
  507. {block:Pagination}
  508. <div id="pagination">
  509. {block:NextPage}
  510. <a id="nextPage" href="{NextPage}"></a>
  511. {/block:NextPage}
  512. {block:PreviousPage}
  513. <a href="{PreviousPage}"></a>
  514. {/block:PreviousPage}
  515. </div>
  516. {/block:Pagination}
  517. {/block:IndexPage}
  518.  
  519.  
  520. </div>
  521.  
  522. <!--End Content-->
  523.  
  524. </body>
  525. </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!