Single post in Zach's Free To Use Codes
Forum Index > Other > Other Art > Zach's Free To Use Codes >
- Green Version
- Blue Version
- Pink Version
This is a free to use code commissioned by @AngelOShadows! This is perfectly alright to use and edit with credit. Please read my T.O.S for more information on what is okay to do with my codes and what is not okay.
This is an imgur album of all the images used in this template; it is suggested that you save these images and re-upload to your own album in case anything happens to my album. I cannot guarentee mine will stay up forever.
MAX MAX
This is an imgur album of all the images used in this template; it is suggested that you save these images and re-upload to your own album in case anything happens to my album. I cannot guarentee mine will stay up forever.
raw code
[
|| Pokemon Mystery Dungeon Text Box ||
This is a free to use code commissioned by @AngelOShadows (url=https://pfq.link/@qw). This code was made by @Neonyan (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.
----------------------------
Entire Container Start
][sc=pink][
Profile Picture Container Start
][sc=pfp][
][img]https://archives.bulbagarden.net/media/upload/f/fa/MDP_E_001.png[/img][
][/sc][
Profile Picture Container End
Content Start
][sc=bb1][sc=bb2][sc=box][
]This is a free to use code commissioned by @[url=https://pfq.link/@qw]AngelOShadows[/url]! This is perfectly alright to use and edit with credit. Please read my T.O.S for more information on what is okay to do with my codes and what is not okay.
[hr]
[url=https://imgur.com/a/AfjzRyV]This is an imgur album[/url] of all the images used in this template; it is suggested that you save these images and re-upload to your own album in case anything happens to my album. I cannot guarentee mine will stay up forever.[
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!
][ul][
][li]Code @[url=https://pfq.link/@Jkbg]Neonyan[/url][/li][
][li]Pkmnpanel by @[url=https://pokefarm.com/forum/post/6000778]Mirzam[/url] & modified slightly by @[url=https://pfq.link/@Jkbg]Neonyan[/url][/li][
][/ul][
][/display][
Display Box End
][/pit][
][sc=overlay][/sc][
][/sc][
Credits Container End
][/sc][/sc][/sc][
Content End
Entire Container End
][/sc][
CSS Styling Start
][style]
//**BODY STYLING**//
.pink {
// --- VARIABLES THE USER CAN EASILY ADJUST ---
// Misc Variables -- these decide which side your portrait will be on. For a right aligned picture, do @right = 0 and @left = auto. Flip them for a left aligned picture.
@right = auto;
@left = 0;
//*IMAGES*//
// For a pink border image, use "https://i.imgur.com/6Q0vWqx.png"
// For a blue border image, use "https://i.imgur.com/KfYzFfr.png"
// For a green border image, use "https://i.imgur.com/przkeM0.png"
@border-img = url("https://i.imgur.com/przkeM0.png");
//*COLORS*//
@text-color: white;
@text-color-inverted: black;
@bg-color: black;
// For a pink theme, use these values (Remove //s from in front of them & add //s in front of all other border variables)
// @border-1: #A03070;
// @border-2: #F870C0;
// @border-3: #F8C0F8;
// For a blue theme, use these values (Remove //s from in front of them & add //s in front of all other border variables)
// @border-1: #4820F8;
// @border-2: #6080F8;
// @border-3: #A8C0E0;
// For a green theme, use these values (Remove //s from in front of them & add //s in front of all other border variables)
@border-1: #187818;
@border-2: #68D068;
@border-3: #C8F8C8;
// --- MY OWN STUFF THAT YOU CAN STILL TOTALLY ADJUST BUT IT WASN'T BUILT WITH THAT IN MIND ---
//**RESET STYLES**//
@import "skins/user/J/k/b/g/reset-styles-2-0/__extra";
//**FONT FACES**//
@font-face {
font-family: "PMD-PIXEL";
src: url("https://www.dl.dropboxusercontent.com/s/7abs0xcv55f9q5b/pixelmix.ttf?dl=0");
}
// Link Colors
@link-color: @border-2;
@link-hover: @border-3;
//*LINK STYLING*//
a:link,
a:visited,
a:active {
color: @link-color;
background: transparent;
text-decoration: 1px solid underline @link-color;
}
a:hover {
transition: all 0.4s;
color: @link-hover;
text-decoration: 1px solid underline @link-hover;
}
//**HEADER STYLING**//
h1,
h2,
h3 {
color: @border-2;
}
//**DIVIDER STYLING**//
hr {
background-image: @border-img;
background-color: @border-2;
background-size: contain;
background-position: center center;
background-repeat: repeat-x;
height: 6px;
border: 0;
width: 103.5%;
margin-left: -10px;
margin-bottom: -5px;
}
//**BOLD, ITALIC, UNDERLINE & STRIKETHROUGH STYLING**//
b,
i {
color: @border-2;
}
u {
text-decoration: 1px solid underline @border-2;
}
//**TOOLTIP STYLING**//
.tooltip_content {
width: fit-content;
color: @text-color;
font-size: 10pt;
border: 3px solid @border-2;
border-radius: 2px;
background: @bg-color;
}
.bbcode_tooltip {
text-decoration: 1.5px underline dotted @link-color;
}
//**PROGRESS BAR STYLING**//
.expbar {
background: @transparent;
border: 3px solid @border-2;
border-radius: 2px;
& > div {
border-color: none;
border-right: none;
background: @border-2;
}
& > span {
background-color: @bg-color;
padding: 4px;
font-size: 10pt;
letter-spacing: 2px;
border-radius: 2px;
}
}
//*PANEL STYLING**//
.panel {
& > h3,
h3:hover {
background: @border-2;
border: 0;
color: @text-color-inverted;
border-radius: 3px 3px 0px 0px;
padding: 5px;
}
& > div {
border: 3px solid @border-2;
background: @bg-color;
border-radius: 0px 0px 3px 3px;
}
}
.panel.accordion {
h3, h3.active, h3:hover {
& > a,
a:hover,
a:active {
color: @text-color-inverted;
text-decoration: 1px solid underline @text-color-inverted;
}
& > a:hover,
a:active {
color: @text-color-inverted;
text-decoration: 1px solid underline @text-color-inverted;
}
}
& > h3,
h3:hover {
border-radius: 3px;
color: @text-color-inverted;
margin: 10px 0;
}
& > h3.active {
border-radius: 3px 3px 0px 0px;
margin: 0;
}
& > h3:hover {
background: @border-3;
}
}
//**TABLE STYLING**//
.bbcode_table {
border-collapse: separate;
border-spacing: 5px;
tr {
& td,
th {
border: 2px solid @border-2;
border-radius: 3px;
}
& th {
background: @border-2;
color: @text-color-inverted;
}
& td {
}
}
}
//**LIST STYLING**//
ol,
ul {
text-align: left;
}
ul {
list-style: none;
}
ul li::before {
content: "\25CF";
color: @border-2;
margin-right: 8px;
}
//**PKMNPANEL STYLING**//
.party > div {
margin: 0 4px;
background-color: @bg-color;
border: 3px solid @border-2;
border-radius: 3px;
font-size: 10pt;
.pkmn:before {
border-color: @border-1;
background-color: @border-2;
}
.name {
a,
a:visited,
{
color: @link-color;
text-decoration: 1px solid underline @link-color;
}
a:hover {
color: @link-hover;
text-decoration: 1px solid underline @link-hover;
}
}
.expbar {
border: 2px solid @border-2;
font-family: monospace;
div {
}
span {
display: flex;
align-items: end;
justify-content: start;
background: none;
color: @text-color-inverted;
text-shadow: -1px -1px 0 @border-2, 1px -1px 0 @border-2, -1px 1px 0 @border-2, 1px 1px 0 @border-2;
overflow: hidden;
max-height: 11px;
padding: 2px;
width: 100%;
}
}
.taste {
b,
i {
}
}
.extra {
display: flex;
align-items: center;
justify-content: end;
.type, .happy, .nature {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
}
}
.action {
max-width: 130px;
margin-right: 3px;
.berrybuttons {
height: 20px;
}
.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: 5px;
}
.berrybuttons > .tooltip_content {
border-radius: 2px;
}
}
.tooltip_item > .name {
border-bottom: 0;
.image {
background-color: @border-2;
border-radius: 3px;
}
}
}
//**SMALL PKMNPANEL STYLING**//
.small-pkmnpanel {
display: inline-block;
margin: 0 4px;
/* Set to "block" to show, "none" to hide */
@display-item: block;
@display-berries: block;
.party {
display: inline-block;
&,
> div {
padding: 0;
margin: 0;
background: transparent;
width: 120px !important;
height: auto;
overflow: hidden;
border: none;
border-radius: 0;
box-shadow: none;
}
> div {
&::after {
display: none;
}
.pkmn {
margin: 0 10px;
float: unset;
&::before {
background-color: @platform-base;
border-color: @platform-border;
}
.helditem {
display: @display-item;
.itemsprite {
cursor: unset;
}
.tooltip_content {
display: none;
}
}
}
.name {
width: auto;
background-color: @bg-color;
border: 2px solid @border-2;
border-radius: 2px;
margin-top: 4px;
height: auto;
display: flex;
padding: 2px;
flex-wrap: nowrap;
a.summarylink {
margin-top: 0px;
padding: 0px;
color: @text-color;
text-decoration: 1px solid underline @text-color;
background: transparent;
font-size: 10pt;
}
a {
color: inherit;
font-weight: normal;
margin: 0 2px;
width: 80px !important;
flex-grow: 99;
font-size: 10pt;
}
img {
display: none;
}
img:nth-last-of-type(-n + 2) {
display: inline;
margin: 0;
}
}
.action {
display: @display-berries;
position: absolute;
left: 89px;
top: 67px;
height: unset;
width: unset;
.berrybuttons[data-up="any"] > a[data-berry="aspear"],
.berrybuttons[data-up="sour"] > a[data-berry="aspear"],
.berrybuttons[data-up="spicy"] > a[data-berry="cheri"],
.berrybuttons[data-up="dry"] > a[data-berry="chesto"],
.berrybuttons[data-up="sweet"] > a[data-berry="pecha"],
.berrybuttons[data-up="bitter"] > a[data-berry="rawst"] {
display: inline-block;
border: 0;
border-radius: 100%;
background: @col-flavour-up;
}
.berrybuttons {
> a {
display: none;
width: 20px;
height: 20px;
line-height: 20px;
padding: 5px;
border-radius: 20px;
> img {
vertical-align: top;
max-height: 20px;
max-width: 20px;
}
}
> a[data-berry="pecha"] img {
/* this berry is short */
margin-top: 1px;
}
.tooltip_content {
display: none;
padding: 0;
border: 0;
animation: 0;
background: 0;
}
}
&.working {
opacity: 0.5;
}
table {
/* "thank you" message */
display: none;
}
}
.expbar,
.taste,
.extra {
display: none;
}
}
> div:hover > .action a[data-berry]:after {
border-color: @berry-border;
}
}
}
padding: 0;
margin: 0;
background: transparent;
display: flex;
flex-direction: column;
color: @text-color;
font-family: "PMD-PIXEL";
font-size: 11pt;
//**HEADER STYLING**//
.pfp {
display: block;
width: fit-content;
margin-right: @right;
margin-left: @left;
font-size: 0pt;
color: transparent;
background: @border-2;
padding: 3px;
border: 2px solid @border-3;
border-radius: 2px;
margin-bottom: 8px;
> img {
width: 50px;
height: auto;
border-radius: 3px;
border: 2px solid @border-1;
}
}
//**TEXT BOX STYLING**//
.box {
position: relative;
background: @bg-color;
padding: 8px;
border: 2px solid @border-1;
border-radius: 3px;
padding-bottom: 24px;
}
// BOX BORDER 1
.bb1 {
display: inline-block;
border: 2px solid @border-3;
background: @border-3;
border-radius: 2px;
}
// BOX BORDER 2
.bb2 {
display: inline-block;
border: 4px solid @border-2;
background: @border-2;
border-radius: 2px;
}
//**CREDITS STYLING**//
.credits {
width: 100%;
position: absolute;
bottom: 5px;
right: 0;
text-align: right;
background: transparent;
.tooltip_content {
display: none;
padding: 0;
border: 0;
animation: 0;
background: 0;
}
.bbcode_tooltip.lock + .tooltip_content {
display: block;
bottom: 150px;
left: 0;
height: 0;
width: 100%;
overflow: visible;
& > .panel {
background: fade(@col-bg1, 75%);
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%);
}
}
& > .tooltip_trigger {
transition: 0.4s;
}
& > .tooltip_trigger:hover {
border: none;
text-decoration: 1px solid @link-hover underline;
color: @link-hover;
}
& > .bbcode_tooltip {
text-decoration: 1px solid @link-color underline;
color: @link-color;
text-transform: lowercase;
font-variant: small-caps;
font-weight: bold;
font-size: 11pt;
padding-right: 6px;
letter-spacing: 2px;
}
.bbcode_tooltip.lock ~ .overlay {
display: block;
height: 99999px;
width: 099999px;
position: absolute;
left: -99999px / 2;
top: -099999px / 2;
}
}
}
[/style]
Header 1
Header 2
Header 3
Link, Bold, Italic, Underline, and TipTIP 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
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
Hidebox Header
TITLE 1
Accordion section content with a bold example, italics example, tooltip example
-
and a link example.TITLE 2
Accordion section content with a bold example, italics example, tooltip example
-
and a link example.TITLE 3
Accordion section content with a bold example, italics example, tooltip example
-
and a link example.TITLE 4
Accordion section content with a bold example, italics example, tooltip example
-
and a link example.| 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
This is a free to use code commissioned by @AngelOShadows! This is perfectly alright to use and edit with credit. Please read my T.O.S for more information on what is okay to do with my codes and what is not okay.
This is an imgur album of all the images used in this template; it is suggested that you save these images and re-upload to your own album in case anything happens to my album. I cannot guarentee mine will stay up forever.
MAX MAX
This is an imgur album of all the images used in this template; it is suggested that you save these images and re-upload to your own album in case anything happens to my album. I cannot guarentee mine will stay up forever.
raw code
[
|| Pokemon Mystery Dungeon Text Box ||
This is a free to use code commissioned by @AngelOShadows (url=https://pfq.link/@qw). This code was made by @Neonyan (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.
----------------------------
Entire Container Start
][sc=pink][
Profile Picture Container Start
][sc=pfp][
][img]https://archives.bulbagarden.net/media/upload/f/fa/MDP_E_001.png[/img][
][/sc][
Profile Picture Container End
Content Start
][sc=bb1][sc=bb2][sc=box][
]This is a free to use code commissioned by @[url=https://pfq.link/@qw]AngelOShadows[/url]! This is perfectly alright to use and edit with credit. Please read my T.O.S for more information on what is okay to do with my codes and what is not okay.
[hr]
[url=https://imgur.com/a/AfjzRyV]This is an imgur album[/url] of all the images used in this template; it is suggested that you save these images and re-upload to your own album in case anything happens to my album. I cannot guarentee mine will stay up forever.[
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!
][ul][
][li]Code @[url=https://pfq.link/@Jkbg]Neonyan[/url][/li][
][li]Pkmnpanel by @[url=https://pokefarm.com/forum/post/6000778]Mirzam[/url] & modified slightly by @[url=https://pfq.link/@Jkbg]Neonyan[/url][/li][
][/ul][
][/display][
Display Box End
][/pit][
][sc=overlay][/sc][
][/sc][
Credits Container End
][/sc][/sc][/sc][
Content End
Entire Container End
][/sc][
CSS Styling Start
][style]
//**BODY STYLING**//
.pink {
// --- VARIABLES THE USER CAN EASILY ADJUST ---
// Misc Variables -- these decide which side your portrait will be on. For a right aligned picture, do @right = 0 and @left = auto. Flip them for a left aligned picture.
@right = auto;
@left = 0;
//*IMAGES*//
// For a pink border image, use "https://i.imgur.com/6Q0vWqx.png"
// For a blue border image, use "https://i.imgur.com/KfYzFfr.png"
// For a green border image, use "https://i.imgur.com/przkeM0.png"
@border-img = url("https://i.imgur.com/KfYzFfr.png");
//*COLORS*//
@text-color: white;
@text-color-inverted: black;
@bg-color: black;
// For a pink theme, use these values (Remove //s from in front of them & add //s in front of all other border variables)
// @border-1: #A03070;
// @border-2: #F870C0;
// @border-3: #F8C0F8;
// For a blue theme, use these values (Remove //s from in front of them & add //s in front of all other border variables)
@border-1: #4820F8;
@border-2: #6080F8;
@border-3: #A8C0E0;
// For a green theme, use these values (Remove //s from in front of them & add //s in front of all other border variables)
// @border-1: #187818;
// @border-2: #68D068;
// @border-3: #C8F8C8;
// --- MY OWN STUFF THAT YOU CAN STILL TOTALLY ADJUST BUT IT WASN'T BUILT WITH THAT IN MIND ---
//**RESET STYLES**//
@import "skins/user/J/k/b/g/reset-styles-2-0/__extra";
//**FONT FACES**//
@font-face {
font-family: "PMD-PIXEL";
src: url("https://www.dl.dropboxusercontent.com/s/7abs0xcv55f9q5b/pixelmix.ttf?dl=0");
}
// Link Colors
@link-color: @border-2;
@link-hover: @border-3;
//*LINK STYLING*//
a:link,
a:visited,
a:active {
color: @link-color;
background: transparent;
text-decoration: 1px solid underline @link-color;
}
a:hover {
transition: all 0.4s;
color: @link-hover;
text-decoration: 1px solid underline @link-hover;
}
//**HEADER STYLING**//
h1,
h2,
h3 {
color: @border-2;
}
//**DIVIDER STYLING**//
hr {
background-image: @border-img;
background-color: @border-2;
background-size: contain;
background-position: center center;
background-repeat: repeat-x;
height: 6px;
border: 0;
width: 103.5%;
margin-left: -10px;
margin-bottom: -5px;
}
//**BOLD, ITALIC, UNDERLINE & STRIKETHROUGH STYLING**//
b,
i {
color: @border-2;
}
u {
text-decoration: 1px solid underline @border-2;
}
//**TOOLTIP STYLING**//
.tooltip_content {
width: fit-content;
color: @text-color;
font-size: 10pt;
border: 3px solid @border-2;
border-radius: 2px;
background: @bg-color;
}
.bbcode_tooltip {
text-decoration: 1.5px underline dotted @link-color;
}
//**PROGRESS BAR STYLING**//
.expbar {
background: @transparent;
border: 3px solid @border-2;
border-radius: 2px;
& > div {
border-color: none;
border-right: none;
background: @border-2;
}
& > span {
background-color: @bg-color;
padding: 4px;
font-size: 10pt;
letter-spacing: 2px;
border-radius: 2px;
}
}
//*PANEL STYLING**//
.panel {
& > h3,
h3:hover {
background: @border-2;
border: 0;
color: @text-color-inverted;
border-radius: 3px 3px 0px 0px;
padding: 5px;
}
& > div {
border: 3px solid @border-2;
background: @bg-color;
border-radius: 0px 0px 3px 3px;
}
}
.panel.accordion {
h3, h3.active, h3:hover {
& > a,
a:hover,
a:active {
color: @text-color-inverted;
text-decoration: 1px solid underline @text-color-inverted;
}
& > a:hover,
a:active {
color: @text-color-inverted;
text-decoration: 1px solid underline @text-color-inverted;
}
}
& > h3,
h3:hover {
border-radius: 3px;
color: @text-color-inverted;
margin: 10px 0;
}
& > h3.active {
border-radius: 3px 3px 0px 0px;
margin: 0;
}
& > h3:hover {
background: @border-3;
}
}
//**TABLE STYLING**//
.bbcode_table {
border-collapse: separate;
border-spacing: 5px;
tr {
& td,
th {
border: 2px solid @border-2;
border-radius: 3px;
}
& th {
background: @border-2;
color: @text-color-inverted;
}
& td {
}
}
}
//**LIST STYLING**//
ol,
ul {
text-align: left;
}
ul {
list-style: none;
}
ul li::before {
content: "\25CF";
color: @border-2;
margin-right: 8px;
}
//**PKMNPANEL STYLING**//
.party > div {
margin: 0 4px;
background-color: @bg-color;
border: 3px solid @border-2;
border-radius: 3px;
font-size: 10pt;
.pkmn:before {
border-color: @border-1;
background-color: @border-2;
}
.name {
a,
a:visited,
{
color: @link-color;
text-decoration: 1px solid underline @link-color;
}
a:hover {
color: @link-hover;
text-decoration: 1px solid underline @link-hover;
}
}
.expbar {
border: 2px solid @border-2;
font-family: monospace;
div {
}
span {
display: flex;
align-items: end;
justify-content: start;
background: none;
color: @text-color-inverted;
text-shadow: -1px -1px 0 @border-2, 1px -1px 0 @border-2, -1px 1px 0 @border-2, 1px 1px 0 @border-2;
overflow: hidden;
max-height: 11px;
padding: 2px;
width: 100%;
}
}
.taste {
b,
i {
}
}
.extra {
display: flex;
align-items: center;
justify-content: end;
.type, .happy, .nature {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
}
}
.action {
max-width: 130px;
margin-right: 3px;
.berrybuttons {
height: 20px;
}
.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: 5px;
}
.berrybuttons > .tooltip_content {
border-radius: 2px;
}
}
.tooltip_item > .name {
border-bottom: 0;
.image {
background-color: @border-2;
border-radius: 3px;
}
}
}
//**SMALL PKMNPANEL STYLING**//
.small-pkmnpanel {
display: inline-block;
margin: 0 4px;
/* Set to "block" to show, "none" to hide */
@display-item: block;
@display-berries: block;
.party {
display: inline-block;
&,
> div {
padding: 0;
margin: 0;
background: transparent;
width: 120px !important;
height: auto;
overflow: hidden;
border: none;
border-radius: 0;
box-shadow: none;
}
> div {
&::after {
display: none;
}
.pkmn {
margin: 0 10px;
float: unset;
&::before {
background-color: @platform-base;
border-color: @platform-border;
}
.helditem {
display: @display-item;
.itemsprite {
cursor: unset;
}
.tooltip_content {
display: none;
}
}
}
.name {
width: auto;
background-color: @bg-color;
border: 2px solid @border-2;
border-radius: 2px;
margin-top: 4px;
height: auto;
display: flex;
padding: 2px;
flex-wrap: nowrap;
a.summarylink {
margin-top: 0px;
padding: 0px;
color: @text-color;
text-decoration: 1px solid underline @text-color;
background: transparent;
font-size: 10pt;
}
a {
color: inherit;
font-weight: normal;
margin: 0 2px;
width: 80px !important;
flex-grow: 99;
font-size: 10pt;
}
img {
display: none;
}
img:nth-last-of-type(-n + 2) {
display: inline;
margin: 0;
}
}
.action {
display: @display-berries;
position: absolute;
left: 89px;
top: 67px;
height: unset;
width: unset;
.berrybuttons[data-up="any"] > a[data-berry="aspear"],
.berrybuttons[data-up="sour"] > a[data-berry="aspear"],
.berrybuttons[data-up="spicy"] > a[data-berry="cheri"],
.berrybuttons[data-up="dry"] > a[data-berry="chesto"],
.berrybuttons[data-up="sweet"] > a[data-berry="pecha"],
.berrybuttons[data-up="bitter"] > a[data-berry="rawst"] {
display: inline-block;
border: 0;
border-radius: 100%;
background: @col-flavour-up;
}
.berrybuttons {
> a {
display: none;
width: 20px;
height: 20px;
line-height: 20px;
padding: 5px;
border-radius: 20px;
> img {
vertical-align: top;
max-height: 20px;
max-width: 20px;
}
}
> a[data-berry="pecha"] img {
/* this berry is short */
margin-top: 1px;
}
.tooltip_content {
display: none;
padding: 0;
border: 0;
animation: 0;
background: 0;
}
}
&.working {
opacity: 0.5;
}
table {
/* "thank you" message */
display: none;
}
}
.expbar,
.taste,
.extra {
display: none;
}
}
> div:hover > .action a[data-berry]:after {
border-color: @berry-border;
}
}
}
padding: 0;
margin: 0;
background: transparent;
display: flex;
flex-direction: column;
color: @text-color;
font-family: "PMD-PIXEL";
font-size: 11pt;
//**HEADER STYLING**//
.pfp {
display: block;
width: fit-content;
margin-right: @right;
margin-left: @left;
font-size: 0pt;
color: transparent;
background: @border-2;
padding: 3px;
border: 2px solid @border-3;
border-radius: 2px;
margin-bottom: 8px;
> img {
width: 50px;
height: auto;
border-radius: 3px;
border: 2px solid @border-1;
}
}
//**TEXT BOX STYLING**//
.box {
position: relative;
background: @bg-color;
padding: 8px;
border: 2px solid @border-1;
border-radius: 3px;
padding-bottom: 24px;
}
// BOX BORDER 1
.bb1 {
display: inline-block;
border: 2px solid @border-3;
background: @border-3;
border-radius: 2px;
}
// BOX BORDER 2
.bb2 {
display: inline-block;
border: 4px solid @border-2;
background: @border-2;
border-radius: 2px;
}
//**CREDITS STYLING**//
.credits {
width: 100%;
position: absolute;
bottom: 5px;
right: 0;
text-align: right;
background: transparent;
.tooltip_content {
display: none;
padding: 0;
border: 0;
animation: 0;
background: 0;
}
.bbcode_tooltip.lock + .tooltip_content {
display: block;
bottom: 150px;
left: 0;
height: 0;
width: 100%;
overflow: visible;
& > .panel {
background: fade(@col-bg1, 75%);
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%);
}
}
& > .tooltip_trigger {
transition: 0.4s;
}
& > .tooltip_trigger:hover {
border: none;
text-decoration: 1px solid @link-hover underline;
color: @link-hover;
}
& > .bbcode_tooltip {
text-decoration: 1px solid @link-color underline;
color: @link-color;
text-transform: lowercase;
font-variant: small-caps;
font-weight: bold;
font-size: 11pt;
padding-right: 6px;
letter-spacing: 2px;
}
.bbcode_tooltip.lock ~ .overlay {
display: block;
height: 99999px;
width: 099999px;
position: absolute;
left: -99999px / 2;
top: -099999px / 2;
}
}
}
[/style]
Header 1
Header 2
Header 3
Link, Bold, Italic, Underline, and TipTIP 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
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
Hidebox Header
TITLE 1
Accordion section content with a bold example, italics example, tooltip example
-
and a link example.TITLE 2
Accordion section content with a bold example, italics example, tooltip example
-
and a link example.TITLE 3
Accordion section content with a bold example, italics example, tooltip example
-
and a link example.TITLE 4
Accordion section content with a bold example, italics example, tooltip example
-
and a link example.| 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
This is a free to use code commissioned by @AngelOShadows! This is perfectly alright to use and edit with credit. Please read my T.O.S for more information on what is okay to do with my codes and what is not okay.
This is an imgur album of all the images used in this template; it is suggested that you save these images and re-upload to your own album in case anything happens to my album. I cannot guarentee mine will stay up forever.
MAX MAX
This is an imgur album of all the images used in this template; it is suggested that you save these images and re-upload to your own album in case anything happens to my album. I cannot guarentee mine will stay up forever.
raw code
[
|| Pokemon Mystery Dungeon Text Box ||
This is a free to use code commissioned by @AngelOShadows (url=https://pfq.link/@qw). This code was made by @Neonyan (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.
----------------------------
Entire Container Start
][sc=pink][
Profile Picture Container Start
][sc=pfp][
][img]https://archives.bulbagarden.net/media/upload/f/fa/MDP_E_001.png[/img][
][/sc][
Profile Picture Container End
Content Start
][sc=bb1][sc=bb2][sc=box][
]This is a free to use code commissioned by @[url=https://pfq.link/@qw]AngelOShadows[/url]! This is perfectly alright to use and edit with credit. Please read my T.O.S for more information on what is okay to do with my codes and what is not okay.
[hr]
[url=https://imgur.com/a/AfjzRyV]This is an imgur album[/url] of all the images used in this template; it is suggested that you save these images and re-upload to your own album in case anything happens to my album. I cannot guarentee mine will stay up forever.[
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!
][ul][
][li]Code @[url=https://pfq.link/@Jkbg]Neonyan[/url][/li][
][li]Pkmnpanel by @[url=https://pokefarm.com/forum/post/6000778]Mirzam[/url] & modified slightly by @[url=https://pfq.link/@Jkbg]Neonyan[/url][/li][
][/ul][
][/display][
Display Box End
][/pit][
][sc=overlay][/sc][
][/sc][
Credits Container End
][/sc][/sc][/sc][
Content End
Entire Container End
][/sc][
CSS Styling Start
][style]
//**BODY STYLING**//
.pink {
// --- VARIABLES THE USER CAN EASILY ADJUST ---
// Misc Variables -- these decide which side your portrait will be on. For a right aligned picture, do @right = 0 and @left = auto. Flip them for a left aligned picture.
@right = auto;
@left = 0;
//*IMAGES*//
// For a pink border image, use "https://i.imgur.com/6Q0vWqx.png"
// For a blue border image, use "https://i.imgur.com/KfYzFfr.png"
// For a green border image, use "https://i.imgur.com/przkeM0.png"
@border-img = url("https://i.imgur.com/6Q0vWqx.png");
//*COLORS*//
@text-color: white;
@text-color-inverted: black;
@bg-color: black;
// For a pink theme, use these values (Remove //s from in front of them & add //s in front of all other border variables)
@border-1: #A03070;
@border-2: #F870C0;
@border-3: #F8C0F8;
// For a blue theme, use these values (Remove //s from in front of them & add //s in front of all other border variables)
// @border-1: #4820F8;
// @border-2: #6080F8;
// @border-3: #A8C0E0;
// For a green theme, use these values (Remove //s from in front of them & add //s in front of all other border variables)
// @border-1: #187818;
// @border-2: #68D068;
// @border-3: #C8F8C8;
// --- MY OWN STUFF THAT YOU CAN STILL TOTALLY ADJUST BUT IT WASN'T BUILT WITH THAT IN MIND ---
//**RESET STYLES**//
@import "skins/user/J/k/b/g/reset-styles-2-0/__extra";
//**FONT FACES**//
@font-face {
font-family: "PMD-PIXEL";
src: url("https://www.dl.dropboxusercontent.com/s/7abs0xcv55f9q5b/pixelmix.ttf?dl=0");
}
// Link Colors
@link-color: @border-2;
@link-hover: @border-3;
//*LINK STYLING*//
a:link,
a:visited,
a:active {
color: @link-color;
background: transparent;
text-decoration: 1px solid underline @link-color;
}
a:hover {
transition: all 0.4s;
color: @link-hover;
text-decoration: 1px solid underline @link-hover;
}
//**HEADER STYLING**//
h1,
h2,
h3 {
color: @border-2;
}
//**DIVIDER STYLING**//
hr {
background-image: @border-img;
background-color: @border-2;
background-size: contain;
background-position: center center;
background-repeat: repeat-x;
height: 6px;
border: 0;
width: 103.5%;
margin-left: -10px;
margin-bottom: -5px;
}
//**BOLD, ITALIC, UNDERLINE & STRIKETHROUGH STYLING**//
b,
i {
color: @border-2;
}
u {
text-decoration: 1px solid underline @border-2;
}
//**TOOLTIP STYLING**//
.tooltip_content {
width: fit-content;
color: @text-color;
font-size: 10pt;
border: 3px solid @border-2;
border-radius: 2px;
background: @bg-color;
}
.bbcode_tooltip {
text-decoration: 1.5px underline dotted @link-color;
}
//**PROGRESS BAR STYLING**//
.expbar {
background: @transparent;
border: 3px solid @border-2;
border-radius: 2px;
& > div {
border-color: none;
border-right: none;
background: @border-2;
}
& > span {
background-color: @bg-color;
padding: 4px;
font-size: 10pt;
letter-spacing: 2px;
border-radius: 2px;
}
}
//*PANEL STYLING**//
.panel {
& > h3,
h3:hover {
background: @border-2;
border: 0;
color: @text-color-inverted;
border-radius: 3px 3px 0px 0px;
padding: 5px;
}
& > div {
border: 3px solid @border-2;
background: @bg-color;
border-radius: 0px 0px 3px 3px;
}
}
.panel.accordion {
h3, h3.active, h3:hover {
& > a,
a:hover,
a:active {
color: @text-color-inverted;
text-decoration: 1px solid underline @text-color-inverted;
}
& > a:hover,
a:active {
color: @text-color-inverted;
text-decoration: 1px solid underline @text-color-inverted;
}
}
& > h3,
h3:hover {
border-radius: 3px;
color: @text-color-inverted;
margin: 10px 0;
}
& > h3.active {
border-radius: 3px 3px 0px 0px;
margin: 0;
}
& > h3:hover {
background: @border-3;
}
}
//**TABLE STYLING**//
.bbcode_table {
border-collapse: separate;
border-spacing: 5px;
tr {
& td,
th {
border: 2px solid @border-2;
border-radius: 3px;
}
& th {
background: @border-2;
color: @text-color-inverted;
}
& td {
}
}
}
//**LIST STYLING**//
ol,
ul {
text-align: left;
}
ul {
list-style: none;
}
ul li::before {
content: "\25CF";
color: @border-2;
margin-right: 8px;
}
//**PKMNPANEL STYLING**//
.party > div {
margin: 0 4px;
background-color: @bg-color;
border: 3px solid @border-2;
border-radius: 3px;
font-size: 10pt;
.pkmn:before {
border-color: @border-1;
background-color: @border-2;
}
.name {
a,
a:visited,
{
color: @link-color;
text-decoration: 1px solid underline @link-color;
}
a:hover {
color: @link-hover;
text-decoration: 1px solid underline @link-hover;
}
}
.expbar {
border: 2px solid @border-2;
div {
}
.expbar {
border: 2px solid @border-2;
font-family: monospace;
div {
}
span {
display: flex;
align-items: end;
justify-content: start;
background: none;
color: @text-color-inverted;
text-shadow: -1px -1px 0 @border-2, 1px -1px 0 @border-2, -1px 1px 0 @border-2, 1px 1px 0 @border-2;
overflow: hidden;
max-height: 11px;
padding: 2px;
width: 100%;
}
}
.taste {
b,
i {
}
}
.extra {
display: flex;
align-items: center;
justify-content: end;
.type, .happy, .nature {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
}
}
.action {
max-width: 130px;
margin-right: 3px;
.berrybuttons {
height: 20px;
}
.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: 5px;
}
.berrybuttons > .tooltip_content {
border-radius: 2px;
}
}
.tooltip_item > .name {
border-bottom: 0;
.image {
background-color: @border-2;
border-radius: 3px;
}
}
}
//**SMALL PKMNPANEL STYLING**//
.small-pkmnpanel {
display: inline-block;
margin: 0 4px;
/* Set to "block" to show, "none" to hide */
@display-item: block;
@display-berries: block;
.party {
display: inline-block;
&,
> div {
padding: 0;
margin: 0;
background: transparent;
width: 120px !important;
height: auto;
overflow: hidden;
border: none;
border-radius: 0;
box-shadow: none;
}
> div {
&::after {
display: none;
}
.pkmn {
margin: 0 10px;
float: unset;
&::before {
background-color: @platform-base;
border-color: @platform-border;
}
.helditem {
display: @display-item;
.itemsprite {
cursor: unset;
}
.tooltip_content {
display: none;
}
}
}
.name {
width: auto;
background-color: @bg-color;
border: 2px solid @border-2;
border-radius: 2px;
margin-top: 4px;
height: auto;
display: flex;
padding: 2px;
flex-wrap: nowrap;
a.summarylink {
margin-top: 0px;
padding: 0px;
color: @text-color;
text-decoration: 1px solid underline @text-color;
background: transparent;
font-size: 10pt;
}
a {
color: inherit;
font-weight: normal;
margin: 0 2px;
width: 80px !important;
flex-grow: 99;
font-size: 10pt;
}
img {
display: none;
}
img:nth-last-of-type(-n + 2) {
display: inline;
margin: 0;
}
}
.action {
display: @display-berries;
position: absolute;
left: 89px;
top: 67px;
height: unset;
width: unset;
.berrybuttons[data-up="any"] > a[data-berry="aspear"],
.berrybuttons[data-up="sour"] > a[data-berry="aspear"],
.berrybuttons[data-up="spicy"] > a[data-berry="cheri"],
.berrybuttons[data-up="dry"] > a[data-berry="chesto"],
.berrybuttons[data-up="sweet"] > a[data-berry="pecha"],
.berrybuttons[data-up="bitter"] > a[data-berry="rawst"] {
display: inline-block;
border: 0;
border-radius: 100%;
background: @col-flavour-up;
}
.berrybuttons {
> a {
display: none;
width: 20px;
height: 20px;
line-height: 20px;
padding: 5px;
border-radius: 20px;
> img {
vertical-align: top;
max-height: 20px;
max-width: 20px;
}
}
> a[data-berry="pecha"] img {
/* this berry is short */
margin-top: 1px;
}
.tooltip_content {
display: none;
padding: 0;
border: 0;
animation: 0;
background: 0;
}
}
&.working {
opacity: 0.5;
}
table {
/* "thank you" message */
display: none;
}
}
.expbar,
.taste,
.extra {
display: none;
}
}
> div:hover > .action a[data-berry]:after {
border-color: @berry-border;
}
}
}
padding: 0;
margin: 0;
background: transparent;
display: flex;
flex-direction: column;
color: @text-color;
font-family: "PMD-PIXEL";
font-size: 11pt;
//**HEADER STYLING**//
.pfp {
display: block;
width: fit-content;
margin-right: @right;
margin-left: @left;
font-size: 0pt;
color: transparent;
background: @border-2;
padding: 3px;
border: 2px solid @border-3;
border-radius: 2px;
margin-bottom: 8px;
> img {
width: 50px;
height: auto;
border-radius: 3px;
border: 2px solid @border-1;
}
}
//**TEXT BOX STYLING**//
.box {
position: relative;
background: @bg-color;
padding: 8px;
border: 2px solid @border-1;
border-radius: 3px;
padding-bottom: 24px;
}
// BOX BORDER 1
.bb1 {
display: inline-block;
border: 2px solid @border-3;
background: @border-3;
border-radius: 2px;
}
// BOX BORDER 2
.bb2 {
display: inline-block;
border: 4px solid @border-2;
background: @border-2;
border-radius: 2px;
}
//**CREDITS STYLING**//
.credits {
width: 100%;
position: absolute;
bottom: 5px;
right: 0;
text-align: right;
background: transparent;
.tooltip_content {
display: none;
padding: 0;
border: 0;
animation: 0;
background: 0;
}
.bbcode_tooltip.lock + .tooltip_content {
display: block;
bottom: 150px;
left: 0;
height: 0;
width: 100%;
overflow: visible;
& > .panel {
background: fade(@col-bg1, 75%);
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%);
}
}
& > .tooltip_trigger {
transition: 0.4s;
}
& > .tooltip_trigger:hover {
border: none;
text-decoration: 1px solid @link-hover underline;
color: @link-hover;
}
& > .bbcode_tooltip {
text-decoration: 1px solid @link-color underline;
color: @link-color;
text-transform: lowercase;
font-variant: small-caps;
font-weight: bold;
font-size: 11pt;
padding-right: 6px;
letter-spacing: 2px;
}
.bbcode_tooltip.lock ~ .overlay {
display: block;
height: 99999px;
width: 099999px;
position: absolute;
left: -99999px / 2;
top: -099999px / 2;
}
}
}
[/style]
Header 1
Header 2
Header 3
Link, Bold, Italic, Underline, and TipTIP 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
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
Hidebox Header
TITLE 1
Accordion section content with a bold example, italics example, tooltip example
-
and a link example.TITLE 2
Accordion section content with a bold example, italics example, tooltip example
-
and a link example.TITLE 3
Accordion section content with a bold example, italics example, tooltip example
-
and a link example.TITLE 4
Accordion section content with a bold example, italics example, tooltip example
-
and a link example.| 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