Loading...

Top
PFQ Banner

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

Already a user? New to PFQ?

Legibility Guidelines

Forum Index > Core > Announcements > News Archive >

Pages: 123

Sei's AvatarSei
Sei's Avatar

Legibility Guidelines

Rule 4-D -- Post legibility

Signatures, post backgrounds and about me's should all be legible to the reader. This means that they should be able to be read and shouldn't cause any trouble to the reader. For some people this will be a little subject to interpretation, as what is fine for some, may not be for others - the best thing to do is to report it to the staff so that they can deal with it, if there is an issue there. Sadly, if it only seems to be affecting a single person, or a small amount of individuals, we cannot expect everyone to cater to those singular persons.
The following post is an in-depth guide about our rules on templates and basic legibility. It aims to establish what is and isn't acceptable in your Templates or on your Profiles.

Color Usage & Why It's Important

Firstly, let's talk about colours. It goes without saying, but please don't use colours that are eye-bleeding! For instance, this means do not use a bright luminescent pink background with neon green text or something to that effect. Generally, you should have bright text on a dark background, or dark text on a light background. Not dark-on-dark or light-on-light. • You can check if your background and text colours contrast acceptably here. • If you're looking for colors that complement each other well, try this site. Now that we've covered how to pick colors that properly complement each other, let's move on to how to use them. If you don't define a color for your template, the text will be the same color as the skin the user is using. Not everyone uses the same skin as you, so their text or background colours may be different if you don't define them both. For example, if I use a template with dark backgrounds, and my skin has light text, it will appear to be fine. But if you had a skin with dark text, it wouldn't work at all. You need to be aware of this and be sure to always define both background and text colours in your template. This applies the other way around too: if you use a text colour but don't define a background, it may not show up for other people. To recap: 1] No [color], no [background] = OK! 2] [color], but no [background] = Problem 3] No [color], but [background] = Problem 4] [color] and [background] = Probably ok, if you chose appropriate colours!

Adjusting Link Colors

Something that a lot of people overlook but is vitally important, is link color. Many templates don't define link colors, and this is a major issue: remember that not everyone has the same skin as you do, so they may not be able to see your links. To change link color, simply put this bit of code somewhere in your template: [style] a:link, a:visited { color: #COLOR; } [/style] This sets the colour of all links in your post. This will ensure that people can read your links on your template or about me. This code saves you time rather than having to constantly use [color] tags inside all of your links.

Text & Font size

The final point about legibility to make, is your font size and your font choice. Be aware that a font will only appear if the user happens to have it installed on their machine. Make sure you stick with common fonts to ensure they will be seen. This also applies to fonts used in an artistic template. In addition, text size is very important. The default text size is 12, which is the "standard" font size for good legibility. Anything less than size 10 might be difficult to read, and anything over the size of 15 bloats template size, leading to difficulty reading on smaller devices. Header tags (such as [h1] and [h2]) are okay because they're not actively being used in the body of a post, and are meant to stand out. For this reason, text less than 10pt generally isn't advised, but so long as its legible it SHOULD be fine. Here is an example of differing sizes: text at the size of 6 text at the size of 8 text at the size of 10 text at the size of 12 text at the size of 14

Overall template size

Next, let's talk about height restrictions. Templates must be between 300px and 600px in width, and 400px in height. The height here is the "base" height. In other words, the height your template has if there is no content text inside of it. Be careful when defining width: mobile users may not have the full 600px width visible to them, so your post may get cut off if you make it too wide. Here is a visual demonstration:
I am a wide template on a narrow screen. This text is going to be cut off by the edge of the screen before it reaches the end of the template, resulting in unreadable text and a big problem for mobile players. There are a lot of mobile players, so don't assume it'll be fine!
Generally, you should just avoid setting a width, and let the browser handle it.

Other restrictions & guidelines

Now for a bit more detail about other template codes that are often misused, specifically what is allowed, and what's not allowed. Please keep in mind that if you're ever unsure, you're more than welcome to ask in the Help forums to check before doing. 1]: Scroll bars & "overflow" Generally speaking, you should never use the "overflow" code. This code puts scrollbars in your post. At best, it's a hassle to scroll them. At worst, part of your post becomes hidden and unreadable. This is especially an issue for mobile users, as touchscreens are not capable of handling scrolling inside the main page. If it's used to display a code, as shown in the post below, then it is acceptable. Other codes may be added in future. Due to the wide variety of options, we can't cover all cases, so please check here occasionally. Again, feel free to ask if you are unsure.

What you can do to help

If you see any post or template and are unable to read it due to misuse of colours or other styles, please report the post from the post's menu. We will review and edit the post if necessary, and contact the author to let them know of the problem. Ultimately, our objective is to allow every voice to be heard and every post to be read!
Art: Bunnytears | Avatar: Novie | Background: Sei
  • Answers
  • Collecting
  • Hey! Listen!
Thy Life is a riddle, to bear rapture and sorrow To listen, to suffer, to entrust unto tomorrow In one fleeting moment, from the Land doth life flow Yet in one fleeting moment, for anew it doth grow In the same fleeting moment thou must live, die and know
Garth's love Hi my name is Sei my favorite color is clear
Interested in using a Pokefarm-made sprite? Click here to get permission!
Sei's AvatarSei
Sei's Avatar
Using Bananalizard's old about me code? It's been fixed! Rejoice! - Template adjustments done by dadesfriend, Code box by Raca

codes

Bananalizard's Fixed 6-tab About Me Template

