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.
- 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
avatar by avatar-creator (permission)code by sceptios (free to use)
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=/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
- Link 1
- Link 2
- Tab 1
- Tab 2
- Tab 3
- Tab 4
Tab 1 content
Tab 2 content
Tab 3 content
Tab 4 content
avatar by avatar-creator (permission)code by sceptios (free to use)
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=/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
- Link 1
- Link 2
- Link 3
- Link 4
- Tab 1
- Tab 2
Tab 1 content
Tab 2 content
avatar by avatar-creator (permission)code by sceptios (free to use)
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=/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.
