Styling recommended for embedding tools and content into the Influence game client, for example via influence-tools-chrome-extension.
https://elerium-115.github.io/influence-css/example/
The /example folder contains a minimal page and styling that can help you to preview a page, before trying to embed it in-game. The actual contents of your page should be placed inside the <div class="example-main"> element. You can then use the following classes on the <body> element:
body.mock-embedwill mock a background that looks similar to the game layout, so you can test your content as if it were embedded in-game:
-
body.embeddefines the style that will be used when the page is actually embedded in-game. For example, it is highly recommended to use a transparent background, along with some of the basic in-game styles reproduced in /style/influence-index.css.Note: You will likely want to set the
embedclass only when the page is being shown in an iframe - i.e. not on direct visits to your page, outside the game:function inIframe() { try { return window.self !== window.top; } catch (e) { return true; } } if (inIframe()) { document.body.classList.add('embed'); } -
bodywithout any of the above classes defines the style that will be used in all contexts, including on direct visits to your page, outside the game.
Note: The maximum screen width available for your page, when embedded in-game, is 1290 pixels.
Created by @elerium115 for the space strategy sandbox MMO Influence.