[styleclass=reset][styleclass=Background] [styleclass=img][img]http://www.serebii.net/blackwhite/pokemon/087.png[/img][/styleclass] [styleclass=header][css=float:left]Welcome to[/css] [css=float:center; margin-left: 30px]Username's[/css][css=float:right]Profile![/css][/styleclass] [styleclass=link][styleclass=Body] Main Body [/styleclass] [styleclass=container][styleclass=tab1][styleclass=tab1hide][styleclass=tab1text]Tab 1[/styleclass][/styleclass][styleclass=tab1body] Tab 1 Body [/styleclass] [/styleclass][styleclass=tab2][styleclass=tab2hide][styleclass=tab2text]Tab 2[/styleclass][/styleclass][styleclass=tab2body] Tab 2 Body [/styleclass] [/styleclass] [styleclass=tab3][styleclass=tab3hide][styleclass=tab3text]Tab 3[/styleclass][/styleclass][styleclass=tab3body] Tab 3 Body [/styleclass] [/styleclass] [styleclass=tab4][styleclass=tab4hide][styleclass=tab4text]Tab 4[/styleclass][/styleclass][styleclass=tab4body] Tab 4 Body [/styleclass] [/styleclass] [styleclass=tab5][styleclass=tab5hide][styleclass=tab5text]Tab 5[/styleclass][/styleclass][styleclass=tab5body] Tab 5 Body [/styleclass] [/styleclass] [styleclass=tab6][styleclass=tab6hide][styleclass=tab6text]Tab 6[/styleclass][/styleclass][styleclass=tab6body] Tab 6 Body [/styleclass] [/styleclass] [/styleclass][/styleclass] [styleclass=credit]Coded by [url=https://pokefarm.com/user/bananaLizard][b]BananaLizard[/b][/url], free to use code and assistance [url=http://pfq.link/~Y2-0][b]here[/b][/url][/styleclass] [css=float:left; font-size: 9px; color: #d0d2de; margin-top: -213px; margin-left: 5px; text-shadow: 0px 2px 2px #0d0e13]hover over a box for more information[/css] [/styleclass][/styleclass] [style] .reset{ margin: 0px; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom 0px; text-align: none; padding: 0px 0px 0px; border: 0px; Border-style: none; border-width: 0px; border-shadow: 0px 0px 0px; font-size: 0px; Width: 0px; line-height:1; img{-webkit-filter: drop-shadow(0px 0px 0px); filter: drop-shadow(0px 0px 0px); } } .Background{ background-color: #272833; border-color: #0d0e13; border-style: solid; border-width: 2px; width: 306px; height: 342px; margin-top:0px; overflow:hidden; -moz-margin-bottom: 1px; background-position: Absolute; } .img{ background-color: #878892; border-color: #cfd3ff; color: #000; margin-top: 5px; margin-right: 5px; Width: 100px; height: 100px; text-align:center; Border-style: dashed; border-width: 2px; border-shadow: 2px 2px 10px; float: right; position: relative; img{position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-filter: drop-shadow(5px -5px 5px #272833); filter: drop-shadow(7px 7px 10px #272833); } } .header{ background-color: #878892; border-color: #cfd3ff; text-shadow: 2px 2px 5px #272833; color: #000; margin-top: 8px; margin-left: 5px; Width: 160px; height: 60px; Border-style: dashed; border-width: 2px; border-shadow: 2px 2px 10px; float: left; line-height:1; position: relative; padding: 10px 10px 10px; font-size: 20px; overflow:hidden; } .Body{ background-color: #d0d2de; border-color: #878892; color: #000; margin-top:7px; margin-right: 5px; margin-left: 50px; Width: 224px; height: 182px; text-align: center; Border-style: dashed; border-width: 2px; border-shadow: 2px 2px 10px; float: right; padding: 5px 5px 5px; font-size: 10px; overflow:hidden; } .credit{ background-color: #878892; border-color: #cfd3ff; color: #000; margin-top: 318px; margin-right: 5px; margin-left:5px; Width: 288px; height: 10px; overflow:hidden; Border-style: dashed; border-width: 2px; border-shadow: 2px 2px 10px; float:center; position: absolute; padding: 2px 2px 2px; font-family:Arial, sans-serif; Font-size:11px; } .credit a { text-decoration: none; color:#272833; text-shadow: 1px 1px 1px #6472ff; } .credit a:hover { color:#272833; text-shadow: 1px 1px 1px #0016ff; } .container{ margin: 0px; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom 0px; text-align: none; padding: 0px 0px 0px; border: 0px; Border-style: none; border-width: 0px; border-shadow: 0px 0px 0px; font-size: 0px; height: 0px; Width: 0px; float: left; line-height:1; overflow:hidden; } .container:hover{ margin-top:0px; float: left; line-height:1; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab1{ background-color: #5a62bd; Width: 40px; height: 20px; Border-style: solid; border-width: 1px; border-shadow: 2px 10px 10px; border-color: #dde0ff; color: #000; float:left; position: absolute; font-size: 10px; padding: 2px 2px 2px; margin-left:5px; margin-top: 7px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; text-align: center; } .tab1:hover{ width: 50px; align:center; wrap{ display: table; height:10%; Width: 40px; } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab1hide{ height:20px; width:40px; overflow:hidden; color: #000; float:left; } .tab1text{ height:20px; width:40px; color: #d0eaf7; text-shadow: 1px 1px 1px #350260; text-align: center; height:20px; position:clip; overflow-x:Hidden; overflow-y:Hidden; display: table-cell; vertical-align: middle; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .tab1:hover .tab1text{ height: 20px; width: 50px; display: table-cell; vertical-align: middle; overflow-x: Hidden; overflow-y:hidden; position: clip; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in; -webkit-Transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab1body{ Border-style: solid; border-width: 1px; border-shadow: 2px 2px 10px; border-color: #5a62bd; color: #000; background-color: #ced0e6; Width: 232px; height: 190px; float:left; line-height:1; margin-left: 350px; margin-top: -23px; font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; padding: 2px 2px 2px; overflow:hidden; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab1:hover .tab1body{ opacity: 1; margin-left: 55px; float:left; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab2{ background-color: #5a62bd; Width: 40px; height: 20px; Border-style: solid; border-width: 1px; border-shadow: 2px 10px 10px; border-color: #dde0ff; color: #000; float:left; position: absolute; font-size: 10px; padding: 2px 2px 2px; margin-left:5px; margin-top: 41px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; text-align: center; } .tab2:hover{ width: 50px; align:center; wrap{ display: table; height:10%; Width: 40px; } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab2hide{ height:20px; width:40px; overflow:hidden; color: #000; float:left; } .tab2text{ height:20px; width:40px; color: #d0eaf7; text-shadow: 1px 1px 1px #350260; text-align: center; height:20px; position:clip; overflow-x:Hidden; overflow-y:Hidden; display: table-cell; vertical-align: middle; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .tab2:hover .tab2text{ height: 20px; width: 50px; display: table-cell; vertical-align: middle; overflow-x: Hidden; overflow-y:hidden; position: clip; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in; -webkit-Transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab2body{ Border-style: solid; border-width: 1px; border-shadow: 2px 2px 10px; border-color: #5a62bd; color: #000; background-color: #ced0e6; Width: 232px; height: 190px; float:left; line-height:1; margin-left: 350px; margin-top: -57px; font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; padding: 2px 2px 2px; overflow:hidden; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab2:hover .tab2body{ opacity: 1; margin-left: 55px; float:left; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab3{ background-color: #5a62bd; Width: 40px; height: 20px; Border-style: solid; border-width: 1px; border-shadow: 2px 10px 10px; border-color: #dde0ff; color: #000; float:left; position: absolute; font-size: 10px; padding: 2px 2px 2px; margin-left:5px; margin-top: 75px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; text-align: center; } .tab3:hover{ width: 50px; align:center; wrap{ display: table; height:10%; Width: 40px; } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab3hide{ height:20px; width:40px; overflow:hidden; color: #000; float:left; } .tab3text{ height:20px; width:40px; color: #d0eaf7; text-shadow: 1px 1px 1px #350260; text-align: center; height:20px; position:clip; overflow-x:Hidden; overflow-y:Hidden; display: table-cell; vertical-align: middle; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .tab3:hover .tab3text{ height: 20px; width: 50px; display: table-cell; vertical-align: middle; overflow-x: Hidden; overflow-y:hidden; position: clip; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in; -webkit-Transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab3body{ Border-style: solid; border-width: 1px; border-shadow: 2px 2px 10px; border-color: #5a62bd; color: #000; background-color: #ced0e6; Width: 232px; height: 190px; float:left; line-height:1; margin-left: 350px; margin-top: -91px; font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; padding: 2px 2px 2px; overflow:hidden; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab3:hover .tab3body{ opacity: 1; margin-left: 55px; float:left; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab4{ background-color: #5a62bd; Width: 40px; height: 20px; Border-style: solid; border-width: 1px; border-shadow: 2px 10px 10px; border-color: #dde0ff; color: #000; float:left; position: absolute; font-size: 10px; padding: 2px 2px 2px; margin-left:5px; margin-top: 109px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; text-align: center; } .tab4:hover{ width: 50px; align:center; wrap{ display: table; height:10%; Width: 40px; } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab4hide{ height:20px; width:40px; overflow:hidden; color: #000; float:left; } .tab4text{ height:20px; width:40px; color: #d0eaf7; text-shadow: 1px 1px 1px #350260; text-align: center; height:20px; position:clip; overflow-x:Hidden; overflow-y:Hidden; display: table-cell; vertical-align: middle; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .tab4:hover .tab4text{ height: 20px; width: 50px; display: table-cell; vertical-align: middle; overflow-x: Hidden; overflow-y:hidden; position: clip; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in; -webkit-Transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab4body{ Border-style: solid; border-width: 1px; border-shadow: 2px 2px 10px; border-color: #5a62bd; color: #000; background-color: #ced0e6; Width: 232px; height: 190px; float:left; line-height:1; margin-left: 350px; margin-top: -125px; font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; padding: 2px 2px 2px; overflow:hidden; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab4:hover .tab4body{ opacity: 1; margin-left: 55px; float:left; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab5{ background-color: #5a62bd; Width: 40px; height: 20px; Border-style: solid; border-width: 1px; border-shadow: 2px 10px 10px; border-color: #dde0ff; color: #000; float:left; position: absolute; font-size: 10px; padding: 2px 2px 2px; margin-left:5px; margin-top: 143px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; text-align: center; } .tab5:hover{ width: 50px; align:center; wrap{ display: table; height:10%; Width: 40px; } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab5hide{ height:20px; width:40px; overflow:hidden; color: #000; float:left; } .tab5text{ height:20px; width:40px; color: #d0eaf7; text-shadow: 1px 1px 1px #350260; text-align: center; height:20px; position:clip; overflow-x:Hidden; overflow-y:Hidden; display: table-cell; vertical-align: middle; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .tab5:hover .tab5text{ height: 20px; width: 50px; display: table-cell; vertical-align: middle; overflow-x: Hidden; overflow-y:hidden; position: clip; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in; -webkit-Transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab5body{ Border-style: solid; border-width: 1px; border-shadow: 2px 2px 10px; border-color: #5a62bd; color: #000; background-color: #ced0e6; Width: 232px; height: 190px; float:left; line-height:1; margin-left: 350px; margin-top: -159px; font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; padding: 2px 2px 2px; overflow:hidden; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab5:hover .tab5body{ opacity: 1; margin-left: 55px; float:left; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab6{ background-color: #5a62bd; Width: 40px; height: 20px; Border-style: solid; border-width: 1px; border-shadow: 2px 10px 10px; border-color: #dde0ff; color: #000; float:left; position: absolute; font-size: 10px; padding: 2px 2px 2px; margin-left:5px; margin-top: 177px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; text-align: center; } .tab6:hover{ width: 50px; align:center; wrap{ display: table; height:10%; Width: 40px; } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab6hide{ height:20px; width:40px; overflow:hidden; color: #000; float:left; } .tab6text{ height:20px; width:40px; color: #d0eaf7; text-shadow: 1px 1px 1px #350260; text-align: center; height:20px; position:clip; overflow-x:Hidden; overflow-y:Hidden; display: table-cell; vertical-align: middle; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .tab6:hover .tab6text{ height: 20px; width: 50px; display: table-cell; vertical-align: middle; overflow-x: Hidden; overflow-y:hidden; position: clip; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in; -webkit-Transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab6body{ Border-style: solid; border-width: 1px; border-shadow: 2px 2px 10px; border-color: #5a62bd; color: #000; background-color: #ced0e6; Width: 232px; height: 190px; float:left; line-height:1; margin-left: 350px; margin-top: -193px; font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; padding: 2px 2px 2px; overflow:hidden; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab6:hover .tab6body{ opacity: 1; margin-left: 55px; float:left; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .link a{ text-decoration: underline; color:#6295ce; } .link a:hover { color:#b4d7ff; } [/style]
11-tab about me template

