API tools faq
paste
heartilys

PETALS! V3 ( PAGE 01 / WOODSBEYOND )

heartilys
Feb 20th, 2019
1,020
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.02 KB | None | 0 0
raw download clone embed print report
  1. <!--- PETALS 03 ! ——— a navigation page by @woodsbeyond / rosevois.
  2.  
  3. — edit / customize the theme to your heart's content! i've done my best to organize and include instructions to the best of my ability, but if you have trouble with anything, feel free to ask!
  4. — DO NOT delete the credit. if you add in a background image and it somehow obstructs the credit / makes it harder to see, you may adjust the position.
  5. — find a bug, or something that looks wonky when you start customizing it? let me know so i can adjust it!
  6.  
  7. COLOUR PALETTE ! ——— these are the colours i've used within the code. they are listed here so you can easily do a find + replace on them to edit in your preferred colour.
  8.  
  9. #d2d2d2 : grey. used for icon & container borders.
  10. #f0f0f0 : page background & title image border.
  11. #fafafa : container background, header image text, header image border.
  12. #bb8b86 : header text ( for character name when you click on the pop up ), bold, scrollbar, & connection name.
  13. #98b5ae : links, italics, & text line above muse navigation on pop up.
  14. #a9726d : muse navigation links on pop up.
  15. #373334 : text.
  16. #ededed : fade background on pop up. --->
  17.  
  18.  
  19. <!DOCTYPE html>
  20. <html>
  21. <head>
  22.  
  23. <title>PETALS, A MUSE PAGE.</title> <!--- Change the title of your page here --->
  24. <link rel="shortcut icon" href="{Favicon}">
  25. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  26.  
  27. <!-- POP UPS -->
  28.  
  29. <script type="text/javascript"
  30. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  31.  
  32. <script>
  33. $(document).ready(function() {
  34. //
  35. $('a.poplight[href^=#]').click(function() {
  36. var popID = $(this).attr('rel'); //Get Popup Name
  37. var popURL = $(this).attr('href'); //Get Popup href to define size
  38. var query= popURL.split('?');
  39. var dim= query[1].split('&');
  40. var popWidth = dim[0].split('=')[1]; //Gets the first query string value
  41. $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
  42. var popMargTop = ($('#' + popID).height() + 80) / 2;
  43. var popMargLeft = ($('#' + popID).width() + 80) / 2;
  44. //Apply Margin to Popup
  45. $('#' + popID).css({
  46. 'margin-top' : -popMargTop,
  47. 'margin-left' : -popMargLeft
  48. });
  49. $('body').append('<div id="fade"></div>');
  50. $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
  51. return false;
  52. });
  53. $('a.close, #fade').live('click', function() {
  54. $('#fade , .popup_block').fadeOut(function() {
  55. $('#fade, a.close').remove(); //fade them both out
  56. });
  57. return false;
  58. });
  59. });
  60. </script>
  61.  
  62. <!-- TABS -->
  63.  
  64. <script>
  65.  
  66. $(document).ready(function(){
  67. $("ul#tabs li").click(function(e){
  68. if (!$(this).hasClass("active")) {
  69. var tabNum = $(this).index();
  70. var nthChild = tabNum+1;
  71. $("ul#tabs li.active").removeClass("active");
  72. $(this).addClass("active");
  73. $("ul#tab li.active").removeClass("active");
  74. $("ul#tab li:nth-child("+nthChild+")").addClass("active");
  75. }
  76. });
  77. });
  78.  
  79. </script>
  80.  
  81. <!-- TOOLTIPS -->
  82.  
  83. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  84. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  85. <script>
  86. (function($){
  87. $(document).ready(function(){
  88. $("[title],a[title],img[title]").style_my_tooltips({
  89. tip_follows_cursor:true,
  90. tip_delay_time:90,
  91. tip_fade_speed:600,
  92. attribute:"title"
  93. });
  94. });
  95. })(jQuery);
  96. </script>
  97.  
  98. <!--- FONT SCRIPTS --->
  99.  
  100. <link href="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet">
  101.  
  102. <!--- LINEAR ICONS --->
  103.  
  104. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  105.  
  106. <style>
  107.  
  108. /* TOOLTIPS */
  109.  
  110. .tooltip{
  111. display:inline;
  112. position:absolute;
  113. }
  114.  
  115. #s-m-t-tooltip {
  116. color:#fafafa;
  117. border:3px double #cecece;
  118. margin:15px 10px 10px 10px;
  119. font-size:13px;
  120. text-transform:uppercase;
  121. font-family: 'Yanone Kaffeesatz', sans-serif;
  122. text-align:center;
  123. text-shadow:
  124. -1px -1px 0 #000,
  125. 1px -1px 0 #000,
  126. -1px 1px 0 #000,
  127. 1px 1px 0 #000;
  128. padding:4px 8px 2px 8px;
  129. background:url('https://66.media.tumblr.com/7f687423c404b80b6782c879ae692680/tumblr_inline_pkdp18xPtG1wp1vtq_1280.png') repeat;
  130. z-index:9999999999; repeat;
  131. }
  132.  
  133. /* SCROLLBAR */
  134.  
  135. ::-webkit-scrollbar {
  136. width:7px;
  137. background-color:#fafafa;
  138. }
  139.  
  140. ::-webkit-scrollbar-thumb{
  141. border-top:10px solid #fafafa;
  142. border-left:3px solid #fafafa;
  143. border-right:3px solid #fafafa;
  144. background-color:#bb8b86;
  145. }
  146.  
  147. /* GENERAL STYLING */
  148.  
  149. a {
  150. color:#98b5ae;
  151. text-transform:uppercase;
  152. text-decoration:underline;
  153. font-weight:bold;
  154. letter-spacing:1px;
  155. }
  156.  
  157. b, strong {
  158. font-size:13px;
  159. font-family: 'times', sans-serif;
  160. color: #bb8b86;
  161. }
  162.  
  163. i, em {
  164. color:#98b5ae;
  165. }
  166.  
  167. @font-face { font-family: "valentine"; src: url('https://dl.dropboxusercontent.com/s/3nei1qfbo38y9kk/valentine.ttf') ;}
  168.  
  169. h1 {
  170. font-family: 'Yanone Kaffeesatz', sans-serif;
  171. font-size:12px;
  172. color:#fff;
  173. text-align:center;
  174. text-transform:uppercase;
  175. letter-spacing:2.5px;
  176. word-spacing:4px;
  177. font-weight:bold;
  178. border:3px double #fafafa;
  179. background-image:url('https://66.media.tumblr.com/2d173b59085dfefb146b48c530f04b10/tumblr_inline_pkdpb8xRDW1wp1vtq_1280.png'); /* section heading image for the pop up. */
  180. background-attachment:repeat;
  181. padding: 4px;
  182. margin-bottom:15px;
  183. text-shadow:
  184. -1px -1px 0 #000,
  185. 1px -1px 0 #000,
  186. -1px 1px 0 #000,
  187. 1px 1px 0 #000;
  188. }
  189.  
  190.  
  191. h2 {
  192. width:475px;
  193. font-family:'valentine';
  194. font-size:100px;
  195. color:#fafafa;
  196. text-align:center;
  197. font-weight:bold;
  198. text-transform:lowercase;
  199. transform:rotate(-3deg);
  200. margin-top:190px;
  201. margin-left:15px;
  202. line-height:75px;
  203. position:fixed;
  204. }
  205.  
  206.  
  207. /* MAIN AREAS */
  208.  
  209. body {
  210. background-color:#f0f0f0;
  211. font-family: 'arial', sans-serif;
  212. font-size:10.5px;
  213. color:#373334;
  214. line-height:1.5;
  215. letter-spacing:.5px;
  216.  
  217. }
  218.  
  219. /* TITLE & NAV */
  220.  
  221.  
  222. #title {
  223. width:500px;
  224. height:470px;
  225. background:url('https://66.media.tumblr.com/c08bfd7378ec3ae9da93cef023716031/tumblr_inline_pn5zm9TSdX1wvl34y_1280.png'); /* image beside the muse list, behind the title */
  226. border:3px double #f0f0f0;
  227. top:0px;
  228. bottom:0px;
  229. left:0px;
  230. right:0px;
  231. margin:auto;
  232. position:fixed;
  233. }
  234.  
  235.  
  236. #plus a {
  237. position:fixed;
  238. font-size:25px;
  239. color:#bb8b86;
  240. text-align:center;
  241. text-decoration:none;
  242. margin-top:420px;
  243. margin-left:450px;
  244. background-color:#fafafa;
  245. width:30px;
  246. height:30px;
  247. line-height:30px;
  248. padding:2px;
  249. border-radius:100px;
  250. }
  251.  
  252. /* POP UPS */
  253.  
  254. .popup_block{
  255. display:none;
  256. background:#fafafa;
  257. text-align:justify;
  258. padding:20px;
  259. outline:1px solid #d2d2d2;
  260. position:fixed;
  261. top:52%;left:51.3%;
  262. z-index: 99999;
  263. width:480px;
  264. height:540px;
  265. overflow:hidden;
  266. }
  267.  
  268. *html #fade {position: absolute;}
  269. *html .popup_block {position: absolute;}
  270. #fade {
  271. display:none;
  272. position:fixed;
  273. left:0px;
  274. top:0px;
  275. width:100%;
  276. height:100%;
  277. z-index:9999;
  278. background:#ededed;
  279. opacity:.6; /* change opacity to 1 for a solid colour, or .1-.9 for varying degrees of transparency. */
  280. }
  281.  
  282. /* MUSE INFO */
  283.  
  284. #poptag {
  285. width:410px;
  286. text-align:center;
  287. margin-top:15px;
  288. margin-bottom:5px;
  289. margin-left:22px;
  290. font-size:12px;
  291. color:#98b5ae;
  292. font-weight:bold;
  293. text-transform:uppercase;
  294. }
  295.  
  296. #popnav {
  297. width:410px;
  298. text-align:center;
  299. margin-left:22px;
  300. font-size:13px;
  301. padding:10px;
  302. border-top:1px solid #cecece;
  303. }
  304.  
  305. #popnav a {
  306. color:#a9726d;
  307. text-decoration:none;
  308. font-weight:bold;
  309. padding:4px;
  310. }
  311.  
  312. /* CREDIT — DO NOT TOUCH! */
  313.  
  314.  
  315. #credit {
  316. bottom:10px;
  317. right:10px;
  318. border:1px solid #d2d2d2;
  319. font-size:10px;
  320. font-family: 'Open Sans', sans-serif;
  321. position:fixed;
  322. border-radius:100px;
  323. }
  324.  
  325. #credit a {
  326. color:#bb8b86;
  327. padding:5px;
  328. text-decoration:none;
  329. background-color:#fafafa;
  330. border-radius:100px;
  331. transition-duration:1s;
  332. -moz-transition-duration:1s;
  333. -webkit-transition-duration:1s;
  334. -o-transition-duration:1s;
  335. }
  336.  
  337. #credit a:hover {
  338. color:#98b5ae;
  339. text-decoration:none;
  340. background-color:#fafafa;
  341. }
  342.  
  343.  
  344. </style>
  345.  
  346. </head>
  347. <body>
  348.  
  349. <div id="title">
  350.  
  351. <h2> navigate </h2>
  352.  
  353. <div id="plus"> <a href="#?w=480" rel="pop" class="poplight" title="click here!">+</a> </div>
  354.  
  355. </div>
  356.  
  357.  
  358. <!--- START POP UP! --->
  359.  
  360. <div id="pop" class="popup_block" style="width:auto;padding:16px;">
  361.  
  362. <div id="poptag"> put your title here ! </div>
  363.  
  364. <div id="popnav">
  365.  
  366. <!--- this is where your links go. place your url in the "s following the 'href='
  367.  
  368. if you don't need all the links, just delete that line and the &nbsp; bits after it. you can change the icons at http://honeybee.suiomi.com/, or if you'd rather use linear icons like the other versions of PETALS, visit this link: https://linearicons.com/free#cdn --->
  369.  
  370. <a href="/" title="one"><span class="th th-chat-bubble"></span></a> &nbsp;&nbsp;&nbsp;
  371. <a href="/" title="two"><span class="th th-list-o"></span></a> &nbsp;&nbsp;&nbsp;
  372. <a href="/" title="three"><span class="th th-hashtag"></span></a> &nbsp;&nbsp;&nbsp;
  373. <a href="/" title="four"><span class="th th-heart-1-o"></span></a> &nbsp;&nbsp;&nbsp;
  374. <a href="/" title="five"><span class="th th-cross"></span></a> &nbsp;&nbsp;&nbsp;
  375. <a href="/" title="six"><span class="th th-camera"></span></a> &nbsp;&nbsp;&nbsp;
  376. <a href="/" title="seven"><span class="th th-quote-up"></span></a> &nbsp;&nbsp;&nbsp;
  377. <a href="/" title="eight"><span class="th th-music"></span></a> &nbsp;&nbsp;&nbsp;
  378. <a href="/" title="nine"><span class="th th-diamond"></span></a> &nbsp;&nbsp;&nbsp;
  379. <a href="/" title="ten"><span class="th th-settings"></span></a>
  380.  
  381. </div>
  382.  
  383.  
  384. <div style="margin-top:10px;padding-left:10px;padding-right:10px;height:450px;overflow-y:scroll;">
  385.  
  386. <!--- this is where your rules go. wrap your headings in <h1>HEADING</h1>, type your info in:
  387.  
  388. <ul style="padding-left:15px;padding-right:15px;margin-bottom:20px;">
  389. info here!
  390. </ul>
  391.  
  392. i recommend excluding the 'margin-bottom:20px' on your last section.
  393.  
  394. alternately, you can use a single instance of the <ul> tags and forego the headings entirely, depending on how you prefer to format your rules. --->
  395.  
  396. <h1> section one </h1>
  397.  
  398. <ul style="padding-left:15px;padding-right:15px;margin-bottom:20px;">
  399.  
  400. add your rules here! vestibulum fermentum non lectus at cursus. cras suscipit, risus at porta hendrerit, risus metus facilisis magna, et laoreet ex est ac nulla. vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; suspendisse facilisis leo lectus, sit amet pretium eros pretium sed. etiam pretium finibus egestas. donec sed vehicula risus. aliquam tincidunt massa at ultricies rutrum. aliquam erat volutpat.
  401.  
  402. </ul>
  403.  
  404. <h1> section two </h1>
  405.  
  406. <ul style="padding-left:15px;padding-right:15px;margin-bottom:20px;">
  407.  
  408. add your rules here! vestibulum fermentum non lectus at cursus. cras suscipit, risus at porta hendrerit, risus metus facilisis magna, et laoreet ex est ac nulla. vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; suspendisse facilisis leo lectus, sit amet pretium eros pretium sed. etiam pretium finibus egestas. donec sed vehicula risus. aliquam tincidunt massa at ultricies rutrum. aliquam erat volutpat.
  409.  
  410. </ul>
  411.  
  412. <h1> section three </h1>
  413.  
  414. <ul style="padding-left:15px;padding-right:15px;margin-bottom:20px;">
  415.  
  416. add your rules here! vestibulum fermentum non lectus at cursus. cras suscipit, risus at porta hendrerit, risus metus facilisis magna, et laoreet ex est ac nulla. vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; suspendisse facilisis leo lectus, sit amet pretium eros pretium sed. etiam pretium finibus egestas. donec sed vehicula risus. aliquam tincidunt massa at ultricies rutrum. aliquam erat volutpat.
  417.  
  418. </ul>
  419.  
  420. <h1> section three </h1>
  421.  
  422. <ul style="padding-left:15px;padding-right:15px;">
  423.  
  424. add your rules here! vestibulum fermentum non lectus at cursus. cras suscipit, risus at porta hendrerit, risus metus facilisis magna, et laoreet ex est ac nulla. vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; suspendisse facilisis leo lectus, sit amet pretium eros pretium sed. etiam pretium finibus egestas. donec sed vehicula risus. aliquam tincidunt massa at ultricies rutrum. aliquam erat volutpat.
  425.  
  426. </ul>
  427.  
  428. </div>
  429.  
  430. </div>
  431. <!--- POP UP END! --->
  432.  
  433. <!--- CREDIT. DO NOT TOUCH! --->
  434.  
  435. <div id="credit"><a href="http://woodsbeyond.tumblr.com" title="woodsbeyond"><span class="lnr lnr-heart"></span></a></div>
  436.  
  437. </body>
  438. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!