Guide to CSS: Beginner to Expert
Forum Index > PokéFarm > Guides >
QUOTE originally posted by Mirzam
Ok yep, that makes sense. Since you're styling a custom sc inside the tab instead of the tab itself, the tab's default background is still applied.
Inside the .tabbed_interface block, before the end brace } on the line above .infoboxbackground, add:
> div {
background: transparent;
border: none;
}
You could also theoretically remove .infoboxbackground and put its styles in .tabbed_interface > div to simplify your code - you'd no longer need the sc inside each tab. You'd need to remove the display: block; line in that case, since it would cause all the tabs to show at once. (Block is the default display for sc's, you technically don't need it anyway)
- About Me
- My 'Mons
- Hunts & More
22 ✦ F ✦ Australian ✦ Politoed Fan
Hi, my name is June and I'm your friendly neighborhood Politoed megafan :D I'm decently new to the site, although I've had my account for a hot minute I've only started actually playing in the past week or two.
My interests include things such as drawing, video games (league of legends and overwatch mostly..) and hangin' out with friends!
I'm keen to meet you all! Thanks for taking the time to read.
Current Hunt:
..praying for melan 'toed..
Background is from the Pokemon anime! Code is made by me.
Could I get a little help in regards to the @import? I've been making a signature. and it all worked great until I tried to put the css in a site skin used @import but the style doesn't apply.
code
[sc=b]
[sc=a]
[h3]Luna Tsukino| She/Her | UK[/h3]
[css=background-image:url('/upload/:yrT/tr_crystal_ghost.png');position:relative;width:100px;height:45px;margin-left:20px;][css=position:absolute;left:50px;top:12px;font-size: 11pt;][tip=type race score][inventory=typerace][/tip][/css][/css]
[/sc]
[sc=d][url=https://pfq.link/~RDv5]Journal[/url] | [/sc][sc=c][tip=code - Luna Tsukino.
graphics - Sailor Moon Drops
avatar - Luna Tsukino]credits[/tip][/sc]
[/sc]
[style]
@import 'skins/user/y/r/T/SMD_sig/__extra';
[/style]
in theme
.b {
background-image:url("https://i.imgur.com/A3pstct.png");
background-position:top;
height:260px;
width:600px;
}
.a {
position:fixed;
top: 22px;
left: 11px;
height:165px;
width:378px;
padding-top:5px;
text-align:left;
color: black;
font-size: 9pt;
}
.c {
position:fixed;
top: 187px;
left: 339px;
height:17px;
width:50px;
text-align:center;
color: black;
font-size: 9pt;
}
.d {
position:fixed;
top: 187px;
left: 11px;
height:17px;
width:328px;
text-align:center;
color: black;
font-size: 9pt;
}
.c .tooltip_content {
width: 200px;
height: 50px;
left: -170px;
top: -65px;
color: black;
font-size: 9pt;
background-color: white;
border: 3px solid #cdca95;
border-radius: 10px;
text-align:center;
}
.a .tooltip_content {
width:60px;
color: black;
font-size: 9pt;
background-color: white;
border: 2px solid #cdca95;
border-radius: 7px;
text-align:center;
}
Luna Tsukino| She/Her | UK
1923
Journal |
credits
code - Luna Tsukino.
graphics - Sailor Moon Drops
avatar - Luna Tsukino
[sc=bloodcode][sc=bg][/sc][sc=padding][sc=quotebox]"Reality is just the perception of a particular person"[/sc][/sc][sc=hr][hr][/sc][sc=profilepic][img]https://i.postimg.cc/tTwsCcL1/download-8-1-100x100-100x100.jpg[/img][/sc]
[sc=maintext]
[/sc]
[/sc]
[style]
/* latin */
@font-face {
font-family: 'Gloria Hallelujah';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/gloriahallelujah/v21/LYjYdHv3kUk9BMV96EIswT9DIbW-MIS11zM.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.bloodcode {
background: black;
.bg{
background-image:url('https://i.postimg.cc/7YRh3NJh/Drawing-5.png');
height: 140px;
width: 100px;
background-repeat: no-repeat;
}
.profilepic {
img{
border: 3px solid #c10510;
border-radius: 100px;
margin-top: -200px;
}
}
.quotebox {
font-family: 'Gloria Hallelujah';
float: right;
color: #c10510;
border: 3px solid #c10510;
margin-top: -40%;
margin-right: 3%;
width: 60%;
padding-right: 3px;
padding-left: 3px;
padding-top: 5px;
font-size: 10px;
height: 60px;
height: 30px;
}
padding {
margin-bottom: 300px;
}
hr {
color: white;
}
}
[/style]
- ★
- ★
- ★
- ★
- ★
Star | She/Her | Psychopath
BORED TO DEATH!!
Collecting
x 500
x 500
QUOTE originally posted by ShootingStarRain
[sc=bloodcode][sc=bg][/sc][sc=padding][sc=quotebox]"Reality is just the perception of a particular person"[/sc][/sc][sc=hr][hr][/sc][sc=profilepic][img]https://i.postimg.cc/tTwsCcL1/download-8-1-100x100-100x100.jpg[/img][/sc]
[sc=maintext]
[/sc]
[/sc]
[style]
/* latin */
@font-face {
font-family: 'Gloria Hallelujah';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/gloriahallelujah/v21/LYjYdHv3kUk9BMV96EIswT9DIbW-MIS11zM.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.bloodcode {
background: black;
.bg{
background-image:url('https://i.postimg.cc/7YRh3NJh/Drawing-5.png');
height: 140px;
width: 100px;
background-repeat: no-repeat;
}
.profilepic {
img{
border: 3px solid #c10510;
border-radius: 100px;
margin-top: -200px;
}
}
.quotebox {
font-family: 'Gloria Hallelujah';
float: right;
color: #c10510;
border: 3px solid #c10510;
margin-top: -40%;
margin-right: 3%;
width: 60%;
padding-right: 3px;
padding-left: 3px;
padding-top: 5px;
font-size: 10px;
height: 60px;
height: 30px;
}
padding {
margin-bottom: 300px;
}
hr {
color: white;
}
}
[/style]
QUOTE originally posted by Luna Tsukino
Could I get a little help in regards to the @import? I've been making a signature. and it all worked great until I tried to put the css in a site skin used @import but the style doesn't apply.
code
[sc=b]
[sc=a]
[h3]Luna Tsukino| She/Her | UK[/h3]
[css=background-image:url('/upload/:yrT/tr_crystal_ghost.png');position:relative;width:100px;height:45px;margin-left:20px;][css=position:absolute;left:50px;top:12px;font-size: 11pt;][tip=type race score][inventory=typerace][/tip][/css][/css]
[/sc]
[sc=d][url=https://pfq.link/~RDv5]Journal[/url] | [/sc][sc=c][tip=code - Luna Tsukino.
graphics - Sailor Moon Drops
avatar - Luna Tsukino]credits[/tip][/sc]
[/sc]
[style]
@import 'skins/user/y/r/T/SMD_sig/__extra';
[/style]
in theme
.b {
background-image:url("https://i.imgur.com/A3pstct.png");
background-position:top;
height:260px;
width:600px;
}
.a {
position:fixed;
top: 22px;
left: 11px;
height:165px;
width:378px;
padding-top:5px;
text-align:left;
color: black;
font-size: 9pt;
}
.c {
position:fixed;
top: 187px;
left: 339px;
height:17px;
width:50px;
text-align:center;
color: black;
font-size: 9pt;
}
.d {
position:fixed;
top: 187px;
left: 11px;
height:17px;
width:328px;
text-align:center;
color: black;
font-size: 9pt;
}
.c .tooltip_content {
width: 200px;
height: 50px;
left: -170px;
top: -65px;
color: black;
font-size: 9pt;
background-color: white;
border: 3px solid #cdca95;
border-radius: 10px;
text-align:center;
}
.a .tooltip_content {
width:60px;
color: black;
font-size: 9pt;
background-color: white;
border: 2px solid #cdca95;
border-radius: 7px;
text-align:center;
}
QUOTE originally posted by Mirzam
QUOTE originally posted by Luna Tsukino
Could I get a little help in regards to the @import? I've been making a signature. and it all worked great until I tried to put the css in a site skin used @import but the style doesn't apply.
code
[sc=b]
[sc=a]
[h3]Luna Tsukino| She/Her | UK[/h3]
[css=background-image:url('/upload/:yrT/tr_crystal_ghost.png');position:relative;width:100px;height:45px;margin-left:20px;][css=position:absolute;left:50px;top:12px;font-size: 11pt;][tip=type race score][inventory=typerace][/tip][/css][/css]
[/sc]
[sc=d][url=https://pfq.link/~RDv5]Journal[/url] | [/sc][sc=c][tip=code - Luna Tsukino.
graphics - Sailor Moon Drops
avatar - Luna Tsukino]credits[/tip][/sc]
[/sc]
[style]
@import 'skins/user/y/r/T/SMD_sig/__extra';
[/style]
in theme
.b {
background-image:url("https://i.imgur.com/A3pstct.png");
background-position:top;
height:260px;
width:600px;
}
.a {
position:fixed;
top: 22px;
left: 11px;
height:165px;
width:378px;
padding-top:5px;
text-align:left;
color: black;
font-size: 9pt;
}
.c {
position:fixed;
top: 187px;
left: 339px;
height:17px;
width:50px;
text-align:center;
color: black;
font-size: 9pt;
}
.d {
position:fixed;
top: 187px;
left: 11px;
height:17px;
width:328px;
text-align:center;
color: black;
font-size: 9pt;
}
.c .tooltip_content {
width: 200px;
height: 50px;
left: -170px;
top: -65px;
color: black;
font-size: 9pt;
background-color: white;
border: 3px solid #cdca95;
border-radius: 10px;
text-align:center;
}
.a .tooltip_content {
width:60px;
color: black;
font-size: 9pt;
background-color: white;
border: 2px solid #cdca95;
border-radius: 7px;
text-align:center;
}
Ok, you need to use the lowercase URL friendly version that's in the link, not the bolded name
So that would be:
Code
[sc=b]
[sc=a]
[h3]Luna Tsukino| She/Her | UK[/h3]
[css=background-image:url('/upload/:yrT/tr_crystal_ghost.png');position:relative;width:100px;height:45px;margin-left:20px;][css=position:absolute;left:50px;top:12px;font-size: 11pt;][tip=type race score][inventory=typerace][/tip][/css][/css]
[/sc]
[sc=d][url=https://pfq.link/~RDv5]Journal[/url] | [/sc][sc=c][tip=code - Luna Tsukino.
graphics - Sailor Moon Drops
avatar - Luna Tsukino]credits[/tip][/sc]
[/sc]
[style]
@import 'skins/user/y/r/T/smd-sig/__extra';
[/style]
QUOTE originally posted by Mirzam
Ok, you need to use the lowercase URL friendly version that's in the link, not the bolded name
So that would be:
Code
[sc=b]
[sc=a]
[h3]Luna Tsukino| She/Her | UK[/h3]
[css=background-image:url('/upload/:yrT/tr_crystal_ghost.png');position:relative;width:100px;height:45px;margin-left:20px;][css=position:absolute;left:50px;top:12px;font-size: 11pt;][tip=type race score][inventory=typerace][/tip][/css][/css]
[/sc]
[sc=d][url=https://pfq.link/~RDv5]Journal[/url] | [/sc][sc=c][tip=code - Luna Tsukino.
graphics - Sailor Moon Drops
avatar - Luna Tsukino]credits[/tip][/sc]
[/sc]
[style]
@import 'skins/user/y/r/T/smd-sig/__extra';
[/style]
Come check out my shop! Luna's Shop
Avatar drawn by Justsayhi
QUOTE originally posted by DarkWitch87
juno
mio is fine too!
| adult | any pronouns | pfq's otter hoarder
f2u code ♡ code shop ♡ trade shop ♡ journalart by me for my use only!
Cannot post: Please log in to post