Bananalizard's Fixed 11-tab About Me Template

[styleclass=reset][styleclass=Background] [styleclass=img][img]http://www.serebii.net/blackwhite/pokemon/087.png[/img][/styleclass] [styleclass=header][css=float:left]Welcome to[/css] [css=float:center; margin-left: 30px]Username's[/css][css=float:right]Profile![/css][/styleclass] [styleclass=link][styleclass=Body] Main Body [/styleclass] [styleclass=container][styleclass=tab1][styleclass=tab1hide][styleclass=tab1text]Tab 1[/styleclass][/styleclass][styleclass=tab1body] Tab 1 Body [/styleclass] [/styleclass][styleclass=tab2][styleclass=tab2hide][styleclass=tab2text]Tab 2[/styleclass][/styleclass][styleclass=tab2body] Tab 2 Body [/styleclass] [/styleclass] [styleclass=tab3][styleclass=tab3hide][styleclass=tab3text]Tab 3[/styleclass][/styleclass][styleclass=tab3body] Tab 3 Body [/styleclass] [/styleclass] [styleclass=tab4][styleclass=tab4hide][styleclass=tab4text]Tab 4[/styleclass][/styleclass][styleclass=tab4body] Tab 4 Body [/styleclass] [/styleclass] [styleclass=tab5][styleclass=tab5hide][styleclass=tab5text]Tab 5[/styleclass][/styleclass][styleclass=tab5body] Tab 5 Body [/styleclass] [/styleclass] [styleclass=tab6][styleclass=tab6hide][styleclass=tab6text]Tab 6[/styleclass][/styleclass][styleclass=tab6body] Tab 6 Body [/styleclass] [/styleclass] [styleclass=tab7][styleclass=tab7hide][styleclass=tab7text]Tab 7[/styleclass][/styleclass][styleclass=tab7body] Tab 7 Body [/styleclass] [/styleclass] [styleclass=tab8][styleclass=tab8hide][styleclass=tab8text]Tab 8[/styleclass][/styleclass][styleclass=tab8body] Tab 8 Body [/styleclass] [/styleclass] [styleclass=tab9][styleclass=tab9hide][styleclass=tab9text]Tab 9[/styleclass][/styleclass][styleclass=tab9body] Tab 9 Body [/styleclass] [/styleclass] [styleclass=tab10][styleclass=tab10hide][styleclass=tab10text]Tab 10[/styleclass][/styleclass][styleclass=tab10body] Tab 10 Body [/styleclass] [/styleclass] [styleclass=tab11][styleclass=tab11hide][styleclass=tab11text]Tab 11[/styleclass][/styleclass][styleclass=tab11body] Tab 11 Body [/styleclass] [/styleclass][/styleclass][/styleclass] [styleclass=credit]Coded by [url=https://pokefarm.com/user/bananaLizard][b]BananaLizard[/b][/url], free to use code and assistance [url=http://pfq.link/~Y2-0][b]here[/b][/url][/styleclass] [css=float:left; font-size: 9px; color: #d0d2de; margin-top: -383px; margin-left: 5px; text-shadow: 0px 2px 2px #0d0e13]hover over a box for more information[/css] [/styleclass][/styleclass] [style] .reset{ margin: 0px; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom 0px; text-align: none; padding: 0px 0px 0px; border: 0px; Border-style: none; border-width: 0px; border-shadow: 0px 0px 0px; font-size: 0px; Width: 0px; line-height:1; img{-webkit-filter: drop-shadow(0px 0px 0px); filter: drop-shadow(0px 0px 0px); } } .Background{ background-color: #272833; border-color: #0d0e13; border-style: solid; border-width: 2px; width: 306px; height: 512px; margin-top:0px; overflow:hidden; -moz-margin-bottom: 1px; background-position: Absolute; } .img{ background-color: #878892; border-color: #cfd3ff; color: #000; margin-top: 5px; margin-right: 5px; Width: 100px; height: 100px; Border-style: dashed; border-width: 2px; border-shadow: 2px 2px 10px; float: right; position: relative; img{position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; -webkit-filter: drop-shadow(5px -5px 5px #272833); filter: drop-shadow(7px 7px 10px #272833); } } .header{ background-color: #878892; border-color: #cfd3ff; text-shadow: 2px 2px 5px #272833; color: #000; margin-top: 8px; margin-left: 5px; Width: 160px; height: 60px; Border-style: dashed; border-width: 2px; border-shadow: 2px 2px 10px; float: left; line-height:1; position: relative; padding: 10px 10px 10px; font-size: 20px; overflow:hidden; } .Body{ background-color: #d0d2de; border-color: #878892; color: #000; margin-top:7px; margin-right: 5px; margin-left: 50px; Width: 224px; height: 352px; text-align: center; Border-style: dashed; border-width: 2px; border-shadow: 2px 2px 10px; float: right; padding: 5px 5px 5px; font-size: 10px; overflow:hidden; } .credit{ background-color: #878892; border-color: #cfd3ff; color: #000; margin-top: 487px; margin-right: 5px; margin-left:5px; Width: 288px; height: 10px; overflow:hidden; Border-style: dashed; border-width: 2px; border-shadow: 2px 2px 10px; float:center; position: absolute; padding: 2px 2px 2px; font-family:Arial, sans-serif; Font-size:11px; } .credit a { text-decoration: none; color:#272833; text-shadow: 1px 1px 1px #6472ff; } .credit a:hover { color:#272833; text-shadow: 1px 1px 1px #0016ff; } .container{ margin: 0px; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom 0px; text-align: none; padding: 0px 0px 0px; border: 0px; Border-style: none; border-width: 0px; border-shadow: 0px 0px 0px; font-size: 0px; height: 0px; Width: 0px; float: left; line-height:1; overflow:hidden; } .container:hover{ margin-top:0px; float: left; line-height:1; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab1{ background-color: #5a62bd; Width: 40px; height: 20px; Border-style: solid; border-width: 1px; border-shadow: 2px 10px 10px; border-color: #dde0ff; color: #000; float:left; position: absolute; font-size: 10px; padding: 2px 2px 2px; margin-left:5px; margin-top: 7px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; text-align: center; } .tab1:hover{ width: 50px; align:center; wrap{ display: table; height:10%; Width: 40px; } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab1hide{ height:20px; width:40px; overflow:hidden; color: #000; float:left; } .tab1text{ height:20px; width:40px; color: #d0eaf7; text-shadow: 1px 1px 1px #350260; text-align: center; height:20px; position:clip; overflow-x:Hidden; overflow-y:Hidden; display: table-cell; vertical-align: middle; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .tab1:hover .tab1text{ height: 20px; width: 50px; display: table-cell; vertical-align: middle; overflow-x: Hidden; overflow-y:hidden; position: clip; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in; -webkit-Transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab1body{ Border-style: solid; border-width: 1px; border-shadow: 2px 2px 10px; border-color: #5a62bd; color: #000; background-color: #ced0e6; Width: 232px; height: 360px; float:left; line-height:1; margin-left: 350px; margin-top: -23px; font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; padding: 2px 2px 2px; overflow:hidden; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab1:hover .tab1body{ opacity: 1; margin-left: 55px; float:left; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab2{ background-color: #5a62bd; Width: 40px; height: 20px; Border-style: solid; border-width: 1px; border-shadow: 2px 10px 10px; border-color: #dde0ff; color: #000; float:left; position: absolute; font-size: 10px; padding: 2px 2px 2px; margin-left:5px; margin-top: 41px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; text-align: center; } .tab2:hover{ width: 50px; align:center; wrap{ display: table; height:10%; Width: 40px; } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab2hide{ height:20px; width:40px; overflow:hidden; color: #000; float:left; } .tab2text{ height:20px; width:40px; color: #d0eaf7; text-shadow: 1px 1px 1px #350260; text-align: center; height:20px; position:clip; overflow-x:Hidden; overflow-y:Hidden; display: table-cell; vertical-align: middle; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .tab2:hover .tab2text{ height: 20px; width: 50px; display: table-cell; vertical-align: middle; overflow-x: Hidden; overflow-y:hidden; position: clip; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in; -webkit-Transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab2body{ Border-style: solid; border-width: 1px; border-shadow: 2px 2px 10px; border-color: #5a62bd; color: #000; background-color: #ced0e6; Width: 232px; height: 360px; float:left; line-height:1; margin-left: 350px; margin-top: -57px; font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; padding: 2px 2px 2px; overflow:hidden; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab2:hover .tab2body{ opacity: 1; margin-left: 55px; float:left; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab3{ background-color: #5a62bd; Width: 40px; height: 20px; Border-style: solid; border-width: 1px; border-shadow: 2px 10px 10px; border-color: #dde0ff; color: #000; float:left; position: absolute; font-size: 10px; padding: 2px 2px 2px; margin-left:5px; margin-top: 75px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; text-align: center; } .tab3:hover{ width: 50px; align:center; wrap{ display: table; height:10%; Width: 40px; } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab3hide{ height:20px; width:40px; overflow:hidden; color: #000; float:left; } .tab3text{ height:20px; width:40px; color: #d0eaf7; text-shadow: 1px 1px 1px #350260; text-align: center; height:20px; position:clip; overflow-x:Hidden; overflow-y:Hidden; display: table-cell; vertical-align: middle; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .tab3:hover .tab3text{ height: 20px; width: 50px; display: table-cell; vertical-align: middle; overflow-x: Hidden; overflow-y:hidden; position: clip; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in; -webkit-Transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab3body{ Border-style: solid; border-width: 1px; border-shadow: 2px 2px 10px; border-color: #5a62bd; color: #000; background-color: #ced0e6; Width: 232px; height: 360px; float:left; line-height:1; margin-left: 350px; margin-top: -91px; font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; padding: 2px 2px 2px; overflow:hidden; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab3:hover .tab3body{ opacity: 1; margin-left: 55px; float:left; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab4{ background-color: #5a62bd; Width: 40px; height: 20px; Border-style: solid; border-width: 1px; border-shadow: 2px 10px 10px; border-color: #dde0ff; color: #000; float:left; position: absolute; font-size: 10px; padding: 2px 2px 2px; margin-left:5px; margin-top: 109px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; text-align: center; } .tab4:hover{ width: 50px; align:center; wrap{ display: table; height:10%; Width: 40px; } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab4hide{ height:20px; width:40px; overflow:hidden; color: #000; float:left; } .tab4text{ height:20px; width:40px; color: #d0eaf7; text-shadow: 1px 1px 1px #350260; text-align: center; height:20px; position:clip; overflow-x:Hidden; overflow-y:Hidden; display: table-cell; vertical-align: middle; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .tab4:hover .tab4text{ height: 20px; width: 50px; display: table-cell; vertical-align: middle; overflow-x: Hidden; overflow-y:hidden; position: clip; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in; -webkit-Transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab4body{ Border-style: solid; border-width: 1px; border-shadow: 2px 2px 10px; border-color: #5a62bd; color: #000; background-color: #ced0e6; Width: 232px; height: 360px; float:left; line-height:1; margin-left: 350px; margin-top: -125px; font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; padding: 2px 2px 2px; overflow:hidden; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab4:hover .tab4body{ opacity: 1; margin-left: 55px; float:left; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab5{ background-color: #5a62bd; Width: 40px; height: 20px; Border-style: solid; border-width: 1px; border-shadow: 2px 10px 10px; border-color: #dde0ff; color: #000; float:left; position: absolute; font-size: 10px; padding: 2px 2px 2px; margin-left:5px; margin-top: 143px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; text-align: center; } .tab5:hover{ width: 50px; align:center; wrap{ display: table; height:10%; Width: 40px; } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab5hide{ height:20px; width:40px; overflow:hidden; color: #000; float:left; } .tab5text{ height:20px; width:40px; color: #d0eaf7; text-shadow: 1px 1px 1px #350260; text-align: center; height:20px; position:clip; overflow-x:Hidden; overflow-y:Hidden; display: table-cell; vertical-align: middle; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .tab5:hover .tab5text{ height: 20px; width: 50px; display: table-cell; vertical-align: middle; overflow-x: Hidden; overflow-y:hidden; position: clip; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in; -webkit-Transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab5body{ Border-style: solid; border-width: 1px; border-shadow: 2px 2px 10px; border-color: #5a62bd; color: #000; background-color: #ced0e6; Width: 232px; height: 360px; float:left; line-height:1; margin-left: 350px; margin-top: -159px; font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; padding: 2px 2px 2px; overflow:hidden; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab5:hover .tab5body{ opacity: 1; margin-left: 55px; float:left; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab6{ background-color: #5a62bd; Width: 40px; height: 20px; Border-style: solid; border-width: 1px; border-shadow: 2px 10px 10px; border-color: #dde0ff; color: #000; float:left; position: absolute; font-size: 10px; padding: 2px 2px 2px; margin-left:5px; margin-top: 177px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; text-align: center; } .tab6:hover{ width: 50px; align:center; wrap{ display: table; height:10%; Width: 40px; } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab6hide{ height:20px; width:40px; overflow:hidden; color: #000; float:left; } .tab6text{ height:20px; width:40px; color: #d0eaf7; text-shadow: 1px 1px 1px #350260; text-align: center; height:20px; position:clip; overflow-x:Hidden; overflow-y:Hidden; display: table-cell; vertical-align: middle; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .tab6:hover .tab6text{ height: 20px; width: 50px; display: table-cell; vertical-align: middle; overflow-x: Hidden; overflow-y:hidden; position: clip; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in; -webkit-Transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab6body{ Border-style: solid; border-width: 1px; border-shadow: 2px 2px 10px; border-color: #5a62bd; color: #000; background-color: #ced0e6; Width: 232px; height: 360px; float:left; line-height:1; margin-left: 350px; margin-top: -193px; font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; padding: 2px 2px 2px; overflow:hidden; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab6:hover .tab6body{ opacity: 1; margin-left: 55px; float:left; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab7{ background-color: #5a62bd; Width: 40px; height: 20px; Border-style: solid; border-width: 1px; border-shadow: 2px 10px 10px; border-color: #dde0ff; color: #000; float:left; position: absolute; font-size: 10px; padding: 2px 2px 2px; margin-left:5px; margin-top: 211px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; text-align: center; } .tab7:hover{ width: 50px; align:center; wrap{ display: table; height:10%; Width: 40px; } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab7hide{ height:20px; width:40px; overflow:hidden; color: #000; float:left; } .tab7text{ height:20px; width:40px; color: #d0eaf7; text-shadow: 1px 1px 1px #350260; text-align: center; height:20px; position:clip; overflow-x:Hidden; overflow-y:Hidden; display: table-cell; vertical-align: middle; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .tab7:hover .tab7text{ height: 20px; width: 50px; display: table-cell; vertical-align: middle; overflow-x: Hidden; overflow-y:hidden; position: clip; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in; -webkit-Transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab7body{ Border-style: solid; border-width: 1px; border-shadow: 2px 2px 10px; border-color: #5a62bd; color: #000; background-color: #ced0e6; Width: 232px; height: 360px; float:left; line-height:1; margin-left: 350px; margin-top: -227px; font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; padding: 2px 2px 2px; overflow:hidden; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab7:hover .tab7body{ opacity: 1; margin-left: 55px; float:left; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab8{ background-color: #5a62bd; Width: 40px; height: 20px; Border-style: solid; border-width: 1px; border-shadow: 2px 10px 10px; border-color: #dde0ff; color: #000; float:left; position: absolute; font-size: 10px; padding: 2px 2px 2px; margin-left:5px; margin-top: 245px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; text-align: center; } .tab8:hover{ width: 50px; align:center; wrap{ display: table; height:10%; Width: 40px; } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab8hide{ height:20px; width:40px; overflow:hidden; color: #000; float:left; } .tab8text{ height:20px; width:40px; color: #d0eaf7; text-shadow: 1px 1px 1px #350260; text-align: center; height:20px; position:clip; overflow-x:Hidden; overflow-y:Hidden; display: table-cell; vertical-align: middle; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .tab8:hover .tab8text{ height: 20px; width: 50px; display: table-cell; vertical-align: middle; overflow-x: Hidden; overflow-y:hidden; position: clip; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in; -webkit-Transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab8body{ Border-style: solid; border-width: 1px; border-shadow: 2px 2px 10px; border-color: #5a62bd; color: #000; background-color: #ced0e6; Width: 232px; height: 360px; float:left; line-height:1; margin-left: 350px; margin-top: -261px; font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; padding: 2px 2px 2px; overflow:hidden; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab8:hover .tab8body{ opacity: 1; margin-left: 55px; float:left; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab9{ background-color: #5a62bd; Width: 40px; height: 20px; Border-style: solid; border-width: 1px; border-shadow: 2px 10px 10px; border-color: #dde0ff; color: #000; float:left; position: absolute; font-size: 10px; padding: 2px 2px 2px; margin-left:5px; margin-top: 279px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; text-align: center; } .tab9:hover{ width: 50px; align:center; wrap{ display: table; height:10%; Width: 40px; } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab9hide{ height:20px; width:40px; overflow:hidden; color: #000; float:left; } .tab9text{ height:20px; width:40px; color: #d0eaf7; text-shadow: 1px 1px 1px #350260; text-align: center; height:20px; position:clip; overflow-x:Hidden; overflow-y:Hidden; display: table-cell; vertical-align: middle; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .tab9:hover .tab9text{ height: 20px; width: 50px; display: table-cell; vertical-align: middle; overflow-x: Hidden; overflow-y:hidden; position: clip; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in; -webkit-Transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab9body{ Border-style: solid; border-width: 1px; border-shadow: 2px 2px 10px; border-color: #5a62bd; color: #000; background-color: #ced0e6; Width: 232px; height: 360px; float:left; line-height:1; margin-left: 350px; margin-top: -295px; font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; padding: 2px 2px 2px; overflow:hidden; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab9:hover .tab9body{ opacity: 1; margin-left: 55px; float:left; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab10{ background-color: #5a62bd; Width: 40px; height: 20px; Border-style: solid; border-width: 1px; border-shadow: 2px 10px 10px; border-color: #dde0ff; color: #000; float:left; position: absolute; font-size: 10px; padding: 2px 2px 2px; margin-left:5px; margin-top: 313px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; text-align: center; } .tab10:hover{ width: 50px; align:center; wrap{ display: table; height:10%; Width: 40px; } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab10hide{ height:20px; width:40px; overflow:hidden; color: #000; float:left; } .tab10text{ height:20px; width:40px; color: #d0eaf7; text-shadow: 1px 1px 1px #350260; text-align: center; height:20px; position:clip; overflow-x:Hidden; overflow-y:Hidden; display: table-cell; vertical-align: middle; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .tab10:hover .tab10text{ height: 20px; width: 50px; display: table-cell; vertical-align: middle; overflow-x: Hidden; overflow-y:hidden; position: clip; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in; -webkit-Transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab10body{ Border-style: solid; border-width: 1px; border-shadow: 2px 2px 10px; border-color: #5a62bd; color: #000; background-color: #ced0e6; Width: 232px; height: 360px; float:left; line-height:1; margin-left: 350px; margin-top: -329px; font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; padding: 2px 2px 2px; overflow:hidden; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab10:hover .tab10body{ opacity: 1; margin-left: 55px; float:left; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab11{ background-color: #5a62bd; Width: 40px; height: 20px; Border-style: solid; border-width: 1px; border-shadow: 2px 10px 10px; border-color: #dde0ff; color: #000; float:left; position: absolute; font-size: 10px; padding: 2px 2px 2px; margin-left:5px; margin-top: 347px; wrap{ display: table; table-height:20px; table-Width: 40px; table-layout: fixed; } font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; text-align: center; } .tab11:hover{ width: 50px; align:center; wrap{ display: table; height:10%; Width: 40px; } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab11hide{ height:20px; width:40px; overflow:hidden; color: #000; float:left; } .tab11text{ height:20px; width:40px; color: #d0eaf7; text-shadow: 1px 1px 1px #350260; text-align: center; height:20px; position:clip; overflow-x:Hidden; overflow-y:Hidden; display: table-cell; vertical-align: middle; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} .tab11:hover .tab11text{ height: 20px; width: 50px; display: table-cell; vertical-align: middle; overflow-x: Hidden; overflow-y:hidden; position: clip; img{margin-top: -1px; -webkit-filter: drop-shadow(1px 1px 2px #350260); filter: drop-shadow(1px 1px 2px #350260); } -webkit-transition: all 0.5s ease-in; -webkit-Transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab11body{ Border-style: solid; border-width: 1px; border-shadow: 2px 2px 10px; border-color: #5a62bd; color: #000; background-color: #ced0e6; Width: 232px; height: 360px; float:left; line-height:1; margin-left: 232px; margin-top: -363px; font-family:"Trebuchet MS", Helvetica, sans-serif; Font-size:9px; padding: 2px 2px 2px; overflow:hidden; opacity: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tab11:hover .tab11body{ opacity: 1; margin-left: 55px; float:left; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .link a{ text-decoration: underline; color:#6295ce; } .link a:hover { color:#b4d7ff; } [/style]
VeryVague's AvatarVeryVague
VeryVague's Avatar
Love the guidelines! One question, though. Let's say I'm using the Zygarde skin (which I am), and you are using the Xerneas skin. Will my signature appear different, even though I have not edited it since I switched skins?
You can call me Firey, master of water~
NyanLoki's AvatarNyanLoki
NyanLoki's Avatar
I'm glad this is an announcement now because I've been wondering if there was a way to fix some text visibility on one of my tabs. So what my problem is is that I have an image background that I'm assuming is too small so the image duplicates itself through the whole page. Is there a way to make this work for me or am I doomed to have these particular areas ruined with this technique? If any of the admins need a visual of what I mean, the problem is found within my "Alternate Personalities" tab on my about me page.
Life is nothing but a lie told to us by the ones behind our strings. -Photo credit to Sealitre
Duckbug's AvatarDuckbug
Duckbug's Avatar

