Loading...

Top
PFQ Banner

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

Already a user? New to PFQ?

Styleclass and You: An Introduction

Forum Index > PokéFarm > Guides >

Pages: 123··· 1819202122··· 262728

MerpleSerple's AvatarMerpleSerple
MerpleSerple's Avatar
Hello all! This is my first template with css, and while the guides on here are great, I can only grasp so much in my littol caveman brain and no coding education. I'm finally almost done, but I can't figure out where I messed up with some minor errors. I'll be putting my example texts n stuff in a hide box, as well as the code in another. My main issues are:
  • Display banner/box title is in the wrong color
  • accordion/a-section pieces are seemingly overlapping/going past limits
  • the very bottom image seems to repeat for 2 pixels in the preview stage, unsure if its visible in post
I'd really appreciate some help or advice! (i think it might be overflow or something? maybe padding??)

example texts

hello!

hi!

uwu

Hidebox + Display!

hidebox

Est impedit elaboraret ex. Ex erant dicunt honestatis mel, vim ex amet integre? In eam dicam nullam splendide, debitis epicuri ius ex, ut nisl audiam senserit sea.

display

Lorem ipsum dolor sit amet, ea eos esse ludus theophrastus, duo ne habeo recusabo instructior, usu cu aliquam perpetua conceptam.

tooltips, progress

I'm a tip!
hello!
im a pit tip!
check this out!
500/1000 to jirachi hunt!

URLs, tables, and tabs!

here's a link to my Journal!
Prices (In Credits)
Albino and Shiny Dexes Free!
Coding Help 100 an hour!
Legendaries 2k each
Albinos/Shinies A: 20k || S: 30K
Deltas 1k each!
Hunt Bait Commision 5k per Bait
  • tab 1
  • tab 2
  • tab 3
hi im tab 1
tab 2 here! uwu
i guess im tab 3.
  • tab 1
  • tab 2
  • tab 3
hi im tab 1 but vertical
uwu tab 2 here!
im tab 3, but this way now.

my code

[style] .delphox //This template is for my personal use only, unless used with explicit permission from me. (MerpleSerple) a:link {color: white;} a:visited {color: #ff54fa;} a:hover {color: #0006b5;} a:active {color: #8000ff;} span.bbcode_tooltip { border-bottom: 0.5px #37001F; } .tooltip_content { background-color: #AA427D; color: #37001F; border-color: #1E012E;} table { margin: 0px auto; border: 0px; } td { border: 1px #912361 solid; background-color: #AA427D; color: #f1afd4; text-align: center; } th { border: 0px; background-color: #37001F; color: #AA427D; text-align: center; } .panel { border: 0px #37001F; background-color: #AA427D; color: #f1afd4; &>h3 {border-bottom: 1.5px #37001F; background-color: #770E49; border-radius: 2px; padding: 3px; a { color: #f1afd4; text-decoration: none; } a:hover { color: white; } } &>div { color: #37001F; background-color: #f1afd4; border: 0.5px #580032; color: black; border-radius: 2px; padding: 3px;} } .expbar { color: white; background-color: #b18bc5; border: 1px black solid; &>div { background-color: #713B8E; border-right: 2.5px solid black; } } .tabbed_interface > ul > li.tab-active{ color: #f1afd4; background: #770E49; text-align: center; border-radius: 2px; border: 1px solid #580032; box-shadow: none; } .tabbed_interface > ul > li{ color: #9c69b8; background-color: #1E012E; background: #31044A; text-align: center; padding: 4px 4px 4px 4px; border: 1px solid #2E2E45; border-radius: 1px; box-shadow: none; } .tabbed_interface > div.tab-active{ background: #9c69b8; color: #1E012E; border-radius: 2px; border: 1px solid #31044A; box-shadow: none; text-align: center; margin: 2px; } [/style][img]https://pokefarm.com/upload/merpleserple/Template_Stuff/delphox_top_piece.png[/img][css=background:url('https://pokefarm.com/upload/merpleserple/Template_Stuff/deplox_middle_piece.png'); background-repeat:repeat-y; background-size:100%; padding: 0px 0px 0px 0px; color:#1E012E;] [css= padding: 0px 10px 0px 10px;][ ]<TEXT GOES HERE>[ ][/css][img]https://pokefarm.com/upload/merpleserple/Template_Stuff/delphox_bottom_piece.png[/img][/css]
  • My Current Hunt
  • Type Race+Plans!
