Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

Hide-able 'user_tools' in web pages

A topic by adadadfgh created Nov 04, 2023 Views: 372 Replies: 2
Viewing posts 1 to 3
(1 edit) (+1)

For games that can be played on web pages, 'user_tools' sometimes obscures the game iframe. The obscured content may be important to player. 

(+1)

It is bad css design for web games, yes.

user tools is the name for the buttons to go to creator and follow and all that in the upper right corner, for those who do not know.

I know following remedies.

As a publisher, put a banner above your webgame.

As a user

zoom closer in the browser, the user tools will become a part of the top row stuff

if the tools do not scroll with the page, zoom closer as well

go fullscreen in the game

use  custom css (that should fix them above the game area, no matter your zoom)

@-moz-document domain("itch.io") {
    .user_tools {
        position: static;
    }
}

The thingy reacts to screen width. This is why changing resolution or zoom level in browser changes how the thingy looks or where it is.

(2 edits)

Related thread: https://itch.io/t/1212824/user-actions-overlap-with-embedded-game-on-desktop

(contains custom CSS to completely hide user tools - or you could enter debug mode and delete it entirely but you’ll have to repeat this for every web game)

By the way, I tried the CSS for position static, it works, although it does create a ugly white space above the game banner & web view. I suppose this can be fixed by adding some background color similar to the game page’s background (unfortunately that means we need a dynamic script that parses what is already in the page, so more complicated… at least by scrolling down enough we can just put the whole area out of view)