API tools faq
paste
Advertisement
tumblings

3 Column Tumblr Theme with Endless Scrolling

tumblings
Jul 19th, 2013
1,592
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.21 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <html>
  3. <!-- >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
  4. <!--Minimal v.2 is Developed by Tumblings.net-->
  5. <!-- >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>-->
  6. <head>
  7.  
  8. <title>{Title}</title>
  9.  
  10. <!-- >>>>>>>>>>>>>>>>>>>>>> -->
  11. <!-- Option Menu -->
  12. <!-- >>>>>>>>>>>>>>>>>>>>>> -->
  13.  
  14. <meta name="if:Enable Endless Scrolling" content="1" />
  15. <meta name="image:Avatar" content="http://static.tumblr.com/0132684d8e3b5c3ba83e537b251dccdb/0szq8b5/gzbmjnpa1/tumblr_static_tumblr_inline_mir5y811jh1qz4rgp.png"/>
  16. <link rel="shortcut icon" href="{FavIcon}" />
  17. <meta name="image:Background" content="http://static.tumblr.com/0szq8b5/GxPmjnosh/bg.jpg" />
  18. <link rel="stylesheet" type="text/css" href="http://static.tumblr.com/0szq8b5/NwLmk1swn/style.css" />
  19.  
  20. <!-- >>>>>>>>>>>>>>>>>>>>>> -->
  21. <!-- CSS Customization -->
  22. <!-- >>>>>>>>>>>>>>>>>>>>>> -->
  23.  
  24. <style type="text/css">
  25. body{
  26. background:url('{image:Background}') top left fixed repeat;
  27. background-repeat:repeat;
  28. margin:0px;
  29. font-size: 11px;
  30. color:#000;
  31. font-family:Verdana;
  32. text-decoration:none;
  33. text-transform: uppercase;
  34. }
  35.  
  36. .description {
  37. font-family: Verdana;
  38. font-size: 11px;
  39. text-transform: uppercase;
  40. }
  41.  
  42. #post {
  43. {block:PermalinkPage}
  44. background:url(http://static.tumblr.com/0szq8b5/FDEmjygua/content2.png);
  45. {/block:PermalinkPage}
  46. {block:IndexPage}
  47. background:url(http://static.tumblr.com/0szq8b5/5l4mjygph/content.png);
  48. {/block:IndexPage}
  49. background-color: #FBF1ED;
  50. float:right;
  51. width:552px;
  52. {block:IndexPage}
  53. width:260px;
  54. height:220px;
  55. overflow:hidden;
  56. {/block:IndexPage}
  57. padding:10px;
  58. margin:5px;
  59. border:1px solid #F1E9DD;
  60. }
  61.  
  62. #post2 {
  63. {block:IndexPage}
  64. height:180px;
  65. overflow:hidden;
  66. {/block:IndexPage}
  67. }
  68.  
  69. #post3 {
  70. background:url(http://static.tumblr.com/0szq8b5/FDEmjygua/content2.png);
  71. background-color: #698;
  72. font-size: 8px;
  73. float:right;
  74. width:552px;
  75. padding:10px;
  76. margin:5px;
  77. border:1px solid #000;
  78. }
  79.  
  80. #wrapper{
  81. width:100%;
  82. margin:auto;
  83. position:relative;
  84. margin-top:0px;
  85. }
  86.  
  87. #body{
  88. width:820px;
  89. margin:auto;
  90. margin-top:25px;
  91. }
  92.  
  93. #side
  94. {
  95. width:210px;
  96. float:left;
  97. margin-top:120px;
  98. position: fixed;
  99. }
  100.  
  101.  
  102. #sidebar{
  103. background:url() #FBF1ED;
  104. width:200px;
  105. float:left;
  106. padding:5px;
  107. margin-bottom:10px;
  108. border:1px solid #F1E9DD;
  109. }
  110.  
  111.  
  112. .sidenav
  113. {
  114. width:200px;
  115. }
  116.  
  117. .topnavbg
  118. {
  119. background:#FFA1BC;
  120. width:194px;
  121. height:15px;
  122. display: inline-block;
  123. padding:3px;
  124. margin-top:2px;
  125. text-align:center;
  126. border:1px dashed #FCF4F1;
  127. }
  128.  
  129. .sidenavheader
  130. {
  131. background:;
  132. color:#ffffff;
  133. text-decoration:none;
  134. text-align:center;
  135. font-weight:bold;
  136. font-family:tahoma;
  137. font-size:12px;
  138. }
  139.  
  140. .sidenav a:link, .sidenav a:active, .sidenav a:visited
  141. {
  142. width:188px;
  143. background:url() #FFFAE8;
  144. color:#AA9C75;
  145. display: inline-block;
  146. text-decoration:none;
  147. font-family:arial;
  148. font-weight:bold;
  149. font-size:10px;
  150. padding:2px;
  151. padding-left:10px;
  152. border-bottom:2px solid #EEE7CB;
  153. -webkit-transition-property:color, text;
  154. -webkit-transition-duration: .2s;
  155. -moz-transition-duration: .2s;
  156. -webkit-transition-timing-function: linear, ease-in;
  157. }
  158.  
  159. .sidenav a:hover
  160. {
  161. width:179px;
  162. color:#56C0DE;
  163. padding-left:20px;
  164. -webkit-transition-duration: .2s;
  165. -moz-transition-duration: .2s;
  166. }
  167.  
  168. .sidenav2 a:link, .sidenav2 a:active, .sidenav2 a:visited
  169. {
  170. width:96px;
  171. background:#EEEAD2;
  172. color:#938B54;
  173. display: inline-block;
  174. text-decoration:none;
  175. text-align:center;
  176. font-family:arial;
  177. font-size:10px;
  178. font-weight:bold;
  179. padding:1px;
  180. margin-top:2px;
  181. -webkit-transition-property:color, text;
  182. -webkit-transition-duration: .2s;
  183. -moz-transition-duration: .2s;
  184. -webkit-transition-timing-function: linear, ease-in;
  185. border-bottom:1px solid #DDD9BE;
  186. }
  187.  
  188. .sidenav2 a:hover
  189. {
  190. -webkit-transition-duration: .2s;
  191. -moz-transition-duration: .2s;
  192. background:#FFF1F9;
  193. color:#FF83C6;
  194. border-bottom:1px solid #FFD9EE;
  195. }
  196. #contents{
  197. width:600px;
  198. float:right;
  199. margin-left:5px;
  200. }
  201. </style>
  202. <div id="DoNotEditImportant">
  203. <div id="endlessscrolling">
  204. <a href="http://tumblings.net">Tumblr HTML Codes</a><a href="http://themegenerators.tumblr.com">Tumblr Themes</a><a href="http://wikplayer.tumblr.com">Music Player for Tumblr</a></div></div>
  205. <script type="text/javascript" src="http://tumblogy.com/wp-content/uploads/2013/03/Endless-Scroll-JavaScript.js"></script>
  206. <style>
  207. .border{border-bottom:1px solid #FEE3EB;margin-bottom: 7px;
  208. -webkit-box-shadow: 1px 1px 1px rgba(255,255,255,.5);
  209. -moz-box-shadow: 1px 1px 1px rgba(255,255,255,.5);
  210. box-shadow: 1px 1px 1px rgba(255,255,255,.5);}
  211.  
  212. h1
  213. {color:#000;}
  214.  
  215. h2
  216. {color:#000;font-size:20px;font-family:helvetica;}
  217.  
  218. h2:hover
  219. {color:#F392A0;}
  220.  
  221.  
  222. h3
  223. {color:#000;}
  224.  
  225. h4
  226. {font-size:25px; font-family:georgia; font-style:oblique; font-weight:bold; color:#000; text-transform:none;}
  227.  
  228. b {color: #FF74B2;}
  229. s {color: #868787;}
  230. i {color: #C2B971;}
  231. u {font-color: #5A93A1;}
  232.  
  233.  
  234. a:link, a:visited, a:active
  235. { text-decoration: none; color:#0000FF; font-weight: bold; border-bottom: 0px solid #d0d0d0;
  236. font-size:10px; border:0px; text-decoration:none;
  237. -webkit-transition-duration: .3s;
  238. -moz-transition-duration: .3s;
  239. }
  240.  
  241. a:hover {
  242. color: #ff88cc;
  243. text-decoration:none;
  244. border:0px;
  245. -webkit-transition-duration: .3s;
  246. -moz-transition-duration: .3s;
  247. }
  248.  
  249. .postlink a:link, .postlink a:active, .postlink a:visited, .postlink
  250. {
  251. font-weight:normal;
  252. text-transform:uppercase;
  253. font-family:tinytots;
  254. font-size:8px;
  255. color:#FFFBFC;
  256. letter-spacing:1px;
  257. text-align:right;
  258. }
  259.  
  260. .postlink a:hover, .postlink:hover
  261. {
  262. color:#FFDBE6;
  263. }
  264.  
  265.  
  266. .photo
  267. {
  268. width:252px;
  269. height:170px;
  270. border: 2px dotted #FFFFF5;
  271. padding: 2px;
  272. background-color:#fff;
  273. -webkit-transition-duration:.5s;
  274. -moz-transition-duration:.5s;
  275. }
  276.  
  277. .photo:hover
  278. {
  279. opacity:0.6;
  280. -webkit-transition-duration:.5s;
  281. -moz-transition-duration:.5s;
  282. }
  283.  
  284. .photo2
  285. {
  286. border: 10px solid #FFFFF5;
  287. background-color:#E0CDBD;
  288. -webkit-transition-duration:.5s;
  289. -moz-transition-duration:.5s;
  290. }
  291.  
  292. .photo2:hover
  293. {
  294. opacity:0.6;
  295. -webkit-transition-duration:.5s;
  296. -moz-transition-duration:.5s;
  297. }
  298.  
  299.  
  300. .title
  301. {
  302. color:#000;
  303. font-size:20px;
  304. font-family:georgia;
  305. letter-spacing:1px;
  306. display:block;
  307. background:#F7ECE7;
  308. line-height:20px;
  309. -webkit-transition-duration: .3s;
  310. -moz-transition-duration: .3s;
  311. }
  312.  
  313. .title:hover
  314. {
  315. color:#000;
  316. -webkit-transition-duration: .3s;
  317. -moz-transition-duration: .3s;
  318. }
  319.  
  320. .dates
  321. {
  322. color:#000;
  323. font-weight:bold;
  324. font-size:11px;
  325. font-family:helvetica;
  326. line-height:10px;
  327. }
  328.  
  329. .awesome{
  330. background: #222 url() repeat-x;
  331. display: inline-block;
  332. padding: 5px 10px 6px;
  333. color: #ffffff;
  334. text-decoration: none;
  335. font-weight: bold;
  336. line-height: 1;
  337. -moz-border-radius: 5px;
  338. -webkit-border-radius: 5px;
  339. -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  340. -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  341. text-shadow: 0 -1px 1px rgba(0,0,0,0.1);
  342. border-bottom: 1px solid rgba(0,0,0,0.1);
  343. position: relative;
  344. cursor: pointer;
  345. text-align:center;
  346. font-family:tahoma;
  347. -webkit-transition-property:color, text;
  348. -webkit-transition-duration: .2s;
  349. -moz-transition-duration: .2s;
  350. -webkit-transition-timing-function: linear, ease-in;
  351. }
  352.  
  353. .small.awesome {
  354. font-size: 11px;
  355. }
  356.  
  357. .pink.awesome{
  358. background-color: #FF99B7;
  359. color: #ffffff;
  360. }
  361.  
  362. .pink2.awesome{
  363. background-color: #FF99B7;
  364. width:293px;
  365. color: #ffffff;
  366. margin-bottom:3px;
  367. }
  368.  
  369. .pink.awesome:hover{
  370. opacity: .50;
  371. -webkit-transition-duration:.2s;
  372. -moz-transition:.2s;
  373. color: #ffffff;
  374. }
  375.  
  376. img{border:0px;}
  377.  
  378. input[type=submit]
  379. {
  380. width: 60px;
  381. background-color: #FFA1BC;
  382. border:0px;
  383. color:#fff;
  384. font-family:Helvetica;
  385. }
  386.  
  387. input[type=text]
  388. {
  389. width: 135px;
  390. background-color: #FFCFDD;
  391. border:none;
  392. }
  393.  
  394. </style>
  395.  
  396. <!-- >>>>>>>>>>>>>>>>>>>>>> -->
  397. <!-- Do not Edit Endless Scrolling Codes -->
  398. <!-- >>>>>>>>>>>>>>>>>>>>>> -->
  399. {block:IfEnableEndlessScrolling}
  400. <script type="text/javascript" src="http://tumblogy.com/wp-content/uploads/2013/03/Endless-Scroll-Code.js"></script>
  401. {/block:IfEnableEndlessScrolling}
  402.  
  403. <!-- *********
  404. Social Buttons
  405. ********** -->
  406. <script type="text/javascript">
  407. var switchTo5x=true;
  408. </script>
  409. <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
  410. <script type="text/javascript">stLight.options({publisher:''});</script>
  411.  
  412. </head>
  413. <body>
  414.  
  415. <!-- *****************
  416. Top Bar
  417. ****************** -->
  418. <div class='openbloggernotification' id='bloggernotificationWrap' style='display: block; margin-top: 0px;'><div id='bloggernotification'><strong><font color='#84DC04'><b> {Title}</b> | </font></strong>
  419. <a href='/ask'>Ask</a> - <a href='/random'>Random Article</a> - <a href='/Archive'>Archive</a>
  420. </div></div>
  421. <div id="wrapper">
  422.  
  423. <div id="body">
  424.  
  425. <!-- *****************
  426. Your Avatar
  427. ****************** -->
  428.  
  429. <div id="side">
  430. <div id="sidebar">
  431. <a href="/" title="My Profile"><img src="{image:Avatar}" height="200px" width="200px"></a>
  432. <div class="sidenav2">
  433. <center><div class="description">{description}</div></center>
  434. </div>
  435. </div>
  436. {block:IfNotEnableEndlessScrolling}
  437. <div id="sidebar">
  438. <center>
  439. {block:Pagination}
  440. {block:PreviousPage}
  441. <a class="small awesome pink" href="{PreviousPage}">Previous</a>
  442. {/block:PreviousPage}
  443.  
  444. {block:JumpPagination length="10"}
  445. {block:CurrentPage}
  446. <span class="small awesome pink">{PageNumber}</span>
  447. {/block:CurrentPage}
  448.  
  449. {block:JumpPage}
  450. <a class="small awesome pink" href="{URL}">{PageNumber}</a>
  451. {/block:JumpPage}
  452. {/block:JumpPagination}
  453.  
  454. {block:NextPage}
  455. <a class="small awesome pink" href="{NextPage}">Next</a>
  456. {/block:NextPage}
  457. {/block:Pagination}
  458. </center>
  459. </div>
  460. {/block:IfNotEnableEndlessScrolling}
  461. </div>
  462.  
  463. <!-- *****************
  464. Post Types
  465. ****************** -->
  466.  
  467. <div id="contents">
  468. <div class="autopagerize_page_element">
  469. {block:Posts}
  470.  
  471. <div id="post">
  472. </table>
  473. <table width="100%"><tr><td>
  474. <div class="dates">{block:Date}{DayOfWeek}, {Month} {DayOfMonth}, {Year}{/block:Date}</div>
  475.  
  476. </td><td align="right">
  477. <div class="postlink">
  478. <a href="{ReblogURL}"><img src="http://static.tumblr.com/0szq8b5/0QYmjnsmw/screenshot_2.png"/></a>
  479. </div>
  480. </td></tr></table>
  481.  
  482. <div class="border"></div>
  483. <div id="post2">
  484.  
  485. <!-- *****************
  486. Text Post
  487. ****************** -->
  488.  
  489. {block:Text}<a href="{Permalink}"><div class="title">{Title}</div></a>{block:IndexPage}{Body}{/block:IndexPage}{block:PermalinkPage}{Body}{/block:PermalinkPage}{/block:Text}
  490.  
  491. <!-- *****************
  492. Photo Post
  493. ****************** -->
  494.  
  495. {block:Photo}<center>{block:IndexPage}<a href="{permalink}"><img class="photo" src="{PhotoURL-400}" alt="{PhotoAlt}"/></a>{/block:IndexPage}
  496. {block:PermalinkPage}{LinkOpenTag}
  497. <br><br><img src="{PhotoURL-400}" class="photo2" alt="{PhotoAlt}"/>{LinkCloseTag}<br>{block:Caption}
  498. <p>{Caption}</p>
  499. {/block:Caption}{/block:PermalinkPage}</center>{/block:Photo}
  500.  
  501. {block:Photoset}<center>{block:IndexPage}{Photoset-400}{/block:IndexPage}
  502. {block:PermalinkPage}{Photoset-400}{/block:PermalinkPage}</center>{block:PermalinkPage}
  503. {/block:PermalinkPage}
  504. {/block:Photoset}
  505.  
  506. <!-- *****************
  507. Quote Post
  508. ****************** -->
  509.  
  510. {block:Quote}<center><h4>&ldquo;{Quote}&rdquo;</h4>{block:Source}{Source}{/block:Source}</center>
  511. {/block:Quote}
  512.  
  513. <!-- *****************
  514. Link Post
  515. ****************** -->
  516.  
  517. {block:Link} <a href="{URL}" id="postlink" {Target}><h2>{Name}&rarr;</h2></a><BR>{block:Description}{Description}{/block:Description}
  518. {/block:Link}
  519.  
  520. <!-- *****************
  521. Chat Post
  522. ****************** -->
  523.  
  524. {block:Chat}<a href="{Permalink}"><div class="header">{Title}</div></a><ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label}&nbsp;{Line}</li>{/block:Lines}</ul>
  525. {/block:Chat}
  526.  
  527. <!-- *****************
  528. Video Post
  529. ****************** -->
  530.  
  531. {block:Video}<center>{block:IndexPage}<div id="video">{Video-250}</div>{/block:IndexPage}{block:PermalinkPage}{Video-500}{/block:PermalinkPage}</center>
  532. {/block:Video}
  533.  
  534. <!-- *****************
  535. Audio Post
  536. ****************** -->
  537.  
  538. {block:Audio}{block:IndexPage}{block:AlbumArt}<img src="{AlbumArtURL}" width="250px" height="100px" />{/block:AlbumArt}<div style="width:260; height:30; background: #000; "><span class="audio"><center>{AudioPlayerBlack}</center></span></div><b><center>{block:TrackName}{TrackName}{/block:TrackName} - {block:Artist}{Artist}{/block:Artist}<br></b> <i>with {PlayCountWithLabel}</i></center>{/block:IndexPage}{block:PermalinkPage}<br><center>
  539. {block:AlbumArt}<img src="{AlbumArtURL}" width="500px" height="300px" />{/block:AlbumArt}<div style="width:500; height:30; background: #000; "><span class="audio"><center>{AudioPlayerBlack}</center></span></div><b><center>{block:TrackName}{TrackName}{/block:TrackName} - {block:Artist}{Artist}{/block:Artist}<br></b> <i>with {PlayCountWithLabel}</i></center>
  540. {block:Caption}{Caption}{/block:Caption}</center>{/block:PermalinkPage}
  541. {/block:Audio}
  542.  
  543. <!-- *****************
  544. Answers Post
  545. ****************** -->
  546.  
  547. {block:Answer}<span class="answer"><div id="question"><div id="asked"><img src="{AskerPortraitURL-40}"align="left" /><b>{Asker} asked:</b><BR> {Question}</div></div>{Answer}</span>{/block:Answer}
  548.  
  549. <!-- *****************
  550. Divider
  551. ****************** -->
  552.  
  553. {block:PermalinkPage}
  554. <div class="border"></div>
  555. {/block:PermalinkPage}
  556.  
  557. <!-- *****************
  558. Social Sharing Icons
  559. ****************** -->
  560.  
  561. <span st_url="{Permalink}" st_title="{Title}" class="st_facebook_hcount" displayText="Facebook"></span><span st_url="{Permalink}" st_title="{Title}" class="st_twitter_hcount" displayText="Tweet"></span><span st_url="{Permalink}" st_title="{Title}" class="st_plusone_hcount" ></span>
  562.  
  563. <!-- *****************
  564. Divider
  565. ****************** -->
  566.  
  567. {block:PermalinkPage}
  568. <div class="border"></div>
  569. {/block:PermalinkPage}
  570.  
  571. <!-- *****************
  572. Notes
  573. ****************** -->
  574.  
  575. {block:PostNotes}
  576. <B>NOTES:</B><BR>
  577. {PostNotes}
  578. {/block:PostNotes}
  579.  
  580. <!-- *****************
  581. Tags
  582. ****************** -->
  583.  
  584. {block:PermalinkPage}
  585. {block:HasTags}Tags:
  586. {block:Tags}
  587. <a href="{TagURL}">{Tag}</a>,
  588. {/block:Tags}
  589. {/block:HasTags}{block:ContentSource}<br>Originally Posted by:<a href="{SourceURL}" target="_blank">{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}{block:NoSourceLogo} {SourceTitle}{/block:NoSourceLogo}</a> {/block:ContentSource}{block:RebloggedFrom}Reblogged From: <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}
  590. {/block:PermalinkPage}
  591.  
  592. </div>
  593. </div>
  594. {/block:Posts}
  595. </div>
  596.  
  597. <!-- *****************
  598. Footer - Do not Remove!
  599. ****************** -->
  600.  
  601. <div id="post3">
  602.  
  603. <center>
  604. {block:PermalinkPagination}
  605. <div id="perm_pagination">
  606. <span class="next_post">
  607. {block:NextPost}
  608. <a href="{NextPost}">&laquo; Previous</a>
  609. {/block:NextPost}
  610. </span>
  611. -
  612. <span class="prev_post">
  613. {block:PreviousPost}
  614. <a href="{PreviousPost}">Next &raquo;</a>
  615. {/block:PreviousPost}
  616. </span>
  617. </div>
  618. {/block:PermalinkPagination}
  619. </center>
  620.  
  621. <div class="border"></div>
  622. <center><p>Copyright &copy; {CopyrightYears} - <a href="/">{title}</a></p>Theme From: <a href="http://tumblings.net" target="_blank">Tumblr Themes</a> | Powered by: <a href="http://tumblr.com" target="_blank">Tumblr</a></center>
  623. </div>
  624. </div>
  625. </body>
  626. </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!