[ || Wooper || This code was made by @RAINB0W (https://pfq.link/@Jkbg)! Please do not ... ... redistribute my codes! ... claim any of my codes as your own. ... use my codes in any for-profit work. (Aka -- selling customizations of my code, or similar things). ... take large portions of my code and use them in other templates without credit. ... ask me to teach you BBCode or CSS -- please use online resources to learn yourself! Please feel free to ... ... edit my codes. ... frankenstein my codes. ... ask me in this thread (https://pfq.link/~MJHj) or in PMs for assistance with my codes*. ... ask for assistance on making your edits of my code fit PFQ's ledgibility guidelines. ---------------------------- ][sc=all][ ][sc=header][/sc][ Tabbed Interface Container Start ][sc=tabbed_interface horizontal][ Tab Buttons Container Start ][ul][ Tab Button One ][li]title[/li][ Tab Button Two ][li]longer title[/li][ Tab Button Three ][li]title[/li][ Tab Button Four ][li]longer title[/li][ Tab Button Five ][li]title[/li][ Tab Button Six ][li]longer title[/li][ ][/ul][ Tab Buttons Container End Tab One Content Start ][sc=tab][ ]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pharetra pharetra massa massa ultricies mi. Enim ut sem viverra aliquet eget sit amet. Vitae suscipit tellus mauris a diam maecenas sed enim. Enim lobortis scelerisque fermentum dui faucibus. Dolor sit amet consectetur adipiscing elit. Neque ornare aenean euismod elementum nisi quis eleifend quam adipiscing. Nullam ac tortor vitae purus faucibus ornare. Diam sit amet nisl suscipit adipiscing bibendum est ultricies integer. Vel facilisis volutpat est velit egestas. Ut placerat orci nulla pellentesque dignissim enim sit amet venenatis. Sit amet porttitor eget dolor morbi. Ullamcorper malesuada proin libero nunc consequat interdum varius.[ ][/sc][ Tab One Content End ---------------------------- Tab Two Content Start ][sc=tab][ ]Pharetra massa massa ultricies mi quis hendrerit dolor. Lobortis elementum nibh tellus molestie nunc. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Purus in massa tempor nec feugiat nisl. Elit ut aliquam purus sit amet luctus. Consectetur lorem donec massa sapien faucibus et molestie ac feugiat. Vitae aliquet nec ullamcorper sit amet risus nullam. Ante in nibh mauris cursus mattis. Dictum non consectetur a erat nam at lectus urna duis. Quis eleifend quam adipiscing vitae proin. Massa eget egestas purus viverra accumsan. Sed id semper risus in hendrerit gravida rutrum.[ ][/sc][ Tab Two Content End ---------------------------- Tab Three Content Start ][sc=tab][ ]Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Arcu odio ut sem nulla. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Enim neque volutpat ac tincidunt. Euismod quis viverra nibh cras pulvinar. Sollicitudin ac orci phasellus egestas tellus rutrum. Maecenas accumsan lacus vel facilisis volutpat est. Dui accumsan sit amet nulla. Tempus quam pellentesque nec nam aliquam sem et tortor. Neque aliquam vestibulum morbi blandit. Nulla malesuada pellentesque elit eget. Feugiat in ante metus dictum at tempor commodo ullamcorper. Scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Sed sed risus pretium quam vulputate dignissim suspendisse in est. Ultrices eros in cursus turpis massa tincidunt.[ ][/sc][ Tab Three Content End ---------------------------- Tab Four Content Start ][sc=tab][ ]Porta lorem mollis aliquam ut porttitor leo a. At risus viverra adipiscing at in tellus integer feugiat scelerisque. Eget lorem dolor sed viverra ipsum nunc aliquet. Id aliquet lectus proin nibh. Venenatis lectus magna fringilla urna porttitor rhoncus dolor. Lectus sit amet est placerat in. Tortor consequat id porta nibh venenatis cras sed. Consequat nisl vel pretium lectus quam id leo in. Hac habitasse platea dictumst quisque sagittis purus sit amet volutpat. Faucibus scelerisque eleifend donec pretium vulputate. Bibendum ut tristique et egestas quis ipsum suspendisse ultrices. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Pretium fusce id velit ut tortor pretium viverra suspendisse. Dui sapien eget mi proin sed. Et sollicitudin ac orci phasellus.[ ][/sc][ Tab Four Content End ---------------------------- Tab Five Content Start ][sc=tab][ ]Dui vivamus arcu felis bibendum ut tristique et. Nisl purus in mollis nunc sed id semper risus in. Tortor condimentum lacinia quis vel. Consectetur adipiscing elit duis tristique sollicitudin. Pharetra massa massa ultricies mi quis. Orci nulla pellentesque dignissim enim sit amet venenatis. Aliquet lectus proin nibh nisl condimentum. Pellentesque sit amet porttitor eget dolor. At auctor urna nunc id cursus metus aliquam. Senectus et netus et malesuada fames ac turpis egestas. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Pulvinar etiam non quam lacus suspendisse faucibus interdum posuere lorem. Euismod in pellentesque massa placerat duis ultricies lacus.[ ][/sc][ Tab Five Content End ---------------------------- Tab Six Content Start ][sc=tab][ ]Dui vivamus arcu felis bibendum ut tristique et. Nisl purus in mollis nunc sed id semper risus in. Tortor condimentum lacinia quis vel. Consectetur adipiscing elit duis tristique sollicitudin. Pharetra massa massa ultricies mi quis. Orci nulla pellentesque dignissim enim sit amet venenatis. Aliquet lectus proin nibh nisl condimentum. Pellentesque sit amet porttitor eget dolor. At auctor urna nunc id cursus metus aliquam. Senectus et netus et malesuada fames ac turpis egestas. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Pulvinar etiam non quam lacus suspendisse faucibus interdum posuere lorem. Euismod in pellentesque massa placerat duis ultricies lacus.[ ][/sc][ Tab Six Content End ---------------------------- Tabbed Interface Container End ][/sc][ Credits Container Start ][sc=credits][ Credits Button Text ][pit=credits][ Display Box Start Display Title Text ][display=credits][ Interal Credits Text -- If you use any additional graphics please include their credits here after the url end tag! ]Code @[url=https://pfq.link/@Jkbg]RAINB0W[/url][ ][/display][ Display Box End ][/pit][ ][sc=overlay][/sc][ ][/sc][ Credits Container End ][/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 = white; //*LINK STYLING*// a:link, a:visited, a:active { color: @LinksColor; text-decoration: 1px solid underline @color1; margin: 0 auto; font-weight: bold; } a:hover { transition: all 0.3s; letter-spacing: 1.5px; } //**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: 164px; 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; max-height: 710px; overflow: hidden; } } //**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: 520%; 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 { border: none; letter-spacing: 1.5px; } &>.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; font-size: 11pt; font-weight: bold; letter-spacing: 1px; } .bbcode_tooltip.lock ~ .overlay { display: block; height: 99999px; width: 099999px; position: absolute; left: -99999px / 2; top: -099999px / 2; } } } [/style]