QUOTE originally PMed by Raca

[ . . . ] You mentioned that usage of the overflow property should be avoided. So I was unaware of this until then, and wondered if an application like this is okay. [ . . . ]
Now that the thread has mysteriously reopened, I've moved my question here.
template by raca.

Journal

18+

Trade Shop

new Clan()

Raca (PFQ Wiki)

Avatar by
Sei
Sei's AvatarSei
Sei's Avatar

QUOTE originally posted by VeryVague

Love the guidelines! One question, though. Let's say I'm using the Zygarde skin (which I am), and you are using the Xerneas skin. Will my signature appear different, even though I have not edited it since I switched skins?
Since you have nothing in particular defined..

QUOTE originally posted by Color Usage & Why It's Important

To recap: 1] No [color], no [background] = OK!

QUOTE originally posted by NyanLoki

I'm glad this is an announcement now because I've been wondering if there was a way to fix some text visibility on one of my tabs. So what my problem is is that I have an image background that I'm assuming is too small so the image duplicates itself through the whole page. Is there a way to make this work for me or am I doomed to have these particular areas ruined with this technique? If any of the admins need a visual of what I mean, the problem is found within my "Alternate Personalities" tab on my about me page.
What you have is not okay. You have a background image and red text making this impossible to read. Remove the images and don't define a text color unless you define a background color for it. You also need to fix the width of your template - I'd suggest contacting BananaLizard for help.

