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
