Single post in Zach's Free To Use Codes
Forum Index > Other > Other Art > Zach's Free To Use Codes >
" a quote will go here "
- Info
- BBCode Test
- Raw Code
- longer title
- title
This is free to use code made by @Neonyan!
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.
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.
Header 1
Header 2
Header 3
Link, Bold, Italic, Underline, and Tip
TIP CONTENT
ThunderStone
Evolution Stone
(
: 0)
A stone filled with electric energy.
Sells for 
1,250
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Dry food
MAXQuiet nature
Display Header
Display Content
Hidebox Header
Hidebox Content
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| cell 1 | cell 2 | cell 3 |
| cell 4 | cell 5 | cell 6 |
- ITEM 1
- ITEM 2
- ITEM 3
- ITEM 4
Raw Code
[sc=all][
][sc=container][
][sc=pfp][/sc][
][sc=quote]" a quote will go here "[/sc][
][/sc][
][sc=tabbed_interface horizontal][
][ul][
][li]title[/li]
[li]longer title[/li]
[li]title[/li]
[li]longer title[/li]
[li]title[/li]
[/ul][
][sc=tab]This is free to use code made by @[url=https://pfq.link/@Jkbg]Neonyan[/url]!
[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=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]Neonyan[/url]
Profile Picture @[url=https://PUT_CREDIT_HERE]username[/url][/display][/pit][sc=overlay][/sc][/sc][
][/sc][
][style]
//**RESET STYLES**//
@import 'skins/user/J/k/b/g/reset-styles/__extra';
//*IMAGES*//
@pfp = url("https://i.imgur.com/2Ya6DRN.png");
//*COLORS -- THESE ARE DEFAULT PFQ COLORS AND YOU WILL HAVE TO MANUALLY REPLACE THEM IN ORDER TO GET CUSTOM COLORS*//
//*@col-bg1 - the main background colour, default light green.
//*@col-bg2 - the "heading" background colour, default brown.
//*@col-bg3 - the "panel" background colour, default grey.
//*@col-fg1 - the main text colour, default dark green.
//*@col-fg2 - the "heading" text colour, default grey.
//*@col-border1 - the colour used for borders, default dark green.
//*@col-link1 - link colour, default blue.
//*@col-link2 - visited link colour, default purple.
//*@col-link3 - active link colour, default red.
//*LINK STYLING*//
a:link, a:visited, a:active {
color: @col-link1;
background: transparent;
text-decoration: 1px solid underline @col-link1;
}
a:hover {
transition: all 0.3s;
color: @col-link2;
text-decoration: 1px solid underline @col-link2;
}
//**HEADER STYLING**//
h1,h2,h3 {
color: @col-fg2;
background: @col-bg2;
padding: 0 5px;
border-radius: 2px;
}
//**DIVIDER STYLING**//
hr {
background: @col-border1;
border: 1px solid @col-border1;
}
//**BOLD, ITALIC, UNDERLINE & STRIKETHROUGH STYLING**//
b, i, u, s, {
color: @col-fg2;
background: @col-bg2;
padding: 0 2px;
border-radius: 2px;
}
//**TOOLTIP STYLING**//
.tooltip_content {
width: fit-content;
color: @col-fg2;
font-size: 10pt;
background-color: @col-bg2;
border: 1px solid @col-border1;
border-radius: 2px;
}
.bbcode_tooltip {
text-decoration: 1.5px underline dotted @col-link1;
}
//**PKMNPANEL STYLING**//
.party>div {
background: @col-bg2;
border: 1px solid @col-border1;
border-radius: 2px;
color: @col-fg2;
&:after {
}
& > .pkmn:before {
background-color: @col-bg1;
border-color: @col-border2;
}
&>.name {
&>a.summarylink {
color: @col-link1;
letter-spacing: 1px;
text-decoration: 1px solid underline @col-link1;
background: @col-bg1;
padding: 3px;
border-radius: 2px;
max-width: 120px !important;
}
&>a.summarylink:hover {
color: @col-link2;
text-decoration: 1px solid underline @col-link2;
}
}
&>.expbar {
background: @col-bg1;
border: 1px solid @col-border1;
border-radius: 2px;
color: @col-fg2;
border-radius: 2px;
&>div {
border-color: none;
border-right: none;
background: @col-bg1;
}
&> span {
margin: -4px;
background: @col-bg2;
color: @col-fg2;
}
}
&>.taste {
b,i {
color: @col-fg2;
}
}
&>.extra {
&>.nature {
b,i {
color: @col-fg2;
}
}
}
&>.action {
.berrybuttons[data-up="dry"] > [data-berry="chesto"],
.berrybuttons[data-up="sour"] > [data-berry="asper"],
.berrybuttons[data-up="spicy"] > [data-berry="cheri"],
.berrybuttons[data-up="sweet"] > [data-berry="pecha"],
.berrybuttons[data-up="bitter"] > [data-berry="rawst"] {
border-radius: 2px;
}
&>.berrybuttons>.tooltip_content {
border-radius: 2px;
border: 1px solid @col-border1;
background: @col-bg2;
color: @col-fg2;
margin-top: 5px;
border: 1px solid @col-border2;
}
}
}
//*PANEL STYLING**//
.panel {
&>h3,>div {
}
&>h3 {
background: @col-bg1;
color: @col-fg1;
border: 1px solid @col-border1;
border-radius: 2px 2px 0px 0px;
border-bottom: none;
font-weight: bold;
font-size: 12pt;
&>a {
}
}
&>div {
color: @col-fg2;
background: @col-bg2;
border: 1px solid @col-border1;
border-radius: 0px 0px 2px 2px;
}
}
.panel.accordion {
h3 {
border: 1px solid @col-border1;
a {
color: @col-link1;
text-decoration: 1px solid underline @col-link1;
font-weight: bold;
}
a:hover {
text-decoration: 1px solid underline @col-link2;
}
}
h3:hover, h3.active, h3.active:hover {
background: @col-bg1;
a, a:hover {
color: @col-link2;
text-decoration: 1px solid underline @col-link2;
font-weight: bold;
}
}
}
//**PROGRESS BAR STYLING**//
.expbar {
background: @col-bg2;
border: 1px solid @col-border1;
border-radius: 2px;
color: @col-fg2;
display: flex;
align-items: center;
justify-content: center;
&>div {
border-color: none;
border-right: none;
background: @col-bg1;
}
&>span {
display: flex;
align-items: center;
justify-content: center;
color: @col-fg1;
background: @col-bg1;
padding: 5px;
border-radius: 2px;
border: 1px solid @col-border1;
}
}
//**TABLE STYLING**//
.bbcode_table {
tr {
th, td {
border: 1px solid @col-border1;
}
th {
background: @col-bg1;
color: @col-fg1;
}
td {
background: @col-bg2;
color: @col-fg2;
}
}
}
//**LIST STYLING**//
ol, ul {
text-align: left;
}
ul {
list-style-image: @bullet;
list-style-position: outside;
}
//**BODY STYLING**//
.all {
padding: 6px;
background: @col-bg1;
display: flex;
flex-direction: column;
font-size: 10pt;
color: @col-fg1;
//**CONTAINER STYLING//**
.container {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 8px;
//**QUOTE STYLING//**
.quote {
text-align: right;
color: @col-fg2;
background: @col-bg2;
padding: 10px 10px 5px 10px;
border: 1px solid @col-border1;
border-radius: 2px;
min-height: 85px;
font-style: italic;
flex-grow: 1;
text-transform: lowercase;
font-variant: small-caps;
}
//**PROFILE PICTURE STYLING//**
.pfp {
background-image: @pfp;
background-color: @col-border1;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
min-height: 100px;
min-width: 100px;
margin-right: 10px;
border: 1px solid @col-border1;
border-radius: 2px;
}
}
//**TABBED INTERFACE STYLING**//
.tabbed_interface {
margin-bottom: 5px;
&>ul {
margin-left: -4px;
margin-right: -4px;
&>li {
margin: 4px;
background: @col-bg3;
border: 1px solid @col-border1;
border-radius: 2px;
color: @col-fg1;
text-transform: lowercase;
font-variant: small-caps;
font-size: 11pt;
}
&>li:hover {
background: @col-bg2;
border: 1px solid @col-border1;
border-radius: 2px;
color: @col-fg2;
font-size: 11.5pt;
}
&>li.tab-active, li.tab-active:hover {
background: @col-bg2;
border: 1px solid @col-border1;
border-radius: 2px;
color: @col-fg2;
font-size: 11.5pt;
}
}
&>.tab {
background: @col-bg3;
border: 1px solid @col-border1;
border-radius: 2px;
color: @col-fg1;
}
}
//**CREDITS STYLING**//
.credits {
text-align: center;
background: @col-bg2;
margin-top: 5px;
border: 1px solid @col-border1;
border-radius: 2px;
padding: 5px;
padding-bottom: 6px;
padding-top: 5px;
color: @col-link1;
.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: 100%;
overflow: visible;
&>.panel {
background: fade(@col-bg1, 75%);
border: none;
width: 100%;
display: inline-block;
box-sizing: border-box;
vertical-align: middle;
box-shadow: 0 0 0px @col-bg1, 0 0 0 8675309px fade(@col-bg1, 75%) !important;
margin: 0;
transform: translateY(-50%);
&>h3 {
background: @col-bg2;
font-weight: bold;
text-transform: lowercase;
font-variant: small-caps;
font-size: 14pt;
padding: 2px 2px 5px 2px;
border: 1px solid @col-border1;
border-radius: 2px 2px 0px 0px;
border-bottom: none;
color: @col-fg2;
}
&>div {
background: @col-bg3;
color: @col-fg1;
border: 1px solid @col-border1;
border-radius: 0px 0px 2px 2px;
}
}
}
&>.tooltip_trigger {
transition: 0.4s;
}
&>.tooltip_trigger:hover {
color: @col-link2;
transition: all 0.3s;
}
&>.bbcode_tooltip {
text-decoration: 1px solid @white underline;
color: @col-link1;
background: @col-bg1;
padding: 1px 3px;
padding-top: 0px;
border-radius: 2px;
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;
}
}
}
[/style]
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.
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.
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.
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.