Styleclass and You: An Introduction
Forum Index > PokéFarm > Guides >
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
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!
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:
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?
italics underline bold
test
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
testy testu testy testy testy
pokefarm testy test
Header 1 | |
---|---|
Content 1 | Content 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
@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?
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... :/
screenshot
@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.
@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
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.
Thanks.
screenshot
Need zc for hypermode, übercharm and shiny charms
Send me any unwanted sweet hearts or easter eggs! Please
Profile pic thing made by me
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 ^^;
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
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 ^^;
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]
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]
Cannot post: Please log in to post