Guide to CSS: Beginner to Expert

Struggling with .expbar haha. Trying to figure out how to make the part that is displaying as pink as a different color. The "active progress" seems to be defaulting to my skin color, which is not what I want.

This is the code I use: .expbar {padding: 5px; background: @bkg8; color: @text; border-radius: 0px; width: 90%; border: 2px dotted @border5;} .expbar div {background: @bkg9; border-right: 2px solid @border4} .expbar span {color: @text;} This particular one uses a gradient.

hihi! i just wanted to let you know that your code could be made much easier :3 try using: .expbar { (insert your general settings here) &>div { (div settings go here) } &>span { (span settings go here) } } it's much easier to read and keep track of so that you're not repeating .expbar over and over and losing your spot or having any potential arguments :3c oftentimes, you'll see code take up one line for each thing because it also makes *that* easier to read and keep track of, so spacing everything out is really beneficial :D ofc if youre comfy then don't change, just thought i'd poke in this is the code that i tend to use! .expbar { background: #COLOUR; border: 1px solid #COLOUR; border-radius: 0; color: #COLOUR; display: flex; align-items: center; justify-content: center; &>div { border: none; background: #COLOUR; } &>span { color: #COLOUR; background: #COLOUR; border-radius: 10px; border: 1px solid #COLOUR; padding: 5px; } }

Oooo! Thank you! I'm always looking to improve and shorten my code! I'll have to play with this later.

never mind ignore this

Hullo! Brand new to css and BBCode. Trying to display my type order for the type race and have all types grayscale except for my active type. I was able to make everything grayscale using a style class but if I apply a different style class to the active type it creates a line break. How do I make it stay inline? Current code w/o active type: [style].notcurrent {filter: grayscale(1);} [/style] Type Race Rotation: [sc=notcurrent][type=flying][type=bug][type=grass][type=fairy][type=dragon][type=poison][type=ghost][type=electric][type=steel][type=rock][type=fire][type=ice][type=dark][type=fighting][type=water][type=psychic][type=normal][type=ground][/sc]

Neonyan has this post which is essentially what you're trying to do, just it uses different images.

Thank you! I just needed to set the display to flex and now it works! Also, big thanks to Neonyan for the example code! Type Race Rotation:[ ][sc=notcurrent][ ][type=flying][ ][type=bug][ ][type=grass][ ][type=fairy][ ][type=dragon][ ][type=poison][ ][type=ghost][ ][type=electric][ ][type=steel][ ][type=rock][ ][b][type=fire][/b][ ][type=ice][ ][type=dark][ ][type=fighting][ ][type=water][ ][type=psychic][ ][type=normal][ ][type=ground][ ][/sc] [pkmnpanel=fqdH0] [style] .notcurrent { display: flex; flex-wrap: wrap; align-items: center; img {filter: grayscale(1);} b { img {filter: grayscale(0);}} } [/style] Type Race Rotation:

Wait, this works in my About Me but not in the post?

been playing around with this for ages and i can't seem to work it out! how do i make tabs go to the right? i know how to make them vertical, but they go to the left and i can't work out what i need to change to make them go to the right.