💥 andie's ftu template codes
Forum Index > Other > Other Art >
andie's ftu templates 
hi! welcome to my little code and templates thread!
everything here is ftu
rules:
free to use
rules:- 💥most important rule💥: do not remove my credit
- if you want to move my credit, i'll tentatively allow it, but it has to be obvious. no hiding credit on images, icons, or in tabs.
- editing my code is okay!
- frankenstining is allowed! credit all user codes you use though.
- you can ask for help on my codes!
- do not use these codes offsite please!
- you can use any of my codes on any parts of the site (as in, a journal skin in your about me) but you must make sure that it follows legibility guide. (and i can not help you if you break the code)
img credit: PkMn Crystal & Pinball
| FORUM SKINS | ABOUT ME'S |
|---|---|
| Spring Theme | PkMn Card Theme |
| HR3_C1 | HR3_C2 |
| HR4_C1 | HR4_C2 |
spring theme
editable code (the raw code, right-click & copy)
[styleclass=background][styleclass=post][sc=outline][b]spring theme[/b][/sc][hr][
]content goes here[
//dont touch the credit please~
][/styleclass][sc=credit][url=https://pfq.link/~MQfR]Credit[/url][/sc][/styleclass]
[style]
//colors//
@txt: #2B2A4C; //text color
@link: #F05941; //link color
@bg1: #B5CB99; //the green background
@bg2: #F8F1F1; //the white background
@act1: #FFBB5C; //the darker orange
@act2: #BD260F; //the red
@act3: #FFCD4B; //the lighter orange
.background {
padding:10px 0px;
//you can put an image here if you'd like, just remove the slashes in the front
//background-image: url(https://www.solidbackgrounds.com/images/3840x2160/3840x2160-dark-gray-solid-color-background.jpg);
background-repeat:repeat;
background-color: @bg1;
}
.post {
background: @bg2;
color: @txt;
font-size:10pt;
line-height: 1.5;
text-align: center;
border-radius: 5px;
margin: 0px 7px 0px 7px;
padding: 11px;
border: 4px double @act2;
}
h1, h2, h3 {
color: @txt;
line-height: 0.7;
}
a {
color: @link;
}
a:hover {
font-style: italic;
}
.panel {
padding-top: 2.3%;
border: none;
box-shadow: none;
background: none;
&>h3 {
border-bottom: 0px solid @act2;
border-radius: 0px;
&>a {
color: @txt;
}
background: @act3;
padding: 1.6%;
font-size: 10pt;
}
&>div {
color: @txt;
background: @bg2;
padding: 10px;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: @act3;
}
}
ul, table {
border: 0;
list-style-type: none;
margin: 0px;
padding: 3pt;
}
li {
padding: 1px;
margin: 0;
color: @txt;
border: 1px solid @bg2;
background: @act3;
//transition: all 500ms;
}
li:hover {
background: @act1;
//transition: 100ms;//
}
ol, ol:hover, ol li, ol li:hover {
background: @bg2;
border: 0;
text-align: left;
list-style-type: square;
}
li.tab-active {
background: @act3;
font-style: italic;
}
.tab, .tab-active {
border: 1px solid @act3;
background: @bg2;
box-shadow: none;
color: @txt;
text-align: center;
}
.tabbed_interface {
background: @act3;
border: 0;
border-radius: 0;
padding: 0;
margin: 0;
box-shadow: none;
& > ul
{
background: @act3;
border: 0;
padding: 0px;
& > li
{
background: @act1;
border: 1px solid @act3;
margin: 0;
padding: 2px;
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;
height: inherit;
color: @txt;
&.tab-active {
background: @act3;
border: 0;
padding:3px;
border-radius: 0;
}
}
& > li:hover
{
cursor: pointer;
}
}
> .tab, > .tab-active
{
background: @bg2;
align-items: center;
padding: 3px;
overflow: hidden;
color: @txt;
border: 1px solid @act3;
border-radius: 0;
}
}
.expbar {
border: solid 1px @act1;
background: @act3;
color: @txt;
width: auto;
height: 30px;
> span {
padding: 1px;
align-items: center;
display: inline-flex;
}
> div {
background: @act1;
border-right: solid 1px @act1;
span {
display: flex;
align-items: end;
justify-content: start;
background: none;
max-height: 20px;
padding: 2px;
width: 100%;
}
}
}
hr {
background: transparent;
border: 1px dashed @act2;
}
.tooltip_content {
color: @txt;
background: @bg2;
border: solid 1px @act2;
}
span.bbcode_tooltip {
border-bottom: 1px dashed @act2;
padding-bottom: 0px;
}
.bbcode_table {
border: 1px solid @act2;
width: 100%;
background: @bg2;
th {
background-color: @bg2;
border: 1px solid @act2;
padding: 2%;
}
td {
border: 1px solid @act1;
padding: 1%;
}
}
div.tooltip_content {
background: @bg2;
color: @txt;
border: solid 1px @act2;
}
.bbcode_tooltip {
border-bottom: 1px dashed @act2;
}
.credit, .credit a {
margin-top: 10px;
margin-right: 5px;
font-size: 10pt;
text-align: right;
color: @txt;
}
table,th,td {
margin: 0 auto;
}
.table {
margin: 0px auto;
}
.outline
{
color: @act1;
font-size: 18pt;
line-height: 1.1;
letter-spacing: 3px;
text-shadow:
1px 1px 0 @act2,
-1px -1px 0 @act2,
1px -1px 0 @act2,
-1px 1px 0 @act2,
1px 1px 0 @act2;
}
//pkmn panels
.party {
display: inline-block;
margin: 5px;
width: unset !important;
color: @txt;
a {
color: @txt;
}
>div {
background: @bg2;
border: 4px double @act2;
box-shadow: none;
width: 263px;
margin: 0;
> .bbcode_tooltip {
border-bottom: 1px solid @act2;
}
.tooltip_item > .name{
border-bottom: 1px solid @act2;
.image {
background-color: @bg2;
border: 1px solid @act2;
}
}
&:hover>.action a[data-berry]:after {
color: @act1;
}
>.pkmn:before {
background-color: @act3;
border-color: @act1;
}
>.name a {
margin-bottom: 5px;
max-width: 130px;
}
.taste {
border: 1px solid transparent;
letter-spacing: 0px;
.right {
margin: -19px 0 0 0;
font-size: 1px;
b,
i {
font-size: 10pt;
}
}
}
>.expbar {
width: 130px;
height: 25px;
margin-top: 2px;
}
> .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 {
width: 132px;
height: 30px;
display: hidden;
border: none;
>a {
background: none;
height: 30px;
font-size: auto;
font-size:10pt;
line-height: 2.3;
text-align: center;
background-color: @act3;
border: 1px solid @act1;
//this display below is specifically for the evolve button, which doesnt work on this skin. tho idk why youd want to exolve on a skin. its mostly for aesthetic purposes since the user is the only one to see it. you can disable it by putting two slashes in front.
display: none;
}
> a img {
display: none;
}
>.berrybuttons {
>a {
background-color: @act1;
display: none;
width: 100%;
height: 30px;
padding: 3px;
box-sizing: border-box;
border-radius: 7px;
>img {
height: 21px;
vertical-align: top;
}
background-color: @act3;
border: 1px solid @act1;
}
}
>.berrybuttons[data-up="any"]>a[data-berry="aspear"] {
display: inline-block;
border-radius: 7px;
}
>.berrybuttons[data-up="sour"]>a[data-berry="aspear"] {
display: inline-block;
border-radius: 7px;
}
>.berrybuttons[data-up="spicy"]>a[data-berry="cheri"] {
display: inline-block;
border-radius: 7px;
}
>.berrybuttons[data-up="dry"]>a[data-berry="chesto"] {
display: inline-block;
border-radius: 7px;
}
>.berrybuttons[data-up="sweet"]>a[data-berry="pecha"] {
display: inline-block;
border-radius: 7px;
}
>.berrybuttons[data-up="bitter"]>a[data-berry="rawst"] {
display: inline-block;
border-radius: 7px;
}
}
.action a[data-berry]:after {
border: none;
}
}
}
[/style]
simple code (only colors, right-click & copy)
[styleclass=background][styleclass=post][sc=outline][b]spring theme[/b][/sc][hr][
]content goes here[
//dont touch the credit please~
][/styleclass][sc=credit][url=https://pfq.link/~MQfR]Credit[/url][/sc][/styleclass]
[style]
//colors//
@txt: #2B2A4C; //text color
@link: #F05941; //link color
@bg1: #B5CB99; //the green background
@bg2: #F8F1F1; //the white background
@act1: #FFBB5C; //the darker orange
@act2: #BD260F; //the red
@act3: #FFCD4B; //the lighter orange
@import 'skins/user/J/1/Q/spring-css/__extra'; //this is the entire code don't delete
[/style]
first code. made for my shop but thought others could use it too. bold italics underline
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Any food
46%Serious nature
Sweet Heart
Consumable
(
: 0)
A heart-shaped chocolate given to you by someone who cares about you! Feed to a Pokémon to boost Happiness by 20.
Sells for 
1
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Sweet food
27%Hasty nature
- Tab One
Tab Two- Tab Three
Tab One Content
Tab Two Content
Tab Three Content
- Tab One
- Tab Two
- Tab Three
Tab One Content
it also supports
verticle tabs
Tab Two Content
Tab Three Content
- this is what an unsorted list looks like
- section 2
- this is what an ordered list looks like
- section 2
hidebox
hi
open tab
open tab
second tab
hiii
nomnom
nomnom
QUOTE originally posted by User
blah blah
I really love this theme and its colours, I hope you end up making an about code sometime!! such a cute combination of clean and versatile ^__^
new code drop! an about me thats in the design of a pokemon card :3
pkmn card abt me!
for just very word heavy stuff. doesnt support tabs or pkmn panel. this is mostly for aesthetic purposes lol
bold italics underline strike
link & https://pokefarm.com/user/andie
BASIC
Username
HP
120
img desc, keep it short it doesnt scroll
pkmn card abt me!for just very word heavy stuff. doesnt support tabs or pkmn panel. this is mostly for aesthetic purposes lol
hidebox
hi
open tab
open tab
second tab
hiii
nomnom
nomnom
QUOTE originally posted by User
blah blah
editable code (the raw code, right-click & copy)
[styleclass=background][styleclass=post][
][sc=topcard][sc=basic]BASIC[/sc][sc=un]Username[/sc][sc=hp]HP[/sc][sc=power]120[/sc][sc=energy][img]https://pokefarm.com/upload/:J1Q/colorless.png[/img][/sc][/sc][
][sc=imgbox][/sc][sc=imgdesc][
]img desc, keep it short it doesnt scroll[/sc][sc=logo][/sc][
][sc=tabbed_interface vertical][ul][
][li][img]https://pokefarm.com/upload/:J1Q/colorless.png[/img][/li]
[li][img]https://pokefarm.com/upload/:J1Q/colorless.png[/img][/li]
[li][img]https://pokefarm.com/upload/:J1Q/colorless.png[/img][/li]
[/ul][
][sc=tab-active]pkmn card abt me![pkmn=pikachu][
][hr][b]bold[/b] [i]italics[/i] [u]underline[/u] [s]strike[/s] [url=https://pokefarm.com/user/andie]link[/url][/sc][
][sc=tab]text box 2[/sc][
][sc=tab]text box 3[/sc][/sc][sc=btmtxt][
]text box at da bottem
bottem text[/sc][
//don't touch the credit please~
][sc=credit]illus. [url=https://pokefarm.com/user/andie]name of artist[/url][/sc][sc=right][url=https://pfq.link/~MQfR]Credit[/url][/sc][/styleclass][/styleclass]
[style]
//colors//
@txt: #2B2A4C; //text color
@link: #896045; //link color
@mainimage: "https://www.wargamer.com/wp-content/sites/wargamer/2023/12/pokemon-trading-card-game-rare-pokemon-card-pikachu-illustrator-2-million-art.jpg"; //the main pokemon card image
@logo: "https://pokefarm.com/upload/:J1Q/promo.png"; //logo next to the desc box
@cardbg: "https://pokefarm.com/upload/:J1Q/pokemonbg.png";
@border: #EAC436; //border color
@border2: #896045; //darker border color
@desc: #828083; //border color for info boxes
@desc2: #E3E2E2; //inner info boxes
@bg1: #E9E5CE; //full card background
.background {
padding:0;
margin: 0;
}
.post {
background: @bg1;
background-image: url(@cardbg);
max-width: 295px;
min-height: 400px;
color: @txt;
font-size:10pt;
line-height: 1.5;
text-align: center;
border-radius: 12px;
margin: 0px 7px 0px 7px;
padding: 5px;
border: 10px solid @border;
}
.imgbox {
background-image: url(@mainimage);
background-position: center;
background-size: cover;
border: 4px solid;
border-image: linear-gradient(to right top, @border, @border2) 1;
width: auto;
height: 120pt;
margin: 0 5px 0 5px;
box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.8);
}
.imgdesc {
width: 222px;
height: 15pt;
margin: 3px 0 2px 10px;
padding:0;
border: 2px solid;
border-image: linear-gradient(to right top, @border, @border2) 1;
background:@border;
background-image: linear-gradient(to right top, @border, @border2) 1;
border-radius: 0;
display: inline-block;
overflow: hidden;
}
.logo {
width: 20px !important;
height: 18px !important;
margin: 3px 0 0 5px;
padding: 2px;
background-position: center;
background-size: cover;
background-image: url(@logo);
vertical-align: super;
display: inline-block;
}
.topcard {
margin: 0;
padding:0 0 4px 0;
width: auto;
.un {
font-size: 3.0vh;
font-style: bold;
text-align: left;
margin: 0 0 0 6px;
padding: 0;
width: 180px !important;
height: 24px;
overflow: hidden;
display: inline-block;
vertical-align: sub;
}
.basic {
//border: 2px solid @desc;
//background: @desc2;
font-size:10pt;
font-style: italic;
text-align: left;
//border-radius: 18px 1px 18px 1px;
margin: 0 0 -10px 0px;
padding: 1px 12px 1px 7px;
//display: inline-flex;
height: 15pt;
overflow: hidden;
}
.energy {
text-align: right;
display: inline-flex;
max-width: 20px;
max-height: 20px;
padding: 2px 0 0 3px;
vertical-align: sub;
}
.hp {
font-size: 9px;
text-align: right;
display: inline-flex;
color: red;
font-weight: bold;
}
.power {
fontsize: 12px;
text-align: right;
display: inline-flex;
color: red;
font-weight: bold;
}}
.txtbx {
color: @txt;
height: 140px !important;
font-size:10pt;
border: 1px solid black;
margin: 0px 7px 0px 7px;
overflow: scroll;
}
.btmtxt {
color: @txt;
height: 32px !important;
font-size:10pt;
border: 4px solid;
border-image: linear-gradient(to left bottom, @border, @border2) 1;
margin: 0px 7px 0px 7px;
padding: 1px 0 0 0;
line-height: 1.1;
}
.credit {
font-size: 10pt;
width: 210px;
padding: 0 px 0 4px;
text-align: left;
display: inline-flex;
a, .credit a {
color: @txt;
}}
.right, .right a {
color: @txt;
text-align: right;
display: inline-flex;
color: @txt;
}
a {
color: @link;
}
a:hover {
color: @txt;
}
hr {
background: transparent;
border: 1px solid @border2;
}
.tabbed_interface {
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
margin: 0 0 0 7px;
box-shadow: none;
& > ul {
background: transparent;
padding: 2px;
width: 30px;
height: 34px;
border: 1px solid transparent;
& > li, li.a {
background: transparent;
margin: 0;
padding: 2px;
border-radius: 0;
border: 1px solid transparent;
color: @txt;
height: 34px;
&.tab-active {
background: transparent;
border: 0;
padding: 3px;
border-radius: 0;
}}
& > li:hover {
cursor: pointer;
}}
> .tab, > .tab-active {
background: transparent;
padding: 3px;
overflow: scroll;
color: @txt;
border-radius: 0;
border: 0;
box-shadow: none;
width:208px;
height: 130px;
margin: 0 0 0 30px;
}}
@media screen and (max-width: 600px) {
.tab, .tabbed_interface {
>.tab, >.tab-active {
margin:-47px 0 0 30px;
}}}
ul, table {
border: 0;
list-style-type: none;
margin: 0px;
padding: 3pt;
text-align: left;
}
li {
padding: 1px;
margin: 0;
color: @txt;
border: 0;
text-align: left;
}
.tooltip_content {
color: @txt;
background: @bg1;
border: solid 2px @border;
}
span.bbcode_tooltip {
border-bottom: 1px dashed @border;
padding-bottom: 0px;
}
.bbcode_table {
border: 2px solid @border;
width: 100%;
background: @bg1;
th {
background-color: @bg1;
border: 1px solid @border;
padding: 2%;
}
td {
border: 1px solid @border;
padding: 1%;
}}
div.tooltip_content {
background: @bg1;
color: @txt;
border: solid 1px @border;
}
.bbcode_tooltip {
border-bottom: 1px dashed @border;
}
.panel {
padding-top: 2.3%;
border: none;
box-shadow: none;
background: none;
&>h3 {
border-radius: 0px;
background: none;
border: 2px solid @border2;
color: @txt;
&>a {
color: @txt;
}
padding: 1.6%;
font-size: 10pt;
}
&>div {
color: @txt;
background: @bg2;
padding: 10px;
border-width: 0 2px 2px 2px;
border-style: solid;
border-color: @border2;
}}
[/style]
simple code (just color & img edits, right-click & copy)
[styleclass=background][styleclass=post][
][sc=topcard][sc=basic]BASIC[/sc][sc=un]Username[/sc][sc=hp]HP[/sc][sc=power]120[/sc][sc=energy][img]https://pokefarm.com/upload/:J1Q/colorless.png[/img][/sc][/sc][
][sc=imgbox][/sc][sc=imgdesc][
]img desc, keep it short it doesnt scroll[/sc][sc=logo][/sc][
][sc=tabbed_interface vertical][ul][
][li][img]https://pokefarm.com/upload/:J1Q/colorless.png[/img][/li]
[li][img]https://pokefarm.com/upload/:J1Q/colorless.png[/img][/li]
[li][img]https://pokefarm.com/upload/:J1Q/colorless.png[/img][/li]
[/ul][
][sc=tab-active]pkmn card abt me![pkmn=pikachu][
][hr][b]bold[/b] [i]italics[/i] [u]underline[/u] [s]strike[/s] [url=https://pokefarm.com/user/andie]link[/url][/sc][
][sc=tab]text box 2[/sc][
][sc=tab]text box 3[/sc][/sc][sc=btmtxt][
]text box at da bottem
bottem text[/sc][
//don't touch the credit please~
][sc=credit]illus. [url=https://pokefarm.com/user/andie]name of artist[/url][/sc][sc=right][url=https://pfq.link/~MQfR]Credit[/url][/sc][/styleclass][/styleclass]
[style]
//colors//
@txt: #2B2A4C; //text color
@link: #896045; //link color
@mainimage: "https://www.wargamer.com/wp-content/sites/wargamer/2023/12/pokemon-trading-card-game-rare-pokemon-card-pikachu-illustrator-2-million-art.jpg"; //the main pokemon card image
@logo: "https://pokefarm.com/upload/:J1Q/promo.png"; //logo next to the desc box
@cardbg: "https://pokefarm.com/upload/:J1Q/pokemonbg.png";
@border: #EAC436; //border color
@border2: #896045; //darker border color
@desc: #828083; //border color for info boxes
@desc2: #E3E2E2; //inner info boxes
@bg1: #E9E5CE; //full card background
@import 'skins/user/J/1/Q/pkmn-code/__extra'; //this is the entire code don't delete
[/style]
text box at da bottem
bottem text
illus. name of artist
these are super cool <33 i might use the pokemon card one for an oc in my journal :3c
Mochi ✪ 21 ✪ they/he/kit
Your local catboy hoarding quirky, bashful, and docile mons!
500/500
Safety bump bc idk if the op is still active
Official anime screencap
(Gently) edited by me
Cannot post: Please log in to post