API tools faq
paste
Advertisement
lakeffectkdss

runaways/izzy, theme 003

lakeffectkdss
May 15th, 2016
687
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.97 KB | None | 0 0
raw download clone embed print report
  1. <!--RUNAWAYS; theme 003 by lakeffectkds
  2. this theme was inspired by the prettiest human alive. probably. definitely. aka izzy, or @amaranthnc
  3. base code credit goes to hawtornes, and the pop-up code belongs to str-wrs.
  4.  
  5. RULES ; 01- do not steal bits and pieces of this code for your own.
  6. 02- do not edit this theme and claim it as your own or use it as a base code without my permission.
  7. 03- do not redistribute this theme as yours.
  8. 04- feel free to edit it as much as you want for personal use! feel free to show me any changes to make to it, i'll be more than happy to take a look!
  9. 05- actually, just feel free to hmu if you're using the theme, it's the best thing to see people liking it and using it on their blogs.
  10. -->
  11.  
  12.  
  13. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  14.  
  15. <head>
  16. <!---scripts!--->
  17.  
  18. <script type="text/javascript"
  19. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  20. <script>
  21. $(document).ready(function() {
  22. //
  23. $('a.poplight[href^=#]').click(function() {
  24. var popID = $(this).attr('rel'); //Get Popup Name
  25. var popURL = $(this).attr('href'); //Get Popup href to define size
  26. var query= popURL.split('?');
  27. var dim= query[1].split('&');
  28. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  29. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  30. var popMargTop = ($('#' + popID).height() + 80) / 2;
  31. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  32. //Apply Margin to Popup
  33. $('#' + popID).css({
  34. 'margin-top' : -popMargTop,
  35. 'margin-left' : -popMargLeft
  36. });
  37. $('body').append('<div id="fade"></div>');
  38. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  39. return false;
  40. });
  41. $('a.close, #fade').live('click', function() {
  42. $('#fade , .popup_block').fadeOut(function() {
  43. $('#fade, a.close').remove(); //fade them both out
  44. });
  45. return false;
  46. });
  47. });
  48. </script>
  49.  
  50. <script src="https://use.fonticons.com/fc066471.js"></script>
  51.  
  52. <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
  53.  
  54. <!---end of scripts!--->
  55.  
  56. <title>{Title}</title>
  57.  
  58. <link rel="shortcut icon" href="{Favicon}">
  59. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  60. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  61.  
  62.  
  63.  
  64. <meta name="color:Background" content="#ffffff"/>
  65. <meta name="color:Text" content="#a8a8a8"/>
  66. <meta name="color:DescriptionText" content="#b8b8b8"/>
  67. <meta name="color:Border" content="#dddddd"/>
  68. <meta name="color:Hover" content="#f2f2f2"/>
  69. <meta name="color:popup boxes" content="#ccc">
  70. <meta name="color:sbar bg" content="#000000"/>
  71.  
  72. <meta name="color:desc bg" content="#000000"/>
  73. <meta name="color:post bg" content="#000000"/>
  74. <meta name="color:post container" content="#000000"/>
  75.  
  76. <meta name="color:popup boxes" content="#000000"/>
  77.  
  78.  
  79. <meta name="color:img borders" content="#fff"/>
  80.  
  81.  
  82. <meta name="color:bold" content="#000000"/>
  83. <meta name="color:italics" content="#000000"/>
  84.  
  85. <meta name="color:link" content="#000000"/>
  86. <meta name="color:Scrollbar" content="#000000"/>
  87. <meta name="color:ScrollbarBg" content="#ffffff"/>
  88. <meta name="color:Post Links" content="#c0bfbf"/>
  89. <meta name="color:Answer Backg" content="#000000"/>
  90. <meta name="image:sbar 1" content=""/>
  91. <meta name="image:sbar 2" content=""/>
  92. <meta name="image:sbar 3" content=""/>
  93. <meta name="image:sbar 4" content=""/>
  94. <meta name="image:Background" content=""/>
  95.  
  96. <meta name="text:about title" content=""/>
  97.  
  98. <meta name="text:about content" content="anythin u wanna. theres a cute lil scrollbar so u can write that lil heart of urs out."/>
  99. <meta name="text:rules title" content="#"/>
  100. <meta name="text:rules content" content="again, anythin u wanna. live ur life 2 th fullest fren ily"/>
  101. <meta name="text:nav title" content=""/>
  102.  
  103. <meta name="text:ask title" content=""/>
  104.  
  105.  
  106. <style type="text/css">
  107.  
  108. .popup_block{
  109. display:none;
  110. background:{color:post container};
  111. padding:20px;
  112. width:400px;
  113. overflow:auto;
  114. height:300px;
  115. border:1px solid #eee; /* if you want a solid white pop-up, delete this */
  116. float:left;
  117. position:fixed;
  118. top:50%;left:50%;
  119. z-index: 99999;
  120. -webkit-box-shadow: 0px 0px 20px #000; /* delete for solid white */
  121. -moz-box-shadow: 0px 0px 20px #000; /* delete for solid white */
  122. box-shadow: 0px 0px 20px #000; /* delete for solid white */
  123. }
  124.  
  125. *html #fade {position: absolute;}
  126. *html .popup_block {position: absolute;}
  127. #fade {
  128. display:none;
  129. position:fixed;
  130. left:0px;
  131. top:0px;
  132. width:100%;
  133. height:100%;
  134. z-index:9999;
  135. background:#000; /* change to #fff for solid white */
  136. opacity:0.5; /* change to opacity:1; */
  137. }
  138.  
  139. ::-webkit-scrollbar-thumb {
  140. height:auto;
  141. background-color:{color:Scrollbar};
  142. }
  143.  
  144. ::-webkit-scrollbar {
  145. height:9px;
  146. width:2px;
  147. background-color:{color:ScrollbarBg};
  148. }
  149.  
  150. body {
  151. background:{color:background};
  152. margin:0px;
  153. color:{color:text};
  154. font-family:arial;
  155. font-size:14px;
  156. overflow:hidden
  157. letter-spacing:0px;
  158. text-align:justify;
  159. background-image:url('{image:Background}');
  160. -webkit-background-size: cover;
  161. -moz-background-size: cover;
  162. -o-background-size: cover;
  163. background-size: cover;
  164. }
  165.  
  166. a {
  167. text-decoration:none;
  168. outline:none;
  169. -moz-outline-style:none;
  170. color:{color:Post Links};
  171. }
  172.  
  173. img {
  174. border:none;
  175. }
  176.  
  177. blockquote {
  178. padding-left:5px;
  179. border-left:2px solid;
  180. }
  181.  
  182. blockquote blockquote {
  183. padding-left:5px;
  184. border-left:2px solid;
  185. }
  186.  
  187. h1 {
  188. font-size:14px;
  189. letter-spacing:0px;
  190. font-family:'Montserrat';
  191. font-style:none;
  192. line-height:10px;
  193. text-align:left;
  194. padding:0px;
  195. }
  196. h2 {
  197. font-size:16px;
  198. letter-spacing:-1px;
  199. font-family:'Montserrat';
  200. color:{color:bold};
  201. line-height:10px;
  202. text-align:left;
  203. padding:0px;
  204. }
  205. h3 {
  206. font-size:16px;
  207. letter-spacing:-1px;
  208. font-family:'Montserrat';
  209. color:{color:bold};
  210. line-height:10px;
  211. text-align:center;
  212. text-align:left;
  213. padding:3px;
  214. background-color:{color: post container};
  215. }
  216. b,strong {
  217. font-size:auto;
  218. font-family:'Montserrat';
  219. color:{color:bold};
  220. }
  221. i,em {
  222. font-size:auto;
  223. font-family:'Montserrat';
  224. color:{color:italics};
  225. }
  226.  
  227.  
  228. a:link, a:active, a:visited{color: {color:link}; text-decoration:none; font-family: 'montserrat';}
  229.  
  230.  
  231. /*CONTAINER*/
  232. #foo {
  233. POSITION: absolute;
  234. width:355px;
  235. height: 520px;
  236. margin-left:40px;
  237. margin-top: -80px;
  238. z-index:1;
  239. padding:5px;
  240. background-color:{color:sbar bg};
  241.  
  242. }
  243.  
  244.  
  245. /*ENTRIES*/
  246.  
  247. #entries {
  248. padding:0px;
  249. width:520px;
  250. margin-left:570px;
  251. font-size:11px;
  252. font-family:'arial';
  253. letter-spacing:0px;
  254. height:490px;
  255. padding:20px;
  256. overflow:auto;
  257.  
  258. }
  259.  
  260. #posts{
  261. width:400px;
  262. padding-bottom:40px;
  263. padding:15px;
  264. margin-left:45px;
  265. margin-top:20px;
  266. box-shadow:3px 3px 5px #ccc;
  267. background-color:{color:post bg};
  268. z-index:99;
  269. }
  270.  
  271. /*POP-UPS*/
  272. #box2 img {width:80px; float:center; border-radius:100px;border: 10px solid {color:img borders};}
  273. #box4 img {width:80px; float:center;border-radius:100px; border: 10px solid {color:img borders};}
  274. /*SIDEBAR*/
  275.  
  276. #sidebar {
  277. position:fixed;
  278. margin-left:130px;
  279. margin-top:80px;
  280. margin-left:170px;
  281. }
  282.  
  283.  
  284. #sidebarimage img {
  285. width:90px;
  286. margin-top:15px;
  287. margin-left:5px;
  288. z-index:9;
  289. border: 10px solid {color:img borders};
  290. BORDER-RADIUS:100px;
  291. }
  292.  
  293.  
  294.  
  295. #description {
  296. text-align:justify;
  297. font-family:'arial';
  298. width:200px;
  299. height:270px;
  300. overflow:auto;
  301. margin-top:20px;
  302. margin-left:125px;
  303. font-size:12px;
  304. position:absolute;
  305. text-transform:none;
  306. z-index:99999;
  307. padding:10px;
  308. color:{color:DescriptionText};
  309. background-color:{color:desc bg};box-shadow: 2px 2px 4px #ccc;
  310. }
  311. #nav{width:200px;margin-top:-183px;margin-left:130px;}
  312.  
  313. #pagination {
  314. font-style:bold;
  315. padding:2px;
  316. font-family:'montserrat';
  317. letter-spacing:0px;
  318. font-size:15px;
  319. text-align:center;
  320. margin-top:10px;
  321. padding:2px;
  322. text-transform:lowercase;
  323. }
  324.  
  325.  
  326. /*POST INFO*/
  327.  
  328.  
  329. #info{height:auto ;padding-top:5px; display:block; padding-bottom:0px; width:auto; font-size:10px; font-family:arial; text-transform:uppercase;border-top:1px solid {color:Borders}; text-align:left; }
  330.  
  331. #info a {
  332. text-align:center;
  333. color:{color:Post Links};
  334. }
  335.  
  336. #info a:hover {
  337. -moz-transition-duration:0.3s;
  338. -webkit-transition-duration:0.3s;
  339. -o-transition-duration:0.3s;
  340. color:{color:Hover}
  341. }
  342.  
  343. #tags {
  344. float:left;
  345. width:489px;
  346. margin-top:-7px;
  347. margin-left:-5px;
  348. text-align:left;
  349. font-size:7px;
  350. padding:5px;
  351. font-size:8px;
  352. opacity:1;
  353. transition-duration: 0.5s;
  354. -moz-transition-duration: 0.5s;
  355. -webkit-transition-duration: 0.5s;
  356. -o-transition-duration: 0.5s
  357. color:{color:Post Links};
  358. }
  359.  
  360. #tags a {
  361. letter-spacing:0px;
  362. font-size:8px;
  363. text-align:center;
  364. font-family:'CALIBRI';
  365. text-decoration:none;
  366. display:inline-block;
  367. color:#ddd;
  368. }
  369.  
  370. #tags a:hover {
  371. background-color:#fff;
  372. -moz-transition-duration:0.3s;
  373. -webkit-transition-duration:0.3s;
  374. -o-transition-duration:0.3s;
  375. color:{color:Hover};
  376. }
  377.  
  378. /*QUESTION*/
  379.  
  380. #ask {
  381. color:{color:text};
  382. padding:5px;
  383. font-family:'arial';
  384. font-size:10px;
  385. letter-spacing:0px;
  386. text-align:left;
  387. text-transform:lowercase;
  388. line-height:150%;
  389. background-color:{color:post container};
  390.  
  391. box-shadow: 0px 3px 0px {color:link};
  392. }
  393.  
  394. #ask a{color:{color:link};}
  395.  
  396.  
  397. {CustomCSS}</style></head><body>
  398.  
  399.  
  400. </div>
  401. </div>
  402. <div id="sidebar">
  403. <div id="sidebarimage">
  404. <div id="foo"> <div id="description"><span style="height:200px;overlow:auto;">{Description}</span>
  405. </div>
  406. <img src="{image:sbar 1}"><br><img src="{image:sbar 2}"><br><img src="{image:sbar 3}"><br><img src="{image:sbar 4}">
  407. <div id="nav" >
  408. <a href="/"><i class="fa fa-spinner fa-5x"></i></a><a href="#?w=400" rel="box1" class="poplight"><i class="fa fa-comments-o fa-5x"></i></a><a href="#?w=400" rel="box2" class="poplight"><i class="fa fa-compass fa-5x"></i></a>
  409. <a href="#?w=400" rel="box3" class="poplight"><i class="fa fa-paper-plane fa-5x"></i></a>
  410. <a href="#?w=400" rel="box4" class="poplight"><i class="fa fa-moon-o fa-5x "></i></a>
  411.  
  412.  
  413. <a href="http://lakeffectkds.tumblr.com" title="coded by alex!"><i class="fa fa-code fa-4x"></i></a>
  414. {block:Pagination}
  415. <div id="pagination">
  416. {block:PreviousPage}<a href="{PreviousPage}">prev</a>{/block:PreviousPage}
  417. — {block:NextPage}<a href="{NextPage}">next</a>{/block:NextPage}
  418. </div>
  419. {/block:Pagination}
  420. </div>
  421. </div>
  422.  
  423.  
  424.  
  425.  
  426. </div></div>
  427.  
  428.  
  429.  
  430. <div id="entries" style="background-color:{color:post container}; margin-top:50px;">
  431. {block:posts}
  432. <div id="posts">
  433.  
  434. {block:Text}{block:Title}<h1>{Title}</h1>{/block:Title}{Body}{/block:Text}
  435.  
  436.  
  437. {block:Quote}<h1><span class="fa fa-quote-left fa-3x pull-left"> </span> {Quote} </h1><p> <TEXT-ALIGN:"right";>— {Source}<br>{/block:Quote}
  438.  
  439. {block:Link}<a href="{URL}"><h1>{Name}</h1></a>
  440. {block:Description}<p>{Description}</p>{/block:Description}{/block:Link}
  441.  
  442. {block:Photo}<center><img src="{PhotoURL-400}"/></center>
  443. {/block:Photo}
  444.  
  445. {block:Photoset}<center>{Photoset-400}</center>
  446. {/block:Photoset}
  447.  
  448. {block:Chat}<ul class="chat">{block:Lines}<li class="user_{UserNumber}">{block:Label}<span class="label">{Label}</span>{/block:Label}&nbsp;{Line}</li>{/block:Lines}</ul>{/block:Chat}
  449.  
  450.  
  451.  
  452. {block:Video}{Video-400}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  453.  
  454. {block:Answer}<div id="ask"><span class="fa fa-quote-left fa-3x pull-left"> </span><h3 style="color:{color:text}"><i style="color {color:text}">{Asker} whispered: </i>{Question}</h3></div>{Answer}{/block:Answer}
  455.  
  456.  
  457.  
  458. <div class="playbox"><div class="playbutton">{block:AudioPlayer}{AudioPlayerwHITE}{/block:AudioPlayer}</div></div>
  459.  
  460. {block:Caption}{Caption}{/block:Caption}
  461.  
  462. <center><div id="info">{block:Date}<a href="{Permalink}"> <a href="{ReblogURL}" target="_blank" class="details"> <b><span class= "fa fa-refresh"></span> reblog </b></a> / <a href="{Permalink}"> posted {ShortMonth} {DayOfMonth}{DayOfMonthSuffix} {12Hour}:{Minutes}{AmPm}</a{/block:Date}<i class= "fa fa-calendar " ></i>{block:RebloggedFrom} ( <a href="{ReblogParentURL}">Via</a>{/block:RebloggedFrom}{block:ContentSource} &nbsp; <a href="{SourceURL}">Source</a> {/block:ContentSource}{block:RebloggedFrom} ){/block:RebloggedFrom}{block:NoteCount} <i>with</i> <a href="{Permalink}">{NoteCountWithLabel}</a>{/block:NoteCount}</center><p>
  463.  
  464. <center>{block:HasTags}{block:Tags} <i class="fa fa-tags"></i> <a href="{TagURL}">{Tag} </a> {/block:Tags}{/block:HasTags}
  465. <br /></div>
  466.  
  467. {/block:Posts}
  468.  
  469.  
  470. {block:PostNotes}{PostNotes}{/block:PostNotes}<br />
  471. </div>
  472. </div>
  473. </body>
  474. <div id="box1" class="popup_block"> <h3 style="text-align: center; font-size: 20px; ">{text:ask title}</h2>
  475. <iframe frameborder="0" height="200" id="ask_form" scrolling="yes" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" width="100%"></iframe>
  476. </div>
  477.  
  478. <div id="box2" class="popup_block"><h3 style="text-align: center; font-size: 20px; ">{text:nav title}</h2>
  479. <div style="height: 150px; overflow: auto; text-align: center; font-size: 15px; font-family: 'montserrat';">
  480. <div style="width: 48%; height: 20px; background-color:{color:popup boxes}; padding: 5px;"><strong>link</strong></div>
  481. <div style="width: 48%; height: 20px; background-color:{color:popup boxes}; margin-left:210px; margin-top: -31px; padding: 5px;"><strong>&nbsp;link&nbsp;</strong></div>
  482. <p></p>
  483. <div style="width: 48%; height: 20px; background-color:{color:popup boxes}; padding: 5px;"><strong>link</strong></div>
  484. <div style="width: 48%; height: 20px; background-color:{color:popup boxes}; margin-left: 210px; margin-top: -31px; padding: 5px;"><strong>&nbsp;link&nbsp;</strong></div>
  485. <p></p>
  486. <div style="width: 48%; height: 20px; background-color:{color:popup boxes}; padding: 5px;"><strong>link</strong></div>
  487. <div style="width: 48%; height: 20px; background-color:{color:popup boxes}; margin-left:210px; margin-top: -31px; padding: 5px;"><strong>&nbsp;link&nbsp;</strong></div>
  488. <p></p>
  489. <div style="width: 48%; height: 20px; background-color:{color:popup boxes}; padding: 5px;"><strong>link</strong></div>
  490. <div style="width: 48%; height: 20px; background-color:{color:popup boxes}; margin-left:210px; margin-top: -31px; padding: 5px;"><strong>&nbsp;link&nbsp;</strong></div>
  491. <p></p>
  492. </div>
  493. <p style="float: center; margin-left:50px; image-border: 10px solid {color:img border};"><img src="https://66.media.tumblr.com/f5072631584e96aa00418472df6700c9/tumblr_o70w7tbHRl1v79f5go1_100.gif" />&nbsp;<img src="https://66.media.tumblr.com/f5072631584e96aa00418472df6700c9/tumblr_o70w7tbHRl1v79f5go1_100.gif" />&nbsp;<img src="https://66.media.tumblr.com/f5072631584e96aa00418472df6700c9/tumblr_o70w7tbHRl1v79f5go1_100.gif" /></p></p>
  494. </div>
  495.  
  496. <div id="box3" class="popup_block">
  497. <h3 style="text-align: center; font-size: 20px;">{text:about title}</h2>
  498. <div style="height: 120px; overflow: auto; text-align: center; font-size: 15px; font-family: 'montserrat'; width: 100%;padding:5px;background-color:{color:popup boxes}">{text:about content}</p>
  499. </div>
  500. <h3 style="text-align: center; font-size: 20px;">{text:rules title}</h2>
  501. <div style="height: 120px; overflow: auto; text-align: center; font-size: 15px; font-family: 'montserrat'; width: 100%; padding:5px; background-color:{color:popup boxes}">
  502. {text:rules content}
  503. </div>
  504. </div>
  505. </div>
  506.  
  507. <div id="box4" class="popup_block">
  508. <h2 style="text-align: center; font-size: 20px;"><span style="font-family: montserrat; font-size: 15px; font-weight: normal; line-height: 1.4;">&nbsp;</span>&nbsp;( MUSES ! )</h2>
  509. <p style="text-align: center; image-border: 10px solid {color: img borders};"><a href="/" title="( MUSE NAME ! )"><img src="https://67.media.tumblr.com/db91f8855d1e5eacccddd27705280560/tumblr_o70w7tbHRl1v79f5go2_100.gif" style="border-radius: 100px; width: 80px; height: 80px;" /></a><a href="/" title="( MUSE NAME ! )"><img src="https://67.media.tumblr.com/db91f8855d1e5eacccddd27705280560/tumblr_o70w7tbHRl1v79f5go2_100.gif" style="border-radius: 100px; width: 80px; height: 80px;" /></a><a href="/" title="( MUSE NAME ! )"><img src="https://67.media.tumblr.com/db91f8855d1e5eacccddd27705280560/tumblr_o70w7tbHRl1v79f5go2_100.gif" style="border-radius: 100px; width:80px; height: 80px;" /></a><a href="/" title="( MUSE NAME ! )"><img src="https://67.media.tumblr.com/db91f8855d1e5eacccddd27705280560/tumblr_o70w7tbHRl1v79f5go2_100.gif" style="border-radius: 100px; width: 80px; height: 80px;" /></a><a href="/" title="( MUSE NAME ! )"><img src="https://67.media.tumblr.com/db91f8855d1e5eacccddd27705280560/tumblr_o70w7tbHRl1v79f5go2_100.gif" style="border-radius: 100px; width: 80px; height: 80px;" /></a><a href="/" title="( MUSE NAME ! )"><img src="https://67.media.tumblr.com/db91f8855d1e5eacccddd27705280560/tumblr_o70w7tbHRl1v79f5go2_100.gif" style="border-radius: 100px; width: 80px; height: 80px;" /></a></p>
  510. </div>
  511.  
  512.  
  513.  
  514.  
  515. </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!