This is a phenomenal guide! I appreciate it SO SO MUCH! I was wondering, though— could you possibly tell me what kind of CSS you used to get the collections on your profile page to have their own separate containers? It looks really nice, and I'd like to set it up on my own profile.
The profile sections each have a div with the assigned class .inner_column. These sections are profile_header, profile_content, purchased_games, and collections. Collections is further divided into a separate row (class="collection_row") for each collection you display, and there is a child div with class .inner_column within each row.
I meant to do a styling guide at one point, but it ended up on the back-burner, and I just haven't had the time to get back to it.
Here's the custom CSS I'm using on my profile page at the moment:
I think Itch may have changed something about it's banner sizing. The 960px is resulting in blurry banners for me now. It seems like the default banner size on my desktop seems to be 1200px, in case you want to update this very helpful guide!
Thanks for the guide! I noticed that embedded web versions of the game also take precedence on the standard width of 960 for the banner, and will extend the banner width if the web game size (that you can set in page settings) is bigger. That could be a nice addition to the page top banner size explanations.
This is soooooooooo incredibly in-depth and full of examples, I love it! I've uploaded so many freaking games and still learned a LOT from this! Thanks so much for making it!
What to do with Embed BG? No matter how many times I change the image resolution there's an ugly gap forcing the edges tiling. Can't tell whether I should try on picking the random dimensions manually till the correct result appears or this is how it supposed to work in the first place?
From some initial poking around, it looks like the image is being assigned to this div with the game_frame class on it. It appears on both the iframe and click to fullscreen embeded game variations.
In every case I've looked at, the game creator has uploaded an image that is slightly bigger than the dimensions for the frame containing their game (i.e. the game_frame div).
It also looks like you can use a GIF if you want to use an animated image; the chicken game and Assessment Examination linked above both use gifs.
Can you send me a screenshot of the specific issue you're having? I'll can see if I can figure out the problem.
Here's an example of how it gets applied in the code from Mingle (right click on the image and select Open in New Tab to see it clearly)
Mingle is using an image that is 1920x1080 for the embed BG, and the game_frame div is 640x360. So the image being used is bigger than the dimensions of the frame. There's a gap on either side because the game_frame is only 640px wide while the inner column is the default 960px.
Thanks for such a response! It works now and I think the reason is the game resolution was bigger than my image size. I assume image should be the same size your game res is or higher.
I assume image should be the same size your game res is or higher
Based on what I was seeing on other game pages, that's the answer I was starting to lean to. Every example I saw had the embed BG image resolution at the same resolution or a larger resolution than their game.
Without having an html embeded game to test for myself, I couldn't say with 100% certainty that was the answer.
Just like everyone else in these comments, I can't thank you enough for putting in so much effort into this page to help other developers to build their game pages. Again thank you so much!!
← Return to tool
Comments
Log in with itch.io to leave a comment.
Thank you for the templates + explanations!
Absolutely appreciate these templates! I'm not making my items in photoshop or affinity, so I'm lying my way to victory through CSP. You're a gem! <3
Nice stuff
Excellent reference template.
This was extremely useful in publishing my own story, thank you so much!
Perfect!! So so useful thanks!
Thank you so much for this! Fantastic resource!
This is a phenomenal guide! I appreciate it SO SO MUCH!
I was wondering, though— could you possibly tell me what kind of CSS you used to get the collections on your profile page to have their own separate containers? It looks really nice, and I'd like to set it up on my own profile.
It's been a while since I've messed with it.
The class you're looking for is .inner_column.
The profile sections each have a div with the assigned class .inner_column. These sections are profile_header, profile_content, purchased_games, and collections. Collections is further divided into a separate row (class="collection_row") for each collection you display, and there is a child div with class .inner_column within each row.
I meant to do a styling guide at one point, but it ended up on the back-burner, and I just haven't had the time to get back to it.
Here's the custom CSS I'm using on my profile page at the moment:
.game_grid_widget {
text-align: left; !IMPORTANT!
}
.game_thumb {
border: solid #000 1px;
}
.inner_column {
background: #EDD5BE;
border: #271C14 solid;
padding: 50px 50px 30px 50px;
border-radius: 25px;
}
.footer {
background: #333;
border-top: #271C14 solid;
color: #fff;
}
.game_column::before {
content: "My Games";
font-size: 1.5em;
font-family: '04b_03',Lato,LatoExtended,sans-serif;
margin: 0 0 10px 0;
font-weight: bold;
display: block;
}
Really useful! Thanks for putting this together!
Very useful page! Thank you!
I think Itch may have changed something about it's banner sizing. The 960px is resulting in blurry banners for me now. It seems like the default banner size on my desktop seems to be 1200px, in case you want to update this very helpful guide!
Thanks for the heads up, I haven't fiddled with itch styling for a while. I'll take a look!
Thanks for the guide! I noticed that embedded web versions of the game also take precedence on the standard width of 960 for the banner, and will extend the banner width if the web game size (that you can set in page settings) is bigger. That could be a nice addition to the page top banner size explanations.
Thanks for this very useful page !
Super useful resource, thank you so much for taking the time to make this!
This is such an outstanding guide. Thank you for the excellent resource!
Very thorough and nifty!
Oh wow, this is super helpful! Thank you for putting all this together!!
This is a wonderfully comprehensive guide! Thank you!
Awesome! Thank you :)
Thanks!
This is extremely helpful. Thank you so much for this.
This is soooooooooo incredibly in-depth and full of examples, I love it! I've uploaded so many freaking games and still learned a LOT from this! Thanks so much for making it!
- ✨Beth
this is incredible! thank you!
Ohh it's really needed one.Thank you so much bro
Thanks
Thank you so much!!!
Very good 🖤🤍
Thank you for this! :D
Very useful page! Thank you!
Thank you for super helpfull page! And Lingonberry is super Kawaii!
This is such an unbelievably helpful resource presented so simply and easy to reference. Thank you so very much!
I'm glad you found it helpful!
What to do with Embed BG? No matter how many times I change the image resolution there's an ugly gap forcing the edges tiling. Can't tell whether I should try on picking the random dimensions manually till the correct result appears or this is how it supposed to work in the first place?
Hey there! I'm going to have to look into the Embed BG option, as I've never done an embedded html game before.
I couldn't find anything in the itch documentation on Embed BG...just this comment in the forums: https://itch.io/t/213380/whats-embed-bg-in-the-theme-editor
From some initial poking around, it looks like the image is being assigned to this div with the game_frame class on it. It appears on both the iframe and click to fullscreen embeded game variations.
Here is a handful of games using it:
In every case I've looked at, the game creator has uploaded an image that is slightly bigger than the dimensions for the frame containing their game (i.e. the game_frame div).
It also looks like you can use a GIF if you want to use an animated image; the chicken game and Assessment Examination linked above both use gifs.
Can you send me a screenshot of the specific issue you're having? I'll can see if I can figure out the problem.
Here's an example of how it gets applied in the code from Mingle (right click on the image and select Open in New Tab to see it clearly)
Mingle is using an image that is 1920x1080 for the embed BG, and the game_frame div is 640x360. So the image being used is bigger than the dimensions of the frame. There's a gap on either side because the game_frame is only 640px wide while the inner column is the default 960px.
Thanks for such a response! It works now and I think the reason is the game resolution was bigger than my image size. I assume image should be the same size your game res is or higher.
Based on what I was seeing on other game pages, that's the answer I was starting to lean to. Every example I saw had the embed BG image resolution at the same resolution or a larger resolution than their game.
Without having an html embeded game to test for myself, I couldn't say with 100% certainty that was the answer.
Glad to hear that you got it resolved!
simplify it
Thank you so so so so so much for your job <3
Just like everyone else in these comments, I can't thank you enough for putting in so much effort into this page to help other developers to build their game pages. Again thank you so much!!
This is glorious.
Thanks a lot :)
You're a gem!! Thank you for this :)
Thank you so much, this makes things much easier!
this is super helpful. Thank you for your thorough guide!
Thank you, this is very informative. You should make one for itch profiles too!