Free Tabbed About Me Template
Forum Index > Pokémon > Pokémon Art >
I've had a few people express interest in using my About Me design, so I've decided to share it. Few things to note first:
This code contains the following template parameters. Don't forget to replace them with the relevant information. If you don't replace these, your template will have errors:
<avatar_image>
<avatar_creator_url>
<avatar_creator_name>
<avatar_permission_url>
This code contains the following template parameters. Don't forget to replace them with the relevant information. If you don't replace these, your template will have errors:
<avatar_image>
<link_1_url>
<link_2_url>
<avatar_creator_url>
<avatar_creator_name>
<avatar_permission_url>
This code contains the following template parameters. Don't forget to replace them with the relevant information. If you don't replace these, your template will have errors:
<avatar_image>
<link_1_url>
<link_2_url>
<link_3_url>
<link_4_url>
<avatar_creator_url>
<avatar_creator_name>
<avatar_permission_url>
If you wish to use this template for a shop or in your signature, use this version. It is the same as the 6-tab version, except the avatar has been removed.
- Do not remove any of the credits, even if you change part of the code.
- Do not use parts of the code elsewhere without permission.
- There is space for an avatar, but I do not make avatars.
- Credit the avatar creator, even if it's yourself.
- I do not take requests.
- If you have any problems with the code, feel free to ask.
- 6 Tabs
- 4 Tabs
- 2 Tabs
About Me
- Tab 1
- Tab 2
- Tab 3
- Tab 4
- Tab 5
- Tab 6
Tab 1 content
Tab 2 content
Tab 3 content
Tab 4 content
Tab 5 content
Tab 6 content
Code
[sc=sceptios-about-me][sc=avatar][img]<avatar_image>[/img][/sc][
][sc=tabbed_interface horizontal wrap][ul][li]Tab 1[/li][li]Tab 2[/li][li]Tab 3[/li][li]Tab 4[/li][li]Tab 5[/li][li]Tab 6[/li][/ul][
][sc=tab tab-1 tab-active][
]Tab 1 content[
][/sc][
][sc=tab tab-2][
]Tab 2 content[
][/sc][
][sc=tab tab-3][
]Tab 3 content[
][/sc][
][sc=tab tab-4][
]Tab 4 content[
][/sc][
][sc=tab tab-5][
]Tab 5 content[
][/sc][
][sc=tab tab-6][
]Tab 6 content[
][/sc][/sc][
][sc=credits]avatar by [url=<avatar_creator_url>]<avatar_creator_name>[/url] ([url=<avatar_permission_url>]permission[/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%);
}
}
.tabbed_interface {
&>ul, {
background-color: inherit;
&>li {
display: block;
padding: 8px;
margin: 1px;
border-width: 2px;
border-style: solid;
font-size: 10pt;
font-weight: bold;
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]
About Me
- Tab 1
- Tab 2
- Tab 3
- Tab 4
Tab 1 content
Tab 2 content
Tab 3 content
Tab 4 content
Code
[sc=sceptios-about-me][sc=avatar][img]<avatar_image>[/img][/sc][
][sc=top-am-links][ul][li][url=<link_1_url>]Link 1[/url][/li][li][url=<link_2_url>]Link 2[/url][/li][/ul][/sc][
][sc=tabbed_interface horizontal wrap][ul][li]Tab 1[/li][li]Tab 2[/li][li]Tab 3[/li][li]Tab 4[/li][/ul][
][sc=tab tab-1 tab-active][
]Tab 1 content[
][/sc][
][sc=tab tab-2][
]Tab 2 content[
][/sc][
][sc=tab tab-3][
]Tab 3 content[
][/sc][
][sc=tab tab-4][
]Tab 4 content[
][/sc][/sc][
][sc=credits]avatar by [url=<avatar_creator_url>]<avatar_creator_name>[/url] ([url=<avatar_permission_url>]permission[/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]
About Me
- Tab 1
- Tab 2
Tab 1 content
Tab 2 content
Code
[sc=sceptios-about-me][sc=avatar][img]<avatar_image>[/img][/sc][
][sc=top-am-links][ul][li][url=<link_1_url>]Link 1[/url][/li][li][url=<link_2_url>]Link 2[/url][/li][li][url=<link_3_url>]Link 3[/url][/li][li][url=<link_4_url>]Link 4[/url][/li][/ul][/sc][
][sc=tabbed_interface horizontal wrap][ul][li]Tab 1[/li][li]Tab 2[/li][/ul][
][sc=tab tab-1 tab-active][
]Tab 1 content[
][/sc][
][sc=tab tab-2][
]Tab 2 content[
][/sc][/sc][
][sc=credits]avatar by [url=<avatar_creator_url>]<avatar_creator_name>[/url] ([url=<avatar_permission_url>]permission[/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;
&>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]
If you wish to use this template for a shop or in your signature, use this version. It is the same as the 6-tab version, except the avatar has been removed.
Code
[sc=sceptios-about-me][sc=tabbed_interface horizontal wrap][ul][li]Tab 1[/li][li]Tab 2[/li][li]Tab 3[/li][li]Tab 4[/li][li]Tab 5[/li][li]Tab 6[/li][/ul][
][sc=tab tab-1 tab-active][
]Tab 1 content[
][/sc][
][sc=tab tab-2][
]Tab 2 content[
][/sc][
][sc=tab tab-3][
]Tab 3 content[
][/sc][
][sc=tab tab-4][
]Tab 4 content[
][/sc][
][sc=tab tab-5][
]Tab 5 content[
][/sc][
][sc=tab tab-6][
]Tab 6 content[
][/sc][/sc][
][sc=credits]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;
}
.tabbed_interface {
&>ul, {
background-color: inherit;
&>li {
display: block;
padding: 8px;
margin: 1px;
border-width: 2px;
border-style: solid;
font-size: 10pt;
font-weight: bold;
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]
Updates/Fixes
22/May/2018: Tall avatars should now be correctly resized to fit.
24/May/2018: Another avatar scaling fix. Hopefully it's fixed for good this time.
13/Jun/2018: The avatar border is now the same hue as the tab button borders.
23/Jul/2018: Added 4-tab and 2-tab versions.
24/Jul/2018: Updated top link styles.
26/Jul/2018: One more top link style tweak.
11/Oct/2018: The credits no longer float outside the .sceptios-about-me div.
11/Oct/2018: Fixed credits margins on Firefox.
19/Dec/2018: Finally fixed the Firefox margins without hacky solutions.
27/Apr/2020: Added version that can be used for shops and signatures.
17/Aug/2021: Fixed font sizes that didn't comply with the legibility guidelines.
17/Oct/2021: Changed full URL paths to relative paths.
avatar created for me by Roops (permission)
Thank you for this! I'm using it myself (although it doesn't look as neat as yours).
Awesome! I'm glad you like it!
When you say it doesn't look as neat, am I correct in assuming that you're referring to your content and not the template itself? Because if something is wrong with the template, I'd like to know. (btw, I think your content looks great!)
This is gorgeous, I'll be using it later!
This is a great template! I'm using it, thanks!
(Avatar Sprite from Pokemon Yellow, recolored by Me)
Love this template, thanks!
Avatar made by Viri
27%
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Dry food
27%Modest nature
Thanks for using my template everyone!
I just noticed that I defined a fixed color for the avatar border which may not look very good with certain site skins. The avatar border color has been updated to be the same color (but slightly different shade) as the tab button borders. Let me know if you have any questions.
This is an awesome template! I will definitely be using it, thank you so much for making this and letting others use it!
Please Click!
I really enjoy how tidy and minimalist this style is, nice work!
Heya, just wanted to say I love the code. I've been seeing it around and it looks nice. I especially like how the tab body looks like.
Is there any way it could be optimised for only two tabs or if I could make the bottom four tabs into link buttons instead of tabs? I don't like abouts with tabs for personal reasons, but I need somewhere besides my TC to store my hunt info, because it's getting long :p I don't want to edit the code to that degree without your permission, though.
cee - he/she/they - 21
icon from Rachel and Jun youtube
sig sprite by me
stoked sparksurfer!
everything i post is to be read in the flattest voice possible
stoked sparksurfer!
everything i post is to be read in the flattest voice possibleCannot post: Please log in to post