Loading...

Top
PFQ Banner

This is PokéFarm Q, a free online Pokémon collectables game.

Already a user? New to PFQ?

Free Tabbed About Me Template

Forum Index > Pokémon > Pokémon Art >

Pages: 123··· 101112

sceptios's Avatarsceptios
sceptios's Avatar
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:
  1. Do not remove any of the credits, even if you change part of the code.
  2. Do not use parts of the code elsewhere without permission.
  3. There is space for an avatar, but I do not make avatars.
  4. Credit the avatar creator, even if it's yourself.
  5. I do not take requests.
  6. 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
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
  • Tab 2
  • Tab 3
  • Tab 4
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
  • Tab 2
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]

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.
avatar created for me by Roops (permission)
check out my awesome friend DIVINITY!
Thank you for this! I'm using it myself (although it doesn't look as neat as yours).
Signature image is free-to-use and by Lagomorphas. Avatar is by Temporal.
sceptios's Avatarsceptios
sceptios's Avatar
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!)
Volixagarde's AvatarVolixagarde
Volixagarde's Avatar
This is gorgeous, I'll be using it later!
YamiChip's AvatarYamiChip
YamiChip's Avatar
This is a great template! I'm using it, thanks!
(Avatar Sprite from Pokemon Yellow, recolored by Me)
Størmangel's AvatarStørmangel
Størmangel's Avatar
Love this template, thanks!
Avatar made by Viri
Lv. 29 — 2,338 / 2,349
Aspear BerryAspear Berry
Aspear Berry (SOUR)
Cheri BerryAspear Berry
Cheri Berry (SPICY)
Chesto BerryCheri Berry
Chesto Berry (DRY)
Pecha BerryPecha Berry
Pecha Berry (SWEET)
Rawst BerryRawst Berry
Rawst Berry (BITTER)
Likes:
Dry food
FireFighting
Happiness 27%
Quiet nature
sceptios's Avatarsceptios
sceptios's Avatar
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!

Iveechan's AvatarIveechan
Iveechan's Avatar
I really enjoy how tidy and minimalist this style is, nice work!
I am always looking for more Hitmonchan to add to my collection, so if you have any unwanted ones (or Tyrogue destined to become Hitmonchan), please send them my way!
Rokon's AvatarRokon
Rokon's Avatar
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

Pages: 123··· 101112

Cannot post: Please log in to post

© PokéFarm 2009-2019 (Full details)Contact | Rules | Privacy | WikiGet shortlink for this page