2/226 hatched! S: -k credits/- gp/- zc A: -k credits/- gp/- zc
396 points this month! Planned hunts:
Emberlynn's AvatarEmberlynn
Emberlynn's Avatar
The display box header being the wrong color was an easy fix, you had a second color code in the coding section for it that was set to black. It was defaulting to the second text color you told it. As for the bottom being awkward it looks like it fixed it when i adjusted the padding to be inside the background css string. Since there was already a padding code inside that you didn't really need to add a second css string for just padding. Only thing I don't see is what you mean by the accordions overlapping, can you be a little more specific or provide a screenshot of what you're seeing on your end?

extra testing

test

a b c d e f g h i j k l m n o p q r s t u v w x y z
This bar is 60% full
italics underline bold test
testy testu testy testy testy
pokefarm testy test
Header 1
Content 1Content 2

codes

CODES GO HERE
"There's not a cup of tea big enough or a book long enough to suit me." - C.S. Lewis | Avatar credits | ©
signature by emberlynn; official 1D fragrance commercial gifs
MerpleSerple's AvatarMerpleSerple
MerpleSerple's Avatar
@emberlynn after imgur crashed like 3 times i gave up and used the site uploader ;v; here's a screenshot from my end, but it didn't happen when you posted two hideboxes next to each other either.... maybe a fluke?

screenshot

thank you for the other fixes! i spent like an hour trying to read through my code, but i couldn't quite process it anymore after a while. what a simple mistake... :/
ALKALi's AvatarALKALi
ALKALi's Avatar
@Shay Thank you so much for the help! And sorry for the late reply, I didn't realize that I had this thread silenced ^^'
Formerly DuskAurora. Avatar by Kaenith (Tumblr). Permission. Originally posted here.
Emberlynn's AvatarEmberlynn
Emberlynn's Avatar
@Merple: I thjnk what you may be seeing as overlap is actually the shadow that is automatically added onto hide boxes, mine didn't do it only for the fact that mine were accordions. I know there's a code to get rid of the drop shadows on them but I can't remember them off the top of my head
SilverFeyX's AvatarSilverFeyX
SilverFeyX's Avatar
I'm trying to make a template and for some reason the text is going off the screen. I've tried a few things to fix this but I'm not sure.

screenshot

Thanks.
Need zc for hypermode, übercharm and shiny charms Send me any unwanted sweet hearts or easter eggs! Please Profile pic thing made by me
KishanHaru's AvatarKishanHaru
KishanHaru's Avatar
I'm assuming your background has a smaller width than your text area. Not much we can do for help without the code youre using though ^^;
SCA ♪ 🌸 Wiki Help 🌸 SpecialsPM MeMy Shoppe~ Current Hunt: Mudkip
B> Lunar Wings for 45 ZC ea.
MerpleSerple's AvatarMerpleSerple
MerpleSerple's Avatar

QUOTE originally posted by Emberlynn

