Guide to CSS (Beginner & Intermediate) [In Progress]
Forum Index > PokéFarm > Guides >
OMG yes! Thank you so, so much! <3 You're a lifesaver, Yeah!
30zc 
30zc
If you have questions, please read my 
hiii! so aud.rey and I have finally gotten my about code looking mostly how I want it (well mostly them, bless) except for a few small things; when making the tabs vertical like I'd prefer them, the text is shifted to the right and refuses to move. and then I can't figure out how to make the bolded text in the info box change color, I've looked at other codes and see they use like "bold: (hex code)" or "@bold: hex code" but neither of them seem to work??
this is the code:
code
[sc=bg][sc=pad][sc=img]image[/sc][sc=right][b]monochrome system[/b][/sc]
[sc=bottomright][b]name:[/b] sal
[b]pronouns:[/b] he/they
[b]mood:[/b] fine
[b]status:[/b] online[/sc]
[sc=tabbed_interface horizontal][ul]
[li]about[/li]
[li]system[/li]
[li]policies[/li]
[li]clicklist[/li]
[li]hunts[/li]
[li]other games[/li]
[/ul]
[sc=tab-active]about[/sc][
][sc=tab]system[/sc][
][sc=tab]policies[/sc][
][sc=tab]clicklist[/sc][
][sc=tab]hunts[/sc][
][sc=tab]other games[/sc][
]
[/sc][sc=credit]
[url=https://pfq.link/@r57]code help[/url], [url=https://www.deviantart.com/rikkuthethief/art/Textures-Pack-Celestial-Spirit-by-Rikku-860711952]background[/url][/sc][/sc][/sc]
[style]
.bg {
border-radius: 10px;
background: url('https://i.ibb.co/W3fn7GR/005.png');
width: auto;
background-size: cover;
}
.pad {
padding: 0px 5px 5px 5px;
}
.img {
img { width: 85px; }
border-radius: 10px;
border: 2px solid #bfa82e;
text-align: center;
width: 85px;
height: 85px;
overflow: hidden;
float: left;
margin-top: 35px;
margin-left: 10px;
}
.right {
background-color: #10213e;
border-radius: 10px;
width: auto;
border: 1px solid #bfa82e;
color: #cbb957;
float: right;
padding: 5px;
margin-top: 4px;
margin-right: 4px;
}
.bottomright {
background-color: #243c6e;
border-radius: 10px;
width: auto;
border: 1px solid #bfa82e;
padding: 8px;
margin-top: 15px;
margin-right: 4px;
margin-left: 108px;
}
.tabbed_interface { >ul { background: none; >li {
background-color: #10213e;
border-radius: 10px;
border: 1px solid #bfa82e;
padding: 5px;
color: #cbb957;
} } }
.tabbed_interface.horizontal li.tab-active {
background-color: #10213e;
border-radius: 10px;
border: 1px solid #bfa82e;
padding: 5px;
color: #ebe4c0;
opacity: 1;
}
.tab-active {
text-align: left;
background-color: #243c6e;
border-radius: 10px;
border: 1px solid #bfa82e;
box-shadow: none;
padding: 5px;
color: white;
}
.credit {
text-align: right;
color: #cbb957;
padding: 2px
}
color: white;
font-family: cursive;
a:link { color: #cbb957 }
a:visited { color: #ebe4c0; }
@bold #cbb957
@italic #cbb957
[/style]
we're a system of 11 with varying
degrees of likeness for pokemon.
icon will be whoever's fronting.
sal ★ 21
alice ★ 23
hyze ★ 22
ellie ★
arte ★ 14
behemo ★ ageless
russell ★ 14
chelsy ★ 16
talys ★
felix ★ ageless
hope ★ ageless
Bold is b{color:COLOR;} italicized is i{color:COLOR;}
I’m not quite sure what else you want
- about me
- collecting
- secrets
Yeah / He
link text here NEW ABOUT ME!!!!SECRET TEXT MWAHHAHA
Ima edit this eventually, but for now es blank 
wawwwww a fancy thingy!!!!
credits
Code @Colorful
Background from Pokemon Mystery Dungeon: Rescue Team DX
Profile picture from event colander 2021
Profile Picture by @crazyMissdream | Shop
Running Mew by @KitKatKutie2 | Shop
omg okay they literally had that with the link colours, I don't know how I still got that wrong rip, thank you
it! still won't show the bold as the colour I want though even with it corrected - and then like I said when the tabs are vertical then the text won't center, I'm not sure what they used to make them vertical in the first place since I only have the updated code
Works for me?
Edit:it seems left to me
Edit:lemme check more I’m just a bit confused on what is wrong
Edit: I decided it looks fine to me! Post what is wrong with this code right now.
image
monochrome system
name: sal
pronouns: he/they
mood: fine
status: online
- about
- system
- policies
- clicklist
- hunts
- other games
about
system
policies
clicklist
hunts
other games
bolds are fine now - vertical still does this when put in my about sfdgsjTry this
I made the tabs smaller
Edit: the left paddingmargin takes up a lot of space! If you remove some of it you’ll have more room
Edit:nvm idk what I’m doing lol
Edit: I can take away the room on the left of the tabs if you want :/
image
monochrome system
name: sal
pronouns: he/they
mood: fine
status: online
- about
- system
- policies
- clicklist
- hunts
- other games
about
system
policies
clicklist
hunts
other games
[sc=bg][sc=pad][sc=img]image[/sc][sc=right][b]monochrome system[/b][/sc]
[sc=bottomright][b]name:[/b] sal
[b]pronouns:[/b] he/they
[b]mood:[/b] fine
[b]status:[/b] online[/sc]
[sc=tabbed_interface vertical][ul]
[li]about[/li]
[li]system[/li]
[li]policies[/li]
[li]clicklist[/li]
[li]hunts[/li]
[li]other games[/li]
[/ul]
[sc=tab-active]about[/sc][
][sc=tab]system[/sc][
][sc=tab]policies[/sc][
][sc=tab]clicklist[/sc][
][sc=tab]hunts[/sc][
][sc=tab]other games[/sc][
]
[/sc][sc=credit]
[url=https://pfq.link/@r57]code help[/url], [url=https://www.deviantart.com/rikkuthethief/art/Textures-Pack-Celestial-Spirit-by-Rikku-860711952]background[/url][/sc][/sc][/sc]
[style]
.bg {
border-radius: 10px;
background: url('https://i.ibb.co/W3fn7GR/005.png');
width: auto;
background-size: cover;
}
.pad {
padding: 0px 5px 5px 5px;
}
.img {
img { width: 85px; }
border-radius: 10px;
border: 2px solid #bfa82e;
text-align: center;
width: 85px;
height: 85px;
overflow: hidden;
float: left;
margin-top: 35px;
margin-left: 10px;
}
.right {
background-color: #10213e;
border-radius: 10px;
width: auto;
border: 1px solid #bfa82e;
color: #cbb957;
float: right;
padding: 5px;
margin-top: 4px;
margin-right: 4px;
}
.bottomright {
background-color: #243c6e;
border-radius: 10px;
width: auto;
border: 1px solid #bfa82e;
padding: 8px;
margin-top: 15px;
margin-right: 4px;
margin-left: 108px;
}
.tabbed_interface { >ul {
>li { background-color: #10213e;
border-radius: 10px;
border: 1px solid #bfa82e;
padding: 5px;
width:50px;
color: #cbb957;
left:-50px;} } }
.tabbed_interface.vertical li.tab-active {
background-color: #10213e;
border-radius: 10px;
border: 1px solid #bfa82e;
padding: 5px;
color: #ebe4c0;
opacity: 1;
left:-50px;
}
.tab-active {
text-align: left;
background-color: #243c6e;
border-radius: 10px;
border: 1px solid #bfa82e;
box-shadow: none;
padding: 5px;
color: white;
position:relative;
left:-145px;
width:195px;
}
.credit {
text-align: right;
color: #cbb957;
padding: 2px
}
color: white;
font-family: cursive;
a:link { color: #cbb957 }
a:visited { color: #ebe4c0; }
b{color: #cbb957;}
i{color: #cbb957;}
[/style]
I thinnnnk I'm kinda figuring it out?? give me a bit to mess with it, I see what you mean with the margin and what you're doing with it, it's just being really finicky
I think I succeededish in the last post.... is that close to what you wanted?
ooh I didn't see you edited it again - it is!! thank you so much omg. I'll see if I can even it out a bit more without messing it up and then hopefully it'll be like 99% finished
Cannot post: Please log in to post