API tools faq
paste
colorful-form

Forum Template: Cows

colorful-form
Dec 22nd, 2020 (edited)
98
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.08 KB | None | 0 0
raw download clone embed print report
  1. [sc=all][sc=header][
  2. ][h3]this is a long post title, just in case![/h3]
  3. this is a subheading, just in case![
  4. ][/sc][
  5. ][sc=tabbed_interface horizontal]
  6. [ul]
  7. [li][sc=bounce animated][img]https://i.imgur.com/QzRGOXV.png[/img][/sc]
  8. long title test[/li]
  9. [li][sc=img][img]https://i.imgur.com/QzRGOXV.png[/img][/sc]
  10. title[/li]
  11. [li][sc=img][img]https://i.imgur.com/QzRGOXV.png[/img][/sc]
  12. long title test[/li]
  13. [li][sc=img][img]https://i.imgur.com/QzRGOXV.png[/img][/sc]
  14. title[/li]
  15. [li][sc=img][img]https://i.imgur.com/QzRGOXV.png[/img][/sc]
  16. long title test[/li]
  17. [li][sc=img][img]https://i.imgur.com/QzRGOXV.png[/img][/sc]
  18. title[/li]
  19. [/ul][
  20.  
  21. ][sc=tab][
  22.  
  23. ]This is a cow-themed template inspired by @Dingo Blue, though not commissioned by them! This is free to use. You may not remove my credit, but you may edit the template!
  24.  
  25. You can get the code from [url=https://pastebin.com/Br6xmap0]here[/url].
  26.  
  27. [hr]
  28. [url=https://pokefarm.com/]Link[/url], [b]Bold[/b], [i]Italic[/i], [u]Underline[/u], and [tip=TIP CONTENT]Tip[/tip]
  29.  
  30. [progress=40/100]Progress Bar (40/100)[/progress]
  31.  
  32. [ul]
  33. [li]List[/li]
  34. [li]Content[/li]
  35. [li]Here[/li]
  36. [/ul]
  37.  
  38. [display=Display Header][
  39. ]Display Content[
  40. ][/display]
  41.  
  42. [hide=Hidebox Header][
  43. ]Hidebox Content[
  44. ][/hide]
  45.  
  46. [table]
  47. [tr]
  48. [th]Header 1[/th]
  49. [th]Header 2[/th]
  50. [th]Header 3[/th]
  51. [/tr]
  52. [tr]
  53. [td]cell 1[/td]
  54. [td]cell 2[/td]
  55. [td]cell 3[/td]
  56. [/tr]
  57. [tr]
  58. [td]cell 4[/td]
  59. [td]cell 5[/td]
  60. [td]cell 6[/td]
  61. [/tr]
  62. [/table][/sc][
  63.  
  64. ][sc=tab]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/sc][
  65.  
  66. ][sc=tab]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/sc][
  67.  
  68. ][sc=tab]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/sc][
  69.  
  70. ][sc=tab]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/sc][
  71.  
  72. ][sc=tab]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/sc][
  73.  
  74. ][sc=tab]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.[/sc][
  75. ][/sc][
  76.  
  77. ][sc=credits][url=https://unsplash.com/photos/zCQ06B18v0Q]header[/url] 🐄 [url=https://www.deviantart.com/slowlymoresleepless/art/f2u-lil-cow-782596341]cow pixels[/url] 🐄 [url=https://www.vecteezy.com/vector-art/225625-cow-print-seamless-pattern]background pattern[/url] 🐄 [url=https://pfq.link/~Lwl_]code[/url][/sc][
  78. ][/sc]
  79.  
  80. [style]
  81. /*VARIABLES*/
  82.  
  83. /*IMAGES*/
  84. @header = url("https://i.imgur.com/lQg7pcp.jpg");
  85. @bg = url("https://i.imgur.com/QNqwcHI.png");
  86. @bg2 = url("https://i.imgur.com/FwKJUfQ.png");
  87. @bullet = url("https://i.imgur.com/QzRGOXV.png");
  88.  
  89. /*COLORS*/
  90. @black = black;
  91. @black_transparent = rgb(0,0,0,0.6);
  92. @black_transparent2 = rgb(0,0,0,0.2);
  93. @white = white;
  94. @white_transparent = rgb(255,255,255,0.5);
  95. @LinksColor = #8e2715;
  96.  
  97. /*MISC*/
  98. @padding = 1%;
  99. @padding2: 5%;
  100. @border1 = 2px dotted @black;
  101. @border2 = 4px solid @black;
  102.  
  103.  
  104. a:link, a:visited, a:active {
  105. color: @LinksColor;
  106. }
  107. a:hover {
  108. opacity: 50%;
  109. letter-spacing: 0.5px;
  110. transition: all 0.3s;
  111. }
  112. a:not(:hover){
  113. letter-spacing: 0px;
  114. transition: all 0.4s;
  115. }
  116.  
  117. h3 {
  118. font-size: 20px;
  119. font-weight: bold;
  120. text-align: inherit;
  121. letter-spacing: 0.5px;
  122.  
  123. @media only screen and (max-width: 600px) {
  124. font-size: 14px;
  125. }
  126. }
  127.  
  128.  
  129. hr {
  130. background: @black;
  131. border: 2px solid @black;
  132. }
  133.  
  134.  
  135. .tooltip_content {
  136. border: @border2;
  137. border-radius: 0px;
  138. background: @black_transparent;
  139. color: @white;
  140. font-size: 14px;
  141. padding: @padding;
  142. }
  143. .bbcode_tooltip {
  144. border-bottom: @border1;
  145. }
  146.  
  147.  
  148. .expbar {
  149. width: 80%;
  150. border: @border2;
  151. border-radius: 0px;
  152. color: @black;
  153. background: none;
  154. background-size: contain;
  155. background-repeat: repeat;
  156.  
  157. >div {
  158. border-color: none;
  159. border-right: none;
  160. background: @black_transparent2;
  161. background-size: contain;
  162. background-repeat: repeat;
  163. }
  164. }
  165.  
  166.  
  167. ol, ul {
  168. text-align: left;
  169. }
  170. ul {
  171. list-style-image: @bullet;
  172. list-style-position: outside;
  173. }
  174.  
  175.  
  176. .bbcode_table {
  177. width: 100%;
  178. background: none;
  179. border: @border2;
  180. th, td {
  181. padding: @padding;
  182. text-align: center;
  183. vertical-align: center;
  184. border: @border2;
  185. }
  186. th {
  187. background: @black_transparent;
  188. background-size: contain;
  189. background-repeat: repeat;
  190. color: @white;
  191. }
  192. td {
  193. background: none;
  194. }
  195. }
  196.  
  197.  
  198. .panel {
  199. background: none;
  200. box-shadow: none;
  201. border-radius: 0px;
  202. border: @border2;
  203. h3, div {
  204. border-radius: 0px;
  205. text-align: center;
  206. padding: @padding;
  207. }
  208. h3 {
  209. background: @black_transparent;
  210. color: @white;
  211. font-weight: bold;
  212. border: none;
  213. }
  214. h3>a {
  215. color: @white;
  216. }
  217. div {
  218. background: none;
  219. color: @black;
  220. border: none;
  221. }
  222. }
  223.  
  224. .party>div {
  225. background: @white_transparent;
  226. box-shadow: none;
  227. border: none;
  228. border-radius: none;
  229. width: 90%;
  230.  
  231. @media only screen and (max-width: 600px) {
  232. margin: 0px;
  233. }
  234. }
  235.  
  236. .party>div>.pkmn {
  237. padding: 0.5%;
  238. }
  239.  
  240. .party>div>.pkmn:before {
  241. background-color: @black_transparent; /* pokemon platform color */
  242. border-color: @black_transparent; /* platform edge color */
  243. }
  244.  
  245. .party>div>.name {
  246. color: @links_color;
  247. width: 100%;
  248. font-size: 12px;
  249. }
  250.  
  251. .party>div>.name>a.summarylink {
  252. max-width: 115px;
  253. }
  254.  
  255. .party>div>.expbar {
  256. width: 63% !important;
  257. margin-left: 1px;
  258.  
  259. >span {
  260. font-size: 10px; !Important;
  261. }
  262. }
  263.  
  264. .party>div>.action {
  265. width: 63%;
  266. }
  267.  
  268. .party>div>.taste {
  269.  
  270. }
  271.  
  272. .partu>div>.extra {
  273.  
  274. }
  275.  
  276. .party>div>.action>.berrybuttons[data-up="any"]>a[data-berry="aspear"] {
  277. display: inline-block;
  278. background-color: #6c6;
  279. border-radius: 2px;
  280. }
  281.  
  282. .party>div>.action>.berrybuttons[data-up="sour"]>a[data-berry="aspear"] {
  283. display: inline-block;
  284. }
  285.  
  286. .party>div>.action>.berrybuttons[data-up="spicy"]>a[data-berry="cheri"] {
  287. display: inline-block;
  288. }
  289.  
  290. .party>div>.action>.berrybuttons[data-up="dry"]>a[data-berry="chesto"] {
  291. display: inline-block;
  292. }
  293.  
  294. .party>div>.action>.berrybuttons[data-up="sweet"]>a[data-berry="pecha"] {
  295. display: inline-block;
  296. }
  297.  
  298. .party>div>.action>.berrybuttons[data-up="bitter"]>a[data-berry="rawst"] {
  299. display: inline-block;
  300. }
  301.  
  302. .all {
  303. display: flex;
  304. flex-direction: column;
  305.  
  306. .header {
  307. background: @header;
  308. background-size: cover;
  309. background-repeat: no-repeat;
  310. height: 350px;
  311. padding: @padding2;
  312. border-radius: 20px 20px 0px 0px;
  313. border-bottom: none;
  314. color: @black;
  315. font-variant: small-caps;
  316. text-align: center;
  317. }
  318.  
  319. .tabbed_interface {
  320. flex: 1;
  321. width: 100%;
  322. background: @bg;
  323. border-radius: 0px;
  324. box-shadow: none;
  325. color: @black;
  326. border-top: @border2;
  327.  
  328. &>ul {
  329. background: none;
  330. margin-top: -3.5%;
  331. &>li, li.tab-active {
  332. min-width: 15%;
  333. border: none;
  334. border-bottom: @border2;
  335. background: none;
  336. background-repeat: repeat;
  337. padding: @padding;
  338. text-align: center;
  339. color: @black;
  340. font-variant: small-caps;
  341. font-weight: bold;
  342. }
  343. &>li {
  344. color: @black_transparent;
  345. transition: 0.3s all;
  346. }
  347. &>li:hover {
  348. color: @black;
  349. cursor: pointer;
  350. }
  351. &>li.tab-active {
  352. color: @black;
  353. }
  354. }
  355.  
  356. &>.tab, .tab-active {
  357. box-shadow: none;
  358. }
  359.  
  360. &>.tab {
  361. border: none;
  362. background: none;
  363. padding: @padding2;
  364. color: @black;
  365.  
  366. }
  367.  
  368. }
  369.  
  370. .img {
  371. margin-top: -1%;
  372. padding-bottom: 1%;
  373.  
  374. &.img:hover {
  375.  
  376. }
  377.  
  378. &.img:not(:hover) {
  379. transition: 0.3s all;
  380. }
  381. }
  382.  
  383. .credits {
  384. flex: 1;
  385.  
  386. a:link, a:visited, a:active {
  387. color: @white;
  388. }
  389. a:hover {
  390. opacity: 50%;
  391. letter-spacing: 0.3px;
  392. transition: all 0.3s;
  393. }
  394. a:not(:hover){
  395. letter-spacing: 0px;
  396. transition: all 0.4s;
  397. }
  398.  
  399. background: @black;
  400. border-radius: 0px 0px 20px 20px;
  401. text-align: center;
  402. padding: 1.5%;
  403. font-size: 11px;
  404. font-variant: small-caps;
  405. color: @white;
  406. }
  407. }
  408.  
  409. [/style]
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!