Free Tabbed About Me Template
Forum Index > Pokémon > Pokémon Art >
Very neat and easy to use, I'll be fiddling with it for a long while lol
Thanks for allowing people to use this!
tysm for this!! using
Avatar by Dachsbuns!!
thank you, I will be using on my ' about me ' && hope to see you make more - if you wish to, of couse 👀👌🏻
thanks for the temp! it's really nice!
Sonora - 16 - hoot/owl
"You weren't quite as bold. Smarter, sharpr, brighter than the rest . . . Now you're sixteen, broke and burning out in style" -gifted kid burnout . Tom O'Donovan TH
Sweet Apple
Evolution Item
(: 0)
A peculiar apple that can make a certain species of Pokémon evolve. It's exceptionally sweet.
Sells for 1,000
Likes:
Sweet food
MAX
Timid nature
im gonna be using this template!! its super nice thank you sm for making it free! <3
I'm using it! I just have some small problem with the code.
I was editing it and noticed the credits disappeared, at first I thought I had deleted them by accident but when I checked the code I noticed its all there still, it just doesn't appear. Any idea?
Code
[sc=sceptios-about-me][sc=avatar][img]https://pokefarm.com/upload/:JJ43/df8wx2z-d8f54994-03f5-4e4d-80e1-ca18c86d7bb1.gif[/img][/sc][
][sc=top-am-links][ul][li][url=https://lemsartblog.tumblr.com]Art blog[/url][/li][li][url=https://toyhou.se/Lemondr0p]Toyhou.se[/url][/li][/ul][/sc][
][sc=tabbed_interface horizontal wrap][ul][li]About me[/li][li]Gameplay[/li][li]Goals[/li][li]Showcase[/li][/ul][
][sc=tab tab-1 tab-active][
][center]╔⏤⏤⏤⏤⏤⏤⏤✧⏤⏤⏤⏤⏤⏤⏤╗
Lemon | They/he | Adult | -3hrs
[url=https://www.deviantart.com/king-lulu-deer/art/Nonbinary-Pride-Flag-Shooting-Star-688117643][img]https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/cf2836cb-5893-4a6c-b156-5a89d94fc721/dbdoqyz-6cdaf622-e261-4d89-a3f1-9b01c0abce58.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2NmMjgzNmNiLTU4OTMtNGE2Yy1iMTU2LTVhODlkOTRmYzcyMVwvZGJkb3F5ei02Y2RhZjYyMi1lMjYxLTRkODktYTNmMS05YjAxYzBhYmNlNTguZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.PMkSHo-fwX5dP3vTCSx-brJC9IC-_V16NtkEBRYsfq4[/img][/url]
I hyperfixate on games a lot and then forget about them for months, but I always come back, don't worry!
Socially anxious + bad memory,
yet I'm open to DMs.
[pkmn=Sylveon] [pkmn=Leafeon] [pkmn=Ampharos] [pkmn=Mightyena]
╚⏤⏤⏤⏤⏤⏤⏤✧⏤⏤⏤⏤⏤⏤⏤╝[/center][
][/sc][
][sc=tab tab-2][
]Tab 2 content[
][/sc][
][sc=tab tab-3][
]Tab 3 content[
][/sc][
][sc=tab tab-4][
][center][pkmnpanel=-CFZh] [pkmnpanel=-FwwM]
[style]
/* These default to the VIEWER's skin colors */
/* To customize them, just set hex color codes instead */
@platform-base: @col-bg1;
@platform-border: @col-border1;
@name-color: @col-fg1;
@name-background: @col-bg3;
@name-border: @col-border3;
@berry-background: @col-flavour-up;
@berry-border: @col-fg1;
/* 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: 120px;
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 {
background-color: @name-background;
border: 1px solid @name-border;
border-radius: 5px;
margin-top: 1px;
height: 16px;
display: flex;
flex-wrap: nowrap;
a {
color: @name-color;
font-weight: normal;
margin: 0 2px;
width: 80px !important;
flex-grow: 99;
font-size: 12px;
}
img {
display: none;
}
img:nth-last-of-type(-n+2) {
display: inline;
margin: 0;
}
}
.action {
display: @display-berries;
position: absolute;
left: 88px;
top: 70px;
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;
}
.berrybuttons {
>a {
display: none;
width: 20px;
height: 20px;
line-height: 20px;
padding: 5px;
background-color: @berry-background;
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;
}
}
&.working {
opacity: 0.5;
}
table, a[data-evolve] {
/* "thank you" message and evolve button */
display: none;
}
}
.expbar, .taste, .extra {
display: none;
}
}
>div:hover>.action a[data-berry]:after {
border-color: @berry-border;
}
}
[/style][
][/center][/sc][
][sc=credits]avatar by [url=https://www.deviantart.com/doosio]Doosio[/url] ([url=https://www.deviantart.com/doosio/art/Free-to-use-Albedo-Pixel-Icon-921965435]free to use[/url])
code by [url=/user/sceptios]sceptios[/url] ([url=/forum/thread/161261/Free-Tabbed-About-Me-Template]free to use[/url])[/sc][/sc][
][style]
.sceptios-about-me {
width: 100%;
overflow: hidden;
}
.avatar {
display: inline-block;
overflow: hidden;
float: left;
height: 72px;
width: 72px;
border-style: solid;
border-color: @col-border2;
border-width: 3px;
margin-right: 4px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
&>img {
display: block;
margin: auto;
max-width: 100%;
max-height: 100%;
filter: brightness(90%);
}
}
.top-am-links {
width: 224px;
display: inline-block;
overflow: hidden;
margin-bottom: -2px;
&>ul, {
width: 100%;
padding: 0;
margin: 0 0 0 1px;
&>li {
display: block;
&>a {
position: relative;
float: left;
padding: 2px 4px;
margin: 3px 0px 2px 5px;
color: @col-link1;
font-size: 10pt;
text-align: center;
line-height: 13px;
height: 13px;
width: 95px;
border-color: @col-border2;
background-color: @col-bg3;
border-style: solid;
border-width: 1px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
filter: brightness(95%);
&:hover {
filter: brightness(80%);
color: @col-fg2;
background-color: @col-bg2;
}
}
}
}
}
.tabbed_interface {
&>ul, {
background-color: inherit;
&>li {
display: block;
padding: 8px;
margin: 1px;
border-width: 2px;
border-style: solid;
font-size: 10pt;
text-align: center;
cursor: pointer;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
line-height: 4px;
height: 4px;
width: 60px;
border-color: @col-border2;
&.tab-active {
filter: brightness(85%);
border-bottom-color: @col-border2;
}
&:not(.tab-active):hover {
color: @col-fg1;
background-color: @col-bg1;
}
}
}
&>.tab {
box-shadow: none;
background-color: inherit;
margin: 4px 0px;
padding: 8px 4px;
border-color: @col-bg2;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border-width: 3px 1px;
border-style: solid dotted;
}
}
.credits {
background-color: @col-bg3;
font-size: 10pt;
float: right;
text-align: right;
padding: 1px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
vertical-align: middle;
}
:after {
height: 0;
}
[/style]
[/sc]
avatar by Doosio
Someday I'll make this look pretty
Ill use this! However, i have a question. How do i change the tab names? Like, how do i change it from tab 1 to what i want to name it?
edit: nvm, figured it out!
Avatar credit goes to star_slayer
QUOTE originally posted by Lemondr0p
I'm using it! I just have some small problem with the code.
I was editing it and noticed the credits disappeared, at first I thought I had deleted them by accident but when I checked the code I noticed its all there still, it just doesn't appear. Any idea?
Code
[sc=sceptios-about-me][sc=avatar][img]https://pokefarm.com/upload/:JJ43/df8wx2z-d8f54994-03f5-4e4d-80e1-ca18c86d7bb1.gif[/img][/sc][
][sc=top-am-links][ul][li][url=https://lemsartblog.tumblr.com]Art blog[/url][/li][li][url=https://toyhou.se/Lemondr0p]Toyhou.se[/url][/li][/ul][/sc][
][sc=tabbed_interface horizontal wrap][ul][li]About me[/li][li]Gameplay[/li][li]Goals[/li][li]Showcase[/li][/ul][
][sc=tab tab-1 tab-active][
][center]╔⏤⏤⏤⏤⏤⏤⏤✧⏤⏤⏤⏤⏤⏤⏤╗
Lemon | They/he | Adult | -3hrs
[url=https://www.deviantart.com/king-lulu-deer/art/Nonbinary-Pride-Flag-Shooting-Star-688117643][img]https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/cf2836cb-5893-4a6c-b156-5a89d94fc721/dbdoqyz-6cdaf622-e261-4d89-a3f1-9b01c0abce58.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2NmMjgzNmNiLTU4OTMtNGE2Yy1iMTU2LTVhODlkOTRmYzcyMVwvZGJkb3F5ei02Y2RhZjYyMi1lMjYxLTRkODktYTNmMS05YjAxYzBhYmNlNTguZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.PMkSHo-fwX5dP3vTCSx-brJC9IC-_V16NtkEBRYsfq4[/img][/url]
I hyperfixate on games a lot and then forget about them for months, but I always come back, don't worry!
Socially anxious + bad memory,
yet I'm open to DMs.
[pkmn=Sylveon] [pkmn=Leafeon] [pkmn=Ampharos] [pkmn=Mightyena]
╚⏤⏤⏤⏤⏤⏤⏤✧⏤⏤⏤⏤⏤⏤⏤╝[/center][
][/sc][
][sc=tab tab-2][
]Tab 2 content[
][/sc][
][sc=tab tab-3][
]Tab 3 content[
][/sc][
][sc=tab tab-4][
][center][pkmnpanel=-CFZh] [pkmnpanel=-FwwM]
[style]
/* These default to the VIEWER's skin colors */
/* To customize them, just set hex color codes instead */
@platform-base: @col-bg1;
@platform-border: @col-border1;
@name-color: @col-fg1;
@name-background: @col-bg3;
@name-border: @col-border3;
@berry-background: @col-flavour-up;
@berry-border: @col-fg1;
/* 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: 120px;
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 {
background-color: @name-background;
border: 1px solid @name-border;
border-radius: 5px;
margin-top: 1px;
height: 16px;
display: flex;
flex-wrap: nowrap;
a {
color: @name-color;
font-weight: normal;
margin: 0 2px;
width: 80px !important;
flex-grow: 99;
font-size: 12px;
}
img {
display: none;
}
img:nth-last-of-type(-n+2) {
display: inline;
margin: 0;
}
}
.action {
display: @display-berries;
position: absolute;
left: 88px;
top: 70px;
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;
}
.berrybuttons {
>a {
display: none;
width: 20px;
height: 20px;
line-height: 20px;
padding: 5px;
background-color: @berry-background;
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;
}
}
&.working {
opacity: 0.5;
}
table, a[data-evolve] {
/* "thank you" message and evolve button */
display: none;
}
}
.expbar, .taste, .extra {
display: none;
}
}
>div:hover>.action a[data-berry]:after {
border-color: @berry-border;
}
}
[/style][
][/center][/sc][
][sc=credits]avatar by [url=https://www.deviantart.com/doosio]Doosio[/url] ([url=https://www.deviantart.com/doosio/art/Free-to-use-Albedo-Pixel-Icon-921965435]free to use[/url])
code by [url=/user/sceptios]sceptios[/url] ([url=/forum/thread/161261/Free-Tabbed-About-Me-Template]free to use[/url])[/sc][/sc][
][style]
.sceptios-about-me {
width: 100%;
overflow: hidden;
}
.avatar {
display: inline-block;
overflow: hidden;
float: left;
height: 72px;
width: 72px;
border-style: solid;
border-color: @col-border2;
border-width: 3px;
margin-right: 4px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
&>img {
display: block;
margin: auto;
max-width: 100%;
max-height: 100%;
filter: brightness(90%);
}
}
.top-am-links {
width: 224px;
display: inline-block;
overflow: hidden;
margin-bottom: -2px;
&>ul, {
width: 100%;
padding: 0;
margin: 0 0 0 1px;
&>li {
display: block;
&>a {
position: relative;
float: left;
padding: 2px 4px;
margin: 3px 0px 2px 5px;
color: @col-link1;
font-size: 10pt;
text-align: center;
line-height: 13px;
height: 13px;
width: 95px;
border-color: @col-border2;
background-color: @col-bg3;
border-style: solid;
border-width: 1px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
filter: brightness(95%);
&:hover {
filter: brightness(80%);
color: @col-fg2;
background-color: @col-bg2;
}
}
}
}
}
.tabbed_interface {
&>ul, {
background-color: inherit;
&>li {
display: block;
padding: 8px;
margin: 1px;
border-width: 2px;
border-style: solid;
font-size: 10pt;
text-align: center;
cursor: pointer;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
line-height: 4px;
height: 4px;
width: 60px;
border-color: @col-border2;
&.tab-active {
filter: brightness(85%);
border-bottom-color: @col-border2;
}
&:not(.tab-active):hover {
color: @col-fg1;
background-color: @col-bg1;
}
}
}
&>.tab {
box-shadow: none;
background-color: inherit;
margin: 4px 0px;
padding: 8px 4px;
border-color: @col-bg2;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border-width: 3px 1px;
border-style: solid dotted;
}
}
.credits {
background-color: @col-bg3;
font-size: 10pt;
float: right;
text-align: right;
padding: 1px 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
vertical-align: middle;
}
:after {
height: 0;
}
[/style]
[/sc]
Thank you for sharing your code! I plan to use it for my own profile, but it's still a WIP...
Forum avatar credit: Nathan "Drawfee"
Cannot post: Please log in to post