Zach's Free To Use Codes
Forum Index > Other > Other Art >
Hello & Welcome to my free to use coding hub! This is where I will give my codes to da public <3
Please leave a comment if you are using any codes in this thread! It helps satiate Sally's everlasting urge to consume threads.
I would also appreciate if you wanted to tip me when using my codes! You can do so by sending a gift with any ammount or type of currency. It's not required of course though!
- Terms of Service
- About Me Codes
- Signature Codes
- Forum Thread Codes
- Type Race Codes
- Site Skins & Extra CSS
Terms of Service
By clicking off of this tab to obtain my codes, you are agreeing to this T.O.S!Please do not ...
- ... redistribute my codes! If someone would like to use my code, please redirect them to this thread.
- ... 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 or in PMs for assistance with my codes*Again, I will not teach you BBCode or CSS! Please only ask me questions about my codes specifically..
- ... ask for assistance on making your edits of my codes fit PFQ's ledgibility guidelines.
Coding Resources
Some resources I suggest using to learn about BBCode and CSS are: BBCode- How to Edit BBCode A brief summary of what BBCode is and how to edit it.
- W3shools CSS Tutorial An introduction tutorial by W3schools to CSS. I highly suggest using W3schools to troubleshoot and learn about CSS beyond just this tutorial.
- Developer Mozilla CSS Tutorial An introduction tutorial by Developer Mozilla to CSS. This is another site that you can use to troubleshoot and learn about CSS.
- A Somewhat Extensive Guide to BBCodes One of the oldest, but also simplest and easiest to understand guides on PFQ about BBCode by Meu.
- Guide to CSS: Beginner to Expert A basic guide and more advanced guide to CSS by Aemilia.
- Styleclass and You: An Introduction A basic guide to BBCode properties and how to edit them using styleclasses by Niall.
- BBCode and CSS Hacks A slightly more indepth tutorial discussing BBCode and CSS concepts by Kieri.
About Me Codes
Basic
This is a simple code that can be used as an About Me or as a Forum Thread code. It uses PFQ's built in colors, though you are welcome to change that!
Wooper
This is a simple about me code themed around Wooper!
Signature Codes
Basic (Revamped)
This is a simple signature code! It has very concice coding so that you can fit more stuff in the actual content.
I actually made this about a year ago, but I touched it up slightly and am reposting it here, since wherever it was posted before was nuked for inactivity.
Directions on Editing this Code
Notes Before Editing!
Please make sure all your code edits are legible. Read through the Pokefarm Legibility Guidelines and check your background vs text color's contrast with Pokefarm's approved tool.
You can use this site to find a hex code or rgb value code you like!
Trouble Shooting
- Check your syntax! CSS has to have proper syntax, or the whole thing will break.
An example of proper syntax:
.test {color:white;background:black;}
An example of broken syntax:
.text {color:whitebackground:black}
There's no ; at the end of each value!
Another example of broken syntax:
.text {color:white;background:black;
This text is missing a closing } bracket!
Another example of broken syntax:
.test {color:fff;background:black;}
The color's value is supposed to be a hex value, but it is missing a # at the beginning! It should be #fff instead of just fff
Actual Guide
Replace the selected link with your background image of choice!
This is by default a repeating image!
If you'd like to use a non-repeating image, replace the highlighted text with "cover" or "contain", depending on which looks best with the image you want to use.
Additionally, you should replace the highlighted "repeat" with "no-repeat" if you are opting not to use a small repeating image.
To change the color of the black transparent box, replace the highlighted text with either a hex code (will not be transparent) or a rgb color code. (Ex; rgb(red value,green value,blue value,transparency value). You can use this site to get a hex code's red green and blue values.
To change the text color that's inside of the black transparent box, replace the highlighted text with a hex code.
To change the background of the credit's bottom bar, change the highlighted text to the hex code of your choice.
To change the text color of the credit's bottom bar, change the highlighted text to the hex code of your choice. (Note; this does not change the LINK color. Just the text inbetween the links).
To change the text color of all the links in the signature, change the highlighted text to the hex code of your choice.
This is by default a repeating image!
If you'd like to use a non-repeating image, replace the highlighted text with "cover" or "contain", depending on which looks best with the image you want to use.
Additionally, you should replace the highlighted "repeat" with "no-repeat" if you are opting not to use a small repeating image.
To change the color of the black transparent box, replace the highlighted text with either a hex code (will not be transparent) or a rgb color code. (Ex; rgb(red value,green value,blue value,transparency value). You can use this site to get a hex code's red green and blue values.
To change the text color that's inside of the black transparent box, replace the highlighted text with a hex code.
To change the background of the credit's bottom bar, change the highlighted text to the hex code of your choice.
To change the text color of the credit's bottom bar, change the highlighted text to the hex code of your choice. (Note; this does not change the LINK color. Just the text inbetween the links).
To change the text color of all the links in the signature, change the highlighted text to the hex code of your choice.
Pagedoll
This is a simple signature code that includes a pagedoll! It uses an import to transfer all it's css.
This is a modified version of a signature I made for myself!
You can add a custom divider & a custom pagedoll. Take care to credit the divider you choose and to check that you have permission to use it.
Directions on Editing this Code
Notes Before Editing!
Please make sure all your code edits are legible. Read through the Pokefarm Legibility Guidelines and check your background vs text color's contrast with Pokefarm's approved tool.
You can use this site to find a hex code or rgb value code you like!
Trouble Shooting
- Check your syntax! CSS has to have proper syntax, or the whole thing will break.
An example of proper syntax:
.test {color:white;background:black;}
An example of broken syntax:
.text {color:whitebackground:black}
There's no ; at the end of each value!
Another example of broken syntax:
.text {color:white;background:black;
This text is missing a closing } bracket!
Another example of broken syntax:
.test {color:fff;background:black;}
The color's value is supposed to be a hex value, but it is missing a # at the beginning! It should be #fff instead of just fff
Actual Guide For this code, you do not need to edit any CSS! You only need to change the value of the variables. The custom variables I used are: @pagedoll, @pd-sizing, @divider, @div-sizing, @div-height, and @div-repeat
@pagedoll is pretty self explanatory; it's the image URL for the pagedoll. Replace "https://i.imgur.com/2Ya6DRN.png" with your image URL. Keep the quotation marks. Example; @pagedoll = url("https://i.imgur.com/2Ya6DRN.png");
@pd-sizing is the way that the code will crop your pagedoll. "Contain" will make sure your image stays within the dimesions. "Cover" will crop your image to a square and center the image. Possible Examples; @pd-sizing = contain; @pd-sizing = cover;
@div-sizing is the way that the code will crop your divider image. "Contain" will make sure your image stays within the dimesions. "Cover" will crop your image to the length and height of the divider and center the image. Possible Examples; @div-sizing = contain; @div-sizing = cover;
@div-height is the height that the divider will be. I have it set at 15px as a default, but it can get larger or smaller then that. Examples; @div-height = 15px; @div-height = 20px;
@div-repeat determines if the divider image will repeat or not, or which way it will repeat. Possible Examples; @div-repeat = repeat; @div-repeat = repeat-x; @div-repeat = repeat-y; @div-repeat = no-repeat;
An example of what your code would look like after customization would be
Actual Guide For this code, you do not need to edit any CSS! You only need to change the value of the variables. The custom variables I used are: @pagedoll, @pd-sizing, @divider, @div-sizing, @div-height, and @div-repeat
@pagedoll is pretty self explanatory; it's the image URL for the pagedoll. Replace "https://i.imgur.com/2Ya6DRN.png" with your image URL. Keep the quotation marks. Example; @pagedoll = url("https://i.imgur.com/2Ya6DRN.png");
@pd-sizing is the way that the code will crop your pagedoll. "Contain" will make sure your image stays within the dimesions. "Cover" will crop your image to a square and center the image. Possible Examples; @pd-sizing = contain; @pd-sizing = cover;
@div-sizing is the way that the code will crop your divider image. "Contain" will make sure your image stays within the dimesions. "Cover" will crop your image to the length and height of the divider and center the image. Possible Examples; @div-sizing = contain; @div-sizing = cover;
@div-height is the height that the divider will be. I have it set at 15px as a default, but it can get larger or smaller then that. Examples; @div-height = 15px; @div-height = 20px;
@div-repeat determines if the divider image will repeat or not, or which way it will repeat. Possible Examples; @div-repeat = repeat; @div-repeat = repeat-x; @div-repeat = repeat-y; @div-repeat = no-repeat;
An example of what your code would look like after customization would be
Example
[style]
//*IMAGES*//
@pagedoll = url("https://i.imgur.com/2Ya6DRN.png");
@pd-sizing = contain;
@divider = url("https://images.placeholders.dev/?width=2055&height=100&text=Made%20with%20placeholders.dev&bgColor=%23f7f6f6&textColor=%236d6e71");
@div-sizing = contain;
@div-height = 14px;
@div-repeat = no-repeat;
//*IMPORT CSS*//
@import 'skins/user/J/k/b/g/signature-f2u-pagedoll/__extra';
[/style]
Forum Thread Codes
Basic
This is a simple code that can be used as an About Me or as a Forum Thread code. It uses PFQ's built in colors, though you are welcome to change that!
Pokemon Mystery Dungeon Text Box
This is a simple code that @AngelOShadows commissioned! They asked for it to be free to use, so here it is. It's based off of Pokemon Mystery Dungeon: Explorers of Sky/Darkness/Time 's text boxes.
Type Race Codes
Type Race Order Display
This is just a short code to display the order that you have your type race teams in! In order to "pick" which type is currently not grey-scale, just bold the image with [b]bolded here[/b]. If you want them all to be full color, bold the entire section.
Forum Thread Codes
Team Psychic; Caitlin
This is a free to use code for the type race thread only, please do not use for a shop or journal or anything else. This is based around Caitlin, the Psychic type Elite Four member of Unova!
Site Skin Snippits
DrWho's Party Clicking CSS - Modified by Neonyan
This is a very helpful quality of life CSS that DrWho wrote several years ago. With the release of the showcase feature, Mochi & I used his CSS as a base to edit and modify so that the showcase would cooperate nicely!
There are two versions of this code. For desktop, they are identical. Their differences lie in how they interact with mobile. The default version simply makes the berry buttons huge. The no-scroll version takes up your whole screen and hides the site's header, preventing your screen from scrolling if your phone detects your "tap" as a scroll by accident.
default version
//**DRWHO'S PARTY CLICK ADJUSTMENTS**//
:root {
--multiuser-button-height: 5em;
--multiuser-border-radius: 8px;
}
@media only screen and (max-width:800px) {
:root {
--multiuser-button-height: 500px;
}
#multiuser #profilebox,
#multiuser div.center.small,
#multiuser mu_navlink.prev,
#multiuser a.fieldslink {
display: none;
}
#multiuser div.party.wide {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
}
}
#multiuser h1 {
/* fix that icon next to name causes jumps */
display: flex;
justify-content: center;
align-items: center;
}
.mq2 #content {
padding-top: 0;
}
.mq25 #partybox, .mq25 .multi-compact #partybox {
width: 90%;
}
.mq25 #multiuser #partybox .showcase {
display: flex;
}
.mq25 #multiuser #partybox .mu_navlink.toggle {
display: none;
}
.mq25 #multiuser #partybox .compact-view-toggle {
display: none;
}
.mq25 #multiuser .mu_navlink.prev,
.mq25 #multiuser #partybox > label {
position: absolute;
bottom: 0;
margin: 0;
padding: 8px;
border-radius: var(--multiuser-border-radius);
background-color: @col-bg1;
border: 1px solid @col-border1;
}
.mq25 #multiuser #partybox > label {
right: 0;
}
.mq25 #multiuser #profilepage .showcase > div > .pkmn.plateform,
.mq25 #multiuser #profilepage .showcase > div > .name,
.mq25 #multiuser #profilepage .showcase > div > .icons,
.mq25 #multiuser #profilepage .showcase > div > .fieldslink {
display: none;
}
.mq25 #multiuser .showcase {
background: transparent;
border: 0;
}
.mq25 #multiuser #profilepage {
width: 100%;
align-items: center;
justify-content: center;
}
.mq25 #multiuser .tab-active {
margin: 0;
left: 0;
right: 0;
height: auto;
box-shadow: none;
}
#multiuser #partybox {
/* else next button touches the trainer card directly */
margin-right: 1em;
}
.mq25 #multiuser #partybox {
/* reset for mobile */
margin-right: 0;
}
#multiuser #partybox .party > div {
/* by making this static we can place the buttons
relative to the partybox */
position: static;
}
#multiuser #partybox {
position: relative;
padding-top: calc(var(--multiuser-button-height) + 1em)
}
#multiuser #partybox .action {
/* action button (hold the egg or berry) */
position: absolute;
/*allows for collapse when done*/
min-height: 0;
height: auto;
top: 0;
left: 0;
box-sizing: border-box;
width: 100%;
z-index: 9999;
}
#multiuser.tabbed_interface.horizontal > div {
box-shadow: none;
}
#multiuser.tabbed_interface.horizontal > ul {
flex-wrap: nowrap;
align-items: center;
justify-content: center;
width: 100%;
}
#multiuser.tabbed_interface.horizontal > ul > li {
padding: 0;
margin: 0;
font-size: 8pt;
border: 0;
text-align: center;
width: 0px;
overflow: hidden;
}
#multiuser.tabbed_interface.horizontal > ul > li.tab-active {
min-width: fit-content;
font-size: 12pt;
}
#multiuser #profilepage .showcase > div > .action > .berrybuttons > a {
/* adjust showcase button */
display: flex;
align-items: center;
justify-content: center;
}
#multiuser #partybox .action > a,
#multiuser #partybox .showcase > div > .action > .berrybuttons > a,
#multiuser #partybox .action > div,
#multiuser #partybox .mu_navlink.next {
/* next button AND action button*/
padding-right: 1em;
border: 0;
box-sizing: border-box;
font-size: 12pt;
padding: 0;
margin: 0;
min-height: var(--multiuser-button-height);
line-height: var(--multiuser-button-height);
}
#multiuser #partybox .action > a,
#multiuser #partybox .showcase > div > .action > .berrybuttons > a {
display: flex;
align-items: center;
justify-content: center;
}
#multiuser #partybox .mu_navlink.next {
/* next button */
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
min-width: 100%;
z-index: 9997;
border-radius: var(--multiuser-border-radius);
}
#multiuser #partybox .action:empty,
#multiuser #partybox .action > table,
#multiuser #partybox .action.working,
#multiuser #partybox .berrybuttons > .tooltip_content {
/*hide action when it is *empty *processing the berry
or *showing "Thank you!" */
display: none;
}
#multiuser #partybox .berrybuttons > a {
/*only 1 berry per berrybuttons*/
display: none;
box-sizing: border-box;
height: 100%;
width: 100%;
line-height: var(--multiuser-button-height);
}
#multiuser #partybox .berrybuttons[data-up='sour'] > a[data-berry='aspear'],
#multiuser #partybox .berrybuttons[data-up='spicy'] > a[data-berry='cheri'],
#multiuser #partybox .berrybuttons[data-up='dry'] > a[data-berry='chesto'],
#multiuser #partybox .berrybuttons[data-up='sweet'] > a[data-berry='pecha'],
#multiuser #partybox .berrybuttons[data-up='bitter'] > a[data-berry='rawst'],
#multiuser #partybox .berrybuttons[data-up='any'] > a:first-of-type {
/*show only good berries*/
display: inline-block;
border-radius: var(--multiuser-border-radius);
background-color: @col-flavour-up;
}
#multiuser #profilepage .party > div:hover > .action a[data-berry]::after,
#multiuser #profilepage .showcase > div:hover > .action a[data-berry]::after {
/* no border on berry hover */
border-color: transparent;
}
no-scroll version
//**DRWHO'S PARTY CLICK ADJUSTMENTS**//
:root {
--multiuser-button-height: 5em;
--multiuser-border-radius: 8px;
}
@media only screen and (max-width: 768px) {
:root {
--multiuser-button-height: 80vh;
}
#multiuser {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99999;
background: rgba(0,0,0,0.9);
height: 100vh;
overflow: auto;
}
}
#multiuser h1 {
/* fix that icon next to name causes jumps */
display: flex;
justify-content: center;
align-items: center;
}
.mq2 #content {
padding-top: 0;
}
.mq25 #multiuser #partybox,
.mq25 .multi-compact #multiuser #partybox {
width: 90%;
}
.mq25 #multiuser #partybox .party,
.mq25 .multi-compact #multiuser #partybox .party {
margin-top: -300px;
}
.mq25 #partybox .fieldslink {
width: 100%;
margin-bottom: 28px;
}
.mq25 #multiuser #partybox .showcase {
display: flex;
}
.mq25 #multiuser #partybox .mu_navlink.toggle,
.mq25 #multiuser #partybox .compact-view-toggle,
.mq25 #multiuser #partybox div.center.small,
.mq25 #multiuser #profilepage #trainercard {
display: none;
}
.mq25 #multiuser .mu_navlink.prev,
.mq25 #multiuser #partybox > label {
position: absolute;
bottom: 0;
margin: 0;
padding: 8px;
border-radius: var(--multiuser-border-radius);
background-color: @col-bg1;
border: 1px solid @col-border1;
}
.mq25 #multiuser #partybox > label {
right: 0;
}
.mq25 #multiuser #profilepage .showcase > div > .pkmn.plateform,
.mq25 #multiuser #profilepage .showcase > div > .name,
.mq25 #multiuser #profilepage .showcase > div > .icons,
.mq25 #multiuser #profilepage .showcase > div > .fieldslink {
display: none;
}
.mq25 #multiuser .showcase {
background: transparent;
border: 0;
padding: 0;
margin: 5px;
}
.mq25 #multiuser #profilepage {
width: 100%;
align-items: center;
justify-content: center;
}
.mq25 #multiuser .tab-active {
margin: 0;
left: 0;
right: 0;
height: 100%;
box-shadow: none;
}
#multiuser #partybox {
/* else next button touches the trainer card directly */
margin-right: 1em;
}
.mq25 #multiuser #partybox {
/* reset for mobile */
margin-right: 0;
}
#multiuser #partybox .party > div {
/* by making this static we can place the buttons
relative to the partybox */
position: static;
}
#multiuser #partybox {
position: relative;
padding-top: calc(var(--multiuser-button-height) + 1em)
}
#multiuser #partybox .action {
/* action button (hold the egg or berry) */
position: absolute;
/*allows for collapse when done*/
min-height: 0;
height: auto;
top: 0;
left: 0;
box-sizing: border-box;
width: 100%;
z-index: 9999;
}
#multiuser.tabbed_interface.horizontal > div {
box-shadow: none;
}
#multiuser.tabbed_interface.horizontal > ul {
flex-wrap: nowrap;
align-items: center;
justify-content: center;
width: 100%;
}
#multiuser.tabbed_interface.horizontal > ul > li {
padding: 0;
margin: 0;
font-size: 8pt;
border: 0;
text-align: center;
width: 0px;
overflow: hidden;
}
#multiuser.tabbed_interface.horizontal > ul > li.tab-active {
min-width: fit-content;
font-size: 12pt;
}
#multiuser #profilepage .showcase > div > .action > .berrybuttons > a {
/* adjust showcase button */
display: flex;
align-items: center;
justify-content: center;
}
#multiuser #partybox .action > a,
#multiuser #partybox .showcase > div > .action > .berrybuttons > a,
#multiuser #partybox .action > div,
#multiuser #partybox .mu_navlink.next {
/* next button AND action button*/
padding-right: 1em;
border: 0;
box-sizing: border-box;
font-size: 12pt;
padding: 0;
margin: 0;
min-height: var(--multiuser-button-height);
line-height: var(--multiuser-button-height);
}
#multiuser #partybox .action > a,
#multiuser #partybox .showcase > div > .action > .berrybuttons > a {
display: flex;
align-items: center;
justify-content: center;
}
#multiuser #partybox .mu_navlink.next {
/* next button */
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
min-width: 100%;
z-index: 9997;
border-radius: var(--multiuser-border-radius);
}
#multiuser #partybox .action:empty,
#multiuser #partybox .action > table,
#multiuser #partybox .action.working,
#multiuser #partybox .berrybuttons > .tooltip_content {
/*hide action when it is *empty *processing the berry
or *showing "Thank you!" */
display: none;
}
#multiuser #partybox .berrybuttons > a {
/*only 1 berry per berrybuttons*/
display: none;
box-sizing: border-box;
height: 100%;
width: 100%;
line-height: var(--multiuser-button-height);
}
#multiuser #partybox .berrybuttons[data-up='sour'] > a[data-berry='aspear'],
#multiuser #partybox .berrybuttons[data-up='spicy'] > a[data-berry='cheri'],
#multiuser #partybox .berrybuttons[data-up='dry'] > a[data-berry='chesto'],
#multiuser #partybox .berrybuttons[data-up='sweet'] > a[data-berry='pecha'],
#multiuser #partybox .berrybuttons[data-up='bitter'] > a[data-berry='rawst'],
#multiuser #partybox .berrybuttons[data-up='any'] > a:first-of-type {
/*show only good berries*/
display: inline-block;
border-radius: var(--multiuser-border-radius);
background-color: @col-flavour-up;
}
#multiuser #profilepage .party > div:hover > .action a[data-berry]::after,
#multiuser #profilepage .showcase > div:hover > .action a[data-berry]::after {
/* no border on berry hover */
border-color: transparent;
}
Change Notification Icon
This snippit l change the Pokefarm notification icon image on your custom site skin! Simply replace the URL "https://i.imgur.com/---.png" with your own image url.
code
//**CHANGE NOTIFICATION BACKGROUND**//
#notifs>a>img {
border: none;
object-position: 9999px;
background-image: url("https://i.imgur.com/---.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
border-radius: 100%;
padding: -5px;
}
Center Arceus Rank
This snippit will center the "Arceus Rank" badge that you have on your party page's "Player Rank" box. This does not work as intended with any rank besides Arceus Rank.
code
//**CENTER ARCEUS RANK ON PARTY PAGE**//
#rankreward .rank_before:first-of-type {
display: block;
margin: 0 auto;
margin-top: 5px;
}
Remove All Box Shadows
This snippit will remove all box shadows on Pokefarm!
Feel free to let me know if I missed any!
code
//*REMOVE BOX SHADOWS*//
* .panel,
* .party>div,
* #regionslist>li,
.dialog>div>div>div,
*#shelterpage #shelter,
* .tabbed_interface>div,
*#partypage #partybox #profilelinks,
*.panel,
#trainerimage,
.fieldslink,
#partybox .party,
.accshoplist>h3,
#indexmain .pkmnshowcase > li,
{
box-shadow: none;
}
Un-Round All Corners
This snippit will un-round every corner on Pokefarm, giving your site skin a pointer look. This purposefully does not include the trainer card, the notification icon or built-in browser "buttons" (such as the "Post" button you see while making a new post).
Feel free to let me know if I missed any!
To use this snippit, simply copy paste it into the "Extra CSS" section of your custom site skin.
code
//*BORDER RADIUS*//
//**HEADER**//
*#navigation>#navbtns>li>a,
*#navigation #navbookmark>li>a,
*#announcements>ul>li>a,
* #counters>#counterlist>li>.tooltip_content>img,
//**MISC.**//
* .panel,
.dialog>div>div>div,
* .tabbed_interface>div,
* .forumpost,
.tabbed_interface>ul>li:first-child,
.tabbed_interface>ul>li:last-child,
* .tooltip_content,
*.expbar,
#toplink,
.morestufflinks > li > a,
//**PKMN PANEL**//
.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"],
.party>div>.action>.berrybuttons[data-down="sour"]>[data-berry="aspear"],
.party>div>.action>.berrybuttons[data-down="spicy"]>[data-berry="cheri"],
.party>div>.action>.berrybuttons[data-down="dry"]>[data-berry="chesto"],
.party>div>.action>.berrybuttons[data-down="sweet"]>[data-berry="pecha"],
.party>div>.action>.berrybuttons[data-down="bitter"]>[data-berry="rawst"],
*.party>div>.action>a,
* .party>div,
//**MAIN PFQ PAGE**//
#siterating > .ratinglist > div:first-child > .expbar,
#siterating > .ratinglist > div:last-child > .expbar,
#indexmain .pkmnshowcase > li,
//**OTHER USER'S PAGES**//
.fieldslink,
#partybox .party>div:nth-child(1),
#partybox .party>div:nth-child(2),
#partybox .party>div:nth-child(5),
#partybox .party>div:nth-child(6),
.mq2 #partybox .party>div:nth-child(1),
.mq2 #partybox .party>div:nth-child(6),
#trainerimage,
//**PMS PAGE**//
#pmconvolist>div>a:first-child,
#pmconvolist>div>span:first-child,
#pmconvolist>div>a:last-child,
#pmconvolist>div>span:last-child,
//**FORUMS SECTION**//
*.pane,
* .forumlist>h3,
* .forumlist>ul>li,
.forumthreads>ul>li,
* .pagelist>a,
//**LAB PAGE**//
#egglist>div,
#eggpreview>div,
.tooltip_item>.name>.image,
#dcegglist>li,
//**PARTY PAGE**//
*#partypage #partybox #profilelinks,
#partypage #tasklistbox #tasklist>li,
//**FARM PAGE**//
#farmplaces>li,
//**SHELTER PAGE**//
#shelterpage #shelter,
#shelterpage #shelter #shelterarea,
.inventory>div>ul>li>span,
//**POKEDEX PAGE**//
#regionslist>li>h3,
#regionslist>li>h3,
#regionslist>li>ul,
#regionslist>li>ol>li.entry>.ecnt,
#regionslist>li>ol>li.entry>.ecnt>.type,
#regionslist>li>ol>li.entry>.ecnt>.type>span,
#dexinfo>.evolutiontree .name>.icon,
#dexinfo>.formeregistration>ul>li>a:last-child,
#dexinfo>.formeregistration>ul>li>span:last-child,
#dexinfo>.formeregistration>ul>li>a:last-child,
#dexinfo>.formeregistration>ul>li>span:first-child,
#dexinfo .dexbasestats>li:last-child>.expbar,
#dexinfo .dexbasestats>li:first-child>.expbar,
#dexinfo .dexdetails>li>.colboxes>span,
//**FIELD PAGE**//
#fieldmodetoggle,
#field_field,
#field_party,
#field_berries>div,
//**TRADE CENTER**//
.tradelist>li,
//**WISHFORGE**//
.badgelist>li,
#scoretable,
.ravynespeak>.rslabel,
.ravynespeak>.rsenglish,
.ravynespeak>.rsoriginal,
.allravyne .ravynespeak>.rsoriginal,
.biggem_stack,
//**SCOUR PAGE**//
#newmission,
//**FISHING HUT**//
.supplytable>li>div:first-child,
.supplytable>li>div:last-child,
.arealist>li,
.arealist>li>.info,
//**SUPPLIER PAGE**//
.eggorderlist>li,
//**CONTEST SECTION (Multiple Pages)**//
.accshoplist>ul>li>.image,
.accshoplist>h3,
.costumelist>li>span:first-child,
.costumelist>li>span:last-child,
//**AETHER HOUSE**//
#ubtrade>div>ul>li>label,
#nulltrade .plist>span,
#necrotrade>div>ul>li>span:first-child,
#necrotrade>div>ul>li>span:last-child,
//**TOURNAMENT SECTION (Multiple Pages)**//
.shoplist>li>div:first-child,
.shoplist>li>div:last-child,
{
border-radius: 0px;
}
Blank Site Boost Images
This snippit will remove the site's boost images. This was requested by someone on the PFQ Discord as a way to minimize overstimulation during the 2023 April Fools event, which changed all the boost images to be various images of Methos.
code
//*Blank Boost Counters*//
#counterlist > li, #counterlist > li.active, #counterlist > li.zophan {
background-image: none !important;
background-color: @col-bg2;
}
Pi Day Berry Images
This snippit changes all the berries on site to be the Pi Day Berry Sprites! This is a fun one :3
Feel free to let me know if this one has any errors! In order to see the effects, you must press CTRL+F5 to hard refresh.
Code
.berries[style*="aspearberry.png"]
{
background-image:url("https://pokefarm.wiki/images/d/d5/Pie_Aspear_Meringue.png")!important;
}
img[src*="aspearberry.png"]
{
content:url("https://pokefarm.wiki/images/d/d5/Pie_Aspear_Meringue.png");
}
.berries[style*="cheriberry.png"]
{
background-image:url("https://pokefarm.wiki/images/5/5c/Pie_Lattice_Cheri.png")!important;
}
img[src*="cheriberry.png"]
{
content:url("https://pokefarm.wiki/images/5/5c/Pie_Lattice_Cheri.png");
}
.berries[style*="chestoberry.png"]
{
background-image:url("https://pokefarm.wiki/images/1/13/Pie_Chesto_Crumble.png")!important;
}
img[src*="chestoberry.png"]
{
content:url("https://pokefarm.wiki/images/1/13/Pie_Chesto_Crumble.png");
}
.berries[style*="aspear"]
{
background-image:url("https://pokefarm.wiki/images/d/d5/Pie_Aspear_Meringue.png")!important;
}
img[src*="aspear"]
{
content:url("https://pokefarm.wiki/images/d/d5/Pie_Aspear_Meringue.png");
}
.berries[style*="cheri"]
{
background-image:url("https://pokefarm.wiki/images/5/5c/Pie_Lattice_Cheri.png")!important;
}
img[src*="cheri"]
{
content:url("https://pokefarm.wiki/images/5/5c/Pie_Lattice_Cheri.png");
}
.berries[style*="chesto"]
{
background-image:url("https://pokefarm.wiki/images/1/13/Pie_Chesto_Crumble.png")!important;
}
img[src*="chesto"]
{
content:url("https://pokefarm.wiki/images/1/13/Pie_Chesto_Crumble.png");
}
.berries[style*="pecha"]
{
background-image:url("https://pokefarm.wiki/images/7/7a/Pie_Pecha.png")!important;
}
img[src*="pecha"]
{
content:url("https://pokefarm.wiki/images/7/7a/Pie_Pecha.png");
}
.berries[style*="rawst"]
{
background-image:url("https://pokefarm.wiki/images/9/9b/Tart_Rawst_Berry.png")!important;
}
img[src*="rawst"]
{
content:url("https://pokefarm.wiki/images/9/9b/Tart_Rawst_Berry.png");
}
.party > div:hover > .action a[data-berry]::after {
border-color: transparent;
}
// Fit image into the space it's supposed to go into
.party > div > .action > .berrybuttons > a > img {
max-width: 85%;
max-height: 85%;
padding: 3px;
padding-top: 0px;
}
Halloween 2023 Berry Images
This snippit changes all the berries on site to be the Halloween 2023 Berry Sprites! This is a direct edit of the Pi Day code I made. Cele did this edit and it is posted here with her permission. Thank you Cele!
Feel free to let me know if this one has any errors! In order to see the effects, you must press CTRL+F5 to hard refresh.
Code
.berries[style*="aspearberry.png"]
{
background-image:url("https://pfq-static.com/img/events/halloween/sour.candy.big.png")!important;
}
img[src*="aspearberry.png"]
{
content:url("https://pfq-static.com/img/events/halloween/sour.candy.big.png");
}
.berries[style*="cheriberry.png"]
{
background-image:url("https://pfq-static.com/img/events/halloween/spicy.candy.big.png")!important;
}
img[src*="cheriberry.png"]
{
content:url("https://pfq-static.com/img/events/halloween/spicy.candy.big.png");
}
.berries[style*="chestoberry.png"]
{
background-image:url("https://pfq-static.com/img/events/halloween/dry.candy.big.png")!important;
}
img[src*="chestoberry.png"]
{
content:url("https://pfq-static.com/img/events/halloween/dry.candy.big.png");
}
.berries[style*="aspear"]
{
background-image:url("https://pfq-static.com/img/events/halloween/sour.candy.big.png")!important;
}
img[src*="aspear"]
{
content:url("https://pfq-static.com/img/events/halloween/sour.candy.big.png");
}
.berries[style*="cheri"]
{
background-image:url("https://pfq-static.com/img/events/halloween/spicy.candy.big.png")!important;
}
img[src*="cheri"]
{
content:url("https://pfq-static.com/img/events/halloween/spicy.candy.big.png");
}
.berries[style*="chesto"]
{
background-image:url("https://pfq-static.com/img/events/halloween/dry.candy.big.png")!important;
}
img[src*="chesto"]
{
content:url("https://pfq-static.com/img/events/halloween/dry.candy.big.png");
}
.berries[style*="pecha"]
{
background-image:url("https://pfq-static.com/img/events/halloween/sweet.candy.big.png")!important;
}
img[src*="pecha"]
{
content:url("https://pfq-static.com/img/events/halloween/sweet.candy.big.png");
}
.berries[style*="rawst"]
{
background-image:url("https://pfq-static.com/img/events/halloween/bitter.candy.big.png")!important;
}
img[src*="rawst"]
{
content:url("https://pfq-static.com/img/events/halloween/bitter.candy.big.png");
}
.party > div:hover > .action a[data-berry]::after {
border-color: transparent;
}
// Fit image into the space it's supposed to go into
.party > div > .action > .berrybuttons > a > img {
max-width: 85%;
max-height: 85%;
padding: 3px;
padding-top: 0px;
}
Center Arceus Rank
This snippit will center the "Arceus Rank" badge that you have on your party page's "Player Rank" box. This does not work as intended with any rank besides Arceus Rank.
code
//**CENTER ARCEUS RANK ON PARTY PAGE**//
#rankreward .rank_before:first-of-type {
display: block;
margin: 0 auto;
margin-top: 5px;
}
Site Skins
Discord
This is a Site Skin that's been color-picked from discord and restyled to fit discord's theme best I could! It's the theme that I personally use ^^
There are two ways to use a site skin; one way is to simply import the skin. This is done through selecting Farm --> Options --> Others --> Create/Change Site Skin --> then typing the Site Skin's path name in where it says "Enter a skin path to use:"
This Site Skin's path is "Jkbg/discord" without the quotations.
If you want to use this Site Skin that includes DrWho's Party Clicking Modification, the Site Skin's path is "Jkbg/discod-party-modification"
The second way to use this site skin would to be creating your own skin, simply copying all the manually inputted colors/values & then copy pasting the raw "Extra CSS" from mine, into yours! This way takes a bit longer and is more complicated, but gives you the flexability of editing my CSS and adding your own into the "Extra CSS" section!
Manual Inputted Colors
Background image: https://i.imgur.com/HPjCjH7.png
Global background: #36393f
Content background: #393c43
Text: #c4c5c7
Title background: #2f3136
Title text: #dcddde
Link: #00b0f4
Visited Link: #00b0f4
Active Link: #00b0f4
Normal User: #80b4c9
Graphics Team: #43b581
ChatOT: #faa61a
Mod-in-Training, Moderator, SuperMod, & Administrator: #ef5859
Border (global): #2f3136
Border (title): #2f3136
Border (content): #2f3136
Flavour liked: #21a66a
Flavour disliked: #542323
★ Zachary ★ They/He ★ 22 ★
Quiet nature collector." 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.
Hello! Not sure if I’m should post, sorry about that! But I’ll be using the about me/forum post code for my About Me! It looks so clean and nice! Thank you for making these! :D
Edit: I might use the same code for my art shop! ^^ thank you so much!!
Signature art by TheWildSalem!
My avatar was made by Cledanio! ♥︎
TRADE SHOP • ART SHOP • JOINT ART SHOP • GYM
First official user woah! Thanks so much, I really appreciate the posts <3
I may use this as well for a small shop :> So thank you in advance!
Sketchling 
I will use your forum code, it is great<3
”A knight’s duty goes beyond a sword."
-Kaeya Alberich
0 / 500, 15zc/ea
Snow Jewel
Forme-Change Item
(: 0)
A delicate jewel that seems to be frozen.
Sells for 325
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Sour food
MAXBold nature
credits
credits
- Code @RAINB0W
- Pkmnpanel by @Mirzam & modified slightly by @RAINB0W
- Background by @peakpx.com
- Sprite of Silkï made by Indeedee
Hello! I'm planning to use your About Me code. It looks great!
Score: 0
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Bitter food
MAXSassy nature
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Spicy food
27%Lonely nature
Bump! I have added my custom site skin to this! :D
Discord
This is a Site Skin that's been color-picked from discord and restyled to fit discord's theme best I could! It's the theme that I personally use ^^
your codes are really nice! i'll definitely use the about me code sometime :D
also, the raw code for the site skin appears to link to pfq's main page whenever i try to open it ^^"
avatar is from kiki's delivery service
Cannot post: Please log in to post