Single post in Free Tabbed About Me Template
Forum Index > Pokémon > Pokémon Art > Free Tabbed About Me Template >
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)