Advertisement
colorful-form-1

Forum Template: (F2U) Dinos

Jan 2nd, 2021
178
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.10 KB | None | 0 0
  1. [sc=all][
  2. ][sc=header]SHOP TITLE HERE[/sc][
  3. ][sc=tabbed_interface horizontal]
  4. [ul]
  5. [li]Notes[/li]
  6. [li]BBCODE[/li]
  7. [li]Longer Title[/li]
  8. [li]Title[/li]
  9. [li]Longer Title[/li]
  10. [li]Title[/li]
  11. [li]Longer Title[/li]
  12. [li]Title[/li]
  13. [li]Longer Title[/li]
  14. [/ul][
  15. ][sc=tab]This is a free to use code!
  16.  
  17. You can add and remove as many tabs as you want!! There are lots of tabs here just to show that it could work if you wanted it too.[/sc][
  18.  
  19. ][sc=tab][url=https://pokefarm.com/]Link[/url], [b]Bold[/b], [i]Italic[/i], [u]Underline[/u], and [tip=TIP CONTENT]Tip[/tip]
  20.  
  21. [pkmnpanel=zqN5J]
  22.  
  23. [progress=40/100]Progress Bar (40/100)[/progress]
  24.  
  25. [display=Display Header][
  26. ]Display Content[
  27. ][/display]
  28.  
  29. [hide=Hidebox Header][
  30. ]Hidebox Content[
  31. ][/hide]
  32.  
  33. [ul]
  34. [li]ITEM 1[/li]
  35. [li]ITEM 2[/li]
  36. [li]ITEM 3[/li]
  37. [li]ITEM 4[/li]
  38. [/ul]
  39.  
  40. [table]
  41. [tr]
  42. [th]Header 1[/th]
  43. [th]Header 2[/th]
  44. [th]Header 3[/th]
  45. [/tr]
  46. [tr]
  47. [td]cell 1[/td]
  48. [td]cell 2[/td]
  49. [td]cell 3[/td]
  50. [/tr]
  51. [tr]
  52. [td]cell 4[/td]
  53. [td]cell 5[/td]
  54. [td]cell 6[/td]
  55. [/tr]
  56. [/table][/sc][
  57.  
  58. ][sc=tab]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum at varius vel pharetra vel turpis nunc eget lorem. Interdum varius sit amet mattis vulputate. Arcu ac tortor dignissim convallis aenean et. Sed faucibus turpis in eu mi bibendum. Placerat vestibulum lectus mauris ultrices eros in cursus. Vitae justo eget magna fermentum. Nunc eget lorem dolor sed viverra ipsum nunc. Cursus mattis molestie a iaculis. Enim eu turpis egestas pretium aenean pharetra magna ac. Sociis natoque penatibus et magnis dis parturient. Tincidunt ornare massa eget egestas purus viverra. Arcu bibendum at varius vel pharetra.[/sc][
  59.  
  60. ][sc=tab]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum at varius vel pharetra vel turpis nunc eget lorem. Interdum varius sit amet mattis vulputate. Arcu ac tortor dignissim convallis aenean et. Sed faucibus turpis in eu mi bibendum. Placerat vestibulum lectus mauris ultrices eros in cursus. Vitae justo eget magna fermentum. Nunc eget lorem dolor sed viverra ipsum nunc. Cursus mattis molestie a iaculis. Enim eu turpis egestas pretium aenean pharetra magna ac. Sociis natoque penatibus et magnis dis parturient. Tincidunt ornare massa eget egestas purus viverra. Arcu bibendum at varius vel pharetra.[/sc][
  61.  
  62.  
  63. ][sc=tab]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum at varius vel pharetra vel turpis nunc eget lorem. Interdum varius sit amet mattis vulputate. Arcu ac tortor dignissim convallis aenean et. Sed faucibus turpis in eu mi bibendum. Placerat vestibulum lectus mauris ultrices eros in cursus. Vitae justo eget magna fermentum. Nunc eget lorem dolor sed viverra ipsum nunc. Cursus mattis molestie a iaculis. Enim eu turpis egestas pretium aenean pharetra magna ac. Sociis natoque penatibus et magnis dis parturient. Tincidunt ornare massa eget egestas purus viverra. Arcu bibendum at varius vel pharetra.[/sc][
  64.  
  65.  
  66. ][sc=tab]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum at varius vel pharetra vel turpis nunc eget lorem. Interdum varius sit amet mattis vulputate. Arcu ac tortor dignissim convallis aenean et. Sed faucibus turpis in eu mi bibendum. Placerat vestibulum lectus mauris ultrices eros in cursus. Vitae justo eget magna fermentum. Nunc eget lorem dolor sed viverra ipsum nunc. Cursus mattis molestie a iaculis. Enim eu turpis egestas pretium aenean pharetra magna ac. Sociis natoque penatibus et magnis dis parturient. Tincidunt ornare massa eget egestas purus viverra. Arcu bibendum at varius vel pharetra.[/sc][
  67.  
  68.  
  69. ][sc=tab]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum at varius vel pharetra vel turpis nunc eget lorem. Interdum varius sit amet mattis vulputate. Arcu ac tortor dignissim convallis aenean et. Sed faucibus turpis in eu mi bibendum. Placerat vestibulum lectus mauris ultrices eros in cursus. Vitae justo eget magna fermentum. Nunc eget lorem dolor sed viverra ipsum nunc. Cursus mattis molestie a iaculis. Enim eu turpis egestas pretium aenean pharetra magna ac. Sociis natoque penatibus et magnis dis parturient. Tincidunt ornare massa eget egestas purus viverra. Arcu bibendum at varius vel pharetra.[/sc][
  70.  
  71. ][sc=tab]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum at varius vel pharetra vel turpis nunc eget lorem. Interdum varius sit amet mattis vulputate. Arcu ac tortor dignissim convallis aenean et. Sed faucibus turpis in eu mi bibendum. Placerat vestibulum lectus mauris ultrices eros in cursus. Vitae justo eget magna fermentum. Nunc eget lorem dolor sed viverra ipsum nunc. Cursus mattis molestie a iaculis. Enim eu turpis egestas pretium aenean pharetra magna ac. Sociis natoque penatibus et magnis dis parturient. Tincidunt ornare massa eget egestas purus viverra. Arcu bibendum at varius vel pharetra.[/sc][
  72.  
  73.  
  74. ][sc=tab]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum at varius vel pharetra vel turpis nunc eget lorem. Interdum varius sit amet mattis vulputate. Arcu ac tortor dignissim convallis aenean et. Sed faucibus turpis in eu mi bibendum. Placerat vestibulum lectus mauris ultrices eros in cursus. Vitae justo eget magna fermentum. Nunc eget lorem dolor sed viverra ipsum nunc. Cursus mattis molestie a iaculis. Enim eu turpis egestas pretium aenean pharetra magna ac. Sociis natoque penatibus et magnis dis parturient. Tincidunt ornare massa eget egestas purus viverra. Arcu bibendum at varius vel pharetra.[/sc][
  75.  
  76. ][/sc][
  77.  
  78. ][sc=credits][sc=button][pit=code]Code @[url=https://pfq.link/~Lwl_]Colorful[/url]
  79.  
  80. Background from [url=https://www.tumblr.com/blog/view/bubbletea-and-backgrounds/114016624352]here[/url]
  81.  
  82. This is a free to use code! Find the code [url=https://pfq.link/~L2w3]here[/url][/pit][/sc][/sc][
  83.  
  84. ][/sc][
  85.  
  86. ][style]
  87. /*VARIABLES*/
  88.  
  89. /*FONT-FACES*/
  90. @font-face {
  91. font-family:"1";
  92. src: url("https://www.dl.dropboxusercontent.com/s/");
  93. }
  94.  
  95. /*IMAGES*/
  96. @header = ;
  97. @bg = url("https://i.imgur.com/6qVKuXR.png");
  98. @pfp = ;
  99. @img = ;
  100. @bullet = ;
  101.  
  102. /*COLORS*/
  103. @black = #0d2d00;
  104. @black_transparent = rgb(0,0,0,0.6);
  105. @white = white;
  106. @white_transparent = rgb(255,255,255,0.5);
  107. @color1 = #d8f0ce;
  108. @color2 = #86d066;
  109. @color3 = #bfeaad;
  110. @LinksColor = #247800;
  111.  
  112. /*MISC*/
  113. @padding = 2%;
  114. @border = 3px solid @LinksColor;
  115.  
  116.  
  117. a:link, a:visited, a:active {
  118. color: @LinksColor;
  119. }
  120. a:hover {
  121. opacity: 60%;
  122. letter-spacing: 0.4px;
  123. transition: all 0.3s;
  124. }
  125. a:not(:hover){
  126. letter-spacing: 0px;
  127. transition: all 0.4s;
  128. }
  129.  
  130. h3 {
  131. font-size: 20pt;
  132. font-weight: bold;
  133. text-align: inherit;
  134. letter-spacing: 0.5px;
  135.  
  136. @media only screen and (max-width: 600px) {
  137. font-size: 14pt;
  138. }
  139. }
  140.  
  141.  
  142. hr {
  143. background: @LinksColor;
  144. border: 1.5px solid @LinksColor;
  145. }
  146.  
  147.  
  148. .tooltip_content {
  149. border: @border;
  150. border-radius: 0px;
  151. background: @color3;
  152. color: @black;
  153. font-size: 10pt;
  154. padding: 1%;
  155. }
  156. .bbcode_tooltip {
  157. border-bottom: 1.5px dashed @LinksColor;
  158. }
  159.  
  160.  
  161. .expbar {
  162. width: 80%;
  163. border: @border;
  164. border-radius: 0px;
  165. color: @black;
  166. background: @color1;
  167.  
  168. >div {
  169. border-color: none;
  170. border-right: none;
  171. background: @color2;
  172. }
  173. }
  174.  
  175.  
  176. ol, ul {
  177. text-align: left;
  178. }
  179. ul {
  180. list-style-image: @bullet;
  181. list-style-position: outside;
  182. }
  183.  
  184.  
  185. .bbcode_table {
  186. width: 100%;
  187. background: none;
  188. border: @border;
  189. th, td {
  190. padding: @padding;
  191. text-align: center;
  192. vertical-align: center;
  193. border: @border;
  194. }
  195. th {
  196. background: @color3;
  197. color: @black;
  198. }
  199. td {
  200. background: @color1;
  201. }
  202. }
  203.  
  204.  
  205. .panel {
  206. background: none;
  207. box-shadow: none;
  208. border-radius: 0px;
  209. border: @border;
  210. h3, div {
  211. border-radius: 0px;
  212. text-align: center;
  213. padding: @padding;
  214. }
  215. h3 {
  216. background: @color3;
  217. color: @black;
  218. font-weight: bold;
  219. }
  220. h3>a {
  221. color: @black;
  222.  
  223. }
  224. div {
  225. background: @color1;
  226. color: @black;
  227. border-top: @border;
  228. }
  229. }
  230.  
  231. .party>div {
  232. background: @color3;
  233. box-shadow: none;
  234. border: @border;
  235. border-radius: 0px;
  236. width: 93%;
  237.  
  238. @media only screen and (max-width: 600px) {
  239. margin: 0px;
  240. }
  241. }
  242.  
  243. .party>div>.pkmn {
  244. padding: 0%;
  245. }
  246.  
  247. .party>div>.pkmn:before {
  248. background-color: @color2; /* pokemon platform color */
  249. border-color: @LinksColor; /* platform edge color */
  250. }
  251.  
  252. .party>div>.name {
  253. color: @LinksColor;
  254. width: 100%;
  255. font-size: 11pt;
  256. margin-bottom: -3%;
  257. margin-top: 2%;
  258. }
  259.  
  260. .party>div>.name>a.summarylink {
  261. max-width: 100px;
  262. margin-top: -3%;
  263. margin-left: 5px;
  264. }
  265.  
  266. .party>div>.expbar {
  267. width: 62% !important;
  268. margin-left: 5px;
  269.  
  270. >span {
  271. font-size: 10pt; !Important;
  272. }
  273. }
  274.  
  275. .party>div>.action {
  276. width: 63%;
  277. }
  278.  
  279. .party>div>.taste {
  280.  
  281. }
  282.  
  283. .partu>div>.extra {
  284.  
  285. }
  286.  
  287. .party>div:after {
  288. height: 1px;
  289. }
  290.  
  291. .party>div>.action>.berrybuttons {
  292. text-align:center;
  293. }
  294. .party>div>.action>.berrybuttons[data-up='sour']>[data-berry='aspear'], .party>div>.action>.berrybuttons[data-up='spicy']>[data-berry='cheri'], .party>div>.action>.berrybuttons[data-up='dry']>[data-berry='chesto'], .party>div>.action>.berrybuttons[data-up='sweet']>[data-berry='pecha'], .party>div>.action>.berrybuttons[data-up='bitter']>[data-berry='rawst'] {
  295. width:96%;
  296. border-radius: 0px;
  297. background: @color2;
  298. border: @border;
  299. }
  300. .party>div>.action>.berrybuttons:not([data-up='sour'])>[data-berry='aspear'], .party>div>.action>.berrybuttons:not([data-up='spicy'])>[data-berry='cheri'], .party>div>.action>.berrybuttons:not([data-up='dry'])>[data-berry='chesto'], .party>div>.action>.berrybuttons:not([data-up='sweet'])>[data-berry='pecha'], .party>div>.action>.berrybuttons:not([data-up='bitter'])>[data-berry='rawst'] {
  301. display:none;
  302. }
  303. .party>div>.action>.berrybuttons[data-up='any']>[data-berry] {
  304. display:inline-block;
  305. }
  306.  
  307.  
  308.  
  309. .all {
  310. background: @bg;
  311. padding: 2%;
  312. color: @black;
  313. font-size: 13pt;
  314. border: 4px dashed @LinksColor;
  315.  
  316. .header {
  317. background: @color3;
  318. border: @border;
  319. padding: 1%;
  320. font-size: 20pt;
  321. text-align: center;
  322. margin-left: -1%;
  323. margin-right: -1%;
  324. }
  325.  
  326. .tabbed_interface {
  327. width: 100%;
  328. background: none;
  329. box-shadow: none;
  330.  
  331. &>ul {
  332. background: none;
  333.  
  334. &>li {
  335. margin: 0.8%;
  336. text-align: center;
  337. padding: 0.5%;
  338. background: @color1;
  339. color: @black_transparent;
  340. border: 3px solid @LinksColor;
  341. font-style: normal;
  342. }
  343.  
  344. &>li:hover {
  345. cursor: pointer;
  346. color: @black;
  347. font-style: italic;
  348. background: @color3;
  349. }
  350.  
  351. &>li.tab-active {
  352. color: @black;
  353. font-style: italic;
  354. background: @color3;
  355. }
  356. }
  357.  
  358. &>.tab, .tab-active {
  359. box-shadow: none;
  360. }
  361.  
  362. &>.tab {
  363. color: @black;
  364. background: @color1;
  365. padding: 1%;
  366. margin: 0.5%;
  367. border: @border;
  368. }
  369. }
  370.  
  371.  
  372. .credits {
  373. background: @color3;
  374. padding: 0.5%;
  375. border: @border;
  376. margin-left: -1%;
  377. margin-right: -1%;
  378. text-align: center;
  379. font-variant: small-caps;
  380. font-family: monospace;
  381. font-size: 14pt;
  382. }
  383.  
  384. .button {
  385. left: 0;
  386. right: 0;
  387. bottom: 0;
  388.  
  389. .tooltip_content {
  390. border: @border;
  391. border-radius: 0px;
  392. background: @color1;
  393. width: 98.4%;
  394. height: 500%;
  395. bottom: 200%;
  396. right: -2%;
  397. color: @black;
  398. font-size: 10pt;
  399. text-align: left;
  400. padding: 2%;
  401. font-variant: none;
  402. }
  403.  
  404. .tooltip_trigger:hover + .tooltip_content {
  405. display: none;
  406. }
  407.  
  408. .tooltip_trigger {
  409. transition: 0.3s;
  410. }
  411.  
  412. .tooltip_trigger.lock, .tooltip_trigger:hover {
  413. opacity: 60%;
  414. letter-spacing: 0.5px;
  415. border: none;
  416. }
  417.  
  418. .bbcode_tooltip {
  419. border: none;
  420. }
  421.  
  422. }
  423. }
  424.  
  425. [/style]
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement