Guide to CSS: Beginner to Expert
Forum Index > PokéFarm > Guides >
If you're wanting to change just the mature panel there is a specific code for it that you can use in your style codes.
Obviously it won't show anywhere other than your about but this changes the look of a mature hide box. (Just tossed this snippet in my about for right now if you wanted to see what it looks like. It won't effect anything other than the mature panel itself so you can change it as much as you'd like.)
.panel.mature {
border: 0px;
&>h3 {height:6px; text-align:left; letter-spacing:3px; line-height:5px; background: #0B0B07; font-weight: bold; font-size: 11px; color:#DC4610; border-bottom:hidden;}
&>div { line-height: 11px; border:1px dotted #F0831C; font-weight: normal; text-align: left; font-size:11px; background-color: #270F05; color: #F7C54C; }}
"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
Thank you very much! You both have been very helpful!
On The Next Stream...
Time & Place: in 15 hours on Twitch
(Live Countdown)
Game(s): Super Mario Bros. for NES
(NSO Virtual Console)
My channel link is in my profile under (+18) Mature Code.
Thank you for the support!
Credits
in
Profile
Wishlist
Hello ^^ So I'm trying to make a table (Both the headers and cells) have the same width no matter how long the text is but I can't remember the code for the life of me xD
Below is the table I'm trying to make even, I'm sometimes very bad at explaining things so please just tell me if I need to be more clear!
table preview/code
| Normal | Fire | Water | Electric | Grass | Ice |
|---|---|---|---|---|---|
| cell 1 | cell 2 | cell 3 | cell 4 | cell 5 | cell 6 |
| Fighting | Poison | Ground | Flying | Psychic | Bug |
|---|---|---|---|---|---|
| cell 1 | cell 2 | cell 3 | cell 4 | cell 5 | cell 6 |
| Rock | Ghost | Dragon | Dark | Steel | Fairy |
|---|---|---|---|---|---|
| cell 1 | cell 2 | cell 3 | cell 4 | cell 5 | cell 6 |
[table]
[tr]
[th]Normal[/th]
[th]Fire[/th]
[th]Water[/th]
[th]Electric[/th]
[th]Grass[/th]
[th]Ice[/th]
[/tr]
[tr]
[td]cell 1[/td]
[td]cell 2[/td]
[td]cell 3[/td]
[td]cell 4[/td]
[td]cell 5[/td]
[td]cell 6[/td]
[/tr]
[/table]
[table]
[tr]
[th]Fighting[/th]
[th]Poison[/th]
[th]Ground[/th]
[th]Flying[/th]
[th]Psychic[/th]
[th]Bug[/th]
[/tr]
[tr]
[td]cell 1[/td]
[td]cell 2[/td]
[td]cell 3[/td]
[td]cell 4[/td]
[td]cell 5[/td]
[td]cell 6[/td]
[/tr]
[/table]
[table]
[tr]
[th]Rock[/th]
[th]Ghost[/th]
[th]Dragon[/th]
[th]Dark[/th]
[th]Steel[/th]
[th]Fairy[/th]
[/tr]
[tr]
[td]cell 1[/td]
[td]cell 2[/td]
[td]cell 3[/td]
[td]cell 4[/td]
[td]cell 5[/td]
[td]cell 6[/td]
[/tr]
[/table]
• 
• 
• 
Shattered Psyche
QUOTE originally posted by InHystericz
| Normal | Fire | Water | Electric | Grass | Ice |
|---|---|---|---|---|---|
| cell 1 | cell 2 | cell 3 | cell 4 | cell 5 | cell 6 |
| Fighting | Poison | Ground | Flying | Psychic | Bug |
|---|---|---|---|---|---|
| cell 1 | cell 2 | cell 3 | cell 4 | cell 5 | cell 6 |
| Rock | Ghost | Dragon | Dark | Steel | Fairy |
|---|---|---|---|---|---|
| cell 1 | cell 2 | cell 3 | cell 4 | cell 5 | cell 6 |
Hey y'all, I was working on a sort of banner where you're able to go to different places depending on where you click on the image. Although, the way I did it doesn't work if the background image moves, as there are smaller images inside. So, I'm wondering if it's possible to "connect?" them so that the smaller images move with the background while still allowing me to choose exactly where to put them.
Otherwise, a different way to do this would be greatly appreciated, as I'm still a newbie at this, heh-!
Code
[sc=banner][/sc][
][url=https://pokefarm.com/user/Memebot][sc=Ale][/sc][/url][
][url=https://pokefarm.com/user/CantSalvageThis][sc=Tris][/sc][/url][
][url=https://pokefarm.com/user/Chimchimp][sc=Emi][/sc][/url]
.banner {
content: url('https://pokefarm.com/upload/Chimchimp/Shopbg.png');
width: 100%;
position: relative;
z-index: 1;
}
.Ale {
content: url('https://pokefarm.com/upload/Chimchimp/Aletest.png');
position: absolute;
width: 30%;
left: 39%;
top: 44%;
z-index: 2;
}
.Tris {
content: url('https://pokefarm.com/upload/Chimchimp/Tristantest.png');
position: absolute;
width: 17%;
left: 81.5%;
top: 49%;
z-index: 2;
}
.Emi {
content: url('https://pokefarm.com/upload/Chimchimp/Emitest.png');
position: absolute;
width: 18%;
left: 10.8%;
top: 12.5%;
z-index: 2;
}
(I can't show how it's supposed to work here, as it would turn out wrong, which is the whole problem-)
QUOTE originally posted by Chimchimp
Hey y'all, I was working on a sort of banner where you're able to go to different places depending on where you click on the image. Although, the way I did it doesn't work if the background image moves, as there are smaller images inside. So, I'm wondering if it's possible to "connect?" them so that the smaller images move with the background while still allowing me to choose exactly where to put them.
Otherwise, a different way to do this would be greatly appreciated, as I'm still a newbie at this, heh-!
-cut-
Your Updated Code
**test test above the images, remove this before using**
[sc=banner][img]https://pokefarm.com/upload/Chimchimp/Shopbg.png[/img][
][url=https://pokefarm.com/user/Memebot][sc=Ale][/sc][/url][
][url=https://pokefarm.com/user/CantSalvageThis][sc=Tris][/sc][/url][
][url=https://pokefarm.com/user/Chimchimp][sc=Emi][/sc][/url][/sc]
**here is the test to make sure the spacing works well below aswell, remove later**
[style]
.banner {
width: 100%;
position: relative;
z-index: 1;
}
.Ale {
content: url('https://pokefarm.com/upload/Chimchimp/Aletest.png');
position: absolute;
width: 30%;
left: 39%;
top: 44%;
z-index: 2;
}
.Tris {
content: url('https://pokefarm.com/upload/Chimchimp/Tristantest.png');
position: absolute;
width: 17%;
left: 81.5%;
top: 49%;
z-index: 2;
}
.Emi {
content: url('https://pokefarm.com/upload/Chimchimp/Emitest.png');
position: absolute;
width: 18%;
left: 10.3%;
top: 12.1%;
z-index: 2;
}
[/style]
TYPE RACE
Score: 880
Oh wow, thanks so much! I tried doing that and thought it wasn't correct since the smaller images weren't showing up, but this works great! Thank you :D
How can you effect the individual tab's width in a tabbed interface? I want to make certain ones smaller than others.
- Title
- Title
- Title
This tab takes up 50% of the top bar
example text
example text
Thank you so much! Are you able to do flexing with measurements instead of percentages by any chance?
Cannot post: Please log in to post