#itch page

[cassimothwin]

How to add Gradient Backgrounds on Itch.io Pages

I recently figured out how to jazz up my Itch game pages with CSS, and I figured I’d share. This is a pretty simple process, but it did take some tweaking for me to figure out exactly how to get it the way I wanted. I hope this helps make the process easier for others!

1. Email Itch Support

To unlock CSS editing on your account, Itch has to do something on the backend. Go ahead and email them and request CSS permissions be unlocked on your account. You can find more information about how to request access on the bottom of this page.

This isn’t a big deal. Just email them and say you want to add some gradient backgrounds to your game pages. They just want to make sure you aren’t going to make your pages completely chaotic. It can take several weeks for permission to come through. I think it took them about three weeks to unlock CSS on my account.

2. Upload any background images you want

Navigate to the game page you want to edit. On the game page, select “Edit theme” in the header.

In the left bar that pops up, scroll down to background. Here’s where you’ll upload your background image. If you want your gradient to show through, the image needs to be a transparent png.

3. Get the image URL (I’m using Google Chrome)

Once we edit the background with CSS, it will override what you’ve uploaded to the editor. So let’s find your image URL, so you can add it on top of the gradient. Scroll to the bottom of the editor and click save so that your background image shows up.

You’ll see a menu with a lot of code. What we’re looking for here is the URL of the image you just uploaded. To find it, go to the styles tab and scroll to the #wrapper section.

Within the wrapper section, you’ll see the URL of the image you just uploaded. Go ahead and copy and paste that somewhere for later.

4. Build your gradient

I have little to no experience with CSS, but this site makes it easy to create a gradient that matches your aesthetic: https://cssgradient.io/

Once you like the gradient preview, grab the code this tool produces by clicking “Copy to Clipboard.”

5. Build your code

This section of the Itch page is inside the wrapper, so that’s where we’ll tell Itch to put it with #wrapper. We’ll also create a fallback in case someone is using an outdated browser or equipment and the gradient won’t work.

Whatever color you choose, put your color code where I have: #fedcfd.

#wrapper { background: (#fedcfd);

Next, let’s add our image URL so that it’s always there, even if something goes wrong. You found this in step 3.

#wrapper { background: (#fedcfd); background-image: url(https://img.itch.zone/aW1nLzEwNDg4OTQxLnBuZw==/original/VIWm9w.png);

Great. We’ve created our fallback. Now for the fun part! Let’s put a gradient behind our image. We’ll first add /* fallback */ as a note to our future selves that the previous code is there for if things go wrong.

Next, we’ll add our background image URL again, followed by some of the code we copied from the gradient site generator. You’ll only need “linear-gradient” and everything after that. It should look like this:

linear-gradient(9deg, rgba(227,199,226,1) 0%, rgba(254,220,253,1) 33%, rgba(254,220,253,1) 45%, rgba(254,220,253,1) 53%, rgba(0,212,255,1) 100%);

So here is what the complete code looks like:

#wrapper { background: (#fedcfd); background-image: url(https://img.itch.zone/aW1nLzEwNDg4OTQxLnBuZw==/original/VIWm9w.png); /* fallback */ background-image: url(https://img.itch.zone/aW1nLzEwNDg4OTQxLnBuZw==/original/VIWm9w.png), linear-gradient(9deg, rgba(227,199,226,1) 0%, rgba(254,220,253,1) 33%, rgba(254,220,253,1) 45%, rgba(254,220,253,1) 53%, rgba(0,212,255,1) 100%); background-repeat: no-repeat;background-position: 50% 0; }

And here’s a blank template:

#wrapper { background: (#hex code); background-image: url(URL); /* fallback */ background-image: url(URL), linear-gradient( XXX ); background-repeat: no-repeat;background-position: 50% 0; }

You may want to play with the background repeating and positioning. I just google around, plugging in CSS code until items look the way I want. It’s very professional.

If you found this post useful, please consider checking out my games or sign up for my mailing list and check out The Sticker Game, my single player audio drama journaling game, that releases Nov. 30, 2022!

[kithj]

good games i've played on itchio lately:

please tell me you love me - chat with your guild members for the last time before the game's servers are shut down

GIRLKILLER (covet) - there is a girl who looks like you, and today you're going to kill her

cover me in leaves - stuck in your small hometown, you get your first tattoo. and then a few more, and more, and more

don't rock the boat - play through the different perspectives of a women's crew team as they are stalked by something in the water

GUTLESS - you are the captain of a deep sea vessel. your mission doesn't go well

so, about last night... - you wake up sick and weirdly hungry after hooking up with someone at a party. you spend the next night trying to find her.

close the window, my love - short bitsy poem about closing the window. sound on! this creator has a lot of short bitsy works i recommend.

there is a beautiful star - just a short, cute side scroller. lots of short, lighthearted games from them, definitely recommend for a mood booster.

[heedra]

a thing i think is good to keep in mind, and this does not invalidate or diminish concerns about the state of art under capitalism or storytelling in mass media, is that, if you go out and snuffle around in the places in the world where the art that is further from your immediate line of sight dwells you will find enough interesting art to eat well in your mind for your entire life

[honeyspeeches]

My secret santa for Lillynik in the KL Discord !! I couldn't find your tumblr tag but if you're out there, I hope you like it !! <33

[charrfie]

I think he deserves to wear a pretty dress

I think so too :^)

[carnivalcarriondiscarded]

figuring out how to draw him. its surprisingly challenging!

[kaia001art]

Shen Jiu and the Pixiu (WIP)

So - i've decided to make a little comic of SJ/Mengyao scene of "Cultivate: Slow Life on a Monster-Infested Mountain (here)"

Since this will take quite a lot of time - and i am impatient - i want to post my WIP of it already.... its awful, but i hope it makes u smile @neonghostcat 😂

[akai-anna]

I thought it might be interesting to share the process of making this particular piece...🥺

And yes, I do use both sides of the paper. *puts on sunglasses and flips canvas in traditional style*

[goatpunches]

NEW MXTX Fanzine !!

58 B/W sketch pages featuring all my MXTX fanart from 2022-2023

LINK HERE FOR DIGITAL PDF

(**Physical versions for this zine will be available in January 2024**)

[polychromaic]

I wrote a game!

WE REGRET TO INFORM YOU is a handwritten solo simulator for the average animal to educate themselves on the perils of the modern job-hunt! With fully articulated folding-zine technology, a fully customizable paper-doll character creator, and a rich & intricate system meant to realistically simulate the application process many employers require! There's even an experimental achievement system, so players can unlock new color palettes, art, and even sim mechanics through play!

It's only $10! What're you waiting for? The time will pass regardless <3

[ link & additional info below cut ]

[ WE REGRET TO INFORM YOU itch.io page ]

i got a lot of follows recently cuz of my winny art, but primarily ive made my money as an artist in the indie ttrpg community, as an illustrator and game designer. Money's been real tight all summer long, and struggling with (obvious) unemployment hasn't been easy. If you've enjoyed my art and wanna see me make more, buying this game would go a really long way.

And if you need more incentive, fellow game designer and world's hottest boyfriend rath but together a mutual aid bundle for me n our girlfriend! It's just $20 and you get like 30 games from some really incredible designers, and you also get my new game

[ Sasha and Poly Mutual Aid Bundle - itch.io page ]

[stoutstoatpress]

Working on the Border Riding itch page while I wait for feedback to come in on a freelance project :3

Been picking at it for days with a warm cream background and it just wasn't working. I've tried flipping things and going with a dark aubergine background instead!

[youraveragejoke]

The DE Colouring Book project is available for download on itch !

If you colour in some of the linearts, you're welcome to share it on that artist's preferred platforms, which are indicated at the end of the booklet. Don't forget to tag it #EspritDeCouleur so we can all enjoy your collaborations!

[hastalavistabyebye]

Star Wars is an awesome universe, vast and with so many details. That's true. But by all freaking gods, the C.R.C (Coruscant reckoning calendar) is gonna kill me. This makes absolutely ZERO sense.

Because let's look at a date, here : 7957.203.3 (the bombing of the Jedi Temple for the curious)

7957 is the year, good alright, that's logical.

But what are the two other numbers ???

Because I thought the 3 was the day in the week (here would have been Taungsday) at first but then I've found a date where it's a 9. But it never seems to go higher than that either. So what the fuck does it mean ??

And the 203 is just nonsense. I don't even know. It can't be the number of the day in the year because a standard year is made of 365 days and those numbers go up to more than 900. I don't know.

It's terrible. There's no understable logic except for the first number.

"But Hasta" you're going to tell me. "Just use the BBY dating system ! It's simple and nice and easy." And you would be right ! But it would not be accurate.

And I can't help but try to be as accurate as possible :')

[futuresoon]

coming to the conclusion that dead plate players can generally be divided into two groups (let's players who played it because they were told to and get the bland ending because they think the gameplay is the point and never talk to vince, sickos who play it because of the fanart and get the interesting endings because they prioritize talking to vince over anything else)

[lizasweetling]

Glad to see my worries about how they would leave did not prove an issue- Now I have new, less defined concerns in the form of Enthusiastic Bang!

[ringneckedpheasant]

no fucking wonder I couldn’t place what language this song is, it hasn’t been spoken since the 14th century