API tools faq
paste
Advertisement
SKthemes

Theme 003: Our Little Infinity

SKthemes
Mar 31st, 2014
1,211
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.55 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3. <!--
  4. Our Little Infinity Theme by marmitecodes
  5. — Do not steal or take credit or use as a base. Edit it all you want!
  6. - REMEMBER TO HAVE LIKED THE POST
  7. — If you need any help, you can find me at smashingkeys.tumblr.com
  8. — I am willing to edit my themes for you
  9. -->
  10.  
  11.  
  12. <head>
  13. <meta name="color:Background" content="#fff">
  14. <meta name="color:blockquote" content="#000">
  15. <meta name="color:Body" content="#000">
  16. <meta name="color:Links" content="#0073a2">
  17. <meta name="color:Title" content="#4DBCE9">
  18. <meta name="color:nav bg" content="#4DBCE9">
  19. <meta name="color:nav bg hover" content="#fff">
  20. <meta name="color:nav links" content="#fff">
  21. <meta name="color:nav links hover" content="#4DBCE9">
  22. <meta name="color:nav title" content="#fff">
  23. <meta name="color:nav title bg" content="#000">
  24.  
  25. <meta name="text:additional sb width" content="300">
  26. <meta name="text:nav title" content="navigation">
  27. <meta name="text:link1 url" content="/">
  28. <meta name="text:link1 label" content="home">
  29. <meta name="text:link2 url" content="/">
  30. <meta name="text:link2 label" content="ask">
  31. <meta name="text:link3 url" content="/ask">
  32. <meta name="text:link3 label" content="link">
  33. <meta name="text:link4 url" content="/">
  34. <meta name="text:link4 label" content="link">
  35. <meta name="text:link5 url" content="/ask">
  36. <meta name="text:link5 label" content="link">
  37. <meta name="text:link6 url" content="/">
  38. <meta name="text:link6 label" content="link">
  39.  
  40. <meta name="if:show additional sidebar" content="1">
  41. <meta name="if:nav style a" content="1">
  42. <meta name="if:nav style b" content="0">
  43. <meta name="if:nav style c" content="0">
  44.  
  45. <meta name="image:sb image" content="http://static.tumblr.com/ll9gjst/0J5n36j4c/tfiostrailer-051_edited.jpg">
  46. <meta name="image:additional sb background" content="http://static.tumblr.com/ll9gjst/ZyMn36j1n/tfios_theme_static.jpg">
  47.  
  48. <link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
  49.  
  50. <style type="text/css">
  51.  
  52. * {
  53.  
  54. }
  55.  
  56. body {
  57. font-family: helvetica;
  58. font-size: 10px;
  59. background-color: {color:background};
  60. color: {color:Body};
  61. z-index: 2;
  62. }
  63.  
  64. a {
  65. text-decoration: none;
  66. color: {color:Links};
  67. font-style: bold;
  68. }
  69.  
  70. blockquote {
  71. border-left: 3px solid {color:blockquote};
  72. padding-left: 5px;
  73. }
  74.  
  75. #leftie {
  76. left: 0;
  77. top: 0;
  78. display:block;
  79. position:fixed;
  80. height: 100%;
  81. width: 300px;
  82. padding: 0px;
  83. }
  84.  
  85. .add {
  86. width: 300px;
  87. background-color: #000;
  88. background-repeat: auto;
  89. z-index: 3;
  90. }
  91.  
  92. #sidebar {
  93. {block:ifshowadditionalsidebar}margin-left: 300px;{/block:ifshowadditionalsidebar}
  94. {block:ifnotshowadditionalsidebar}margin-left: 50px;{/block:ifnotshowadditionalsidebar}
  95. top: 0;
  96. display:block;
  97. position:fixed;
  98. height: 100%;
  99. width: 220px;
  100. background-color: {color:Background};
  101. padding: 10px;
  102. }
  103.  
  104. .title {
  105. text-align: center;
  106. margin-top: 25%;
  107. line-height: 110%;
  108. letter-spacing: 1px;
  109. color: {color:Title};
  110. }
  111.  
  112. h1 {
  113. font-size: 20px;
  114. font-family: Kaushan Script, cursive;
  115. font-style: italic;
  116. text-align: center;
  117. line-height: 110%;
  118. margin-top: 10px;
  119. letter-spacing: 1px;
  120. color: {color:Title};
  121. }
  122.  
  123. .image {
  124. margin: auto;
  125. width: 180px;
  126. }
  127.  
  128. .image img {
  129. width: 180px;
  130. height: auto;
  131. }
  132.  
  133. .desc {
  134. width: 180px;
  135. height: 180px;
  136. overflow: scroll;
  137. color: {color:body};
  138. padding: 20px;
  139. text-align: justify;
  140. }
  141.  
  142.  
  143. #entries {
  144. position:relative;
  145. float:left;
  146. width:522px;
  147. top:5px;
  148. text-align:justify;
  149. {block:ifshowadditionalsidebar}margin-left: 600px;{/block:ifshowadditionalsidebar}
  150. {block:ifnotshowadditionalsidebar}margin-left: 350px;{/block:ifnotshowadditionalsidebar}
  151. padding:40px;
  152. }
  153.  
  154. #post {
  155. margin-bottom:25px;
  156. padding-top: 10px;
  157. width:500px;
  158. padding:0px;
  159. background-color: {color:background};
  160. }
  161.  
  162. #post img {
  163. max-width: 100%;
  164. }
  165.  
  166. #athena {
  167. font-style:none;
  168. font-size: 9px;
  169. width:500px;
  170. color:{color:Body};
  171. text-align:center;
  172. padding-top:5px;
  173. }
  174.  
  175. #athena a {
  176. color:{color:links};
  177. }
  178.  
  179.  
  180.  
  181. #question {
  182. padding: 5px;
  183. width: 100%;
  184. height: auto;
  185. }
  186.  
  187. #main_holder_menu {
  188. width:220px;
  189. height:70px;
  190. overflow:hidden;
  191. margin-left: 15px;
  192. margin-top: 0px;
  193. -webkit-transition: all 0.5s ease-out;
  194. -moz-transition: all 0.5s ease-out;
  195. transition: all 0.5s ease-out;
  196. }
  197.  
  198. #main_holder_menu:hover {
  199. height:400px;
  200. -webkit-transition: all 1s ease-out;
  201. -moz-transition: all 1s ease-out;
  202. transition: all 1s ease-out;
  203. }
  204.  
  205. .title_menu {
  206. height:15px;
  207. width: 180px;
  208. text-align:center;
  209. padding:5px;
  210. color: {color:nav title};
  211. background-color:{color:nav title bg};
  212. font-weight: bold;
  213. font-family: 'Arial', sans-serif;
  214. font-size:11px;
  215. }
  216.  
  217. .holder_menu {
  218. width:180px;
  219. display:block;
  220. color: {color:nav links}; /* The color of menu */
  221. text-align:center;
  222. font-family: 'Arial', sans-serif;
  223. font-size:11px;
  224. background-color: {color:nav bg}; /* The background of menu */
  225. margin-bottom:5px;
  226. margin-top: 5px;
  227. padding:5px;
  228. }
  229.  
  230. .holder_menu:hover {
  231. background-color: {color:nav bg hover};
  232. color: {color:nav links hover};
  233. }
  234.  
  235. #main_holder_menu:hover .one_delay {
  236. {block:ifnavstylea}margin-top:0px;{/block:ifnavstylea}
  237. {block:ifnavstyleb}margin-top:0px;{/block:ifnavstyleb}
  238. {block:ifnavstylec}margin-left:0px;{/block:ifnavstylec}
  239. transition-delay:0.8s;
  240. -webkit-transition-delay:0.6s;
  241. }
  242.  
  243. .one_delay {
  244. {block:ifnavstylea}margin-top:-70px;{/block:ifnavstylea}
  245. {block:ifnavstyleb}margin-top:220px;{/block:ifnavstyleb}
  246. {block:ifnavstylec}margin-left:220px;{/block:ifnavstylec}
  247. -webkit-transition: all 0.6s ease;
  248. -moz-transition: all 0.6s ease;
  249. transition: all 0.6s ease;
  250. }
  251.  
  252. #main_holder_menu:hover .two_delay {
  253. {block:ifnavstylea}margin-top:0px;{/block:ifnavstylea}
  254. {block:ifnavstyleb}margin-top:0px;{/block:ifnavstyleb}
  255. {block:ifnavstylec}margin-left:0px;{/block:ifnavstylec}
  256. transition-delay:0.6s;
  257. -webkit-transition-delay:0.6s;
  258. }
  259.  
  260. .two_delay {
  261. {block:ifnavstylea}margin-top:-70px;{/block:ifnavstylea}
  262. {block:ifnavstyleb}margin-top:220px;{/block:ifnavstyleb}
  263. {block:ifnavstylec}margin-left:-220px;{/block:ifnavstylec}
  264. -webkit-transition: all 0.6s ease;
  265. -moz-transition: all 0.6s ease;
  266. transition: all 0.6s ease;
  267. }
  268.  
  269. #main_holder_menu:hover .three_delay {
  270. {block:ifnavstylea}margin-top:0px;{/block:ifnavstylea}
  271. {block:ifnavstyleb}margin-top:0px;{/block:ifnavstyleb}
  272. {block:ifnavstylec}margin-left:0px;{/block:ifnavstylec}
  273. transition-delay:0.6s;
  274. -webkit-transition-delay:0.6s;
  275. }
  276.  
  277. .three_delay {
  278. {block:ifnavstylea}margin-top:-70px;{/block:ifnavstylea}
  279. {block:ifnavstyleb}margin-top:-220px;{/block:ifnavstyleb}
  280. {block:ifnavstylec}margin-left:220px;{/block:ifnavstylec}
  281. -webkit-transition: all 0.6s ease;
  282. -moz-transition: all 0.6s ease;
  283. transition: all 0.6s ease;
  284. }
  285.  
  286. #main_holder_menu:hover .four_delay {
  287. {block:ifnavstylea}margin-top:1px;{/block:ifnavstylea}
  288. {block:ifnavstyleb}margin-top:1px;{/block:ifnavstyleb}
  289. {block:ifnavstylec}margin-left:1px;{/block:ifnavstylec}
  290. transition-delay:0.6s;
  291. -webkit-transition-delay:0.6s;
  292. }
  293.  
  294. .four_delay {
  295. {block:ifnavstylea}margin-top:-70px;{/block:ifnavstylea}
  296. {block:ifnavstyleb}margin-top:220px;{/block:ifnavstyleb}
  297. {block:ifnavstylec}margin-left:-220px;{/block:ifnavstylec}
  298. -webkit-transition: all 0.6s ease;
  299. -moz-transition: all 0.6s ease;
  300. transition: all 0.6s ease;
  301. }
  302.  
  303. #main_holder_menu:hover .five_delay {
  304. {block:ifnavstylea}margin-top:1px;{/block:ifnavstylea}
  305. {block:ifnavstyleb}margin-top:1px;{/block:ifnavstyleb}
  306. {block:ifnavstylec}margin-left:1px;{/block:ifnavstylec}
  307. transition-delay:0.6s;
  308. -webkit-transition-delay:0.6s;
  309. }
  310.  
  311. .five_delay {
  312. {block:ifnavstylea}margin-top:-70px;{/block:ifnavstylea}
  313. {block:ifnavstyleb}margin-top:-220px;{/block:ifnavstyleb}
  314. {block:ifnavstylec}margin-left:220px;{/block:ifnavstylec}
  315. -webkit-transition: all 0.6s ease;
  316. -moz-transition: all 0.6s ease;
  317. transition: all 0.6s ease;
  318. }
  319.  
  320. #main_holder_menu:hover .six_delay {
  321. {block:ifnavstylea}margin-top:1px;{/block:ifnavstylea}
  322. {block:ifnavstyleb}margin-top:1px;{/block:ifnavstyleb}
  323. {block:ifnavstylec}margin-left:1px;{/block:ifnavstylec}
  324. transition-delay:0.6s;
  325. -webkit-transition-delay:0.6s;
  326. }
  327.  
  328. .six_delay {
  329. {block:ifnavstylea}margin-top:-70px;{/block:ifnavstylea}
  330. {block:ifnavstyleb}margin-top:220px;{/block:ifnavstyleb}
  331. {block:ifnavstylec}margin-left:-220px;{/block:ifnavstylec}
  332. -webkit-transition: all 0.6s ease;
  333. -moz-transition: all 0.6s ease;
  334. transition: all 0.6s ease;
  335. }
  336.  
  337. .cover {position: relative; z-index: 1; width: 100px; height: 100px;}
  338.  
  339. .playbox {
  340. background-color: #e4e4e4;
  341. position: absolute;
  342. z-index: 1000;
  343. margin: auto;
  344. margin-left: 20px;
  345. margin-top: 25px;
  346. -webkit-border-radius: 100px;
  347. -moz-border-radius: 100px;
  348. border-radius: 100px;
  349. opacity: 0.4;
  350. }
  351.  
  352. .playbox:hover {
  353. opacity: 0.6;
  354. }
  355.  
  356. .playbutton {width: 20px;
  357. height: 30px;
  358. overflow: hidden;
  359. position: relative;
  360. z-index: 1000;
  361. margin: 15px 24px 13px 16px;
  362. opacity: 1;
  363. }
  364.  
  365. {CustomCSS}
  366. </style>
  367. </head>
  368. <body>
  369.  
  370. <script type="text/javascript" src="http://codysherman.tumblr.com/tools/infinite-scrolling/code"></script>
  371.  
  372.  
  373. {block:ifshowadditionalsidebar}
  374. <div id="leftie">
  375. <div class="add">
  376. <img src="{image:additional sb background}" />
  377. </div></div>{/block:ifshowadditionalsidebar}
  378.  
  379. <div id="sidebar">
  380. <div class="title"><h1>{Title}</h1></div>
  381. <div class="image"><img src="{image:sb image}"></div>
  382. <div class="desc">{Description}
  383. <br><br>
  384. <div style="font-size:12px; font-weight: bold; text-align: center;">
  385. {block:Pagination}
  386.  
  387. {block:PreviousPage}<a href="{PreviousPage}">←</a>{/block:PreviousPage}
  388. {block:NextPage}<a href="{NextPage}">→</a>{/block:NextPage}
  389. {/block:Pagination}
  390. </div>
  391. </div>
  392. <div id="main_holder_menu">
  393. <div class="title_menu">
  394. {text:nav title}
  395. </div>
  396. {block:iflink1url}<div class="one_delay"><a class="holder_menu" href="{text:link1 url}">{text:link1 label}</a></div>{/block:iflink1url}
  397. {block:iflink2url}<div class="two_delay"><a class="holder_menu" href="{text:link2 url}">{text:link2 label}</a></div>{/block:iflink2url}
  398. {block:iflink3url}<div class="three_delay"><a class="holder_menu" href="{text:link3 url}">{text:link3 label}</a></div>{/block:iflink3url}
  399. {block:iflink4url}<div class="four_delay"><a class="holder_menu" href="{text:link4 url}">{text:link4 label}</a></div>{/block:iflink4url}
  400. {block:iflink5url}<div class="five_delay"><a class="holder_menu" href="{text:link5 url}">{text:link5 label}</a></div>{/block:iflink5url}
  401. {block:iflink6url}<div class="six_delay"><a class="holder_menu" href="{text:link6 url}">{text:link6 label}</a></div>{/block:iflink6url}
  402. </div>
  403. </div>
  404.  
  405. <div id="entries">{block:Posts}<div id="post">
  406. {block:ContentSource}
  407. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  408. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  409. {/block:SourceLogo}
  410. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  411. {/block:ContentSource}
  412.  
  413. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  414.  
  415. {block:Photo}{LinkOpenTag}<img src="{PhotoURL-500}">{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  416.  
  417. {block:Photoset}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  418.  
  419. {block:Quote}<h1><center>{Quote}{block:Source}</h1> —{Source}</center>{/block:Source}{/block:Quote}
  420.  
  421. {block:Link}<h1><center><a href="{URL}" {Target}>{Name}</a></h1></center>{block:Description}{Description}{/block:Description}{/block:Link}
  422.  
  423. {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}{/block:Chat}
  424.  
  425. {block:Audio}<div class="playbox"><div class="playbutton">{block:AudioPlayer}{AudioPlayergrey}{/block:AudioPlayer}</div></div>
  426. {block:AlbumArt}
  427. <img src="{AlbumArtUrl}" class="cover">
  428. {/block:AlbumArt}{block:Caption}<br><br>{Caption}{/block:Caption}{/block:Audio}
  429.  
  430. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  431.  
  432. {block:Answer}<div id="question"><center><b>{Asker} asked:</b></center><br>{Question}</div><div style="margin-top: 5px; border-top: 1px solid #aaa;">{Answer}</div>{/block:Answer}
  433.  
  434.  
  435. <div id="athena">
  436. {block:Date}posted on <a href="{Permalink}">{DayOfMonth} / {ShortMonth}</a>
  437. {block:NoteCount} ☁ <a href="{Permalink}">{NoteCount}</a> notes{/block:NoteCount}
  438. {/block:Date}
  439. {block:RebloggedFrom} ☁ <a href="{ReblogParentURL}">via</a> {/block:RebloggedFrom}
  440. {block:ContentSource} ☁ <a href="{SourceURL}">source</a>{/block:ContentSource} <br>
  441. {block:HasTags}{block:Tags} # <a href="{TagURL}">{Tag}</a>{/block:Tags}{/block:HasTags}
  442.  
  443. </div>
  444.  
  445.  
  446.  
  447. </div>
  448.  
  449.  
  450.  
  451. {block:PostNotes}{PostNotes}{/block:PostNotes}
  452. {/block:Posts}
  453.  
  454. </div>
  455.  
  456. <div style="font-size: 10px; padding: 5px; float: right; position: fixed; bottom: 5px; right: 10px; color: #000; background-color: {color:Background};"><a href="http://smashingkeys.tumblr.com">kudos</a></div>
  457.  
  458. </body>
  459. </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!