Showing a list of recent projects on your creator page
This guide is applicable if you use collections as categories. Otherwise, this guide makes no sense.
When you release a new project, it gets displayed on your creator page. If you use collections as categories and "hide" your projects, it will break the designed layout.
We can use it to our advantage! Let's create a row of latest projects that requires minimal maintenance. It will be shown above our categories. You can see a live example on my page.
Showing the latest projects
Go to your creator page and click the "Edit theme" button at the top. In the "My Projects" category, set the layout to Grid, and click tiny "Hidden" buttons to show them on your page. Reorder them by dragging as appropriate.
Adding a heading before the list
There are two ways to add a heading before the list of the recent projects: adding it to your profile's description or adding a CSS snipped. The first method is easy and always accessible — you write a heading at your profile settings to the "Profile" box —, but it leaves a noticeable gap under it. To add the heading through CSS, add this code to your theme:
/************************************\ | Add a heading to the "recent" list | `************************************/ .game_grid_widget.user_game_grid::before { content: "My latest projects"; display: block; text-align: left; font-size: 1.5em; font-weight: bold; margin: 0 0 1rem; grid-column: 1/5; }
Change "My latest projects" to your liking.
Hiding excess projects with CSS (optional)
We can use CSS to hide excess items when you release a new project. Without it, you will need to manually hide the fourth project so that the desired layout is maintained.
Add this CSS to your theme to hide everything except the first three games:
/*******************************************\ | Hide excess projects in the "recent" list | `*******************************************/ .game_grid_widget.user_game_grid .game_cell { display: none; } .game_grid_widget.user_game_grid .game_cell:nth-child(1), .game_grid_widget.user_game_grid .game_cell:nth-child(2), .game_grid_widget.user_game_grid .game_cell:nth-child(3) { display: inline-block; }
You can repeat lines with :nth-child(N) to show more projects.
Get Better creator pages at itch.io
Better creator pages at itch.io
Create categories, sidebars, "latest" sections for your profile page!
Status | Released |
Category | Book |
Author | Cosmo Myzrail Gorynych |
Tags | guide, itchio |
More posts
- Alternative layout: lists of projectsApr 20, 2021
- Alternative layout: 3+4 gridApr 20, 2021
- Quick tip: reordering projects in your collectionApr 20, 2021
- Creating categories in itch.io creator pagesAug 13, 2020
Comments
Log in with itch.io to leave a comment.
You can replace all the CSS at the end with this:
It hides every project starting with the number in the :nth-child selector (e.g. with n+4 it hides every project after the 3rd).
I’ve updated the CSS code for the header as itch.io has changed its layout a bit!