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:
- 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.
All colors used in this template are taken from the colors defined in the viewers site skin. In theory it should blend nicely with any site skin, but I make no guarantees.
If the template colors look bad with your site skin, edit your skin using the
.sceptios-about-me selector to alter the colors of this template across the entire site. For example, to make all the tab buttons on every instance of this template appear to you as black, use this in your site skin:
.sceptios-about-me>.tabbed_interface>ul>li {background-color: #000000 !important;}
If you choose to use this template, I would appreciate it if you would leave a comment saying so. Thanks!
Select the number of tabs you want. The 4 and 2 tab versions have links in place of the missing 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
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>
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=https://pokefarm.com/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: 10.5px;
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: 8pt;
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 content
Tab 2 content
Tab 3 content
Tab 4 content
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>
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=https://pokefarm.com/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: 11px;
font-weight: bold;
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: 10.5px;
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: 8pt;
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 content
Tab 2 content
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>
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=https://pokefarm.com/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: 11px;
font-weight: bold;
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: 10.5px;
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: 8pt;
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=https://pokefarm.com/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: 10.5px;
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: 8pt;
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. Hopfully 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.
+
adamant | brave | lonely
0 
(Lustrous orb) @22zc
× 86 /3000
x 126/3000