@Merple: I think what you may be seeing as overlap is actually the shadow that is automatically added onto hide boxes, mine didn't do it only for the fact that mine were accordions. I know there's a code to get rid of the drop shadows on them but I can't remember them off the top of my head
Sorry, I forgot to reply! I'll be trying to track down that code, but my only guess is box-shadows: none; and I'm not entirely sure thats it. (That, or I'm adding it to the wrong section.) Thank you for the other fixes, after another day or two of staring at it, I think everything's close to perfect. Unless the font is Actually too dark like I think it is. I might get back to tinkering later.
SilverFeyX's AvatarSilverFeyX
SilverFeyX's Avatar

QUOTE originally posted by KishanHaru

I'm assuming your background has a smaller width than your text area. Not much we can do for help without the code youre using though ^^;
Sorry! Here ^-^

code

[css= background: url('https://cdn.discordapp.com/attachments/567322820850352128/754746335504105533/th.jpeg-11.jpg'); height: 500px; width: 310px; box-shadow: none; border: 2px solid white;] [sc=tabbed_interface horizontal] [Ul] [li][img]https://cdn.discordapp.com/attachments/567322820850352128/755097752534515742/Untitled148.png[/img][/li] [li][img]https://cdn.discordapp.com/attachments/567322820850352128/755097752534515742/Untitled148.png[/img][/li] [/ul] [sc=tab][sc=text]Heya! I'm SilverFeyX. I used to go by Awesomeminer148 but after getting back from my hiatus I changed my name. I'll just list facts about me because long paragraphs are boring and boring is bad. [/sc][/sc] [sc=tab][sc=text]content 2[/sc][/sc] [/sc] [/css] [Style] Img { Height: 25px; Width: 25px; } .tabbed_interface { White-space: nowrap; Line-height: 14px; Position: relative; Background: transparent; Border: none; Box-shadow: none; &>ul { Background: transparent; Border: none; Box-shadow: none; Width: 100px; Margin-left: 10px; Margin-top: -20px; &>li { Background: transparent; Border: none; Box-shadow: none; Height: 50px; Width: 50px; &>div { Width: 280px; } } } } .tab { Color: white; Height: 300px; Border: none; Box-shadow: none; Background: transparent; Width: 280px; } .panel { Position: relative; Box-shadow: none; Border: none; Color: white; Background: transparent; Width: 160px; } .text { Border: 2px solid white; Color: white; Background-color: rgba(0,0,0,0.5); Height: 274px; Margin-top: 125px; Text-align: center; Padding: 15px; Width: 280px; Margin-left: -2px; } .uwu { Width: 280px; } [/style]
I'm primarily on mobile and I'm not the best at coding so some bits might be unnecessary. Thanks.
Emberlynn's AvatarEmberlynn
Emberlynn's Avatar
Figured out the problem with your coding. It was the white-space:nowrap; code you had inside the styling for your tabs. It was making your text not wrap when it reached the right end of your template. If you take that out it should fix it.

code

[css= background: url('https://cdn.discordapp.com/attachments/567322820850352128/754746335504105533/th.jpeg-11.jpg'); height: 500px; width: 310px; box-shadow: none; border: 2px solid white;] [sc=tabbed_interface horizontal] [Ul] [li][img]https://cdn.discordapp.com/attachments/567322820850352128/755097752534515742/Untitled148.png[/img][/li] [li][img]https://cdn.discordapp.com/attachments/567322820850352128/755097752534515742/Untitled148.png[/img][/li] [/ul] [sc=tab][sc=text]Heya! I'm SilverFeyX. I used to go by Awesomeminer148 but after getting back from my hiatus I changed my name. I'll just list facts about me because long paragraphs are boring and boring is bad. [/sc][/sc] [sc=tab][sc=text]content 2[/sc][/sc] [/sc] [/css] [Style] Img { Height: 25px; Width: 25px; } .tabbed_interface { Line-height: 14px; Position: relative; Background: transparent; Border: none; Box-shadow: none; &>ul { Background: transparent; Border: none; Box-shadow: none; Width: 100px; Margin-left: 10px; Margin-top: -20px; &>li { Background: transparent; Border: none; Box-shadow: none; Height: 50px; Width: 50px; &>div { Width: 280px; } } } } .tab { Color: white; Height: 300px; Border: none; Box-shadow: none; Background: transparent; Width: 280px; } .panel { Position: relative; Box-shadow: none; Border: none; Color: white; Background: transparent; Width: 160px; } .text { Border: 2px solid white; Color: white; Background-color: rgba(0,0,0,0.5); Height: 274px; Margin-top: 125px; Text-align: center; Padding: 15px; Width: 280px; Margin-left: -2px; } .uwu { Width: 280px; } [/style]

Pages: 123··· 1819202122··· 262728

Cannot post: Please log in to post

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