ooksie

magnolias

Jan 16th, 2021 (edited)
697
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. [comment]inspired by tumblr theme "jjong" by jcnnie: [[URL="https://jcnnie.tumblr.com/jjong"]jjong[/URL]]
  2.  
  3. fonts used:
  4. [font=Roboto]name[/font]
  5. [font=Karla]body[/font]
  6.  
  7. to replace fonts, add/replace them here, and then in the variables below under *fonts; check uxie's tech support in nine lives for more details ( ‾́ ◡ ‾́ )
  8.  
  9. [/comment][border=transparent;
  10. *background colour;
  11. --bg-color: #f7ece6;
  12. *header colour;
  13. --color-1: #EDBC9B;
  14. *image + music player container colour;
  15. --color-2: #eac6ad;
  16. *post textbox background colour;
  17. --color-3: #edd6c9;
  18.  
  19. *dialogue colour;
  20. --color-4: #b57553;
  21. *buttons + name colour;
  22. --h-color: #fcf5f2;
  23. *text colour;
  24. --t-color: #382d26;
  25.  
  26. *fonts;
  27. --name: 'Roboto', sans-serif;
  28. --body: 'Karla', sans-serif;
  29.  
  30. *small icon;
  31. --img-1: url('https://cdn.discordapp.com/attachments/754192858990247997/754193577482911794/76841307_615950592280097_709654928507676940_n.png');
  32. *large image;
  33. --img-2: url('https://cdn.discordapp.com/attachments/695254730104111155/754192550323159091/74698391_1369404696560630_4215704957392820201_n.png');
  34. * * * outfit image (replace the link here with the link to your outfit!);
  35. --outfit: url('https://i.pinimg.com/originals/cd/58/5a/cd585a532d1462e2b14d4f6af128c050.jpg');
  36.  
  37. height:fit-content; min-height:450px; width:100%; max-width:700px; padding:0; padding-bottom:20px; margin:auto; line-height:0%; position:relative;][border=transparent; height:fit-content; width:100%; max-width:700px; padding:0; position:relative; display:flex; flex-flow: row wrap; justify-content:center; border-radius:2px; overflow:hidden;]
  38. [comment]----header (tabs cover)----[/comment]
  39. [border=transparent; height:68px; width:700px; padding:5px 10px 5px 10px; box-sizing:border-box; background-color: var(--color-1); display:flex; flex-flow: row-reverse nowrap; align-items:center; justify-content:flex-start; position:absolute; top:0; left:0; pointer-events:none;]
  40. [comment]----small icon----[/comment]
  41. [border=transparent; box-sizing:border-box; height:53px; width:53px; border:4px solid var(--bg-color); border-radius:50%; background: var(--img-1); padding:0px; background-size:cover; flex-shrink:0; z-index:5; pointer-events:none;
  42. /*edit the following to adjust the cropping of the image*/ background-position: 50% 50%;][/border]
  43. [comment]----name----[/comment]
  44. [border=transparent; height:fit-content; width:fit-content; max-width:255px; padding:0px 10px 0px 15px; letter-spacing:2px; font-size:30px; color: var(--h-color); text-transform:uppercase; font-family: var(--name); font-weight:bold; line-height:120%; background-color: var(--color-1); position:relative; z-index:6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;][comment]
  45. ----* * * name here----
  46. [/comment]ye-won[/border]
  47.  
  48. [comment]----button container-----[/comment]
  49. [border=transparent; height:100%; width:100%; display:flex; flex-flow: row nowrap; padding:0px; pointer-events:none; background-color: var(--color-1); align-items:center; color: var(--h-color); z-index:4; position:absolute; left:0; top:0;]
  50. [border=transparent; height:100%; width:28px; padding:0px; font-size:0px; pointer-events:auto;]filler[/border]
  51. [border=transparent; height:fit-content; width:fit-content; padding:0px; font-size:17px;][comment]
  52. ----* * * button icon here----
  53. [/comment][fa]far fa-heartbeat[/fa][/border]
  54.  
  55. [border=transparent; height:100%; width:46px; padding:0px; font-size:0px; pointer-events:auto;]filler[/border]
  56. [border=transparent; height:fit-content; width:fit-content; padding:0px; font-size:17px;][comment]
  57. ----* * * button icon here----
  58. [/comment][fa]far fa-tshirt[/fa][/border]
  59.  
  60. [border=transparent; height:100%; width:46px; padding:0px; font-size:0px; pointer-events:auto;]filler[/border]
  61. [border=transparent; height:fit-content; width:fit-content; padding:0px; font-size:17px;][comment]
  62. ----* * * button icon here----
  63. [/comment][fa]far fa-map-marker-alt[/fa][/border]
  64.  
  65. [border=transparent; height:100%; width:46px; padding:0px; font-size:0px; pointer-events:auto;]filler[/border]
  66. [border=transparent; height:fit-content; width:fit-content; padding:0px; font-size:17px;][comment]
  67. ----* * * button icon here----
  68. [/comment][fa]far fa-users[/fa][/border]
  69.  
  70. [border=transparent; height:100%; width:46px; padding:0px; font-size:0px; pointer-events:auto;]filler[/border]
  71. [border=transparent; height:fit-content; width:fit-content; padding:0px; font-size:17px;][comment]
  72. ----* * * button icon here----
  73. [/comment][fa]far fa-comment-exclamation[/fa][/border]
  74.  
  75. [border=transparent; height:100%; flex-grow:1; margin-right:200px; padding:0px; font-size:0px; pointer-events:auto;]filler[/border]
  76. [/border]
  77. [/border]
  78. [comment]----header (tabs cover) end-----[/comment]
  79.  
  80. [comment]----tabs----[/comment]
  81. [border=transparent; height:68px; width:700px; overflow:hidden; padding:0px;][border=transparent; padding:0; margin:23px 0 0 -75px;][tabs]
  82.  
  83. [tab=.][border=transparent; font-size:0px;]home (filler tab)[/border][/tab]
  84.  
  85.  
  86. [comment]----tab one (mood)----[/comment]
  87. [tab=1][border=transparent; height:fit-content; width:100%; padding:10px; box-sizing:border-box; position:absolute; top:85px; left:0; z-index:7; pointer-events:none; display:flex; flex-flow: row wrap;]
  88. [border=transparent; height:295px; flex:2; min-width:200px; padding:8px; box-sizing:border-box; margin:10px; pointer-events:auto;][border=transparent; height:100%; width:100%; padding:15px 10px; box-sizing:border-box; display:flex; flex-flow: row wrap; align-items:flex-end; align-content:flex-end;]
  89. [border=transparent; height:fit-content; width:100%; padding:10px; box-sizing:border-box; background-color: var(--bg-color); opacity:0.9; display:flex; flex-flow: row wrap; font-family: var(--body); color: var(--t-color); border-radius:8px;]
  90. [comment]----tag header-----[/comment]
  91. [border=transparent; width:100%; height:fit-content; font-weight:bold; text-transform:uppercase; font-size:12px; padding:0px; line-height:130%; letter-spacing:0.5px;][comment]
  92. ----* * * header here ----
  93. [/comment]mood[/border]
  94. [comment]----tag contents-----[/comment]
  95. [border=transparent; width:100%; height:fit-content; font-size:11px; line-height:120%; padding:0px;][comment]
  96. ----* * * mood here -----
  97. [/comment]text here[/border]
  98. [/border]
  99. [/border][/border]
  100. [border=transparent; height:295px; flex:3 0; min-width:300px; padding:0; font-size:0; margin:10px;]filler[/border]
  101. [/border][/tab]
  102. [comment]----tab one end----[/comment]
  103.  
  104.  
  105. [comment]----tab two (outfit -- to change the outfit image, change the link at the variables up above!)----[/comment]
  106. [tab=2][border=transparent; height:fit-content; width:100%; padding:10px; box-sizing:border-box; position:absolute; top:85px; left:0; z-index:7; pointer-events:none; display:flex; flex-flow: row wrap;]
  107. [border=transparent; height:295px; flex:2; min-width:200px; padding:8px; box-sizing:border-box; margin:10px; pointer-events:auto;][border=transparent; height:100%; width:100%; padding:15px 10px; box-sizing:border-box; display:flex; flex-flow: row wrap; align-items:flex-end; align-content:flex-end;]
  108. [border=transparent; height:fit-content; width:100%; padding:10px; box-sizing:border-box; background-color: var(--bg-color); opacity:0.9; display:flex; flex-flow: row wrap; font-family: var(--body); color: var(--t-color); border-radius:8px; overflow:hidden;]
  109. [border=transparent; padding:0px; background-color: var(--bg-color); width:100%; position:relative; font-size:0px; top:15px;][accordion=100%]
  110. {slide=[border=transparent; background-color: var(--bg-color); height:fit-content; font-weight:bold; letter-spacing:1px; font-size:12px; text-transform:uppercase; line-height:100%; padding:0px; padding-bottom:8px; font-variant: normal; margin:-7px;][border=transparent; width:100%; height:fit-content; position:relative; top:-10px; padding:0px; color: var(--t-color); display:flex; justify-content:space-between;][comment]
  111. ----* * * tag header ----
  112. [/comment]outfit[comment]
  113. ---* * * instructions
  114. [/comment][border=transparent; padding:0; font-size:8px; color: var(--color-1); letter-spacing:1.5px;]click[/border][/border][/border]}
  115. [border=transparent; height:150px; background-color: var(--bg-color); margin: -10px; padding:10px; display:flex; align-items:center; overflow:hidden;]
  116. [border=transparent; height:150px; width:150px; background: var(--outfit) 50% 50%; padding:0px; background-size:cover; margin:auto; position:relative; top:-15px;][/border]
  117. [/border]
  118. {/slide}
  119. [/accordion][/border]
  120. [/border]
  121. [/border][/border]
  122. [border=transparent; height:295px; flex:3 0; min-width:300px; padding:0; font-size:0; margin:10px;]filler[/border]
  123. [/border][/tab]
  124. [comment]----tab two end----[/comment]
  125.  
  126.  
  127. [comment]----tab three (location)----[/comment]
  128. [tab=3][border=transparent; height:fit-content; width:100%; padding:10px; box-sizing:border-box; position:absolute; top:85px; left:0; z-index:7; pointer-events:none; display:flex; flex-flow: row wrap;]
  129. [border=transparent; height:295px; flex:2; min-width:200px; padding:8px; box-sizing:border-box; margin:10px; pointer-events:auto;][border=transparent; height:100%; width:100%; padding:15px 10px; box-sizing:border-box; display:flex; flex-flow: row wrap; align-items:flex-end; align-content:flex-end;]
  130. [border=transparent; height:fit-content; width:100%; padding:10px; box-sizing:border-box; background-color: var(--bg-color); opacity:0.9; display:flex; flex-flow: row wrap; font-family: var(--body); color: var(--t-color); border-radius:8px;]
  131. [comment]----tag header-----[/comment]
  132. [border=transparent; width:100%; height:fit-content; font-weight:bold; text-transform:uppercase; font-size:12px; padding:0px; line-height:130%; letter-spacing:0.5px;][comment]
  133. ----* * * header here ----
  134. [/comment]location[/border]
  135. [comment]----tag contents-----[/comment]
  136. [border=transparent; width:100%; height:fit-content; font-size:11px; line-height:120%; padding:0px;][comment]
  137. ----* * * location here -----
  138. [/comment]text here[/border]
  139. [/border]
  140. [/border][/border]
  141. [border=transparent; height:295px; flex:3 0; min-width:300px; padding:0; font-size:0; margin:10px;]filler[/border]
  142. [/border][/tab]
  143. [comment]----tab three end----[/comment]
  144.  
  145.  
  146. [comment]----tab four (interactions)----[/comment]
  147. [tab=4][border=transparent; height:fit-content; width:100%; padding:10px; box-sizing:border-box; position:absolute; top:85px; left:0; z-index:7; pointer-events:none; display:flex; flex-flow: row wrap;]
  148. [border=transparent; height:295px; flex:2; min-width:200px; padding:8px; box-sizing:border-box; margin:10px; pointer-events:auto;][border=transparent; height:100%; width:100%; padding:15px 10px; box-sizing:border-box; display:flex; flex-flow: row wrap; align-items:flex-end; align-content:flex-end;]
  149. [border=transparent; height:fit-content; width:100%; padding:10px; box-sizing:border-box; background-color: var(--bg-color); opacity:0.9; display:flex; flex-flow: row wrap; font-family: var(--body); color: var(--t-color); border-radius:8px;]
  150. [comment]----tag header-----[/comment]
  151. [border=transparent; width:100%; height:fit-content; font-weight:bold; text-transform:uppercase; font-size:12px; padding:0px; line-height:130%; letter-spacing:0.5px;][comment]
  152. ----* * * header here ----
  153. [/comment]interactions[/border]
  154. [comment]----tag contents-----[/comment]
  155. [border=transparent; width:100%; height:fit-content; font-size:11px; line-height:120%; padding:0px;][comment]
  156. ----* * * interactions here -----
  157. [/comment]text here[/border]
  158. [/border]
  159. [/border][/border]
  160. [border=transparent; height:295px; flex:3 0; min-width:300px; padding:0; font-size:0; margin:10px;]filler[/border]
  161. [/border][/tab]
  162. [comment]----tab four end----[/comment]
  163.  
  164.  
  165. [comment]----tab five (tags)----[/comment]
  166. [tab=5][border=transparent; height:fit-content; width:100%; padding:10px; box-sizing:border-box; position:absolute; top:85px; left:0; z-index:7; pointer-events:none; display:flex; flex-flow: row wrap;]
  167. [border=transparent; height:295px; flex:2; min-width:200px; padding:8px; box-sizing:border-box; margin:10px; pointer-events:auto;][border=transparent; height:100%; width:100%; padding:15px 10px; box-sizing:border-box; display:flex; flex-flow: row wrap; align-items:flex-end; align-content:flex-end;]
  168. [border=transparent; height:fit-content; width:100%; padding:10px; box-sizing:border-box; background-color: var(--bg-color); opacity:0.9; display:flex; flex-flow: row wrap; font-family: var(--body); color: var(--t-color); border-radius:8px;]
  169. [comment]----tag header-----[/comment]
  170. [border=transparent; width:100%; height:fit-content; font-weight:bold; text-transform:uppercase; font-size:12px; padding:0px; line-height:130%; letter-spacing:0.5px;][comment]
  171. ----* * * header here ----
  172. [/comment]tags[/border]
  173. [comment]----tag contents-----[/comment]
  174. [border=transparent; width:100%; height:fit-content; font-size:11px; line-height:120%; padding:0px;][comment]
  175. ----* * * tags here -----
  176. [/comment]@ user[/border]
  177. [/border]
  178. [/border][/border]
  179. [border=transparent; height:295px; flex:3 0; min-width:300px; padding:0; font-size:0; margin:10px;]filler[/border]
  180. [/border][/tab]
  181. [comment]----tab five end----[/comment]
  182.  
  183.  
  184. [tab=aaaaaaaaaaaaaaaaaaaaaaaaaaaa][border=transparent; font-size:0px;]home (filler tab)[/border][/tab]
  185.  
  186. [/tabs][/border][/border]
  187. [comment]----tabs end----[/comment]
  188.  
  189. [comment]-----body-----[/comment]
  190. [border=transparent; height:fit-content; min-height:383px; width:100%; background-color: var(--bg-color); padding:10px; box-sizing:border-box; border-radius:0px 0px 2px 2px; display:flex; flex-flow: row wrap; justify-content:center;]
  191.  
  192. [comment]----image (music player container)----[/comment]
  193. [border=transparent; height:343px; flex:2; min-width:200px; padding:0; border:8px solid var(--color-2); border-radius:2px; box-sizing:border-box; background: var(--img-2) 50% 50%; background-size: cover; display:flex; align-items:flex-end; position:relative; overflow:hidden; margin:10px;]
  194. [comment]----music player-----[/comment]
  195. [border=transparent; height:fit-content; width:100%; background-color: var(--color-2); padding:10px 0px 6px 8px; box-sizing:border-box; color: var(--t-color); font-family: var(--body); align-items:center; align-content:center; justify-content: center; display:flex; flex-flow: row nowrap; pointer-events:none;]
  196. [border=transparent; height:fit-content; width:fit-content; font-size:17px; padding:0px; margin-right:12px; animation: fa-spin 5s linear infinite; pointer-events:auto;][fa] far fa-compact-disc[/fa][/border]
  197. [border=transparent; height:fit-content; width:fit-content; padding:0; display:flex; flex-flow: row nowrap; position:relative; background: var(--color-2);]
  198. [border=transparent; height:fit-content; width:fit-content; padding:5px 1px; box-sizing:border-box; display:flex; flex-flow:row nowrap; position:relative; background: var(--color-2); z-index:2; pointer-events:none;]
  199. [border=transparent; height:fit-content; width:fit-content; font-size:10px; padding:0px; margin:1.5px 5px 0 0; line-height:100%;][fa] fas fa-play[/fa][/border]
  200. [border=transparent; height:fit-content; width:fit-content; font-size:11px; padding:0px; margin:1.5px 15px 0 0; line-height:100%;][fa] fas fa-pause[/fa][/border]
  201. [/border]
  202.  
  203. [comment]----actual media player----[/comment]
  204. [border=transparent; height:95%; width:70%; padding:0; position:absolute; top:0.5px; left:0.5px; z-index:1; display:flex; align-items:center; justify-content:center; pointer-events:auto;][border=transparent; height:100%; width:100%; padding:0; position:relative; overflow:hidden;]
  205. [comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
  206. [border=transparent; height:80px; width:180px; padding:0; margin-top:-18px; margin-left:-11px; position:absolute; top:0; left:0;]
  207. [media=soundcloud]https://soundcloud.com/bluedjjang/cosmic-boy-can-i-love-feat-youra-meego-cover-by-blued[/media]
  208. [/border]
  209.  
  210. [comment]----google drive (replace the google file code within media tag with your own)----[/comment]
  211. [border=transparent; height:500px; width:500px; margin-top:-302px; margin-left:-91px; padding:0px; /*remove this to use me, and add it to the other*/ display:none;]
  212. [media=googledrive]file code here[/MEDIA]
  213. [/border]
  214. [/border][/border]
  215. [comment]----actual media player end----[/comment]
  216. [/border]
  217.  
  218. [comment]----song info----[/comment]
  219. [border=transparent; height:fit-content; flex-grow:1; padding:0px 5px; display:flex; flex-flow: row nowrap; align-items:center; pointer-events:auto;]
  220. [comment]----artist----[/comment]
  221. [border=transparent; height:fit-content; width:fit-content; padding:0px; text-transform:uppercase; line-height:120%; font-weight:bold;
  222. /*reduce font-size if your text can't fit*/ font-size:12px;][comment]
  223. ----* * * artist here -----
  224. [/comment]blue.d[/border]
  225. [border=transparent; height:0.6px; flex-grow:1; padding:0px; background-color: var(--t-color); margin:0 10px;][/border]
  226. [comment]----title----[/comment]
  227. [border=transparent; height:fit-content; width:fit-content; max-width:90px; padding:0px; text-transform:uppercase; line-height:120%; text-align:right;
  228. /*reduce font-size if your text can't fit*/ font-size:12px;][comment]
  229. ----* * * song (two lines max)----
  230. [/comment]can i love?[/border]
  231. [/border]
  232. [/border]
  233. [comment]-----music player end-----[/comment]
  234. [/border]
  235. [comment]----image (music player) end----[/comment]
  236.  
  237. [comment]----post contents----[/comment]
  238. [border=transparent; height:343px; flex:3; min-width:300px; padding:20px 0; box-sizing:border-box; background-color: var(--color-3); border-radius:2px; font-family: var(--body); overflow:hidden; text-align:justify; font-size:11px; color: var(--t-color); display:flex; flex-direction:column; margin:10px;][border=transparent; height:100%; width:200%; overflow-y:scroll; padding:0px;][border=transparent; height:auto; width:50%; padding:0 10px 0 20px; box-sizing:border-box; line-height:15px;][comment]
  239. ----* * * text starts here----
  240. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque facilisis quam sit amet maximus interdum. Cras felis justo, elementum ut sollicitudin et, condimentum at erat. Nulla risus mauris, consequat ut ipsum et, cursus gravida urna. Vivamus vulputate condimentum dolor a cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean scelerisque semper risus, in vulputate sem venenatis at. Suspendisse sed lectus bibendum, malesuada arcu et, laoreet magna. Ut nec tellus convallis, porta dui at, interdum nisl. Sed sem lorem, convallis id eleifend ac, vestibulum at tellus. Donec in nibh diam. Mauris vitae ante placerat, consectetur velit nec, interdum neque. Integer vitae sem ac felis vulputate interdum eget at nisl. In a tortor gravida, molestie justo sit amet, rutrum enim. Donec volutpat maximus justo non tincidunt. [border=transparent; display:inline; padding:0px; color: var(--color-4); font-weight:bold;]"this is a dialogue,"[/border]
  241.  
  242. Pellentesque sed neque in massa tristique faucibus. Donec commodo, mi et porttitor molestie, nisl nunc tincidunt magna, eget posuere mi libero quis ipsum. Aenean convallis turpis quis ipsum tincidunt, eu porta enim laoreet. Nullam porta lorem id risus eleifend porta. Fusce lacinia iaculis euismod. Sed consectetur imperdiet tincidunt. In nec tincidunt urna. Donec vestibulum, dui at sagittis elementum, urna nunc sodales magna, et pretium metus nunc at nisl. In ultricies, lorem id convallis rhoncus, nisi metus pellentesque leo, ut sollicitudin tellus quam in erat. Nulla viverra felis ut tempus malesuada.
  243.  
  244. Sed tempus arcu convallis odio porta varius. Nam a velit in libero euismod imperdiet elementum quis tortor. Nulla vehicula lectus vel metus vehicula, ut scelerisque urna luctus. Donec et commodo elit. Sed molestie felis magna, eget tempus arcu luctus vel. Mauris vulputate euismod rhoncus. Pellentesque pretium arcu sed scelerisque finibus. Nullam mattis porttitor nisl. Nulla vitae porttitor ex. Ut semper sit amet velit id iaculis. Sed vestibulum egestas metus, at molestie augue dapibus id. Nunc faucibus, dolor sit amet rutrum consequat, odio velit molestie urna, sit amet blandit metus sem vitae lorem. Integer fringilla nunc in facilisis auctor.
  245. [/border][/border][/border]
  246. [comment]----post contents end----[/comment]
  247. [/border]
  248. [comment]-----body end-----[/comment]
  249.  
  250. [/border][comment]
  251. ----signature! do not remove
  252. [/comment][bg=transparent; height:fit-content; width:100%; position:absolute ;z-index:6;opacity:0.8;color: var(--color-2); font-size:10px;text-align:center; left:0; bottom:10px;][font=Open Sans]♡coded by uxie♡[/font][/bg][/border]
RAW Paste Data Copied