Hi there,

If you’re here, there’s a good chance that you’ve stumbled accross my profile page (if not, go take a look!). In this post, I’ll be discussing how I customised my profile. And don’t worry, if you don’t like the banner, or sides, you can make your own. In fact, I would encourage it (please don’t steal mine lol)

Banners
When it comes to an Itch.IO page, you get 2 options for the top of your page. 1 - Your username, written in your pages font choice 2 - Whatever your heart desiers, as long as you can design it as either a gif or image.

Me? I chose the latter, and designed my own banner in afinity photo. This can be anything you want. When designing your own banner, size matters. To fit most screen sizes, I went for 1920px wide. Height doesn’t matter as much, but I went for 550px.

Any transparency on the banner will show the background image or colour through that we’ll set up next.

Background
Backgrounds are a bit more complicated than the banner. With the backgrounds you have 3 options: 1 - A pain colour 2 - An image or Gif 3 - An animated background using CSS

Given I wanted a nice boarder on my page, rather than a full background, I went for an image. However, if the image has transparency the background colour (in my case a light blue) show’s through, you can see this in action below.

CSS
To get access to custom CSS, you first need to request the access from Itch.io. This is as simple as emailing them and asking for access, and explaining why you want it. I’d suggest reading the full instructions on the offical CSS guide. Once you’ve got access, there are plenty of options out their to help you. However, lets explore the code I use step by step.

There are some comments in the code to help, but most of it is self explanatory. If you have any questions drop a comment below and I’ll do my best to help.

:root {
    --main-collection-color: #3faafc;
    --secondary-collection-color: #abdaff;
}
/*=======================Header=======================*/
.text_header {
    text-transform: uppercase;
}
/*=======================Collections=======================*/
@media (max-width: 800px) {
    .inner_column h2, .collection_description {
        margin-left: -20px !important;
        margin-right: -20px !important;
    }
}
.inner_column h2 {
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 0px !important;
    padding: 1%;
    background-color: var(--main-collection-color);
}
.collection_description {
    margin-bottom: 0px !important;
    background-color: var(--secondary-collection-color);
    text-align: center;
    opacity: 1 !important;
}
.carousel_wrapper {
    background-color: var(--secondary-collection-color);
    margin-top: 0px !important;
    padding-left: 10px;
    padding-top: 10px;
}

/*=======================Game Cell=======================*/
.game_cell {
    padding: 10px;
    border-radius: var(--itchio_border_radius);
    border-style: solid;
    border-width: 2px;
    box-shadow: 2px 2px;
    height: 280px;
    background-color: rgba(255, 255, 255, 0.5);
    transition: transform 0.4s, box-shadow 0.4s, background-color 0.4s; /* Combined transition for size, shadow, and background color */
}
.web_flag {
    background-color: black !important;
    color: white !important;
}
.game_thumb {
    background-size: cover;
    border-style: solid;
    border-width: 2px;
    filter: grayscale(50%);
    transition: filter 0.4s; /* Transition for the grayscale effect */
}

.game_cell:not(:hover) {
    transform: scale(1);
    filter: grayscale(50%); /* Apply grayscale effect in non-hover state */
}
.game_cell:hover {
    transform: scale(1.05);
    box-shadow: 4px 4px; /* Adjust the shadow size for the hover state */
    background-color: rgba(255, 255, 255, 1); /* Full opacity white background on hover */
}
.game_cell:hover .game_thumb {
    filter: grayscale(0%); /* Remove grayscale on hover */
}
.user_page_wrap .icon {
    color: black !important;
}