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

Comments

Log in with itch.io to leave a comment.

You can replace all the CSS at the end with this:

.game_grid_widget.user_game_grid .game_cell:nth-child(n+4) {
    display: none;
}

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).

(+1)

I’ve updated the CSS code for the header as itch.io has changed its layout a bit!