QUOTE originally posted by Raca

QUOTE originally PMed by Raca

[ . . . ] You mentioned that usage of the overflow property should be avoided. So I was unaware of this until then, and wondered if an application like this is okay. [ . . . ]
Now that the thread has mysteriously reopened, I've moved my question here.

QUOTE originally posted by Other restrictions & guidelines

1]: Scroll bars & "overflow" Generally speaking, you should never use the "overflow" code. This code puts scrollbars in your post. At best, it's a hassle to scroll them. At worst, part of your post becomes hidden and unreadable. This is especially an issue for mobile users, as touchscreens are not capable of handling scrolling inside the main page.
When we review what was said, it would mean this sort of application isn't okay. If It's used to display a code, it's acceptable.
Duckbug's AvatarDuckbug
Duckbug's Avatar
Okay, okay, I shall comply but do others actually have trouble scrolling when the overflow property is used? I've not once encountered somebody who is unable to scroll within elements in the way that you described.
Niet's AvatarNiet
Niet's Avatar
I disagree with Sei. The purpose of the code block is not to be read, but to be copied. It's an exception to the general rule, and a rare case too ("text that isn't primarily for reading") so it's not a problem.
-- OMNOMNOM!
Featured story: Injustice Feedback welcome!
exLightning's AvatarexLightning
exLightning's Avatar
You go over the regulations and such pretty well but I have to ask why does this matter? Why does this rule exist? By the sound of things it's for some people with visual problems or a kind of colour blindness? But if you can't read someone's about me it's not the end of the world. If you ask me it's that persons "about me" they should be able to style it however they want (without being offensive or anything crazy) and while it's in good taste to make it legible to read they shouldn't be limited by that.
Eltafez's AvatarEltafez
Eltafez's Avatar
I know I'm answering a question with a question, but... What's the use of things like the About Me description, signature or anything public viewable if they can't be read? Besides, we're not doing this for our amusement. We're actually trying to educate people with this. It's really not good practice to use a combination of colors that can ruin people's eyesight, for example. Edit: And yes, this rule is mainly in place for those who are visually impaired one way or another. Accessibility isn't just about being able to visit the site on mobile devices.
Avatar by Psychøkin.

Links

Helpful: PFQ Rules | Staff Roster | Help Forums | PFQ Wiki Fan-made Tools: Calculator Personal: Journal | Comic
Template © Eltafez

Pages: 123

Cannot post: Please log in to post

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