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··· 333435

sceptios's Avatarsceptios
sceptios's Avatar
master.pngb.png
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=/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
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

  • 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=/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.
Thank you for this! I'm using it myself (although it doesn't look as neat as yours).
naïve collector | budding IV breeder
Signature image is free-to-use, by Lagomorphas. Avatar is by Temporal.
sceptios's Avatarsceptios
sceptios's Avatar
master.pngb.png
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!
Travelling Chef born in Kalos, currently exploring Paldea!
(Roleplay-ish Account, Message me for my free fields!)
YamiChip's AvatarYamiChip
YamiChip's Avatar
master.pnge+.png
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
master.pngd.png
Love this template, thanks!
Avatar made by Viri
Lv. 34 — 3,158 / 3,351
Aspear BerryAspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry
Cheri Berry (SPICY)
Chesto BerryChesto Berry
Chesto Berry (DRY)
Pecha BerryPecha Berry
Pecha Berry (SWEET)
Rawst BerryRawst Berry
Rawst Berry (BITTER)
Likes:
Dry food
Fire
Happiness 27%
Modest nature
sceptios's Avatarsceptios
sceptios's Avatar
master.pngb.png
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!

Hitmonchan's AvatarHitmonchan
Hitmonchan's Avatar
grandmaster.pngd+.png
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
master.pngs.png
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··· 333435

Cannot post: Please log in to post

© PokéFarm 2009-2024 (Full details)Contact | Rules | Privacy | Reviews 4.6★Get shortlink for this page