itch.io¶

Game Page Customisation¶

Super-wide Header¶

Example: Charge!

To get a header image to extend beyond the centre column, both a header image and a background image must be used in such a way that they match up.

The header image must be 960px wide exactly. The background image can be any width and height as long as it tiles. I think to get it to match the header the width must divide into 960px, with the left and right sides matching the right and left of the header. Set the repeat to Horizontal and the align to Center

Margin Image¶

Example: People Poker

Create a background image that tiles vertically, that is wider than the centre column (960px). Everything outside the column width will be visible. Use BG colour on the outside edges of the image, and BG 2 colour on the interior of the image, to make it appear seamless.

Tile the background vertically with centre alignment.

Improve Spacing and Text¶

.inner_column p {
  line-height: 1.8;
  margin-bottom: 20px;
  text-align: justify;
}

.inner_column h2 {
  margin-top: 60px;
  text-align: center;
  letter-spacing: 0.1em;
}

.inner_column h1 {
  margin-top: 60px;
  margin-bottom: 40px;
  text-align: center;
  letter-spacing: 0.2em;
}

.inner_column h3 {
  margin-bottom: 60px;
  text-align: center;
}

.columns {
  margin-top: 60px;
}

.left_col {
  padding-left: 30px;
  padding-right: 30px;
}

Text Title¶

.inner_column h1 {
  text-align: center;
  letter-spacing: 0.2em;
  font-size: 4.0em;
  text-shadow: 2px 4px 0px #222123;
}

Poppin’ Screenshots¶

Make screenshots pop by adding a border and shadow. Details can vary of course, but this is a good starting point.

.screenshot_list img {
  border: double;
  border-width: 4px;
  box-shadow: 5px 5px 5px #000000;
}

Managing Builds¶

Butler

# TODO: Try butler out and then add notes about it.