[sc=all][ ][sc=header][/sc][ ][sc=tabbed_interface horizontal][ ][ul][ ][li]Intro[/li] [li]BBCODE Preview[/li] [li]longer title[/li] [li]title[/li] [li]longer title[/li] [/ul][ ][sc=tab]This is a free to use code! [hr] 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][ ][sc=tab][h1]Header 1[/h1] [h2]Header 2[/h2] [h3]Header 3[/h3] [hr] [url=https://pokefarm.com/]Link[/url], [b]Bold[/b], [i]Italic[/i], [u]Underline[/u], and [tip=TIP CONTENT]Tip[/tip] [pkmnpanel=4pGgm] [progress=40/100]Progress Bar (40/100)[/progress] [display=Display Header][ ]Display Content[ ][/display] [hide=Hidebox Header][ ]Hidebox Content[ ][/hide] [table] [tr] [th]Header 1[/th] [th]Header 2[/th] [th]Header 3[/th] [/tr] [tr] [td]cell 1[/td] [td]cell 2[/td] [td]cell 3[/td] [/tr] [tr] [td]cell 4[/td] [td]cell 5[/td] [td]cell 6[/td] [/tr] [/table] [ul] [li]ITEM 1[/li] [li]ITEM 2[/li] [li]ITEM 3[/li] [li]ITEM 4[/li] [/ul][/sc][ ][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][ ][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][ ][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][ ][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][ ][/sc][ ][sc=credits][pit=credits][display=credits]Code @[url=https://pfq.link/@Jkbg]RAINB0W[/url] Artwork @[url=https://www.pokemon.com/us/pokemon-tcg/pokemon-cards/sm-series/sm10/96/]Pokemon TCG Artwork[/url][/display][/pit][sc=overlay][/sc][/sc][ ][/sc][ ][style] //**RESET STYLES**// @import 'skins/user/J/k/b/g/reset-styles/__extra'; //**FONT FACES**// @font-face { font-family: "1"; src: url("https://www.dl.dropboxusercontent.com/s/"); } //*IMAGES*// @header = url("https://64.media.tumblr.com/0b5bc388460fc478e2b92dfa0053a5b1/tumblr_pkygrflCoq1xcnjtmo1_1280.png"); @bg = url("a"); //*COLORS*// @black = black; @black_transparent = rgb(0,0,0,0.5); @white = white; @white_transparent = rgb(255,255,255,0.5); @color1 = #67af31; @color2 = #0fa134; @LinksColor = #b4deee; //*LINK STYLING*// a:link, a:visited, a:active { color: @LinksColor; text-decoration: 1px solid underline @color1; margin: 0 auto; } a:hover { opacity: 90%; transition: all 0.3s; } //**HEADER STYLING**// h1,h2,h3 { color: @white; } //**DIVIDER STYLING**// hr { background: @LinksColor; border: 1.5px solid @LinksColor; } //**BOLD, ITALIC, UNDERLINE & STRIKETHROUGH STYLING**// b,i,u,s { color: @white; } //**TOOLTIP STYLING**// .tooltip_content { width: fit-content; color: @color; font-size: 10pt; } .bbcode_tooltip { text-decoration: 1.5px underline dotted @LinksColor; } //**PKMNPANEL STYLING**// .party>div { margin: 0px; margin-left: -2px; background: @color1; border: 4px solid @white; &:after { } &>.pkmn:before { background-color: @color2; border-color: @black; } &>.name { &>a.summarylink { max-width: 120px; font-weight: bold; } } &>.expbar { margin-left: 2px; max-width: 172px; border: 2px solid @white; color: @black; background: @color1; &>div { background: @color2; } &>span { } } &>.taste { b,i { } } &>.extra { &>.nature { b,i { } } } &>.action { width: 164px; margin-right: 6px; &>.berrybuttons { } &>.berrybuttons>.tooltip_content { width: 168px; background: @black; border: none; } } } //*PANEL STYLING**// .panel { padding: 0px; &>h3,>div { border: none; } &>h3 { background: @color2; color: @black; font-weight: bold; border: 4px solid @white; &>a { } } &>div { background: @black; color: @white; border: 4px solid @white; border-top: none; } } .panel.accordion { &>h3, h3:active, h3:hover, h3.active { background: @color2; color: @black; font-weight: bold; border: 4px solid @white; padding: 2px; &>a { font-weight: bold; text-decoration: 2px solid underline @black; color: @black; } } } //**PROGRESS BAR STYLING**// .expbar { width: 100%; border: 4px solid @white; background: @color1; color: @black; &>div { border-color: none; border-right: none; background: @color2; } } //**TABLE STYLING**// .bbcode_table { border: 4px solid @white; tr { & th, td { border: 4px solid @white; } & th { background: @color2; color: @black; } & td { } } } //**LIST STYLING**// ol, ul { text-align: left; } ul { list-style-image: @bullet; list-style-position: outside; } //**BODY STYLING**// .all { display: flex; flex-direction: column; max-width: 100%; font-size: 10pt; //**HEADER STYLING//** .header { text-align: center; color: transparent; background: @header; background-repeat: no-repeat; background-size: 300px auto; background-position: center; padding: 0px; border: 4px solid @black; height: 180px; } //**TABBED INTERFACE STYLING**// .tabbed_interface { &>ul { background: none; border: none; border-top: none; margin-right: 1px; margin-left: 1px; margin-top: 0px; margin-bottom: 0px; &>li { background: @color1; color: @black; border: 4px solid @black; margin-right: -1px; margin-left: -1px; margin-top: -2px; font-weight: bold; padding: 5px; } &>li:hover, li.tab-active:hover { background: @color2; color: @black; border: 4px solid @black; font-weight: bold; padding: 5px; } &>li.tab-active { background: @color2; color: @black; border: 4px solid @black; font-weight: bold; padding: 5px; } } &>.tab { background: @black; color: @white; border: 4px solid @black; border-top: 2px solid @black; } } //**CREDITS STYLING**// .credits { position: absolute; top: 10px; right: 10px; text-align: center; background: none; margin: 0px; border: none; padding: 0px; color: white; .tooltip_content { display: none; padding: 0; border: 0; animation: 0; background: 0; } .bbcode_tooltip.lock + .tooltip_content { display: block; bottom: -500%; left: 0; height: 0; width: 475%; margin-left: -230px; overflow: visible; &>.panel { background: rgb(0,0,0,0.75); width: 100%; display: inline-block; box-sizing: border-box; vertical-align: middle; box-shadow: 0 0 0px @black, 0 0 0 8675309px fade(@black, 75%) !important; margin: 0; transform: translateY(-50%); &>h3 { background: @color2; color: @black; border: 4px solid @black; font-weight: bold; text-transform: lowercase; font-variant: small-caps; font-size: 14pt; padding: 2px 2px 5px 2px; } &>div { background: @black; color: @white; border: 4px solid @black; border-top: none; } } } &>.tooltip_trigger { transition: 0.4s; } &>.tooltip_trigger:hover { opacity: 60%; border: none; } &>.bbcode_tooltip { background: @black; padding-left: 4px; padding-right: 4px; padding-bottom: 4px; text-decoration: 1px solid @white underline; color: @white; text-transform: lowercase; font-variant: small-caps; } .bbcode_tooltip.lock ~ .overlay { display: block; height: 99999px; width: 099999px; position: absolute; left: -99999px / 2; top: -099999px / 2; } } } .code { &>.panel { &>h3 { text-transform: lowercase; font-variant: small-caps; font-size: 15pt; } &>div { max-height: 100px; overflow: scroll; user-select: all; } } } [/style]