Jackie💿

---

give things rounded corners

.screenshot, iframe {border-radius: 10px;}

i always want to give things rounded corners when i can so i add border-radius to everything. here's code to give both your game screenshots (.screenshot) & trailer (iframe) cute little rounded corners (adjust the number before px to make the corners more or less rounded). you can add more things to make rounded by listing them before the { if you want, like .game_frame for your browser-playable games.

hide upvote/downvote numbers

.vote_counts {display:none;}

if you are like me & don't like voting systems in comments you can hide the numbers so nobody can see them.

hide the vote buttons entirely

.post_votes {visibility:hidden;}

this makes the vote buttons invisible so people can't vote at all! it only hides the buttons instead of not displaying them to keep the layout looking the same.

hide images in comments

.post_body img[loading$="lazy"] {display: none;}

i added this recently because i was getting a lot of spam porn comments... this way at least nobody will have to see porn gifs linking to sketchy sites on my games.

make stuff lowercase just because i can

.button {text-transform:lowercase;}

my example code only makes buttons lowercase but you can add whatever you want to make more stuff lowercase - check out my page for A YEAR OF SPRINGS for an example.

add custom cursor

body {
cursor: url("URL FOR YOUR CURSOR"), auto;
cursor: -webkit-image-set(url("URL FOR YOUR CURSOR") 1x, url("URL FOR YOUR CURSOR @ 2X SIZE") 2x) 0 0, auto;
  }

for this one you have to upload your cursor somewhere so that itch can use it on the page! usually i just upload it to the game summary & hide it using css. if you want to ensure your cursor shows at the same size for regular & high-reso/retina displays you'll want to make a version of the cursor which is 2x the size too to avoid having the cursor look fuzzy on those displays. it will also display not fuzzy if you just use the same url in all of them, but it'll make the cursor look very small, as you can see on my game casting hearts... (i was too lazy to upload another cursor size)

edit: @01bbl suggests converting the cursor into base64 for the cursor to avoid having to upload it which is very clever

content warning

this one is a bit complicated so i'll link the generator i previously created for it! it creates a pop-up window that shows up on top of the profile page. there's also a much simpler option that only uses the html details option which you can add directly to your game summary:

<details>
<summary>CONTENT WARNING</summary>
type your content warning here!
</details>

here's an example of the simple version in action:

CONTENT WARNING

type your content warning here!

---

in general whenever i want to see if i can do some weird css stuff on itch i just right-click whatever i want to change & click inspect. if it's just a general element like an iframe then you can just add iframe {STUFF YOU WANT TO CHANGE;} in your custom css block. if it's a class, remember to add a . before it (like .screenshot. you can even make your own custom classes by adding custom- to stuff as explained on this itch.io doc.

that's all i have for now but i'd love to hear what all of you are doing to make your pages look spiffy)!