Guide to CSS (Beginner & Intermediate) [In Progress]
Forum Index > PokéFarm > Guides >
*not really sure how to do this,
*I’m making a template but I like to change the appearance of bullets
- <—these
Does anyone know how to do this?
I just want to know how to do the pink thing where you write things.
It's somewhat transparent
I would believe would would have to take out a transparent oval from your image of choice, upload it, and place the text inside with your coding?
Asphodel | 24 | they/he |
Adamant nature collector
| Local Ghost delta fiend.
Always buying for 15 per!
0 | 316
Delta Collector List | Journal | Joint Trade Shop
Avatar is a screencap from Spider-Man: Across the Spider-Verse.Convert your colour to rgba.
[Sc=class][styleclass=opaque]Some text here. Let's fill the gap a bit with rambling words and sentences until it's a bit longer.
Words to continue my rambles. [/styleclass][/sc]
[style]
.class{background-color: blue; padding:1%;}
.opaque
{
background-color: rgba(255,175,55,0.5);
padding: 2%;
color: #aaa;
border-radius: 10px;
}
[/style]
Some text here. Let's fill the gap a bit with rambling words and sentences until it's a bit longer.
Words to continue my rambles. I threw random colours into this I'm sorry.
Buying:
BSDs 20 ZC
Prisms 70 ZC
by Kaede
Even though this was solved an hour ago... to add on to what Érable said, if you don’t know, you can change how much transparency you want by changing the decimal.
background-color: rgba(255, 255, 255, 0.5);
the decimal should always be where it’s underlined and bolded in order for this to work.
0.0 or 0 is fully transparent:
1.0 or 1 is fully opaque, or, no transparency:
So you can use any numbers in between those two values:
Here’s what using 0.75 may look like:
Here’s what using 0.25 may look like:
And many other numbers to choose from. The only limit (besides having the code done correctly), is your imagination.
Another tip too:
if the decimal includes 0 being in the ones place, then you can exclude it. So for example, if you wanna use 0.67, you can just put .67 instead.
0.0 or 0 is fully transparent:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu aliquet arcu. Nam in arcu erat. Quisque quis sem iaculis, convallis enim ultricies, congue neque. Proin eget rhoncus orci. Integer cursus tincidunt quam, a posuere leo commodo vitae...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu aliquet arcu. Nam in arcu erat. Quisque quis sem iaculis, convallis enim ultricies, congue neque. Proin eget rhoncus orci. Integer cursus tincidunt quam, a posuere leo commodo vitae...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu aliquet arcu. Nam in arcu erat. Quisque quis sem iaculis, convallis enim ultricies, congue neque. Proin eget rhoncus orci. Integer cursus tincidunt quam, a posuere leo commodo vitae...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eu aliquet arcu. Nam in arcu erat. Quisque quis sem iaculis, convallis enim ultricies, congue neque. Proin eget rhoncus orci. Integer cursus tincidunt quam, a posuere leo commodo vitae...
I knew that;
Does anyone know the right size (in px) for a signature?
Føxxshadow, I know this was from two weeks ago but if no one answered your question, 600px wide by 250px tall is the maximum size allowed for signatures, if that's what you're asking.
I have a question about bullet points that might be fairly complicated, but I can't solve it otherwise. I'm trying to set an unordered list to cycle through the card suits for each bullet using the nth-child pseudo-selector, but it doesn't seem to be working. I don't think my math is off but regardless of whether or not it is it's only registering one of the values for the entire list - in the code I originally built it for it was only registering the Spades, which should be the first, and then when I was writing this post it switched to Hearts, and now it's only showing Clubs. So I have no idea what it's going to show everyone else when I post it. But like so:
- Spades
- Hearts
- Clubs
- Diamonds
- Spades
- Hearts
CODE
ul:nth-child(4n+1) {
list-style-image:url('https://i.imgur.com/IBVjcGp.png')
}
ul:nth-child(4n+2) {
list-style-image:url('https://i.imgur.com/ywvfL2L.png')
}
ul:nth-child(4n+3) {
list-style-image:url('https://i.imgur.com/pilTjHW.png')
}
ul:nth-child(4n+4) {
list-style-image:url('https://i.imgur.com/0ZYcSF4.png')
}
avatar by louis wain (1860-1939); public domain
5/6 IVs & S/A/D UFS in my shop, come stop by
Try this:
[style]
li:nth-child(4n+1) {
list-style-image:url('https://i.imgur.com/IBVjcGp.png')
}
li:nth-child(4n+2) {
list-style-image:url('https://i.imgur.com/ywvfL2L.png')
}
li:nth-child(4n+3) {
list-style-image:url('https://i.imgur.com/pilTjHW.png')
}
li:nth-child(4n+4) {
list-style-image:url('https://i.imgur.com/0ZYcSF4.png')
}
[/style]
You want to be selecting the li instead of the ul because there's only only list, but multiple bullets. You want to select the bullets themselves, which is why you utilise the li.
Cannot post: Please log in to post