Board Game Arena - User contributions [en]

Game interface stylesheet: yourgamename.css

2026-10-26T14:51:14Z

Tof63: Change extension src link

{{Studio_Framework_Navigation}}

__TOC__

This is the CSS stylesheet of your game User Interface.

Styles defined on this file will be applied to the HTML elements you define in your HTML template (yourgame_yourgame.tpl), and to HTML elements you create dynamically with Javascript.

Usually, you are using CSS to:

1°) define the overall layout of your game
(ex: place the board on the top left, place player's hand beside, place the deck on the right, ...).

2°) create your CSS-sprites:
All images of your games should be gathered into a small number of image files. Then, using background-image and background-position CSS properties, you create HTML blocks that can display these images correctly.

Example:
<pre>
Example of CSS sprites (a black token and a white token, 20x20px each, embedded in the same "tokens.png" 40x20px image):

.white_token {
background-image: url('img/tokens.png');
background-position: 0px 0px;
}
.black_token {
background-image: url('img/tokens.png');
background-position: -20px 0px;
}
.token {
width: 20px;
height: 20px;
background-repeat: none;
}
</pre>

3°) ... anything else:

It is really easy to add and remove CSS classes dynamically from your Javascript with dojo.addClass and dojo.removeClass. It is also easy to check if an element has a class (dojo.hasClass) or to get all elements with a specific class (dojo.query).

This is why, very often, using CSS classes for the logic of your user interface allow you to do complex things easily.

Note: on the production platform, this file will be compressed and comments will be removed. Consequently, don't hesitate to put as many comments as necessary.

Important: ALL the CSS directives for your game must be included in this CSS file. You can't create additional CSS files and import them.

== Warning: using percentage in background-position ==

In the example above, you will see "background-position: -20px 0px;" is used for the black token. You could also write this as "background-position: -100% 0%;" which displays the image at the same offset, because it is relative to the size of the .token bounding box, and this means the size of your image file doesn't need to precisely match the size of objects on the screen (this can be easier to write, and you can also substitute different image files without having to rewrite all the css.) However, it is strongly recommended that if you do this, you also specify <code>background-size</code> as a percentage as well.

This is because, if the size of the div on screen after any further scaling - which is done for you by the framework to fit games into small windows - is not a whole integer number of pixels, then rounding must occur at some points in the calculation; if the background-size and background-position are calculated in different ways, the difference in rounding can result int the final image offsets being incorrect. This is most significant on Safari (on MacOS, iPhone and iPad) where the discrepancy can be substantial enough to make a game ''illegible''; but other browsers can be off by a few pixels as well. [https://jsfiddle.net/shadowphiar/yLq36mzt/ (external demo)]. To avoid this issue, either:

* choose one unit (pixels, em, percentages etc) and specify '''all''' the background-size and background-position offsets of a div in the same unit.
* adjust the size of your div so that, after any global scaling (this.gameinterface_zoomFactor), it will occupy an integer number of pixels on the screen.

== Warning: using Z-index ==

You may use z-index CSS property in your game interface, but you should pay attention to the following: BGA dialogs are displayed with a z-index of 950. If you want to use z-index safely, you should use value '''lower than 900'''.

About z-index: don't forget that if you are using a z-index, your element will be displayed above all elements that do not have a z-index. So it's no use to have big z-index values: 1 is enough most of the time :)

== Warning: using drop-shadow ==

Drop shadows can look nice, but they currently cause big performance issues on Safari, especially if you have more than 1 on the page at once. To ensure you don't cause issues on this browser, you have some alternatives.

* Use box-shadow instead. This only works for square drop-shadows.
* Bake the shadow into the image. That is, the png contains the shadow, and no shadow is needed on the css side. This only works when the shadow doesn't need to be dynamic.
* Disable drop-shadow in Safari:, using the <code>dj_safari</code> class which is automatically added to the <code>html</code> tag.

.game-element {
filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.7));
}

html.dj_safari .game-element {
filter: none;
}

== Tip: how to make your cards looks beautiful :) ==

This piece of CSS (to adapt to your needs) is adding rounded corners + a shadow to your card.

<pre>
border-radius: 10px;
border: 1px black solid;
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.4);
</pre>

== spectatorMode ==

When a spectator (= a player that is not part of the game) is viewing a game, the BGA framework add the CSS class "spectatorMode" to the wrapping HTML tag of your game.

This way, if you want to apply a special style to some elements of your game for spectators, you can do this in your CSS:

<pre>
.spectatorMode #your_element_id {
/* your special style */
}
</pre>

The most common usage of this is to hide some elements to spectators. For example, to hide "my hand" elements:

<pre>
.spectatorMode #my_hand {
display: none;
}
</pre>

== Support of the Dark mode ==
BGA supports Dark mode natively, it can toggled available by clicking on your avatar before starting a game or the hamburger menu (top-right corner) during a game. It adds a <code>[data-theme="dark"]</code> to the html tag if the dark mode is enabled. So if you want to support the dark mode, you can use this to override the default light style when the user wants dark mode.
<pre>
html {
background: url('img/light-background.jpg'), #f2f2f2;
}
html[data-theme="dark"] {
background: url('img/dark-background.jpg'), #1d1d1d;
}
/* Example to change the player panel color, for light mode only */
html[data-theme="light"] .player-board {
--game-bga-player-panel-background: white;
}
</pre>

It is better to use this instead of using <code>@media (prefers-color-scheme: dark) {</code> because the media query would always rely on the browser settings, ignoring the BGA toggle.

If you don't have a specific image for the dark mode, you can try this:
<pre>
html[data-theme="dark"] {
background-blend-mode: color-burn;
}
</pre>
Using the DevTool, try the different values of this property to find the one that would work best with your base image.

=== Migrating ===

Most games work in dark mode out of the box. The usual problem is if the game sets a fixed (light) background color for an element without setting the text color: it works great in light mode, but in dark mode it will have a light text color on a light background. Adding <code>color: black;</code> on the elements you put a fixed light background will fix it on dark mode while still work in light mode.

=== Using the work of the extension to migrate ===
For those using the [https://en.doc.boardgamearena.com/ChromeExtension BGA extension] , it already overrides the [data-theme] based on the user choice in the extension.

If you wish to manage your game's dark mode, you can look at the source code of the extension https://github.com/FlavienBusseuil/bga-chrome-extension/tree/main/src/games to obtain the css currently applied to your game by the extension, so you can integrate it on your game code to make it available to any player even without the extension. This will make your game compatible with the dark mode, even if they don't have the extension.

=== Example of a background option compatible with dark mode ===
If you have a light and a dark background, and you want an automatic setting to be based on the dark mode, you can add this as a user preference :
<pre>
"103": {
"name": "Background",
"values": {
"0": {
"name": "Automatic"
},
"1": {
"name": "Light"
},
"2": {
"name": "Dark"
}
},
"default": 0
}
</pre>

Then in the CSS:
<pre>
html[data-background="0"][data-theme="light"], html[data-background="1"] {
background: url('img/background-light.jpg');
}
html[data-background="0"][data-theme="dark"], html[data-background="2"] {
background: url('img/background-dark.jpg');
}
</pre>

If you have <code>this.bga.userPreferences.onChange = (prefId, prefValue) => this.onUserPreferenceChanged(prefId, prefValue);</code> or something similar in the setup, you can add this extract to the callback (remove the typing in the function signature if you're not using TS), so the html[data-background] updates as soon as the user preference changes:
<pre>
public onUserPreferenceChanged(prefId: number, prefValue: number) {
switch (prefId) {
case 103:
document.documentElement.dataset.background = `${prefValue}`;
break;
}
}
</pre>

[[Category:Studio]]

ChromeExtension

2026-08-17T12:02:12Z

Tof63: hide folders in forum

An extension for [https://chrome.google.com/webstore/detail/bga-chrome-extension/kchnhmpeopknjdjejognciimepllkacb Google Chrome], [https://addons.mozilla.org/addon/board-game-arena-bga-extension/ Firefox] and [https://addons.opera.com/extensions/details/board-game-arena-bga-extension/ Opera] brought to you by [https://boardgamearena.com/player?id=84278471 Flavien] and [https://boardgamearena.com/player?id=85644210 Christophe].

The Google Chrome extension is compatible with all Chromium based browsers (Edge, Brave ...) and could also be used with Kiwi Browser or Quetta (for example) on Android devices.

The Firefox extension is also compatible with Firefox Mobile on Android devices.

For Apple devices, a new browser called Orion is compatible with both Chrome and Firefox extensions, but the browser currently still has a few bugs. If you want to use it on a mobile device, you will need to add the following CSS rule to view the forum if dark mode is enabled (unfortunately, the forum will not display in dark mode): #forum_frame { visibility: visible!important; } (The extension allows you to add custom CSS code in the options.)

If you have a problem, a suggestion, or just want to leave a nice note, you can write to us on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here]

This extension adds the following features to the boardgamearena.com website.

==List of current games==
If you've activated automatic table tracking (see next chapter), then the extension icon shows you the number of games you're currently expected to play.

Click on the extension icon to open the list of your games in progress and access them quickly.
[[File:Popup dark.png|none|thumb]]
You'll also find a list of pending invitations, as well as the tournaments you've entered.

The "Friend's tables" tab allow you to search for a table opened by one of your friends with a free chair.

== Settings ==
The "settings" tab lets you access some of the extension's parameters:

*Miscellaneous parameters :[[File:Misc params en.png|none|thumb|480x480px]]
*# Choice of language (English, French or German). Please contact us if you'd like to help us add another language!
*# A parameter to redirect the website links to the classic lobby instead of the new one.
*# A setting to hide games you can't play when you want to play in Arena mode. By default, BGA grays out these games.
*# A parameter to replace the default "wood" background by a solid-color background.
*# A parameter to change the behavior of the newsfeed, if it's activated the newsfeed contains only the messages of my groups.
*# A setting to force player names to be displayed in chat windows (by default, player names are hidden in private chats, and your name is hidden in game chats).
*# The last parameter lets you choose the type of emoticons you want to use in dark mode.
* Notifications:[[File:Notifications parameters en.png|none|thumb|480x480px]]
*# A parameter to enable or disable automatic tracking of the state of tables you are on. If this option is enabled, then the extension will be able to tell you when it's your turn to play at one of the tables you're at, but you'll always be seen as connected by other players. If this option is disabled, then the extension won't be able to tell you when it's your turn to play, but other players will only see you logged in if you're actually on the site.
*# When the tracking is enable, you can activate a sound notification ...
*# ... and associate the mp3 you prefer for this notification.
*# A parameter to disable flashing colors in the list of tables displayed by the extension.
*# The last parameter allows you to disable the animation that is added by default by BGA to the browser tabs when it's your turn to play on a table.
* Game parameters:[[File:Game parameters en.png|none|thumb|480x480px]]
*# A parameter to show / hide your friends' activity in the game logs
*# A parameter to show / hide the ELO score of the players in games.
*# A parameter to hide the chat bar in the game interface, so that it is only displayed when the mouse hovers over it.
*# A setting to hide timestamps in the game history.
*# A setting to deactivate the vertical bar added by the extension in some games, enabling navigation between players' boards.
* Home page settings : Parameters to select the elements that you want to display on the home page of the site. An advanced mode lets you define a template in HTML format (see next chapter).
* Game in progress page settings:
** Parameters to select the elements that you want to display on the 'Game in progress' page.
** Parameter to display the tables with more colors.
* Fast table creation. The extension adds a button in the lobby games to quickly start a table using the last settings used.[[File:Fast start en.png|thumb|480x480px|none]][[File:Fast create en.png|none|thumb|480x480px]]
*# Activate / deactivate feature
*# Set whether the table should be automatically opened to other players after creation.
*# Setting whether to exclude players stronger than you
*# Setting to exclude players with bad Karma (< 75%)
* Hidden games: Offer the possibility to undo the deletion of a game (see "Deleting a game" chapter).
* Ignored players: override player blocking in chat (see “Ignoring a player in "Mute a player in game chat” chapter)

== Advanced home page settings ==

By activating the advanced home page configuration, you can enter HTML code to place the elements you want exactly where you want them.

It is of course recommended that you have a minimum knowledge of HTML syntax to take full advantage of this option.

But by default, when you activate advanced mode, the extension offers you HTML code containing all possible elements. You can use this code as a starting point, deleting elements you don't need, moving elements around etc...

You can check your HTML code with an online tool like https://jsonformatter.org/html-validator

And if you've got an idea but can't write the HTML code for it, don't be frustrated - come and talk about it on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here] ;)
{| class="wikitable"
|+Predefined elements are:
!Code HTML
!Description
|-
|<nowiki><div id='bgaext-tournaments'></div></nowiki>
|Tournaments list
|-
|<nowiki><div id='bgaext-games-recent'></div></nowiki>
|New games list
|-
|<nowiki><div id='bgaext-games-popular'></div></nowiki>
|Popular games list
|-
|<nowiki><div id='bgaext-games-suggested'></div</nowiki>
|Recommended games list
|-
|<nowiki><div id='bgaext-achievements'></div></nowiki>
|Achievements
|-
|<nowiki><div id='bgaext-leaderboard'></div></nowiki>
|Hall of fame
|-
|<nowiki><div id='bgaext-newsfeed'></div></nowiki>
|Newfeed
|-
|<nowiki><div id='bgaext-service-status'></div></nowiki>
|Service status
|-
|<nowiki><div id='bgaext-games-classic'></div></nowiki>
|Discover our Classics
|-
|<nowiki><div id='bgaext-playmore'></div></nowiki>
|Play more!
|-
|<nowiki><div id='bgaext-partners-events'></div></nowiki>
|"News & Events" area
|}
You can potentially write any HTML code, but the extension defines the following styles to help you:

* <nowiki><div class='bgaext-flex-col'></nowiki> : the elements in this DIV will be placed in columns, one below the other, with a small margin to separate them.
* <nowiki><div class='bgaext-flex-row'></nowiki> : the elements in this DIV will be placed in line, across the entire page width, trying to respect the optimal size for each element.
* <nowiki><div class='bgaext-flex-row-distribution'></nowiki> : the elements in this DIV have all the same width, but you will certainly need to set a width for this DIV.

'''Example containing nearly all possible elements.'''

A first row of three columns contains :

* First column: Tournaments
* Second column: An area with two rows
** The first row contains a list of new games, popular games and recommended games.
** The second row contains the "Achievments" and the "Hall of fame"
* Third column: News feed and service status

A second line with two columns contains :

* First column: The list of classic games
* Second column: “Play more!” area

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki><div id='bgaext-leaderboard'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''A simpler example with fewer elements'''

The example contains a single line with, in order: the news feed, tournaments, new games and popular games.
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki></div></nowiki>
'''My favorite display'''
<style>
#bgaext-achievements { width: 600px; }
#bgaext-newsfeed .bga-homepage-newsfeed { max-height: 1050px; overflow: auto; }
#bgaext-partners-events { flex-grow: 0.4; }
</style>

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row-distribution'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-partners-events'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''Tips'''

To limit the height of the news feed, you can add CSS code like this, for example, to make a scrollbar appear:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: auto;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
or like this to truncate the content:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: hidden;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
To limit the height of the "Hall of fame", you can use the following code :
<style>
#bgaext-leaderboard .bga-ranked-player-list {
max-height: 525px;
overflow: hidden;
}
</style>

==Dark Mode==
[[File:Dark mode off.png|left|thumb]]
This icon in the top right-hand corner of the screen activates the dark mode for the entire site.

Once activated, you can then select a dominant colour by clicking on the arrow next to the icon to change the display theme slightly.

[[File:Dark mode on.png|left|thumb]]
[[File:Dark mode color.png|none|thumb|Choosing a color for dark mode]]
When you are in a game, it is displayed by default with the settings you have chosen for the site, but you can customise the game theme by selecting a color.

The site will continue to be displayed with the color you chose for the site, and the game will now be displayed with the color you chose for it.
==Hide friend's activities in game log==
The extension allow you to stop displaying your friend's activity in the game log.

You can find this option in the options of the extension and in the settings tabs of the extension menu. This is activated by default.
[[File:Friends activity pref en.png|none|thumb|364x364px]]

== Fast start button ==
The extension add a "Fast start" in the games in the lobby.

This button start a table with your default settings as the classic "Start" button do, but you stay in the lobby.

This button can also automatically open the created table to other players, which can be configured in the extension's options and menu.

==Navigation menu==
In games where this is of interest, the extension adds a vertical menu on the left-hand side for quick navigation between the players' boards. In some games, there are also shortcuts to key elements of the game, such as the main board.
[[File:Side menu.png|none|thumb]]
This menu can be activated or deactivated in the game settings.
[[File:Sidemenu pref en.png|none|thumb|500x500px]]

==Floating menu==
If you're playing on a small screen, it could be a good idea to save space by hiding the game log and player panels.

An option allows you to display these two elements in floating menus.
[[File:Floatingmenu pref en.png|none|thumb|500x500px]]
[[File:Floatingmenu.png|none|thumb]]

==Deleting a game==
The extension adds a button for 'deleting' a game. This button appears next to the button for starting the game in the list of games.

Deleted games no longer appear in the list of games or in the lobby.
[[File:Delete game.png|none|thumb]]
It is possible to recover a deleted game by the "settings" tab of the extension popup.
[[File:Delete game options en.png|none|thumb|800x800px]]

==Hide general chat==
[[File:Chat.png|left|thumb]]
An icon in the top right-hand corner of the screen allows you to show or hide the general chat.

This icon is not displayed when you are in a game and only allows you to hide the general chat; it does not allow you to stop receiving private messages or to hide the conversation in a game.

== Mute a player in game chat ==
[[File:Mute icon.png|left|thumb]]
In the game chat popup, the extension adds a new icon that lets you mute a player.

You can mute up to 10 players and manage the muted players list in "settings" tab of the extension.

This feature is designed to let you ignore a toxic player and finish the game in peace, but it doesn't report the user's behavior to Board Game Arena.

== Mute a player in game chat ==
[[File:Mute icon.png|left|thumb]]
In the game chat popup, the extension adds a new icon that lets you mute a player.

You can mute up to 10 players and manage the muted players list in "settings" tab of the extension.

This feature is designed to let you ignore a toxic player and finish the game in peace, but it doesn't report the user's behavior to Board Game Arena.

== Hide folders in forum ==
The extension adds this option at the top of the forum
[[File:Hide folder en.png|none|thumb]]
When this option is checked, an icon is added next to the title of each folder, allowing you to change its visibility.

The list of hidden folders is automatically saved whenever you change a folder's visibility.

== Custom CSS code ==
By going to the extension options (right-click on the extension icon, then “Options”), you can change the style of the site to your liking via the “Custom CSS” tab.

Unlike the option offered as standard by the website, this CSS code also applies to the forum.

It's also a way to change the default colors of dark mode if you want!

For example, type this code and change the colors as you wish (these are mainly the colors of the text and links, keep in mind that the text is displayed on dark backgrounds, so be careful with the contrast ;))
body {
--header-icons-color: #01c4ca;

--blue-10: #003b85;
--blue-50: #7289da;
--blue-70: #009aa0;
--blue-80: #11a9bb;
--blue-90: #11a9bb;

--red-10: #993333;
--red-30: #ca0000;
--red-50: #ff0000;
--red-80: #ff6565;

--green-10: #1b3b2d;
--green-30: #01663a;
--green-50: #009e0a;

--yellow-10: #996300;

--violet-60: #5a4275;
--violet-80: #8f5fbd;

--orange-10: #383b1b;
--orange-30: #8a5d0f;
}

File:Hide folder en.png

2026-08-17T12:01:07Z

Tof63:

Hide forum folders [en]

ChromeExtension

2026-02-24T18:21:29Z

Tof63: /* Mute a player in game chat */

An extension for [https://chrome.google.com/webstore/detail/bga-chrome-extension/kchnhmpeopknjdjejognciimepllkacb Google Chrome], [https://addons.mozilla.org/addon/board-game-arena-bga-extension/ Firefox] and [https://addons.opera.com/extensions/details/board-game-arena-bga-extension/ Opera] brought to you by [https://boardgamearena.com/player?id=84278471 Flavien] and [https://boardgamearena.com/player?id=85644210 Christophe].

The Google Chrome extension is compatible with all Chromium based browsers (Edge, Brave ...) and could also be used with Kiwi Browser or Quetta (for example) on Android devices.

The Firefox extension is also compatible with Firefox Mobile on Android devices.

For Apple devices, a new browser called Orion is compatible with both Chrome and Firefox extensions, but the browser currently still has a few bugs. If you want to use it on a mobile device, you will need to add the following CSS rule to view the forum if dark mode is enabled (unfortunately, the forum will not display in dark mode): #forum_frame { visibility: visible!important; } (The extension allows you to add custom CSS code in the options.)

If you have a problem, a suggestion, or just want to leave a nice note, you can write to us on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here]

This extension adds the following features to the boardgamearena.com website.

==List of current games==
If you've activated automatic table tracking (see next chapter), then the extension icon shows you the number of games you're currently expected to play.

Click on the extension icon to open the list of your games in progress and access them quickly.
[[File:Popup dark.png|none|thumb]]
You'll also find a list of pending invitations, as well as the tournaments you've entered.

The "Friend's tables" tab allow you to search for a table opened by one of your friends with a free chair.

== Settings ==
The "settings" tab lets you access some of the extension's parameters:

*Miscellaneous parameters :[[File:Misc params en.png|none|thumb|480x480px]]
*# Choice of language (English, French or German). Please contact us if you'd like to help us add another language!
*# A parameter to redirect the website links to the classic lobby instead of the new one.
*# A setting to hide games you can't play when you want to play in Arena mode. By default, BGA grays out these games.
*# A parameter to replace the default "wood" background by a solid-color background.
*# A parameter to change the behavior of the newsfeed, if it's activated the newsfeed contains only the messages of my groups.
*# A setting to force player names to be displayed in chat windows (by default, player names are hidden in private chats, and your name is hidden in game chats).
*# The last parameter lets you choose the type of emoticons you want to use in dark mode.
* Notifications:[[File:Notifications parameters en.png|none|thumb|480x480px]]
*# A parameter to enable or disable automatic tracking of the state of tables you are on. If this option is enabled, then the extension will be able to tell you when it's your turn to play at one of the tables you're at, but you'll always be seen as connected by other players. If this option is disabled, then the extension won't be able to tell you when it's your turn to play, but other players will only see you logged in if you're actually on the site.
*# When the tracking is enable, you can activate a sound notification ...
*# ... and associate the mp3 you prefer for this notification.
*# A parameter to disable flashing colors in the list of tables displayed by the extension.
*# The last parameter allows you to disable the animation that is added by default by BGA to the browser tabs when it's your turn to play on a table.
* Game parameters:[[File:Game parameters en.png|none|thumb|480x480px]]
*# A parameter to show / hide your friends' activity in the game logs
*# A parameter to show / hide the ELO score of the players in games.
*# A parameter to hide the chat bar in the game interface, so that it is only displayed when the mouse hovers over it.
*# A setting to hide timestamps in the game history.
*# A setting to deactivate the vertical bar added by the extension in some games, enabling navigation between players' boards.
* Home page settings : Parameters to select the elements that you want to display on the home page of the site. An advanced mode lets you define a template in HTML format (see next chapter).
* Game in progress page settings:
** Parameters to select the elements that you want to display on the 'Game in progress' page.
** Parameter to display the tables with more colors.
* Fast table creation. The extension adds a button in the lobby games to quickly start a table using the last settings used.[[File:Fast start en.png|thumb|480x480px|none]][[File:Fast create en.png|none|thumb|480x480px]]
*# Activate / deactivate feature
*# Set whether the table should be automatically opened to other players after creation.
*# Setting whether to exclude players stronger than you
*# Setting to exclude players with bad Karma (< 75%)
* Hidden games: Offer the possibility to undo the deletion of a game (see "Deleting a game" chapter).
* Ignored players: override player blocking in chat (see “Ignoring a player in "Mute a player in game chat” chapter)

== Advanced home page settings ==

By activating the advanced home page configuration, you can enter HTML code to place the elements you want exactly where you want them.

It is of course recommended that you have a minimum knowledge of HTML syntax to take full advantage of this option.

But by default, when you activate advanced mode, the extension offers you HTML code containing all possible elements. You can use this code as a starting point, deleting elements you don't need, moving elements around etc...

You can check your HTML code with an online tool like https://jsonformatter.org/html-validator

And if you've got an idea but can't write the HTML code for it, don't be frustrated - come and talk about it on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here] ;)
{| class="wikitable"
|+Predefined elements are:
!Code HTML
!Description
|-
|<nowiki><div id='bgaext-tournaments'></div></nowiki>
|Tournaments list
|-
|<nowiki><div id='bgaext-games-recent'></div></nowiki>
|New games list
|-
|<nowiki><div id='bgaext-games-popular'></div></nowiki>
|Popular games list
|-
|<nowiki><div id='bgaext-games-suggested'></div</nowiki>
|Recommended games list
|-
|<nowiki><div id='bgaext-achievements'></div></nowiki>
|Achievements
|-
|<nowiki><div id='bgaext-leaderboard'></div></nowiki>
|Hall of fame
|-
|<nowiki><div id='bgaext-newsfeed'></div></nowiki>
|Newfeed
|-
|<nowiki><div id='bgaext-service-status'></div></nowiki>
|Service status
|-
|<nowiki><div id='bgaext-games-classic'></div></nowiki>
|Discover our Classics
|-
|<nowiki><div id='bgaext-playmore'></div></nowiki>
|Play more!
|-
|<nowiki><div id='bgaext-partners-events'></div></nowiki>
|"News & Events" area
|}
You can potentially write any HTML code, but the extension defines the following styles to help you:

* <nowiki><div class='bgaext-flex-col'></nowiki> : the elements in this DIV will be placed in columns, one below the other, with a small margin to separate them.
* <nowiki><div class='bgaext-flex-row'></nowiki> : the elements in this DIV will be placed in line, across the entire page width, trying to respect the optimal size for each element.
* <nowiki><div class='bgaext-flex-row-distribution'></nowiki> : the elements in this DIV have all the same width, but you will certainly need to set a width for this DIV.

'''Example containing nearly all possible elements.'''

A first row of three columns contains :

* First column: Tournaments
* Second column: An area with two rows
** The first row contains a list of new games, popular games and recommended games.
** The second row contains the "Achievments" and the "Hall of fame"
* Third column: News feed and service status

A second line with two columns contains :

* First column: The list of classic games
* Second column: “Play more!” area

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki><div id='bgaext-leaderboard'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''A simpler example with fewer elements'''

The example contains a single line with, in order: the news feed, tournaments, new games and popular games.
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki></div></nowiki>
'''My favorite display'''
<style>
#bgaext-achievements { width: 600px; }
#bgaext-newsfeed .bga-homepage-newsfeed { max-height: 1050px; overflow: auto; }
#bgaext-partners-events { flex-grow: 0.4; }
</style>

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row-distribution'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-partners-events'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''Tips'''

To limit the height of the news feed, you can add CSS code like this, for example, to make a scrollbar appear:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: auto;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
or like this to truncate the content:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: hidden;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
To limit the height of the "Hall of fame", you can use the following code :
<style>
#bgaext-leaderboard .bga-ranked-player-list {
max-height: 525px;
overflow: hidden;
}
</style>

==Dark Mode==
[[File:Dark mode off.png|left|thumb]]
This icon in the top right-hand corner of the screen activates the dark mode for the entire site.

Once activated, you can then select a dominant colour by clicking on the arrow next to the icon to change the display theme slightly.

[[File:Dark mode on.png|left|thumb]]
[[File:Dark mode color.png|none|thumb|Choosing a color for dark mode]]
When you are in a game, it is displayed by default with the settings you have chosen for the site, but you can customise the game theme by selecting a color.

The site will continue to be displayed with the color you chose for the site, and the game will now be displayed with the color you chose for it.
==Hide friend's activities in game log==
The extension allow you to stop displaying your friend's activity in the game log.

You can find this option in the options of the extension and in the settings tabs of the extension menu. This is activated by default.
[[File:Friends activity pref en.png|none|thumb|364x364px]]

== Fast start button ==
The extension add a "Fast start" in the games in the lobby.

This button start a table with your default settings as the classic "Start" button do, but you stay in the lobby.

This button can also automatically open the created table to other players, which can be configured in the extension's options and menu.

==Navigation menu==
In games where this is of interest, the extension adds a vertical menu on the left-hand side for quick navigation between the players' boards. In some games, there are also shortcuts to key elements of the game, such as the main board.
[[File:Side menu.png|none|thumb]]
This menu can be activated or deactivated in the game settings.
[[File:Sidemenu pref en.png|none|thumb|500x500px]]

==Floating menu==
If you're playing on a small screen, it could be a good idea to save space by hiding the game log and player panels.

An option allows you to display these two elements in floating menus.
[[File:Floatingmenu pref en.png|none|thumb|500x500px]]
[[File:Floatingmenu.png|none|thumb]]

==Deleting a game==
The extension adds a button for 'deleting' a game. This button appears next to the button for starting the game in the list of games.

Deleted games no longer appear in the list of games or in the lobby.
[[File:Delete game.png|none|thumb]]
It is possible to recover a deleted game by the "settings" tab of the extension popup.
[[File:Delete game options en.png|none|thumb|800x800px]]

==Hide general chat==
[[File:Chat.png|left|thumb]]
An icon in the top right-hand corner of the screen allows you to show or hide the general chat.

This icon is not displayed when you are in a game and only allows you to hide the general chat; it does not allow you to stop receiving private messages or to hide the conversation in a game.

== Mute a player in game chat ==
[[File:Mute icon.png|left|thumb]]
In the game chat popup, the extension adds a new icon that lets you mute a player.

You can mute up to 10 players and manage the muted players list in "settings" tab of the extension.

This feature is designed to let you ignore a toxic player and finish the game in peace, but it doesn't report the user's behavior to Board Game Arena.

== Custom CSS code ==
By going to the extension options (right-click on the extension icon, then “Options”), you can change the style of the site to your liking via the “Custom CSS” tab.

Unlike the option offered as standard by the website, this CSS code also applies to the forum.

It's also a way to change the default colors of dark mode if you want!

For example, type this code and change the colors as you wish (these are mainly the colors of the text and links, keep in mind that the text is displayed on dark backgrounds, so be careful with the contrast ;))
body {
--header-icons-color: #01c4ca;

--blue-10: #003b85;
--blue-50: #7289da;
--blue-70: #009aa0;
--blue-80: #11a9bb;
--blue-90: #11a9bb;

--red-10: #993333;
--red-30: #ca0000;
--red-50: #ff0000;
--red-80: #ff6565;

--green-10: #1b3b2d;
--green-30: #01663a;
--green-50: #009e0a;

--yellow-10: #996300;

--violet-60: #5a4275;
--violet-80: #8f5fbd;

--orange-10: #383b1b;
--orange-30: #8a5d0f;
}

ChromeExtension

2026-02-24T18:19:45Z

Tof63: Custom css code section

An extension for [https://chrome.google.com/webstore/detail/bga-chrome-extension/kchnhmpeopknjdjejognciimepllkacb Google Chrome], [https://addons.mozilla.org/addon/board-game-arena-bga-extension/ Firefox] and [https://addons.opera.com/extensions/details/board-game-arena-bga-extension/ Opera] brought to you by [https://boardgamearena.com/player?id=84278471 Flavien] and [https://boardgamearena.com/player?id=85644210 Christophe].

The Google Chrome extension is compatible with all Chromium based browsers (Edge, Brave ...) and could also be used with Kiwi Browser or Quetta (for example) on Android devices.

The Firefox extension is also compatible with Firefox Mobile on Android devices.

For Apple devices, a new browser called Orion is compatible with both Chrome and Firefox extensions, but the browser currently still has a few bugs. If you want to use it on a mobile device, you will need to add the following CSS rule to view the forum if dark mode is enabled (unfortunately, the forum will not display in dark mode): #forum_frame { visibility: visible!important; } (The extension allows you to add custom CSS code in the options.)

If you have a problem, a suggestion, or just want to leave a nice note, you can write to us on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here]

This extension adds the following features to the boardgamearena.com website.

==List of current games==
If you've activated automatic table tracking (see next chapter), then the extension icon shows you the number of games you're currently expected to play.

Click on the extension icon to open the list of your games in progress and access them quickly.
[[File:Popup dark.png|none|thumb]]
You'll also find a list of pending invitations, as well as the tournaments you've entered.

The "Friend's tables" tab allow you to search for a table opened by one of your friends with a free chair.

== Settings ==
The "settings" tab lets you access some of the extension's parameters:

*Miscellaneous parameters :[[File:Misc params en.png|none|thumb|480x480px]]
*# Choice of language (English, French or German). Please contact us if you'd like to help us add another language!
*# A parameter to redirect the website links to the classic lobby instead of the new one.
*# A setting to hide games you can't play when you want to play in Arena mode. By default, BGA grays out these games.
*# A parameter to replace the default "wood" background by a solid-color background.
*# A parameter to change the behavior of the newsfeed, if it's activated the newsfeed contains only the messages of my groups.
*# A setting to force player names to be displayed in chat windows (by default, player names are hidden in private chats, and your name is hidden in game chats).
*# The last parameter lets you choose the type of emoticons you want to use in dark mode.
* Notifications:[[File:Notifications parameters en.png|none|thumb|480x480px]]
*# A parameter to enable or disable automatic tracking of the state of tables you are on. If this option is enabled, then the extension will be able to tell you when it's your turn to play at one of the tables you're at, but you'll always be seen as connected by other players. If this option is disabled, then the extension won't be able to tell you when it's your turn to play, but other players will only see you logged in if you're actually on the site.
*# When the tracking is enable, you can activate a sound notification ...
*# ... and associate the mp3 you prefer for this notification.
*# A parameter to disable flashing colors in the list of tables displayed by the extension.
*# The last parameter allows you to disable the animation that is added by default by BGA to the browser tabs when it's your turn to play on a table.
* Game parameters:[[File:Game parameters en.png|none|thumb|480x480px]]
*# A parameter to show / hide your friends' activity in the game logs
*# A parameter to show / hide the ELO score of the players in games.
*# A parameter to hide the chat bar in the game interface, so that it is only displayed when the mouse hovers over it.
*# A setting to hide timestamps in the game history.
*# A setting to deactivate the vertical bar added by the extension in some games, enabling navigation between players' boards.
* Home page settings : Parameters to select the elements that you want to display on the home page of the site. An advanced mode lets you define a template in HTML format (see next chapter).
* Game in progress page settings:
** Parameters to select the elements that you want to display on the 'Game in progress' page.
** Parameter to display the tables with more colors.
* Fast table creation. The extension adds a button in the lobby games to quickly start a table using the last settings used.[[File:Fast start en.png|thumb|480x480px|none]][[File:Fast create en.png|none|thumb|480x480px]]
*# Activate / deactivate feature
*# Set whether the table should be automatically opened to other players after creation.
*# Setting whether to exclude players stronger than you
*# Setting to exclude players with bad Karma (< 75%)
* Hidden games: Offer the possibility to undo the deletion of a game (see "Deleting a game" chapter).
* Ignored players: override player blocking in chat (see “Ignoring a player in "Mute a player in game chat” chapter)

== Advanced home page settings ==

By activating the advanced home page configuration, you can enter HTML code to place the elements you want exactly where you want them.

It is of course recommended that you have a minimum knowledge of HTML syntax to take full advantage of this option.

But by default, when you activate advanced mode, the extension offers you HTML code containing all possible elements. You can use this code as a starting point, deleting elements you don't need, moving elements around etc...

You can check your HTML code with an online tool like https://jsonformatter.org/html-validator

And if you've got an idea but can't write the HTML code for it, don't be frustrated - come and talk about it on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here] ;)
{| class="wikitable"
|+Predefined elements are:
!Code HTML
!Description
|-
|<nowiki><div id='bgaext-tournaments'></div></nowiki>
|Tournaments list
|-
|<nowiki><div id='bgaext-games-recent'></div></nowiki>
|New games list
|-
|<nowiki><div id='bgaext-games-popular'></div></nowiki>
|Popular games list
|-
|<nowiki><div id='bgaext-games-suggested'></div</nowiki>
|Recommended games list
|-
|<nowiki><div id='bgaext-achievements'></div></nowiki>
|Achievements
|-
|<nowiki><div id='bgaext-leaderboard'></div></nowiki>
|Hall of fame
|-
|<nowiki><div id='bgaext-newsfeed'></div></nowiki>
|Newfeed
|-
|<nowiki><div id='bgaext-service-status'></div></nowiki>
|Service status
|-
|<nowiki><div id='bgaext-games-classic'></div></nowiki>
|Discover our Classics
|-
|<nowiki><div id='bgaext-playmore'></div></nowiki>
|Play more!
|-
|<nowiki><div id='bgaext-partners-events'></div></nowiki>
|"News & Events" area
|}
You can potentially write any HTML code, but the extension defines the following styles to help you:

* <nowiki><div class='bgaext-flex-col'></nowiki> : the elements in this DIV will be placed in columns, one below the other, with a small margin to separate them.
* <nowiki><div class='bgaext-flex-row'></nowiki> : the elements in this DIV will be placed in line, across the entire page width, trying to respect the optimal size for each element.
* <nowiki><div class='bgaext-flex-row-distribution'></nowiki> : the elements in this DIV have all the same width, but you will certainly need to set a width for this DIV.

'''Example containing nearly all possible elements.'''

A first row of three columns contains :

* First column: Tournaments
* Second column: An area with two rows
** The first row contains a list of new games, popular games and recommended games.
** The second row contains the "Achievments" and the "Hall of fame"
* Third column: News feed and service status

A second line with two columns contains :

* First column: The list of classic games
* Second column: “Play more!” area

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki><div id='bgaext-leaderboard'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''A simpler example with fewer elements'''

The example contains a single line with, in order: the news feed, tournaments, new games and popular games.
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki></div></nowiki>
'''My favorite display'''
<style>
#bgaext-achievements { width: 600px; }
#bgaext-newsfeed .bga-homepage-newsfeed { max-height: 1050px; overflow: auto; }
#bgaext-partners-events { flex-grow: 0.4; }
</style>

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row-distribution'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-partners-events'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''Tips'''

To limit the height of the news feed, you can add CSS code like this, for example, to make a scrollbar appear:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: auto;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
or like this to truncate the content:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: hidden;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
To limit the height of the "Hall of fame", you can use the following code :
<style>
#bgaext-leaderboard .bga-ranked-player-list {
max-height: 525px;
overflow: hidden;
}
</style>

==Dark Mode==
[[File:Dark mode off.png|left|thumb]]
This icon in the top right-hand corner of the screen activates the dark mode for the entire site.

Once activated, you can then select a dominant colour by clicking on the arrow next to the icon to change the display theme slightly.

[[File:Dark mode on.png|left|thumb]]
[[File:Dark mode color.png|none|thumb|Choosing a color for dark mode]]
When you are in a game, it is displayed by default with the settings you have chosen for the site, but you can customise the game theme by selecting a color.

The site will continue to be displayed with the color you chose for the site, and the game will now be displayed with the color you chose for it.
==Hide friend's activities in game log==
The extension allow you to stop displaying your friend's activity in the game log.

You can find this option in the options of the extension and in the settings tabs of the extension menu. This is activated by default.
[[File:Friends activity pref en.png|none|thumb|364x364px]]

== Fast start button ==
The extension add a "Fast start" in the games in the lobby.

This button start a table with your default settings as the classic "Start" button do, but you stay in the lobby.

This button can also automatically open the created table to other players, which can be configured in the extension's options and menu.

==Navigation menu==
In games where this is of interest, the extension adds a vertical menu on the left-hand side for quick navigation between the players' boards. In some games, there are also shortcuts to key elements of the game, such as the main board.
[[File:Side menu.png|none|thumb]]
This menu can be activated or deactivated in the game settings.
[[File:Sidemenu pref en.png|none|thumb|500x500px]]

==Floating menu==
If you're playing on a small screen, it could be a good idea to save space by hiding the game log and player panels.

An option allows you to display these two elements in floating menus.
[[File:Floatingmenu pref en.png|none|thumb|500x500px]]
[[File:Floatingmenu.png|none|thumb]]

==Deleting a game==
The extension adds a button for 'deleting' a game. This button appears next to the button for starting the game in the list of games.

Deleted games no longer appear in the list of games or in the lobby.
[[File:Delete game.png|none|thumb]]
It is possible to recover a deleted game by the "settings" tab of the extension popup.
[[File:Delete game options en.png|none|thumb|800x800px]]

==Hide general chat==
[[File:Chat.png|left|thumb]]
An icon in the top right-hand corner of the screen allows you to show or hide the general chat.

This icon is not displayed when you are in a game and only allows you to hide the general chat; it does not allow you to stop receiving private messages or to hide the conversation in a game.

== Mute a player in game chat ==
[[File:Mute icon.png|left|thumb]]
In the game chat popup, the extension adds a new icon that lets you mute a player.

You can mute up to 10 players and manage the muted players list in "settings" tab of the extension.

This feature is designed to let you ignore a toxic player and finish the game in peace, but it doesn't report the user's behavior to Board Game Arena.

== Custom CSS code ==
By going to the extension options (right-click on the extension icon, then “Options”), you can change the style of the site to your liking via the “Custom CSS” tab.

Unlike the option offered as standard by the website, this CSS code also applies to the forum.

It's also a way to change the default colors of dark mode if you want!

For example, type this code and change the colors as you wish (these are mainly the colors of the text and links, keep in mind that the text is displayed on dark backgrounds, so be careful with the contrast ;))
body {
--header-icons-color: #01c4ca;

--blue-10: #003b85;
--blue-50: #7289da;
--blue-70: #009aa0;
--blue-80: #11a9bb;
--blue-90: #11a9bb;

--red-10: #993333;
--red-30: #ca0000;
--red-50: #ff0000;
--red-80: #ff6565;

--green-10: #1b3b2d;
--green-30: #01663a;
--green-50: #009e0a;

--yellow-10: #996300;

--violet-60: #5a4275;
--violet-80: #8f5fbd;

--orange-10: #383b1b;
--orange-30: #8a5d0f;
}

ChromeExtension

2026-01-23T16:46:37Z

Tof63: Orion Browser

ChromeExtension

2025-11-06T07:30:33Z

Tof63:

An extension for [https://chrome.google.com/webstore/detail/bga-chrome-extension/kchnhmpeopknjdjejognciimepllkacb Google Chrome], [https://addons.mozilla.org/addon/board-game-arena-bga-extension/ Firefox] and [https://addons.opera.com/extensions/details/board-game-arena-bga-extension/ Opera] brought to you by [https://boardgamearena.com/player?id=84278471 Flavien] and [https://boardgamearena.com/player?id=85644210 Christophe].

The Google Chrome extension is compatible with all Chromium based browsers (Edge, Brave ...) and could also be used with Kiwi Browser or Quetta (for example) on Android devices.

The Firefox extension is also compatible with Firefox Mobile on Android devices.

If you have a problem, a suggestion, or just want to leave a nice note, you can write to us on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here]

This extension adds the following features to the boardgamearena.com website.

==List of current games==
If you've activated automatic table tracking (see next chapter), then the extension icon shows you the number of games you're currently expected to play.

Click on the extension icon to open the list of your games in progress and access them quickly.
[[File:Popup dark.png|none|thumb]]
You'll also find a list of pending invitations, as well as the tournaments you've entered.

The "Friend's tables" tab allow you to search for a table opened by one of your friends with a free chair.

== Settings ==
The "settings" tab lets you access some of the extension's parameters:

*Miscellaneous parameters :[[File:Misc params en.png|none|thumb|480x480px]]
*# Choice of language (English, French or German). Please contact us if you'd like to help us add another language!
*# A parameter to redirect the website links to the classic lobby instead of the new one.
*# A setting to hide games you can't play when you want to play in Arena mode. By default, BGA grays out these games.
*# A parameter to replace the default "wood" background by a solid-color background.
*# A parameter to change the behavior of the newsfeed, if it's activated the newsfeed contains only the messages of my groups.
*# A setting to force player names to be displayed in chat windows (by default, player names are hidden in private chats, and your name is hidden in game chats).
*# The last parameter lets you choose the type of emoticons you want to use in dark mode.
* Notifications:[[File:Notifications parameters en.png|none|thumb|480x480px]]
*# A parameter to enable or disable automatic tracking of the state of tables you are on. If this option is enabled, then the extension will be able to tell you when it's your turn to play at one of the tables you're at, but you'll always be seen as connected by other players. If this option is disabled, then the extension won't be able to tell you when it's your turn to play, but other players will only see you logged in if you're actually on the site.
*# When the tracking is enable, you can activate a sound notification ...
*# ... and associate the mp3 you prefer for this notification.
*# A parameter to disable flashing colors in the list of tables displayed by the extension.
*# The last parameter allows you to disable the animation that is added by default by BGA to the browser tabs when it's your turn to play on a table.
* Game parameters:[[File:Game parameters en.png|none|thumb|480x480px]]
*# A parameter to show / hide your friends' activity in the game logs
*# A parameter to show / hide the ELO score of the players in games.
*# A parameter to hide the chat bar in the game interface, so that it is only displayed when the mouse hovers over it.
*# A setting to hide timestamps in the game history.
*# A setting to deactivate the vertical bar added by the extension in some games, enabling navigation between players' boards.
* Home page settings : Parameters to select the elements that you want to display on the home page of the site. An advanced mode lets you define a template in HTML format (see next chapter).
* Game in progress page settings:
** Parameters to select the elements that you want to display on the 'Game in progress' page.
** Parameter to display the tables with more colors.
* Fast table creation. The extension adds a button in the lobby games to quickly start a table using the last settings used.[[File:Fast start en.png|thumb|480x480px|none]][[File:Fast create en.png|none|thumb|480x480px]]
*# Activate / deactivate feature
*# Set whether the table should be automatically opened to other players after creation.
*# Setting whether to exclude players stronger than you
*# Setting to exclude players with bad Karma (< 75%)
* Hidden games: Offer the possibility to undo the deletion of a game (see "Deleting a game" chapter).
* Ignored players: override player blocking in chat (see “Ignoring a player in "Mute a player in game chat” chapter)

== Advanced home page settings ==

By activating the advanced home page configuration, you can enter HTML code to place the elements you want exactly where you want them.

It is of course recommended that you have a minimum knowledge of HTML syntax to take full advantage of this option.

But by default, when you activate advanced mode, the extension offers you HTML code containing all possible elements. You can use this code as a starting point, deleting elements you don't need, moving elements around etc...

You can check your HTML code with an online tool like https://jsonformatter.org/html-validator

And if you've got an idea but can't write the HTML code for it, don't be frustrated - come and talk about it on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here] ;)
{| class="wikitable"
|+Predefined elements are:
!Code HTML
!Description
|-
|<nowiki><div id='bgaext-tournaments'></div></nowiki>
|Tournaments list
|-
|<nowiki><div id='bgaext-games-recent'></div></nowiki>
|New games list
|-
|<nowiki><div id='bgaext-games-popular'></div></nowiki>
|Popular games list
|-
|<nowiki><div id='bgaext-games-suggested'></div</nowiki>
|Recommended games list
|-
|<nowiki><div id='bgaext-achievements'></div></nowiki>
|Achievements
|-
|<nowiki><div id='bgaext-leaderboard'></div></nowiki>
|Hall of fame
|-
|<nowiki><div id='bgaext-newsfeed'></div></nowiki>
|Newfeed
|-
|<nowiki><div id='bgaext-service-status'></div></nowiki>
|Service status
|-
|<nowiki><div id='bgaext-games-classic'></div></nowiki>
|Discover our Classics
|-
|<nowiki><div id='bgaext-playmore'></div></nowiki>
|Play more!
|-
|<nowiki><div id='bgaext-partners-events'></div></nowiki>
|"News & Events" area
|}
You can potentially write any HTML code, but the extension defines the following styles to help you:

* <nowiki><div class='bgaext-flex-col'></nowiki> : the elements in this DIV will be placed in columns, one below the other, with a small margin to separate them.
* <nowiki><div class='bgaext-flex-row'></nowiki> : the elements in this DIV will be placed in line, across the entire page width, trying to respect the optimal size for each element.
* <nowiki><div class='bgaext-flex-row-distribution'></nowiki> : the elements in this DIV have all the same width, but you will certainly need to set a width for this DIV.

'''Example containing nearly all possible elements.'''

A first row of three columns contains :

* First column: Tournaments
* Second column: An area with two rows
** The first row contains a list of new games, popular games and recommended games.
** The second row contains the "Achievments" and the "Hall of fame"
* Third column: News feed and service status

A second line with two columns contains :

* First column: The list of classic games
* Second column: “Play more!” area

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki><div id='bgaext-leaderboard'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''A simpler example with fewer elements'''

The example contains a single line with, in order: the news feed, tournaments, new games and popular games.
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki></div></nowiki>
'''My favorite display'''
<style>
#bgaext-achievements { width: 600px; }
#bgaext-newsfeed .bga-homepage-newsfeed { max-height: 1050px; overflow: auto; }
#bgaext-partners-events { flex-grow: 0.4; }
</style>

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row-distribution'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-partners-events'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''Tips'''

To limit the height of the news feed, you can add CSS code like this, for example, to make a scrollbar appear:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: auto;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
or like this to truncate the content:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: hidden;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
To limit the height of the "Hall of fame", you can use the following code :
<style>
#bgaext-leaderboard .bga-ranked-player-list {
max-height: 525px;
overflow: hidden;
}
</style>

==Dark Mode==
[[File:Dark mode off.png|left|thumb]]
This icon in the top right-hand corner of the screen activates the dark mode for the entire site.

Once activated, you can then select a dominant colour by clicking on the arrow next to the icon to change the display theme slightly.

[[File:Dark mode on.png|left|thumb]]
[[File:Dark mode color.png|none|thumb|Choosing a color for dark mode]]
When you are in a game, it is displayed by default with the settings you have chosen for the site, but you can customise the game theme by selecting a color.

The site will continue to be displayed with the color you chose for the site, and the game will now be displayed with the color you chose for it.
==Hide friend's activities in game log==
The extension allow you to stop displaying your friend's activity in the game log.

You can find this option in the options of the extension and in the settings tabs of the extension menu. This is activated by default.
[[File:Friends activity pref en.png|none|thumb|364x364px]]

== Fast start button ==
The extension add a "Fast start" in the games in the lobby.

This button start a table with your default settings as the classic "Start" button do, but you stay in the lobby.

This button can also automatically open the created table to other players, which can be configured in the extension's options and menu.

==Navigation menu==
In games where this is of interest, the extension adds a vertical menu on the left-hand side for quick navigation between the players' boards. In some games, there are also shortcuts to key elements of the game, such as the main board.
[[File:Side menu.png|none|thumb]]
This menu can be activated or deactivated in the game settings.
[[File:Sidemenu pref en.png|none|thumb|500x500px]]

==Floating menu==
If you're playing on a small screen, it could be a good idea to save space by hiding the game log and player panels.

An option allows you to display these two elements in floating menus.
[[File:Floatingmenu pref en.png|none|thumb|500x500px]]
[[File:Floatingmenu.png|none|thumb]]

==Deleting a game==
The extension adds a button for 'deleting' a game. This button appears next to the button for starting the game in the list of games.

Deleted games no longer appear in the list of games or in the lobby.
[[File:Delete game.png|none|thumb]]
It is possible to recover a deleted game by the "settings" tab of the extension popup.
[[File:Delete game options en.png|none|thumb|800x800px]]

==Hide general chat==
[[File:Chat.png|left|thumb]]
An icon in the top right-hand corner of the screen allows you to show or hide the general chat.

This icon is not displayed when you are in a game and only allows you to hide the general chat; it does not allow you to stop receiving private messages or to hide the conversation in a game.

== Mute a player in game chat ==
[[File:Mute icon.png|left|thumb]]
In the game chat popup, the extension adds a new icon that lets you mute a player.

You can mute up to 10 players and manage the muted players list in "settings" tab of the extension.

This feature is designed to let you ignore a toxic player and finish the game in peace, but it doesn't report the user's behavior to Board Game Arena.

Game interface stylesheet: yourgamename.css

2025-07-01T08:35:51Z

Tof63: Added a comment to encourage developers to contact the extension authors.

{{Studio_Framework_Navigation}}

__TOC__

This is the CSS stylesheet of your game User Interface.

Styles defined on this file will be applied to the HTML elements you define in your HTML template (yourgame_yourgame.tpl), and to HTML elements you create dynamically with Javascript.

Usually, you are using CSS to:

1°) define the overall layout of your game
(ex: place the board on the top left, place player's hand beside, place the deck on the right, ...).

2°) create your CSS-sprites:
All images of your games should be gathered into a small number of image files. Then, using background-image and background-position CSS properties, you create HTML blocks that can display these images correctly.

Example:
<pre>
Example of CSS sprites (a black token and a white token, 20x20px each, embedded in the same "tokens.png" 40x20px image):

.white_token {
background-image: url('img/tokens.png');
background-position: 0px 0px;
}
.black_token {
background-image: url('img/tokens.png');
background-position: -20px 0px;
}
.token {
width: 20px;
height: 20px;
background-repeat: none;
}
</pre>

3°) ... anything else:

It is really easy to add and remove CSS classes dynamically from your Javascript with dojo.addClass and dojo.removeClass. It is also easy to check if an element has a class (dojo.hasClass) or to get all elements with a specific class (dojo.query).

This is why, very often, using CSS classes for the logic of your user interface allow you to do complex things easily.

Note: on the production platform, this file will be compressed and comments will be removed. Consequently, don't hesitate to put as many comments as necessary.

Important: ALL the CSS directives for your game must be included in this CSS file. You can't create additional CSS files and import them.

== Warning: using percentage in background-position ==

In the example above, you will see "background-position: -20px 0px;" is used for the black token. You could also write this as "background-position: -100% 0%;" which displays the image at the same offset, because it is relative to the size of the .token bounding box, and this means the size of your image file doesn't need to precisely match the size of objects on the screen (this can be easier to write, and you can also substitute different image files without having to rewrite all the css.) However, it is strongly recommended that if you do this, you also specify <code>background-size</code> as a percentage as well.

This is because, if the size of the div on screen after any further scaling - which is done for you by the framework to fit games into small windows - is not a whole integer number of pixels, then rounding must occur at some points in the calculation; if the background-size and background-position are calculated in different ways, the difference in rounding can result int the final image offsets being incorrect. This is most significant on Safari (on MacOS, iPhone and iPad) where the discrepancy can be substantial enough to make a game ''illegible''; but other browsers can be off by a few pixels as well. [https://jsfiddle.net/shadowphiar/yLq36mzt/ (external demo)]. To avoid this issue, either:

* choose one unit (pixels, em, percentages etc) and specify '''all''' the background-size and background-position offsets of a div in the same unit.
* adjust the size of your div so that, after any global scaling (this.gameinterface_zoomFactor), it will occupy an integer number of pixels on the screen.

== Warning: using Z-index ==

You may use z-index CSS property in your game interface, but you should pay attention to the following: BGA dialogs are displayed with a z-index of 950. If you want to use z-index safely, you should use value '''lower than 900'''.

About z-index: don't forget that if you are using a z-index, your element will be displayed above all elements that do not have a z-index. So it's no use to have big z-index values: 1 is enough most of the time :)

== Warning: using drop-shadow ==

Drop shadows can look nice, but they currently cause big performance issues on Safari, especially if you have more than 1 on the page at once. To ensure you don't cause issues on this browser, you have some alternatives.

* Use box-shadow instead. This only works for square drop-shadows.
* Bake the shadow into the image. That is, the png contains the shadow, and no shadow is needed on the css side. This only works when the shadow doesn't need to be dynamic.
* Disable drop-shadow in Safari:, using the <code>dj_safari</code> class which is automatically added to the <code>html</code> tag.

.game-element {
filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.7));
}

html.dj_safari .game-element {
filter: none;
}

== Tip: how to make your cards looks beautiful :) ==

This piece of CSS (to adapt to your needs) is adding rounded corners + a shadow to your card.

<pre>
border-radius: 10px;
border: 1px black solid;
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.4);
</pre>

== spectatorMode ==

When a spectator (= a player that is not part of the game) is viewing a game, the BGA framework add the CSS class "spectatorMode" to the wrapping HTML tag of your game.

This way, if you want to apply a special style to some elements of your game for spectators, you can do this in your CSS:

<pre>
.spectatorMode #your_element_id {
/* your special style */
}
</pre>

The most common usage of this is to hide some elements to spectators. For example, to hide "my hand" elements:

<pre>
.spectatorMode #my_hand {
display: none;
}
</pre>

== Support of the Dark mode ==
Currently, BGA doesn't support Dark mode natively. But it adds a <code>[data-theme="dark"]</code> to the html tag if the player's browser is set to prefer-dark-mode. So if you want to support the dark mode, you can use this to override the default light style when the user wants dark mode.
<pre>
html {
background: url('img/light-background.jpg'), #f2f2f2;
}
html[data-theme="dark"] {
background: url('img/dark-background.jpg'), #1d1d1d;
}
</pre>

Currently it is filled with the <code>prefers-color-scheme</code> media query of the browser.

It is better to use this instead of using <code>@media (prefers-color-scheme: dark) {</code> because the media query would always rely on the browser settings, while BGA has more control over <code>[data-theme="dark"]</code>.

If one day BGA supports the dark mode with an auto/light/dark toggle in the user settings on BGA, the <code>[data-theme="dark"]</code> will be adapted to use it, when the media query will ignore the player settings and your game may mismatch with the user settings.

For those using the [https://en.doc.boardgamearena.com/ChromeExtension BGA extension] , it already overrides the [data-theme] based on the user choice in the extension, as the future BGA setting would do.

If you wish to manage your game's dark mode, you can contact the [https://boardgamearena.com/player?id=85644210 extension's authors] to obtain the css currently applied to your game by the extension, so that you can modify it to your tastes (don't forget to let them know when your modifications are online, so that the css can then be removed from the extension)

[[Category:Studio]]

Game interface stylesheet: yourgamename.css

2025-07-01T08:24:39Z

Tof63: Add link to BGA extension doc

{{Studio_Framework_Navigation}}

__TOC__

This is the CSS stylesheet of your game User Interface.

Styles defined on this file will be applied to the HTML elements you define in your HTML template (yourgame_yourgame.tpl), and to HTML elements you create dynamically with Javascript.

Usually, you are using CSS to:

1°) define the overall layout of your game
(ex: place the board on the top left, place player's hand beside, place the deck on the right, ...).

2°) create your CSS-sprites:
All images of your games should be gathered into a small number of image files. Then, using background-image and background-position CSS properties, you create HTML blocks that can display these images correctly.

Example:
<pre>
Example of CSS sprites (a black token and a white token, 20x20px each, embedded in the same "tokens.png" 40x20px image):

.white_token {
background-image: url('img/tokens.png');
background-position: 0px 0px;
}
.black_token {
background-image: url('img/tokens.png');
background-position: -20px 0px;
}
.token {
width: 20px;
height: 20px;
background-repeat: none;
}
</pre>

3°) ... anything else:

It is really easy to add and remove CSS classes dynamically from your Javascript with dojo.addClass and dojo.removeClass. It is also easy to check if an element has a class (dojo.hasClass) or to get all elements with a specific class (dojo.query).

This is why, very often, using CSS classes for the logic of your user interface allow you to do complex things easily.

Note: on the production platform, this file will be compressed and comments will be removed. Consequently, don't hesitate to put as many comments as necessary.

Important: ALL the CSS directives for your game must be included in this CSS file. You can't create additional CSS files and import them.

== Warning: using percentage in background-position ==

In the example above, you will see "background-position: -20px 0px;" is used for the black token. You could also write this as "background-position: -100% 0%;" which displays the image at the same offset, because it is relative to the size of the .token bounding box, and this means the size of your image file doesn't need to precisely match the size of objects on the screen (this can be easier to write, and you can also substitute different image files without having to rewrite all the css.) However, it is strongly recommended that if you do this, you also specify <code>background-size</code> as a percentage as well.

This is because, if the size of the div on screen after any further scaling - which is done for you by the framework to fit games into small windows - is not a whole integer number of pixels, then rounding must occur at some points in the calculation; if the background-size and background-position are calculated in different ways, the difference in rounding can result int the final image offsets being incorrect. This is most significant on Safari (on MacOS, iPhone and iPad) where the discrepancy can be substantial enough to make a game ''illegible''; but other browsers can be off by a few pixels as well. [https://jsfiddle.net/shadowphiar/yLq36mzt/ (external demo)]. To avoid this issue, either:

* choose one unit (pixels, em, percentages etc) and specify '''all''' the background-size and background-position offsets of a div in the same unit.
* adjust the size of your div so that, after any global scaling (this.gameinterface_zoomFactor), it will occupy an integer number of pixels on the screen.

== Warning: using Z-index ==

You may use z-index CSS property in your game interface, but you should pay attention to the following: BGA dialogs are displayed with a z-index of 950. If you want to use z-index safely, you should use value '''lower than 900'''.

About z-index: don't forget that if you are using a z-index, your element will be displayed above all elements that do not have a z-index. So it's no use to have big z-index values: 1 is enough most of the time :)

== Warning: using drop-shadow ==

Drop shadows can look nice, but they currently cause big performance issues on Safari, especially if you have more than 1 on the page at once. To ensure you don't cause issues on this browser, you have some alternatives.

* Use box-shadow instead. This only works for square drop-shadows.
* Bake the shadow into the image. That is, the png contains the shadow, and no shadow is needed on the css side. This only works when the shadow doesn't need to be dynamic.
* Disable drop-shadow in Safari:, using the <code>dj_safari</code> class which is automatically added to the <code>html</code> tag.

.game-element {
filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.7));
}

html.dj_safari .game-element {
filter: none;
}

== Tip: how to make your cards looks beautiful :) ==

This piece of CSS (to adapt to your needs) is adding rounded corners + a shadow to your card.

<pre>
border-radius: 10px;
border: 1px black solid;
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.4);
</pre>

== spectatorMode ==

When a spectator (= a player that is not part of the game) is viewing a game, the BGA framework add the CSS class "spectatorMode" to the wrapping HTML tag of your game.

This way, if you want to apply a special style to some elements of your game for spectators, you can do this in your CSS:

<pre>
.spectatorMode #your_element_id {
/* your special style */
}
</pre>

The most common usage of this is to hide some elements to spectators. For example, to hide "my hand" elements:

<pre>
.spectatorMode #my_hand {
display: none;
}
</pre>

== Support of the Dark mode ==
Currently, BGA doesn't support Dark mode natively. But it adds a <code>[data-theme="dark"]</code> to the html tag if the player's browser is set to prefer-dark-mode. So if you want to support the dark mode, you can use this to override the default light style when the user wants dark mode.
<pre>
html {
background: url('img/light-background.jpg'), #f2f2f2;
}
html[data-theme="dark"] {
background: url('img/dark-background.jpg'), #1d1d1d;
}
</pre>

Currently it is filled with the <code>prefers-color-scheme</code> media query of the browser.

It is better to use this instead of using <code>@media (prefers-color-scheme: dark) {</code> because the media query would always rely on the browser settings, while BGA has more control over <code>[data-theme="dark"]</code>.

If one day BGA supports the dark mode with an auto/light/dark toggle in the user settings on BGA, the <code>[data-theme="dark"]</code> will be adapted to use it, when the media query will ignore the player settings and your game may mismatch with the user settings.

For those using the [https://en.doc.boardgamearena.com/ChromeExtension BGA extension] , it already overrides the [data-theme] based on the user choice in the extension, as the future BGA setting would do.

[[Category:Studio]]

ChromeExtension

2025-05-27T17:39:14Z

Tof63: /* Advanced home page settings */

An extension for [https://chrome.google.com/webstore/detail/bga-chrome-extension/kchnhmpeopknjdjejognciimepllkacb Google Chrome], [https://addons.mozilla.org/addon/board-game-arena-bga-extension/ Firefox] and [https://addons.opera.com/extensions/details/board-game-arena-bga-extension/ Opera] brought to you by [https://boardgamearena.com/player?id=84278471 Flavien] and [https://boardgamearena.com/player?id=85644210 Christophe].

The Google Chrome extension is compatible with all Chromium based browsers (Edge, Brave ...) and could also be used with Kiwi Browser on Android devices.

The Firefox extension is also compatible with Firefox Mobile on Android devices.

If you have a problem, a suggestion, or just want to leave a nice note, you can write to us on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here]

This extension adds the following features to the boardgamearena.com website.

==List of current games==
If you've activated automatic table tracking (see next chapter), then the extension icon shows you the number of games you're currently expected to play.

Click on the extension icon to open the list of your games in progress and access them quickly.
[[File:Popup dark.png|none|thumb]]
You'll also find a list of pending invitations, as well as the tournaments you've entered.

The "Friend's tables" tab allow you to search for a table opened by one of your friends with a free chair.

== Settings ==
The "settings" tab lets you access some of the extension's parameters:

*Miscellaneous parameters :[[File:Misc params en.png|none|thumb|480x480px]]
*# Choice of language (English, French or German). Please contact us if you'd like to help us add another language!
*# A parameter to redirect the website links to the classic lobby instead of the new one.
*# A setting to hide games you can't play when you want to play in Arena mode. By default, BGA grays out these games.
*# A parameter to replace the default "wood" background by a solid-color background.
*# A parameter to change the behavior of the newsfeed, if it's activated the newsfeed contains only the messages of my groups.
*# A setting to force player names to be displayed in chat windows (by default, player names are hidden in private chats, and your name is hidden in game chats).
*# The last parameter lets you choose the type of emoticons you want to use in dark mode.
* Notifications:[[File:Notifications parameters en.png|none|thumb|480x480px]]
*# A parameter to enable or disable automatic tracking of the state of tables you are on. If this option is enabled, then the extension will be able to tell you when it's your turn to play at one of the tables you're at, but you'll always be seen as connected by other players. If this option is disabled, then the extension won't be able to tell you when it's your turn to play, but other players will only see you logged in if you're actually on the site.
*# When the tracking is enable, you can activate a sound notification ...
*# ... and associate the mp3 you prefer for this notification.
*# A parameter to disable flashing colors in the list of tables displayed by the extension.
*# The last parameter allows you to disable the animation that is added by default by BGA to the browser tabs when it's your turn to play on a table.
* Game parameters:[[File:Game parameters en.png|none|thumb|480x480px]]
*# A parameter to show / hide your friends' activity in the game logs
*# A parameter to show / hide the ELO score of the players in games.
*# A parameter to hide the chat bar in the game interface, so that it is only displayed when the mouse hovers over it.
*# A setting to hide timestamps in the game history.
*# A setting to deactivate the vertical bar added by the extension in some games, enabling navigation between players' boards.
* Home page settings : Parameters to select the elements that you want to display on the home page of the site. An advanced mode lets you define a template in HTML format (see next chapter).
* Game in progress page settings:
** Parameters to select the elements that you want to display on the 'Game in progress' page.
** Parameter to display the tables with more colors.
* Fast table creation. The extension adds a button in the lobby games to quickly start a table using the last settings used.[[File:Fast start en.png|thumb|480x480px|none]][[File:Fast create en.png|none|thumb|480x480px]]
*# Activate / deactivate feature
*# Set whether the table should be automatically opened to other players after creation.
*# Setting whether to exclude players stronger than you
*# Setting to exclude players with bad Karma (< 75%)
* Hidden games: Offer the possibility to undo the deletion of a game (see "Deleting a game" chapter).
* Ignored players: override player blocking in chat (see “Ignoring a player in "Mute a player in game chat” chapter)

== Advanced home page settings ==

By activating the advanced home page configuration, you can enter HTML code to place the elements you want exactly where you want them.

It is of course recommended that you have a minimum knowledge of HTML syntax to take full advantage of this option.

But by default, when you activate advanced mode, the extension offers you HTML code containing all possible elements. You can use this code as a starting point, deleting elements you don't need, moving elements around etc...

You can check your HTML code with an online tool like https://jsonformatter.org/html-validator

And if you've got an idea but can't write the HTML code for it, don't be frustrated - come and talk about it on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here] ;)
{| class="wikitable"
|+Predefined elements are:
!Code HTML
!Description
|-
|<nowiki><div id='bgaext-tournaments'></div></nowiki>
|Tournaments list
|-
|<nowiki><div id='bgaext-games-recent'></div></nowiki>
|New games list
|-
|<nowiki><div id='bgaext-games-popular'></div></nowiki>
|Popular games list
|-
|<nowiki><div id='bgaext-games-suggested'></div</nowiki>
|Recommended games list
|-
|<nowiki><div id='bgaext-achievements'></div></nowiki>
|Achievements
|-
|<nowiki><div id='bgaext-leaderboard'></div></nowiki>
|Hall of fame
|-
|<nowiki><div id='bgaext-newsfeed'></div></nowiki>
|Newfeed
|-
|<nowiki><div id='bgaext-service-status'></div></nowiki>
|Service status
|-
|<nowiki><div id='bgaext-games-classic'></div></nowiki>
|Discover our Classics
|-
|<nowiki><div id='bgaext-playmore'></div></nowiki>
|Play more!
|-
|<nowiki><div id='bgaext-partners-events'></div></nowiki>
|"News & Events" area
|}
You can potentially write any HTML code, but the extension defines the following styles to help you:

* <nowiki><div class='bgaext-flex-col'></nowiki> : the elements in this DIV will be placed in columns, one below the other, with a small margin to separate them.
* <nowiki><div class='bgaext-flex-row'></nowiki> : the elements in this DIV will be placed in line, across the entire page width, trying to respect the optimal size for each element.
* <nowiki><div class='bgaext-flex-row-distribution'></nowiki> : the elements in this DIV have all the same width, but you will certainly need to set a width for this DIV.

'''Example containing nearly all possible elements.'''

A first row of three columns contains :

* First column: Tournaments
* Second column: An area with two rows
** The first row contains a list of new games, popular games and recommended games.
** The second row contains the "Achievments" and the "Hall of fame"
* Third column: News feed and service status

A second line with two columns contains :

* First column: The list of classic games
* Second column: “Play more!” area

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki><div id='bgaext-leaderboard'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''A simpler example with fewer elements'''

The example contains a single line with, in order: the news feed, tournaments, new games and popular games.
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki></div></nowiki>
'''My favorite display'''
<style>
#bgaext-achievements { width: 600px; }
#bgaext-newsfeed .bga-homepage-newsfeed { max-height: 1050px; overflow: auto; }
#bgaext-partners-events { flex-grow: 0.4; }
</style>

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row-distribution'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-partners-events'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''Tips'''

To limit the height of the news feed, you can add CSS code like this, for example, to make a scrollbar appear:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: auto;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
or like this to truncate the content:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: hidden;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
To limit the height of the "Hall of fame", you can use the following code :
<style>
#bgaext-leaderboard .bga-ranked-player-list {
max-height: 525px;
overflow: hidden;
}
</style>

==Dark Mode==
[[File:Dark mode off.png|left|thumb]]
This icon in the top right-hand corner of the screen activates the dark mode for the entire site.

Once activated, you can then select a dominant colour by clicking on the arrow next to the icon to change the display theme slightly.

[[File:Dark mode on.png|left|thumb]]
[[File:Dark mode color.png|none|thumb|Choosing a color for dark mode]]
When you are in a game, it is displayed by default with the settings you have chosen for the site, but you can customise the game theme by selecting a color.

The site will continue to be displayed with the color you chose for the site, and the game will now be displayed with the color you chose for it.
==Hide friend's activities in game log==
The extension allow you to stop displaying your friend's activity in the game log.

You can find this option in the options of the extension and in the settings tabs of the extension menu. This is activated by default.
[[File:Friends activity pref en.png|none|thumb|364x364px]]

== Fast start button ==
The extension add a "Fast start" in the games in the lobby.

This button start a table with your default settings as the classic "Start" button do, but you stay in the lobby.

This button can also automatically open the created table to other players, which can be configured in the extension's options and menu.

==Navigation menu==
In games where this is of interest, the extension adds a vertical menu on the left-hand side for quick navigation between the players' boards. In some games, there are also shortcuts to key elements of the game, such as the main board.
[[File:Side menu.png|none|thumb]]
This menu can be activated or deactivated in the game settings.
[[File:Sidemenu pref en.png|none|thumb|500x500px]]

==Floating menu==
If you're playing on a small screen, it could be a good idea to save space by hiding the game log and player panels.

An option allows you to display these two elements in floating menus.
[[File:Floatingmenu pref en.png|none|thumb|500x500px]]
[[File:Floatingmenu.png|none|thumb]]

==Deleting a game==
The extension adds a button for 'deleting' a game. This button appears next to the button for starting the game in the list of games.

Deleted games no longer appear in the list of games or in the lobby.
[[File:Delete game.png|none|thumb]]
It is possible to recover a deleted game by the "settings" tab of the extension popup.
[[File:Delete game options en.png|none|thumb|800x800px]]

==Hide general chat==
[[File:Chat.png|left|thumb]]
An icon in the top right-hand corner of the screen allows you to show or hide the general chat.

This icon is not displayed when you are in a game and only allows you to hide the general chat; it does not allow you to stop receiving private messages or to hide the conversation in a game.

== Mute a player in game chat ==
[[File:Mute icon.png|left|thumb]]
In the game chat popup, the extension adds a new icon that lets you mute a player.

You can mute up to 10 players and manage the muted players list in "settings" tab of the extension.

This feature is designed to let you ignore a toxic player and finish the game in peace, but it doesn't report the user's behavior to Board Game Arena.

ChromeExtension

2025-05-27T17:37:59Z

Tof63: /* Settings */

An extension for [https://chrome.google.com/webstore/detail/bga-chrome-extension/kchnhmpeopknjdjejognciimepllkacb Google Chrome], [https://addons.mozilla.org/addon/board-game-arena-bga-extension/ Firefox] and [https://addons.opera.com/extensions/details/board-game-arena-bga-extension/ Opera] brought to you by [https://boardgamearena.com/player?id=84278471 Flavien] and [https://boardgamearena.com/player?id=85644210 Christophe].

The Google Chrome extension is compatible with all Chromium based browsers (Edge, Brave ...) and could also be used with Kiwi Browser on Android devices.

The Firefox extension is also compatible with Firefox Mobile on Android devices.

If you have a problem, a suggestion, or just want to leave a nice note, you can write to us on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here]

This extension adds the following features to the boardgamearena.com website.

==List of current games==
If you've activated automatic table tracking (see next chapter), then the extension icon shows you the number of games you're currently expected to play.

Click on the extension icon to open the list of your games in progress and access them quickly.
[[File:Popup dark.png|none|thumb]]
You'll also find a list of pending invitations, as well as the tournaments you've entered.

The "Friend's tables" tab allow you to search for a table opened by one of your friends with a free chair.

== Settings ==
The "settings" tab lets you access some of the extension's parameters:

*Miscellaneous parameters :[[File:Misc params en.png|none|thumb|480x480px]]
*# Choice of language (English, French or German). Please contact us if you'd like to help us add another language!
*# A parameter to redirect the website links to the classic lobby instead of the new one.
*# A setting to hide games you can't play when you want to play in Arena mode. By default, BGA grays out these games.
*# A parameter to replace the default "wood" background by a solid-color background.
*# A parameter to change the behavior of the newsfeed, if it's activated the newsfeed contains only the messages of my groups.
*# A setting to force player names to be displayed in chat windows (by default, player names are hidden in private chats, and your name is hidden in game chats).
*# The last parameter lets you choose the type of emoticons you want to use in dark mode.
* Notifications:[[File:Notifications parameters en.png|none|thumb|480x480px]]
*# A parameter to enable or disable automatic tracking of the state of tables you are on. If this option is enabled, then the extension will be able to tell you when it's your turn to play at one of the tables you're at, but you'll always be seen as connected by other players. If this option is disabled, then the extension won't be able to tell you when it's your turn to play, but other players will only see you logged in if you're actually on the site.
*# When the tracking is enable, you can activate a sound notification ...
*# ... and associate the mp3 you prefer for this notification.
*# A parameter to disable flashing colors in the list of tables displayed by the extension.
*# The last parameter allows you to disable the animation that is added by default by BGA to the browser tabs when it's your turn to play on a table.
* Game parameters:[[File:Game parameters en.png|none|thumb|480x480px]]
*# A parameter to show / hide your friends' activity in the game logs
*# A parameter to show / hide the ELO score of the players in games.
*# A parameter to hide the chat bar in the game interface, so that it is only displayed when the mouse hovers over it.
*# A setting to hide timestamps in the game history.
*# A setting to deactivate the vertical bar added by the extension in some games, enabling navigation between players' boards.
* Home page settings : Parameters to select the elements that you want to display on the home page of the site. An advanced mode lets you define a template in HTML format (see next chapter).
* Game in progress page settings:
** Parameters to select the elements that you want to display on the 'Game in progress' page.
** Parameter to display the tables with more colors.
* Fast table creation. The extension adds a button in the lobby games to quickly start a table using the last settings used.[[File:Fast start en.png|thumb|480x480px|none]][[File:Fast create en.png|none|thumb|480x480px]]
*# Activate / deactivate feature
*# Set whether the table should be automatically opened to other players after creation.
*# Setting whether to exclude players stronger than you
*# Setting to exclude players with bad Karma (< 75%)
* Hidden games: Offer the possibility to undo the deletion of a game (see "Deleting a game" chapter).
* Ignored players: override player blocking in chat (see “Ignoring a player in "Mute a player in game chat” chapter)

== Advanced home page settings ==

By activating the advanced home page configuration, you can enter HTML code to place the elements you want exactly where you want them.

It is of course recommended that you have a minimum knowledge of HTML syntax to take full advantage of this option.

But by default, when you activate advanced mode, the extension offers you HTML code containing all possible elements. You can use this code as a starting point, deleting elements you don't need, moving elements around etc...

You can check your HTML code with an online tool like https://jsonformatter.org/html-validator

And if you've got an idea but can't write the HTML code for it, don't be frustrated - come and talk about it on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here] ;)
{| class="wikitable"
|+Predefined elements are:
!Code HTML
!Description
|-
|<nowiki><div id='bgaext-tournaments'></div></nowiki>
|Tournaments list
|-
|<nowiki><div id='bgaext-games-recent'></div></nowiki>
|New games list
|-
|<nowiki><div id='bgaext-games-popular'></div></nowiki>
|Popular games list
|-
|<nowiki><div id='bgaext-games-suggested'></div</nowiki>
|Recommended games list
|-
|<nowiki><div id='bgaext-achievements'></div></nowiki>
|Achievements
|-
|<nowiki><div id='bgaext-leaderboard'></div></nowiki>
|Hall of fame
|-
|<nowiki><div id='bgaext-newsfeed'></div></nowiki>
|Newfeed
|-
|<nowiki><div id='bgaext-service-status'></div></nowiki>
|Service status
|-
|<nowiki><div id='bgaext-games-classic'></div></nowiki>
|Discover our Classics
|-
|<nowiki><div id='bgaext-playmore'></div></nowiki>
|Play more!
|-
|<nowiki><div id='bgaext-partners-events'></div></nowiki>
|"News & Events" area
|}
You can potentially write any HTML code, but the extension defines the following styles to help you:

* <nowiki><div class='bgaext-flex-col'></nowiki> : the elements in this DIV will be placed in columns, one below the other, with a small margin to separate them.
* <nowiki><div class='bgaext-flex-row'></nowiki> : the elements in this DIV will be placed in line, across the entire page width, trying to respect the optimal size for each element.
* <nowiki><div class='bgaext-flex-row-distribution'></nowiki> : the elements in this DIV have all the same width, but you will certainly need to set a width for this DIV.

'''Example containing all possible elements.'''

A first row of three columns contains :

* First column: Tournaments
* Second column: An area with two rows
** The first row contains a list of new games, popular games and recommended games.
** The second row contains the "Achievments" and the "Hall of fame"
* Third column: News feed and service status

A second line with two columns contains :

* First column: The list of classic games
* Second column: “Play more!” area

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki><div id='bgaext-leaderboard'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''A simpler example with fewer elements'''

The example contains a single line with, in order: the news feed, tournaments, new games and popular games.
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki></div></nowiki>
'''My favorite display'''
<style>
#bgaext-achievements { width: 600px; }
#bgaext-newsfeed .bga-homepage-newsfeed { max-height: 1050px; overflow: auto; }
#bgaext-partners-events { flex-grow: 0.4; }
</style>

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row-distribution'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-partners-events'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''Tips'''

To limit the height of the news feed, you can add CSS code like this, for example, to make a scrollbar appear:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: auto;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
or like this to truncate the content:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: hidden;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
To limit the height of the "Hall of fame", you can use the following code :
<style>
#bgaext-leaderboard .bga-ranked-player-list {
max-height: 525px;
overflow: hidden;
}
</style>

==Dark Mode==
[[File:Dark mode off.png|left|thumb]]
This icon in the top right-hand corner of the screen activates the dark mode for the entire site.

Once activated, you can then select a dominant colour by clicking on the arrow next to the icon to change the display theme slightly.

[[File:Dark mode on.png|left|thumb]]
[[File:Dark mode color.png|none|thumb|Choosing a color for dark mode]]
When you are in a game, it is displayed by default with the settings you have chosen for the site, but you can customise the game theme by selecting a color.

The site will continue to be displayed with the color you chose for the site, and the game will now be displayed with the color you chose for it.
==Hide friend's activities in game log==
The extension allow you to stop displaying your friend's activity in the game log.

You can find this option in the options of the extension and in the settings tabs of the extension menu. This is activated by default.
[[File:Friends activity pref en.png|none|thumb|364x364px]]

== Fast start button ==
The extension add a "Fast start" in the games in the lobby.

This button start a table with your default settings as the classic "Start" button do, but you stay in the lobby.

This button can also automatically open the created table to other players, which can be configured in the extension's options and menu.

==Navigation menu==
In games where this is of interest, the extension adds a vertical menu on the left-hand side for quick navigation between the players' boards. In some games, there are also shortcuts to key elements of the game, such as the main board.
[[File:Side menu.png|none|thumb]]
This menu can be activated or deactivated in the game settings.
[[File:Sidemenu pref en.png|none|thumb|500x500px]]

==Floating menu==
If you're playing on a small screen, it could be a good idea to save space by hiding the game log and player panels.

An option allows you to display these two elements in floating menus.
[[File:Floatingmenu pref en.png|none|thumb|500x500px]]
[[File:Floatingmenu.png|none|thumb]]

==Deleting a game==
The extension adds a button for 'deleting' a game. This button appears next to the button for starting the game in the list of games.

Deleted games no longer appear in the list of games or in the lobby.
[[File:Delete game.png|none|thumb]]
It is possible to recover a deleted game by the "settings" tab of the extension popup.
[[File:Delete game options en.png|none|thumb|800x800px]]

==Hide general chat==
[[File:Chat.png|left|thumb]]
An icon in the top right-hand corner of the screen allows you to show or hide the general chat.

This icon is not displayed when you are in a game and only allows you to hide the general chat; it does not allow you to stop receiving private messages or to hide the conversation in a game.

== Mute a player in game chat ==
[[File:Mute icon.png|left|thumb]]
In the game chat popup, the extension adds a new icon that lets you mute a player.

You can mute up to 10 players and manage the muted players list in "settings" tab of the extension.

This feature is designed to let you ignore a toxic player and finish the game in peace, but it doesn't report the user's behavior to Board Game Arena.

File:Fast create en.png

2025-05-27T17:34:32Z

Tof63:

fast create en

File:Game parameters en.png

2025-05-27T17:32:41Z

Tof63:

game parameters en

File:Notifications parameters en.png

2025-05-27T17:31:32Z

Tof63:

notifications parameters en

File:Misc params en.png

2025-05-27T17:25:46Z

Tof63:

misc params en

ChromeExtension

2025-04-11T15:03:30Z

Tof63:

An extension for [https://chrome.google.com/webstore/detail/bga-chrome-extension/kchnhmpeopknjdjejognciimepllkacb Google Chrome], [https://addons.mozilla.org/addon/board-game-arena-bga-extension/ Firefox] and [https://addons.opera.com/extensions/details/board-game-arena-bga-extension/ Opera] brought to you by [https://boardgamearena.com/player?id=84278471 Flavien] and [https://boardgamearena.com/player?id=85644210 Christophe].

The Google Chrome extension is compatible with all Chromium based browsers (Edge, Brave ...) and could also be used with Kiwi Browser on Android devices.

The Firefox extension is also compatible with Firefox Mobile on Android devices.

If you have a problem, a suggestion, or just want to leave a nice note, you can write to us on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here]

This extension adds the following features to the boardgamearena.com website.

==List of current games==
If you've activated automatic table tracking (see next chapter), then the extension icon shows you the number of games you're currently expected to play.

Click on the extension icon to open the list of your games in progress and access them quickly.
[[File:Popup dark.png|none|thumb]]
You'll also find a list of pending invitations, as well as the tournaments you've entered.

The "Friend's tables" tab allow you to search for a table opened by one of your friends with a free chair.

== Settings ==
The "settings" tab lets you access some of the extension's parameters:

* [[File:Popup settings dark en.png|thumb|439x439px]]Miscellaneous parameters :
** A parameter to enable or disable automatic tracking of the state of tables you are on. If this option is enabled, then the extension will be able to tell you when it's your turn to play at one of the tables you're at, but you'll always be seen as connected by other players. If this option is disabled, then the extension won't be able to tell you when it's your turn to play, but other players will only see you logged in if you're actually on the site.
** When the tracking is enable, you can activate a sound notification and associate the mp3 you prefer for this notification.
** A parameter to redirect the website links to the classic lobby instead of the new one.
** A parameter to change the behavior of the 'Fast create' button added to the games in the lobby.
** A parameter to replace the default "wood" background by a solid-color background.
** A parameter to change the behavior of the newsfeed, if it's activated the newsfeed contains only the messages of my groups.
** A setting to force player names to be displayed in chat windows (by default, player names are hidden in private chats, and your name is hidden in game chats).
* Game parameters:
** A parameter to show / hide your friends' activity in the game logs
** A parameter to show / hide the ELO score of the players in games.
* Home page settings : Parameters to select the elements that you want to display on the home page of the site.
* Game in progress page settings:
** Parameters to select the elements that you want to display on the 'Game in progress' page.
** Parameter to display the tables with more colors.
* Fast table creation. The extension adds a button in the lobby games to quickly start a table using the last settings used.
** [[File:Fast start en.png|thumb|385x385px]]Set whether the table should be automatically opened to other players after creation.
** Setting whether to exclude players stronger than you
** Setting to exclude players with bad Karma (< 75%)
* Hidden games: Offer the possibility to undo the deletion of a game (see "Deleting a game" chapter).
* Ignored players: override player blocking in chat (see “Ignoring a player in "Mute a player in game chat” chapter)

== Advanced home page settings ==

By activating the advanced home page configuration, you can enter HTML code to place the elements you want exactly where you want them.

It is of course recommended that you have a minimum knowledge of HTML syntax to take full advantage of this option.

But by default, when you activate advanced mode, the extension offers you HTML code containing all possible elements. You can use this code as a starting point, deleting elements you don't need, moving elements around etc...

You can check your HTML code with an online tool like https://jsonformatter.org/html-validator

And if you've got an idea but can't write the HTML code for it, don't be frustrated - come and talk about it on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here] ;)
{| class="wikitable"
|+Predefined elements are:
!Code HTML
!Description
|-
|<nowiki><div id='bgaext-tournaments'></div></nowiki>
|Tournaments list
|-
|<nowiki><div id='bgaext-games-recent'></div></nowiki>
|New games list
|-
|<nowiki><div id='bgaext-games-popular'></div></nowiki>
|Popular games list
|-
|<nowiki><div id='bgaext-games-suggested'></div</nowiki>
|Recommended games list
|-
|<nowiki><div id='bgaext-achievements'></div></nowiki>
|Achievements
|-
|<nowiki><div id='bgaext-leaderboard'></div></nowiki>
|Hall of fame
|-
|<nowiki><div id='bgaext-newsfeed'></div></nowiki>
|Newfeed
|-
|<nowiki><div id='bgaext-service-status'></div></nowiki>
|Service status
|-
|<nowiki><div id='bgaext-games-classic'></div></nowiki>
|Discover our Classics
|-
|<nowiki><div id='bgaext-playmore'></div></nowiki>
|Play more!
|}
You can potentially write any HTML code, but the extension defines the following styles to help you:

* <nowiki><div class='bgaext-flex-col'></nowiki> : the elements in this DIV will be placed in columns, one below the other, with a small margin to separate them.
* <nowiki><div class='bgaext-flex-row'></nowiki> : the elements in this DIV will be placed in line, across the entire page width, trying to respect the optimal size for each element.
* <nowiki><div class='bgaext-flex-row-distribution'></nowiki> : the elements in this DIV have all the same width, but you will certainly need to set a width for this DIV.

'''Example containing all possible elements.'''

A first row of three columns contains :

* First column: Tournaments
* Second column: An area with two rows
** The first row contains a list of new games, popular games and recommended games.
** The second row contains the "Achievments" and the "Hall of fame"
* Third column: News feed and service status

A second line with two columns contains :

* First column: The list of classic games
* Second column: “Play more!” area

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki><div id='bgaext-leaderboard'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''A simpler example with fewer elements'''

The example contains a single line with, in order: the news feed, tournaments, new games and popular games.
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki></div></nowiki>
'''My favorite display'''
<style>
#bgaext-achievements { width: 600px; }
#bgaext-newsfeed .bga-homepage-newsfeed { max-height: 1050px; overflow: auto; }
</style>

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row-distribution'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''Tips'''

To limit the height of the news feed, you can add CSS code like this, for example, to make a scrollbar appear:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: auto;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
or like this to truncate the content:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: hidden;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
To limit the height of the "Hall of fame", you can use the following code :
<style>
#bgaext-leaderboard .bga-ranked-player-list {
max-height: 525px;
overflow: hidden;
}
</style>

==Dark Mode==
[[File:Dark mode off.png|left|thumb]]
This icon in the top right-hand corner of the screen activates the dark mode for the entire site.

Once activated, you can then select a dominant colour by clicking on the arrow next to the icon to change the display theme slightly.

[[File:Dark mode on.png|left|thumb]]
[[File:Dark mode color.png|none|thumb|Choosing a color for dark mode]]
When you are in a game, it is displayed by default with the settings you have chosen for the site, but you can customise the game theme by selecting a color.

The site will continue to be displayed with the color you chose for the site, and the game will now be displayed with the color you chose for it.
==Hide friend's activities in game log==
The extension allow you to stop displaying your friend's activity in the game log.

You can find this option in the options of the extension and in the settings tabs of the extension menu. This is activated by default.
[[File:Friends activity pref en.png|none|thumb|364x364px]]

== Fast start button ==
The extension add a "Fast start" in the games in the lobby.

This button start a table with your default settings as the classic "Start" button do, but you stay in the lobby.

This button can also automatically open the created table to other players, which can be configured in the extension's options and menu.

==Navigation menu==
In games where this is of interest, the extension adds a vertical menu on the left-hand side for quick navigation between the players' boards. In some games, there are also shortcuts to key elements of the game, such as the main board.
[[File:Side menu.png|none|thumb]]
This menu can be activated or deactivated in the game settings.
[[File:Sidemenu pref en.png|none|thumb|500x500px]]

==Floating menu==
If you're playing on a small screen, it could be a good idea to save space by hiding the game log and player panels.

An option allows you to display these two elements in floating menus.
[[File:Floatingmenu pref en.png|none|thumb|500x500px]]
[[File:Floatingmenu.png|none|thumb]]

==Deleting a game==
The extension adds a button for 'deleting' a game. This button appears next to the button for starting the game in the list of games.

Deleted games no longer appear in the list of games or in the lobby.
[[File:Delete game.png|none|thumb]]
It is possible to recover a deleted game by the "settings" tab of the extension popup.
[[File:Delete game options en.png|none|thumb|800x800px]]

==Hide general chat==
[[File:Chat.png|left|thumb]]
An icon in the top right-hand corner of the screen allows you to show or hide the general chat.

This icon is not displayed when you are in a game and only allows you to hide the general chat; it does not allow you to stop receiving private messages or to hide the conversation in a game.

== Mute a player in game chat ==
[[File:Mute icon.png|left|thumb]]
In the game chat popup, the extension adds a new icon that lets you mute a player.

You can mute up to 10 players and manage the muted players list in "settings" tab of the extension.

This feature is designed to let you ignore a toxic player and finish the game in peace, but it doesn't report the user's behavior to Board Game Arena.

ChromeExtension

2025-04-10T07:18:18Z

Tof63:

An extension for [https://chrome.google.com/webstore/detail/bga-chrome-extension/kchnhmpeopknjdjejognciimepllkacb Google Chrome] and [https://addons.mozilla.org/addon/board-game-arena-bga-extension/ Firefox] brought to you by [https://boardgamearena.com/player?id=84278471 Flavien] and [https://boardgamearena.com/player?id=85644210 Christophe].

The Google Chrome extension is compatible with all Chromium based browsers (Edge, Brave ...) and could also be used with Kiwi Browser on Android devices.

The Firefox extension is also compatible with Firefox Mobile on Android devices.

If you have a problem, a suggestion, or just want to leave a nice note, you can write to us on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here]

This extension adds the following features to the boardgamearena.com website.

==List of current games==
If you've activated automatic table tracking (see next chapter), then the extension icon shows you the number of games you're currently expected to play.

Click on the extension icon to open the list of your games in progress and access them quickly.
[[File:Popup dark.png|none|thumb]]
You'll also find a list of pending invitations, as well as the tournaments you've entered.

The "Friend's tables" tab allow you to search for a table opened by one of your friends with a free chair.

== Settings ==
The "settings" tab lets you access some of the extension's parameters:

* [[File:Popup settings dark en.png|thumb|439x439px]]Miscellaneous parameters :
** A parameter to enable or disable automatic tracking of the state of tables you are on. If this option is enabled, then the extension will be able to tell you when it's your turn to play at one of the tables you're at, but you'll always be seen as connected by other players. If this option is disabled, then the extension won't be able to tell you when it's your turn to play, but other players will only see you logged in if you're actually on the site.
** When the tracking is enable, you can activate a sound notification and associate the mp3 you prefer for this notification.
** A parameter to redirect the website links to the classic lobby instead of the new one.
** A parameter to change the behavior of the 'Fast create' button added to the games in the lobby.
** A parameter to replace the default "wood" background by a solid-color background.
** A parameter to change the behavior of the newsfeed, if it's activated the newsfeed contains only the messages of my groups.
** A setting to force player names to be displayed in chat windows (by default, player names are hidden in private chats, and your name is hidden in game chats).
* Game parameters:
** A parameter to show / hide your friends' activity in the game logs
** A parameter to show / hide the ELO score of the players in games.
* Home page settings : Parameters to select the elements that you want to display on the home page of the site.
* Game in progress page settings:
** Parameters to select the elements that you want to display on the 'Game in progress' page.
** Parameter to display the tables with more colors.
* Fast table creation. The extension adds a button in the lobby games to quickly start a table using the last settings used.
** [[File:Fast start en.png|thumb|385x385px]]Set whether the table should be automatically opened to other players after creation.
** Setting whether to exclude players stronger than you
** Setting to exclude players with bad Karma (< 75%)
* Hidden games: Offer the possibility to undo the deletion of a game (see "Deleting a game" chapter).
* Ignored players: override player blocking in chat (see “Ignoring a player in "Mute a player in game chat” chapter)

== Advanced home page settings ==

By activating the advanced home page configuration, you can enter HTML code to place the elements you want exactly where you want them.

It is of course recommended that you have a minimum knowledge of HTML syntax to take full advantage of this option.

But by default, when you activate advanced mode, the extension offers you HTML code containing all possible elements. You can use this code as a starting point, deleting elements you don't need, moving elements around etc...

You can check your HTML code with an online tool like https://jsonformatter.org/html-validator

And if you've got an idea but can't write the HTML code for it, don't be frustrated - come and talk about it on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here] ;)
{| class="wikitable"
|+Predefined elements are:
!Code HTML
!Description
|-
|<nowiki><div id='bgaext-tournaments'></div></nowiki>
|Tournaments list
|-
|<nowiki><div id='bgaext-games-recent'></div></nowiki>
|New games list
|-
|<nowiki><div id='bgaext-games-popular'></div></nowiki>
|Popular games list
|-
|<nowiki><div id='bgaext-games-suggested'></div</nowiki>
|Recommended games list
|-
|<nowiki><div id='bgaext-achievements'></div></nowiki>
|Achievements
|-
|<nowiki><div id='bgaext-leaderboard'></div></nowiki>
|Hall of fame
|-
|<nowiki><div id='bgaext-newsfeed'></div></nowiki>
|Newfeed
|-
|<nowiki><div id='bgaext-service-status'></div></nowiki>
|Service status
|-
|<nowiki><div id='bgaext-games-classic'></div></nowiki>
|Discover our Classics
|-
|<nowiki><div id='bgaext-playmore'></div></nowiki>
|Play more!
|}
You can potentially write any HTML code, but the extension defines the following styles to help you:

* <nowiki><div class='bgaext-flex-col'></nowiki> : the elements in this DIV will be placed in columns, one below the other, with a small margin to separate them.
* <nowiki><div class='bgaext-flex-row'></nowiki> : the elements in this DIV will be placed in line, across the entire page width, trying to respect the optimal size for each element.
* <nowiki><div class='bgaext-flex-row-distribution'></nowiki> : the elements in this DIV have all the same width, but you will certainly need to set a width for this DIV.

'''Example containing all possible elements.'''

A first row of three columns contains :

* First column: Tournaments
* Second column: An area with two rows
** The first row contains a list of new games, popular games and recommended games.
** The second row contains the "Achievments" and the "Hall of fame"
* Third column: News feed and service status

A second line with two columns contains :

* First column: The list of classic games
* Second column: “Play more!” area

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki><div id='bgaext-leaderboard'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''A simpler example with fewer elements'''

The example contains a single line with, in order: the news feed, tournaments, new games and popular games.
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki></div></nowiki>
'''My favorite display'''
<style>
#bgaext-achievements { width: 600px; }
#bgaext-newsfeed .bga-homepage-newsfeed { max-height: 1050px; overflow: auto; }
</style>

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row-distribution'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''Tips'''

To limit the height of the news feed, you can add CSS code like this, for example, to make a scrollbar appear:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: auto;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
or like this to truncate the content:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: hidden;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
To limit the height of the "Hall of fame", you can use the following code :
<style>
#bgaext-leaderboard .bga-ranked-player-list {
max-height: 525px;
overflow: hidden;
}
</style>

==Dark Mode==
[[File:Dark mode off.png|left|thumb]]
This icon in the top right-hand corner of the screen activates the dark mode for the entire site.

Once activated, you can then select a dominant colour by clicking on the arrow next to the icon to change the display theme slightly.

[[File:Dark mode on.png|left|thumb]]
[[File:Dark mode color.png|none|thumb|Choosing a color for dark mode]]
When you are in a game, it is displayed by default with the settings you have chosen for the site, but you can customise the game theme by selecting a color.

The site will continue to be displayed with the color you chose for the site, and the game will now be displayed with the color you chose for it.
==Hide friend's activities in game log==
The extension allow you to stop displaying your friend's activity in the game log.

You can find this option in the options of the extension and in the settings tabs of the extension menu. This is activated by default.
[[File:Friends activity pref en.png|none|thumb|364x364px]]

== Fast start button ==
The extension add a "Fast start" in the games in the lobby.

This button start a table with your default settings as the classic "Start" button do, but you stay in the lobby.

This button can also automatically open the created table to other players, which can be configured in the extension's options and menu.

==Navigation menu==
In games where this is of interest, the extension adds a vertical menu on the left-hand side for quick navigation between the players' boards. In some games, there are also shortcuts to key elements of the game, such as the main board.
[[File:Side menu.png|none|thumb]]
This menu can be activated or deactivated in the game settings.
[[File:Sidemenu pref en.png|none|thumb|500x500px]]

==Floating menu==
If you're playing on a small screen, it could be a good idea to save space by hiding the game log and player panels.

An option allows you to display these two elements in floating menus.
[[File:Floatingmenu pref en.png|none|thumb|500x500px]]
[[File:Floatingmenu.png|none|thumb]]

==Deleting a game==
The extension adds a button for 'deleting' a game. This button appears next to the button for starting the game in the list of games.

Deleted games no longer appear in the list of games or in the lobby.
[[File:Delete game.png|none|thumb]]
It is possible to recover a deleted game by the "settings" tab of the extension popup.
[[File:Delete game options en.png|none|thumb|800x800px]]

==Hide general chat==
[[File:Chat.png|left|thumb]]
An icon in the top right-hand corner of the screen allows you to show or hide the general chat.

This icon is not displayed when you are in a game and only allows you to hide the general chat; it does not allow you to stop receiving private messages or to hide the conversation in a game.

== Mute a player in game chat ==
[[File:Mute icon.png|left|thumb]]
In the game chat popup, the extension adds a new icon that lets you mute a player.

You can mute up to 10 players and manage the muted players list in "settings" tab of the extension.

This feature is designed to let you ignore a toxic player and finish the game in peace, but it doesn't report the user's behavior to Board Game Arena.

ChromeExtension

2025-04-10T07:16:12Z

Tof63:

An extension for [https://chrome.google.com/webstore/detail/bga-chrome-extension/kchnhmpeopknjdjejognciimepllkacb Google Chrome] and [https://addons.mozilla.org/addon/board-game-arena-bga-extension/ Firefox] brought to you by [https://boardgamearena.com/player?id=84278471 Flavien] and [https://boardgamearena.com/player?id=85644210 Christophe].

The Google Chrome extension is compatible with all Chromium based browsers (Edge, Brave ...) and could also be used with Firefox Mobile and Kiwi Browser on Android devices.

If you have a problem, a suggestion, or just want to leave a nice note, you can write to us on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here]

This extension adds the following features to the boardgamearena.com website.

==List of current games==
If you've activated automatic table tracking (see next chapter), then the extension icon shows you the number of games you're currently expected to play.

Click on the extension icon to open the list of your games in progress and access them quickly.
[[File:Popup dark.png|none|thumb]]
You'll also find a list of pending invitations, as well as the tournaments you've entered.

The "Friend's tables" tab allow you to search for a table opened by one of your friends with a free chair.

== Settings ==
The "settings" tab lets you access some of the extension's parameters:

* [[File:Popup settings dark en.png|thumb|439x439px]]Miscellaneous parameters :
** A parameter to enable or disable automatic tracking of the state of tables you are on. If this option is enabled, then the extension will be able to tell you when it's your turn to play at one of the tables you're at, but you'll always be seen as connected by other players. If this option is disabled, then the extension won't be able to tell you when it's your turn to play, but other players will only see you logged in if you're actually on the site.
** When the tracking is enable, you can activate a sound notification and associate the mp3 you prefer for this notification.
** A parameter to redirect the website links to the classic lobby instead of the new one.
** A parameter to change the behavior of the 'Fast create' button added to the games in the lobby.
** A parameter to replace the default "wood" background by a solid-color background.
** A parameter to change the behavior of the newsfeed, if it's activated the newsfeed contains only the messages of my groups.
** A setting to force player names to be displayed in chat windows (by default, player names are hidden in private chats, and your name is hidden in game chats).
* Game parameters:
** A parameter to show / hide your friends' activity in the game logs
** A parameter to show / hide the ELO score of the players in games.
* Home page settings : Parameters to select the elements that you want to display on the home page of the site.
* Game in progress page settings:
** Parameters to select the elements that you want to display on the 'Game in progress' page.
** Parameter to display the tables with more colors.
* Fast table creation. The extension adds a button in the lobby games to quickly start a table using the last settings used.
** [[File:Fast start en.png|thumb|385x385px]]Set whether the table should be automatically opened to other players after creation.
** Setting whether to exclude players stronger than you
** Setting to exclude players with bad Karma (< 75%)
* Hidden games: Offer the possibility to undo the deletion of a game (see "Deleting a game" chapter).
* Ignored players: override player blocking in chat (see “Ignoring a player in "Mute a player in game chat” chapter)

== Advanced home page settings ==

By activating the advanced home page configuration, you can enter HTML code to place the elements you want exactly where you want them.

It is of course recommended that you have a minimum knowledge of HTML syntax to take full advantage of this option.

But by default, when you activate advanced mode, the extension offers you HTML code containing all possible elements. You can use this code as a starting point, deleting elements you don't need, moving elements around etc...

You can check your HTML code with an online tool like https://jsonformatter.org/html-validator

And if you've got an idea but can't write the HTML code for it, don't be frustrated - come and talk about it on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here] ;)
{| class="wikitable"
|+Predefined elements are:
!Code HTML
!Description
|-
|<nowiki><div id='bgaext-tournaments'></div></nowiki>
|Tournaments list
|-
|<nowiki><div id='bgaext-games-recent'></div></nowiki>
|New games list
|-
|<nowiki><div id='bgaext-games-popular'></div></nowiki>
|Popular games list
|-
|<nowiki><div id='bgaext-games-suggested'></div</nowiki>
|Recommended games list
|-
|<nowiki><div id='bgaext-achievements'></div></nowiki>
|Achievements
|-
|<nowiki><div id='bgaext-leaderboard'></div></nowiki>
|Hall of fame
|-
|<nowiki><div id='bgaext-newsfeed'></div></nowiki>
|Newfeed
|-
|<nowiki><div id='bgaext-service-status'></div></nowiki>
|Service status
|-
|<nowiki><div id='bgaext-games-classic'></div></nowiki>
|Discover our Classics
|-
|<nowiki><div id='bgaext-playmore'></div></nowiki>
|Play more!
|}
You can potentially write any HTML code, but the extension defines the following styles to help you:

* <nowiki><div class='bgaext-flex-col'></nowiki> : the elements in this DIV will be placed in columns, one below the other, with a small margin to separate them.
* <nowiki><div class='bgaext-flex-row'></nowiki> : the elements in this DIV will be placed in line, across the entire page width, trying to respect the optimal size for each element.
* <nowiki><div class='bgaext-flex-row-distribution'></nowiki> : the elements in this DIV have all the same width, but you will certainly need to set a width for this DIV.

'''Example containing all possible elements.'''

A first row of three columns contains :

* First column: Tournaments
* Second column: An area with two rows
** The first row contains a list of new games, popular games and recommended games.
** The second row contains the "Achievments" and the "Hall of fame"
* Third column: News feed and service status

A second line with two columns contains :

* First column: The list of classic games
* Second column: “Play more!” area

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki><div id='bgaext-leaderboard'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''A simpler example with fewer elements'''

The example contains a single line with, in order: the news feed, tournaments, new games and popular games.
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki></div></nowiki>
'''My favorite display'''
<style>
#bgaext-achievements { width: 600px; }
#bgaext-newsfeed .bga-homepage-newsfeed { max-height: 1050px; overflow: auto; }
</style>

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row-distribution'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''Tips'''

To limit the height of the news feed, you can add CSS code like this, for example, to make a scrollbar appear:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: auto;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
or like this to truncate the content:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: hidden;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
To limit the height of the "Hall of fame", you can use the following code :
<style>
#bgaext-leaderboard .bga-ranked-player-list {
max-height: 525px;
overflow: hidden;
}
</style>

==Dark Mode==
[[File:Dark mode off.png|left|thumb]]
This icon in the top right-hand corner of the screen activates the dark mode for the entire site.

Once activated, you can then select a dominant colour by clicking on the arrow next to the icon to change the display theme slightly.

[[File:Dark mode on.png|left|thumb]]
[[File:Dark mode color.png|none|thumb|Choosing a color for dark mode]]
When you are in a game, it is displayed by default with the settings you have chosen for the site, but you can customise the game theme by selecting a color.

The site will continue to be displayed with the color you chose for the site, and the game will now be displayed with the color you chose for it.
==Hide friend's activities in game log==
The extension allow you to stop displaying your friend's activity in the game log.

You can find this option in the options of the extension and in the settings tabs of the extension menu. This is activated by default.
[[File:Friends activity pref en.png|none|thumb|364x364px]]

== Fast start button ==
The extension add a "Fast start" in the games in the lobby.

This button start a table with your default settings as the classic "Start" button do, but you stay in the lobby.

This button can also automatically open the created table to other players, which can be configured in the extension's options and menu.

==Navigation menu==
In games where this is of interest, the extension adds a vertical menu on the left-hand side for quick navigation between the players' boards. In some games, there are also shortcuts to key elements of the game, such as the main board.
[[File:Side menu.png|none|thumb]]
This menu can be activated or deactivated in the game settings.
[[File:Sidemenu pref en.png|none|thumb|500x500px]]

==Floating menu==
If you're playing on a small screen, it could be a good idea to save space by hiding the game log and player panels.

An option allows you to display these two elements in floating menus.
[[File:Floatingmenu pref en.png|none|thumb|500x500px]]
[[File:Floatingmenu.png|none|thumb]]

==Deleting a game==
The extension adds a button for 'deleting' a game. This button appears next to the button for starting the game in the list of games.

Deleted games no longer appear in the list of games or in the lobby.
[[File:Delete game.png|none|thumb]]
It is possible to recover a deleted game by the "settings" tab of the extension popup.
[[File:Delete game options en.png|none|thumb|800x800px]]

==Hide general chat==
[[File:Chat.png|left|thumb]]
An icon in the top right-hand corner of the screen allows you to show or hide the general chat.

This icon is not displayed when you are in a game and only allows you to hide the general chat; it does not allow you to stop receiving private messages or to hide the conversation in a game.

== Mute a player in game chat ==
[[File:Mute icon.png|left|thumb]]
In the game chat popup, the extension adds a new icon that lets you mute a player.

You can mute up to 10 players and manage the muted players list in "settings" tab of the extension.

This feature is designed to let you ignore a toxic player and finish the game in peace, but it doesn't report the user's behavior to Board Game Arena.

ChromeExtension

2025-03-08T15:54:42Z

Tof63: /* Mute a player in game chat */

An extension for [https://chrome.google.com/webstore/detail/bga-chrome-extension/kchnhmpeopknjdjejognciimepllkacb Google Chrome] and [https://addons.mozilla.org/addon/board-game-arena-bga-extension/ Firefox] brought to you by [https://boardgamearena.com/player?id=84278471 Flavien] and [https://boardgamearena.com/player?id=85644210 Christophe].

The Google Chrome extension is compatible with all Chromium based browsers (Edge, Brave ...) and could also be used with Kiwi Browser on Android smartphones.

If you have a problem, a suggestion, or just want to leave a nice note, you can write to us on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here]

This extension adds the following features to the boardgamearena.com website.

==List of current games==
If you've activated automatic table tracking (see next chapter), then the extension icon shows you the number of games you're currently expected to play.

Click on the extension icon to open the list of your games in progress and access them quickly.
[[File:Popup dark.png|none|thumb]]
You'll also find a list of pending invitations, as well as the tournaments you've entered.

The "Friend's tables" tab allow you to search for a table opened by one of your friends with a free chair.

== Settings ==
The "settings" tab lets you access some of the extension's parameters:

* [[File:Popup settings dark en.png|thumb|439x439px]]Miscellaneous parameters :
** A parameter to enable or disable automatic tracking of the state of tables you are on. If this option is enabled, then the extension will be able to tell you when it's your turn to play at one of the tables you're at, but you'll always be seen as connected by other players. If this option is disabled, then the extension won't be able to tell you when it's your turn to play, but other players will only see you logged in if you're actually on the site.
** When the tracking is enable, you can activate a sound notification and associate the mp3 you prefer for this notification.
** A parameter to redirect the website links to the classic lobby instead of the new one.
** A parameter to change the behavior of the 'Fast create' button added to the games in the lobby.
** A parameter to replace the default "wood" background by a solid-color background.
** A parameter to change the behavior of the newsfeed, if it's activated the newsfeed contains only the messages of my groups.
** A setting to force player names to be displayed in chat windows (by default, player names are hidden in private chats, and your name is hidden in game chats).
* Game parameters:
** A parameter to show / hide your friends' activity in the game logs
** A parameter to show / hide the ELO score of the players in games.
* Home page settings : Parameters to select the elements that you want to display on the home page of the site.
* Game in progress page settings:
** Parameters to select the elements that you want to display on the 'Game in progress' page.
** Parameter to display the tables with more colors.
* Fast table creation. The extension adds a button in the lobby games to quickly start a table using the last settings used.
** [[File:Fast start en.png|thumb|385x385px]]Set whether the table should be automatically opened to other players after creation.
** Setting whether to exclude players stronger than you
** Setting to exclude players with bad Karma (< 75%)
* Hidden games: Offer the possibility to undo the deletion of a game (see "Deleting a game" chapter).
* Ignored players: override player blocking in chat (see “Ignoring a player in "Mute a player in game chat” chapter)

== Advanced home page settings ==

By activating the advanced home page configuration, you can enter HTML code to place the elements you want exactly where you want them.

It is of course recommended that you have a minimum knowledge of HTML syntax to take full advantage of this option.

But by default, when you activate advanced mode, the extension offers you HTML code containing all possible elements. You can use this code as a starting point, deleting elements you don't need, moving elements around etc...

You can check your HTML code with an online tool like https://jsonformatter.org/html-validator

And if you've got an idea but can't write the HTML code for it, don't be frustrated - come and talk about it on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here] ;)
{| class="wikitable"
|+Predefined elements are:
!Code HTML
!Description
|-
|<nowiki><div id='bgaext-tournaments'></div></nowiki>
|Tournaments list
|-
|<nowiki><div id='bgaext-games-recent'></div></nowiki>
|New games list
|-
|<nowiki><div id='bgaext-games-popular'></div></nowiki>
|Popular games list
|-
|<nowiki><div id='bgaext-games-suggested'></div</nowiki>
|Recommended games list
|-
|<nowiki><div id='bgaext-achievements'></div></nowiki>
|Achievements
|-
|<nowiki><div id='bgaext-leaderboard'></div></nowiki>
|Hall of fame
|-
|<nowiki><div id='bgaext-newsfeed'></div></nowiki>
|Newfeed
|-
|<nowiki><div id='bgaext-service-status'></div></nowiki>
|Service status
|-
|<nowiki><div id='bgaext-games-classic'></div></nowiki>
|Discover our Classics
|-
|<nowiki><div id='bgaext-playmore'></div></nowiki>
|Play more!
|}
You can potentially write any HTML code, but the extension defines the following styles to help you:

* <nowiki><div class='bgaext-flex-col'></nowiki> : the elements in this DIV will be placed in columns, one below the other, with a small margin to separate them.
* <nowiki><div class='bgaext-flex-row'></nowiki> : the elements in this DIV will be placed in line, across the entire page width, trying to respect the optimal size for each element.
* <nowiki><div class='bgaext-flex-row-distribution'></nowiki> : the elements in this DIV have all the same width, but you will certainly need to set a width for this DIV.

'''Example containing all possible elements.'''

A first row of three columns contains :

* First column: Tournaments
* Second column: An area with two rows
** The first row contains a list of new games, popular games and recommended games.
** The second row contains the "Achievments" and the "Hall of fame"
* Third column: News feed and service status

A second line with two columns contains :

* First column: The list of classic games
* Second column: “Play more!” area

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki><div id='bgaext-leaderboard'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''A simpler example with fewer elements'''

The example contains a single line with, in order: the news feed, tournaments, new games and popular games.
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki></div></nowiki>
'''My favorite display'''
<style>
#bgaext-achievements { width: 600px; }
#bgaext-newsfeed .bga-homepage-newsfeed { max-height: 1050px; overflow: auto; }
</style>

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row-distribution'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''Tips'''

To limit the height of the news feed, you can add CSS code like this, for example, to make a scrollbar appear:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: auto;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
or like this to truncate the content:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: hidden;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
To limit the height of the "Hall of fame", you can use the following code :
<style>
#bgaext-leaderboard .bga-ranked-player-list {
max-height: 525px;
overflow: hidden;
}
</style>

==Dark Mode==
[[File:Dark mode off.png|left|thumb]]
This icon in the top right-hand corner of the screen activates the dark mode for the entire site.

Once activated, you can then select a dominant colour by clicking on the arrow next to the icon to change the display theme slightly.

[[File:Dark mode on.png|left|thumb]]
[[File:Dark mode color.png|none|thumb|Choosing a color for dark mode]]
When you are in a game, it is displayed by default with the settings you have chosen for the site, but you can customise the game theme by selecting a color.

The site will continue to be displayed with the color you chose for the site, and the game will now be displayed with the color you chose for it.
==Hide friend's activities in game log==
The extension allow you to stop displaying your friend's activity in the game log.

You can find this option in the options of the extension and in the settings tabs of the extension menu. This is activated by default.
[[File:Friends activity pref en.png|none|thumb|364x364px]]

== Fast start button ==
The extension add a "Fast start" in the games in the lobby.

This button start a table with your default settings as the classic "Start" button do, but you stay in the lobby.

This button can also automatically open the created table to other players, which can be configured in the extension's options and menu.

==Navigation menu==
In games where this is of interest, the extension adds a vertical menu on the left-hand side for quick navigation between the players' boards. In some games, there are also shortcuts to key elements of the game, such as the main board.
[[File:Side menu.png|none|thumb]]
This menu can be activated or deactivated in the game settings.
[[File:Sidemenu pref en.png|none|thumb|500x500px]]

==Floating menu==
If you're playing on a small screen, it could be a good idea to save space by hiding the game log and player panels.

An option allows you to display these two elements in floating menus.
[[File:Floatingmenu pref en.png|none|thumb|500x500px]]
[[File:Floatingmenu.png|none|thumb]]

==Deleting a game==
The extension adds a button for 'deleting' a game. This button appears next to the button for starting the game in the list of games.

Deleted games no longer appear in the list of games or in the lobby.
[[File:Delete game.png|none|thumb]]
It is possible to recover a deleted game by the "settings" tab of the extension popup.
[[File:Delete game options en.png|none|thumb|800x800px]]

==Hide general chat==
[[File:Chat.png|left|thumb]]
An icon in the top right-hand corner of the screen allows you to show or hide the general chat.

This icon is not displayed when you are in a game and only allows you to hide the general chat; it does not allow you to stop receiving private messages or to hide the conversation in a game.

== Mute a player in game chat ==
[[File:Mute icon.png|left|thumb]]
In the game chat popup, the extension adds a new icon that lets you mute a player.

You can mute up to 10 players and manage the muted players list in "settings" tab of the extension.

This feature is designed to let you ignore a toxic player and finish the game in peace, but it doesn't report the user's behavior to Board Game Arena.

File:Delete game options en.png

2025-03-08T15:53:44Z

Tof63: Tof63 uploaded a new version of File:Delete game options en.png

Delete game options en

ChromeExtension

2025-03-08T15:52:30Z

Tof63: /* Deleting a game */

An extension for [https://chrome.google.com/webstore/detail/bga-chrome-extension/kchnhmpeopknjdjejognciimepllkacb Google Chrome] and [https://addons.mozilla.org/addon/board-game-arena-bga-extension/ Firefox] brought to you by [https://boardgamearena.com/player?id=84278471 Flavien] and [https://boardgamearena.com/player?id=85644210 Christophe].

The Google Chrome extension is compatible with all Chromium based browsers (Edge, Brave ...) and could also be used with Kiwi Browser on Android smartphones.

If you have a problem, a suggestion, or just want to leave a nice note, you can write to us on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here]

This extension adds the following features to the boardgamearena.com website.

==List of current games==
If you've activated automatic table tracking (see next chapter), then the extension icon shows you the number of games you're currently expected to play.

Click on the extension icon to open the list of your games in progress and access them quickly.
[[File:Popup dark.png|none|thumb]]
You'll also find a list of pending invitations, as well as the tournaments you've entered.

The "Friend's tables" tab allow you to search for a table opened by one of your friends with a free chair.

== Settings ==
The "settings" tab lets you access some of the extension's parameters:

* [[File:Popup settings dark en.png|thumb|439x439px]]Miscellaneous parameters :
** A parameter to enable or disable automatic tracking of the state of tables you are on. If this option is enabled, then the extension will be able to tell you when it's your turn to play at one of the tables you're at, but you'll always be seen as connected by other players. If this option is disabled, then the extension won't be able to tell you when it's your turn to play, but other players will only see you logged in if you're actually on the site.
** When the tracking is enable, you can activate a sound notification and associate the mp3 you prefer for this notification.
** A parameter to redirect the website links to the classic lobby instead of the new one.
** A parameter to change the behavior of the 'Fast create' button added to the games in the lobby.
** A parameter to replace the default "wood" background by a solid-color background.
** A parameter to change the behavior of the newsfeed, if it's activated the newsfeed contains only the messages of my groups.
** A setting to force player names to be displayed in chat windows (by default, player names are hidden in private chats, and your name is hidden in game chats).
* Game parameters:
** A parameter to show / hide your friends' activity in the game logs
** A parameter to show / hide the ELO score of the players in games.
* Home page settings : Parameters to select the elements that you want to display on the home page of the site.
* Game in progress page settings:
** Parameters to select the elements that you want to display on the 'Game in progress' page.
** Parameter to display the tables with more colors.
* Fast table creation. The extension adds a button in the lobby games to quickly start a table using the last settings used.
** [[File:Fast start en.png|thumb|385x385px]]Set whether the table should be automatically opened to other players after creation.
** Setting whether to exclude players stronger than you
** Setting to exclude players with bad Karma (< 75%)
* Hidden games: Offer the possibility to undo the deletion of a game (see "Deleting a game" chapter).
* Ignored players: override player blocking in chat (see “Ignoring a player in "Mute a player in game chat” chapter)

== Advanced home page settings ==

By activating the advanced home page configuration, you can enter HTML code to place the elements you want exactly where you want them.

It is of course recommended that you have a minimum knowledge of HTML syntax to take full advantage of this option.

But by default, when you activate advanced mode, the extension offers you HTML code containing all possible elements. You can use this code as a starting point, deleting elements you don't need, moving elements around etc...

You can check your HTML code with an online tool like https://jsonformatter.org/html-validator

And if you've got an idea but can't write the HTML code for it, don't be frustrated - come and talk about it on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here] ;)
{| class="wikitable"
|+Predefined elements are:
!Code HTML
!Description
|-
|<nowiki><div id='bgaext-tournaments'></div></nowiki>
|Tournaments list
|-
|<nowiki><div id='bgaext-games-recent'></div></nowiki>
|New games list
|-
|<nowiki><div id='bgaext-games-popular'></div></nowiki>
|Popular games list
|-
|<nowiki><div id='bgaext-games-suggested'></div</nowiki>
|Recommended games list
|-
|<nowiki><div id='bgaext-achievements'></div></nowiki>
|Achievements
|-
|<nowiki><div id='bgaext-leaderboard'></div></nowiki>
|Hall of fame
|-
|<nowiki><div id='bgaext-newsfeed'></div></nowiki>
|Newfeed
|-
|<nowiki><div id='bgaext-service-status'></div></nowiki>
|Service status
|-
|<nowiki><div id='bgaext-games-classic'></div></nowiki>
|Discover our Classics
|-
|<nowiki><div id='bgaext-playmore'></div></nowiki>
|Play more!
|}
You can potentially write any HTML code, but the extension defines the following styles to help you:

* <nowiki><div class='bgaext-flex-col'></nowiki> : the elements in this DIV will be placed in columns, one below the other, with a small margin to separate them.
* <nowiki><div class='bgaext-flex-row'></nowiki> : the elements in this DIV will be placed in line, across the entire page width, trying to respect the optimal size for each element.
* <nowiki><div class='bgaext-flex-row-distribution'></nowiki> : the elements in this DIV have all the same width, but you will certainly need to set a width for this DIV.

'''Example containing all possible elements.'''

A first row of three columns contains :

* First column: Tournaments
* Second column: An area with two rows
** The first row contains a list of new games, popular games and recommended games.
** The second row contains the "Achievments" and the "Hall of fame"
* Third column: News feed and service status

A second line with two columns contains :

* First column: The list of classic games
* Second column: “Play more!” area

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki><div id='bgaext-leaderboard'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''A simpler example with fewer elements'''

The example contains a single line with, in order: the news feed, tournaments, new games and popular games.
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki></div></nowiki>
'''My favorite display'''
<style>
#bgaext-achievements { width: 600px; }
#bgaext-newsfeed .bga-homepage-newsfeed { max-height: 1050px; overflow: auto; }
</style>

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row-distribution'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''Tips'''

To limit the height of the news feed, you can add CSS code like this, for example, to make a scrollbar appear:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: auto;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
or like this to truncate the content:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: hidden;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
To limit the height of the "Hall of fame", you can use the following code :
<style>
#bgaext-leaderboard .bga-ranked-player-list {
max-height: 525px;
overflow: hidden;
}
</style>

==Dark Mode==
[[File:Dark mode off.png|left|thumb]]
This icon in the top right-hand corner of the screen activates the dark mode for the entire site.

Once activated, you can then select a dominant colour by clicking on the arrow next to the icon to change the display theme slightly.

[[File:Dark mode on.png|left|thumb]]
[[File:Dark mode color.png|none|thumb|Choosing a color for dark mode]]
When you are in a game, it is displayed by default with the settings you have chosen for the site, but you can customise the game theme by selecting a color.

The site will continue to be displayed with the color you chose for the site, and the game will now be displayed with the color you chose for it.
==Hide friend's activities in game log==
The extension allow you to stop displaying your friend's activity in the game log.

You can find this option in the options of the extension and in the settings tabs of the extension menu. This is activated by default.
[[File:Friends activity pref en.png|none|thumb|364x364px]]

== Fast start button ==
The extension add a "Fast start" in the games in the lobby.

This button start a table with your default settings as the classic "Start" button do, but you stay in the lobby.

This button can also automatically open the created table to other players, which can be configured in the extension's options and menu.

==Navigation menu==
In games where this is of interest, the extension adds a vertical menu on the left-hand side for quick navigation between the players' boards. In some games, there are also shortcuts to key elements of the game, such as the main board.
[[File:Side menu.png|none|thumb]]
This menu can be activated or deactivated in the game settings.
[[File:Sidemenu pref en.png|none|thumb|500x500px]]

==Floating menu==
If you're playing on a small screen, it could be a good idea to save space by hiding the game log and player panels.

An option allows you to display these two elements in floating menus.
[[File:Floatingmenu pref en.png|none|thumb|500x500px]]
[[File:Floatingmenu.png|none|thumb]]

==Deleting a game==
The extension adds a button for 'deleting' a game. This button appears next to the button for starting the game in the list of games.

Deleted games no longer appear in the list of games or in the lobby.
[[File:Delete game.png|none|thumb]]
It is possible to recover a deleted game by the "settings" tab of the extension popup.
[[File:Delete game options en.png|none|thumb|800x800px]]

==Hide general chat==
[[File:Chat.png|left|thumb]]
An icon in the top right-hand corner of the screen allows you to show or hide the general chat.

This icon is not displayed when you are in a game and only allows you to hide the general chat; it does not allow you to stop receiving private messages or to hide the conversation in a game.

== Mute a player in game chat ==
[[File:Mute icon.png|left|thumb]]
In the game chat popup, the extension adds a new icon that lets you mute a player.

You can mute up to 10 players and manage the muted players list in the extension options.

This feature is designed to let you ignore a toxic player and finish the game in peace, but it doesn't report the user's behavior to Board Game Arena.

ChromeExtension

2025-03-08T15:51:42Z

Tof63: /* Settings */

An extension for [https://chrome.google.com/webstore/detail/bga-chrome-extension/kchnhmpeopknjdjejognciimepllkacb Google Chrome] and [https://addons.mozilla.org/addon/board-game-arena-bga-extension/ Firefox] brought to you by [https://boardgamearena.com/player?id=84278471 Flavien] and [https://boardgamearena.com/player?id=85644210 Christophe].

The Google Chrome extension is compatible with all Chromium based browsers (Edge, Brave ...) and could also be used with Kiwi Browser on Android smartphones.

If you have a problem, a suggestion, or just want to leave a nice note, you can write to us on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here]

This extension adds the following features to the boardgamearena.com website.

==List of current games==
If you've activated automatic table tracking (see next chapter), then the extension icon shows you the number of games you're currently expected to play.

Click on the extension icon to open the list of your games in progress and access them quickly.
[[File:Popup dark.png|none|thumb]]
You'll also find a list of pending invitations, as well as the tournaments you've entered.

The "Friend's tables" tab allow you to search for a table opened by one of your friends with a free chair.

== Settings ==
The "settings" tab lets you access some of the extension's parameters:

* [[File:Popup settings dark en.png|thumb|439x439px]]Miscellaneous parameters :
** A parameter to enable or disable automatic tracking of the state of tables you are on. If this option is enabled, then the extension will be able to tell you when it's your turn to play at one of the tables you're at, but you'll always be seen as connected by other players. If this option is disabled, then the extension won't be able to tell you when it's your turn to play, but other players will only see you logged in if you're actually on the site.
** When the tracking is enable, you can activate a sound notification and associate the mp3 you prefer for this notification.
** A parameter to redirect the website links to the classic lobby instead of the new one.
** A parameter to change the behavior of the 'Fast create' button added to the games in the lobby.
** A parameter to replace the default "wood" background by a solid-color background.
** A parameter to change the behavior of the newsfeed, if it's activated the newsfeed contains only the messages of my groups.
** A setting to force player names to be displayed in chat windows (by default, player names are hidden in private chats, and your name is hidden in game chats).
* Game parameters:
** A parameter to show / hide your friends' activity in the game logs
** A parameter to show / hide the ELO score of the players in games.
* Home page settings : Parameters to select the elements that you want to display on the home page of the site.
* Game in progress page settings:
** Parameters to select the elements that you want to display on the 'Game in progress' page.
** Parameter to display the tables with more colors.
* Fast table creation. The extension adds a button in the lobby games to quickly start a table using the last settings used.
** [[File:Fast start en.png|thumb|385x385px]]Set whether the table should be automatically opened to other players after creation.
** Setting whether to exclude players stronger than you
** Setting to exclude players with bad Karma (< 75%)
* Hidden games: Offer the possibility to undo the deletion of a game (see "Deleting a game" chapter).
* Ignored players: override player blocking in chat (see “Ignoring a player in "Mute a player in game chat” chapter)

== Advanced home page settings ==

By activating the advanced home page configuration, you can enter HTML code to place the elements you want exactly where you want them.

It is of course recommended that you have a minimum knowledge of HTML syntax to take full advantage of this option.

But by default, when you activate advanced mode, the extension offers you HTML code containing all possible elements. You can use this code as a starting point, deleting elements you don't need, moving elements around etc...

You can check your HTML code with an online tool like https://jsonformatter.org/html-validator

And if you've got an idea but can't write the HTML code for it, don't be frustrated - come and talk about it on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here] ;)
{| class="wikitable"
|+Predefined elements are:
!Code HTML
!Description
|-
|<nowiki><div id='bgaext-tournaments'></div></nowiki>
|Tournaments list
|-
|<nowiki><div id='bgaext-games-recent'></div></nowiki>
|New games list
|-
|<nowiki><div id='bgaext-games-popular'></div></nowiki>
|Popular games list
|-
|<nowiki><div id='bgaext-games-suggested'></div</nowiki>
|Recommended games list
|-
|<nowiki><div id='bgaext-achievements'></div></nowiki>
|Achievements
|-
|<nowiki><div id='bgaext-leaderboard'></div></nowiki>
|Hall of fame
|-
|<nowiki><div id='bgaext-newsfeed'></div></nowiki>
|Newfeed
|-
|<nowiki><div id='bgaext-service-status'></div></nowiki>
|Service status
|-
|<nowiki><div id='bgaext-games-classic'></div></nowiki>
|Discover our Classics
|-
|<nowiki><div id='bgaext-playmore'></div></nowiki>
|Play more!
|}
You can potentially write any HTML code, but the extension defines the following styles to help you:

* <nowiki><div class='bgaext-flex-col'></nowiki> : the elements in this DIV will be placed in columns, one below the other, with a small margin to separate them.
* <nowiki><div class='bgaext-flex-row'></nowiki> : the elements in this DIV will be placed in line, across the entire page width, trying to respect the optimal size for each element.
* <nowiki><div class='bgaext-flex-row-distribution'></nowiki> : the elements in this DIV have all the same width, but you will certainly need to set a width for this DIV.

'''Example containing all possible elements.'''

A first row of three columns contains :

* First column: Tournaments
* Second column: An area with two rows
** The first row contains a list of new games, popular games and recommended games.
** The second row contains the "Achievments" and the "Hall of fame"
* Third column: News feed and service status

A second line with two columns contains :

* First column: The list of classic games
* Second column: “Play more!” area

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki><div id='bgaext-leaderboard'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''A simpler example with fewer elements'''

The example contains a single line with, in order: the news feed, tournaments, new games and popular games.
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki></div></nowiki>
'''My favorite display'''
<style>
#bgaext-achievements { width: 600px; }
#bgaext-newsfeed .bga-homepage-newsfeed { max-height: 1050px; overflow: auto; }
</style>

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row-distribution'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''Tips'''

To limit the height of the news feed, you can add CSS code like this, for example, to make a scrollbar appear:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: auto;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
or like this to truncate the content:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: hidden;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
To limit the height of the "Hall of fame", you can use the following code :
<style>
#bgaext-leaderboard .bga-ranked-player-list {
max-height: 525px;
overflow: hidden;
}
</style>

==Dark Mode==
[[File:Dark mode off.png|left|thumb]]
This icon in the top right-hand corner of the screen activates the dark mode for the entire site.

Once activated, you can then select a dominant colour by clicking on the arrow next to the icon to change the display theme slightly.

[[File:Dark mode on.png|left|thumb]]
[[File:Dark mode color.png|none|thumb|Choosing a color for dark mode]]
When you are in a game, it is displayed by default with the settings you have chosen for the site, but you can customise the game theme by selecting a color.

The site will continue to be displayed with the color you chose for the site, and the game will now be displayed with the color you chose for it.
==Hide friend's activities in game log==
The extension allow you to stop displaying your friend's activity in the game log.

You can find this option in the options of the extension and in the settings tabs of the extension menu. This is activated by default.
[[File:Friends activity pref en.png|none|thumb|364x364px]]

== Fast start button ==
The extension add a "Fast start" in the games in the lobby.

This button start a table with your default settings as the classic "Start" button do, but you stay in the lobby.

This button can also automatically open the created table to other players, which can be configured in the extension's options and menu.

==Navigation menu==
In games where this is of interest, the extension adds a vertical menu on the left-hand side for quick navigation between the players' boards. In some games, there are also shortcuts to key elements of the game, such as the main board.
[[File:Side menu.png|none|thumb]]
This menu can be activated or deactivated in the game settings.
[[File:Sidemenu pref en.png|none|thumb|500x500px]]

==Floating menu==
If you're playing on a small screen, it could be a good idea to save space by hiding the game log and player panels.

An option allows you to display these two elements in floating menus.
[[File:Floatingmenu pref en.png|none|thumb|500x500px]]
[[File:Floatingmenu.png|none|thumb]]

==Deleting a game==
The extension adds a button for 'deleting' a game. This button appears next to the button for starting the game in the list of games.

Deleted games no longer appear in the list of games or in the lobby.
[[File:Delete game.png|none|thumb]]
It is possible to recover a deleted game by opening the extension options, or through the "settings" tab of the extension popup.
[[File:Delete game options en.png|none|thumb|800x800px]]

==Hide general chat==
[[File:Chat.png|left|thumb]]
An icon in the top right-hand corner of the screen allows you to show or hide the general chat.

This icon is not displayed when you are in a game and only allows you to hide the general chat; it does not allow you to stop receiving private messages or to hide the conversation in a game.

== Mute a player in game chat ==
[[File:Mute icon.png|left|thumb]]
In the game chat popup, the extension adds a new icon that lets you mute a player.

You can mute up to 10 players and manage the muted players list in the extension options.

This feature is designed to let you ignore a toxic player and finish the game in peace, but it doesn't report the user's behavior to Board Game Arena.

File:Fast start en.png

2025-03-08T15:51:16Z

Tof63:

fast start en

File:Popup settings dark en.png

2025-03-07T15:28:05Z

Tof63: Tof63 uploaded a new version of File:Popup settings dark en.png

Popup settings dark en

File:Popup settings dark en.png

2025-03-07T15:27:20Z

Tof63: Tof63 uploaded a new version of File:Popup settings dark en.png

Popup settings dark en

ChromeExtension

2025-03-07T15:26:17Z

Tof63: /* Settings */

An extension for [https://chrome.google.com/webstore/detail/bga-chrome-extension/kchnhmpeopknjdjejognciimepllkacb Google Chrome] and [https://addons.mozilla.org/addon/board-game-arena-bga-extension/ Firefox] brought to you by [https://boardgamearena.com/player?id=84278471 Flavien] and [https://boardgamearena.com/player?id=85644210 Christophe].

The Google Chrome extension is compatible with all Chromium based browsers (Edge, Brave ...) and could also be used with Kiwi Browser on Android smartphones.

If you have a problem, a suggestion, or just want to leave a nice note, you can write to us on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here]

This extension adds the following features to the boardgamearena.com website.

==List of current games==
If you've activated automatic table tracking (see next chapter), then the extension icon shows you the number of games you're currently expected to play.

Click on the extension icon to open the list of your games in progress and access them quickly.
[[File:Popup dark.png|none|thumb]]
You'll also find a list of pending invitations, as well as the tournaments you've entered.

The "Friend's tables" tab allow you to search for a table opened by one of your friends with a free chair.

== Settings ==
The "settings" tab lets you access some of the extension's parameters:

* Miscellaneous parameters :
** A parameter to enable or disable automatic tracking of the state of tables you are on. If this option is enabled, then the extension will be able to tell you when it's your turn to play at one of the tables you're at, but you'll always be seen as connected by other players. If this option is disabled, then the extension won't be able to tell you when it's your turn to play, but other players will only see you logged in if you're actually on the site.
** When the tracking is enable, you can activate a sound notification and associate the mp3 you prefer for this notification.
** A parameter to redirect the website links to the classic lobby instead of the new one.
** A parameter to change the behavior of the 'Fast create' button added to the games in the lobby.
** A parameter to replace the default "wood" background by a solid-color background.
** A parameter to change the behavior of the newsfeed, if it's activated the newsfeed contains only the messages of my groups.
** A setting to force player names to be displayed in chat windows (by default, player names are hidden in private chats, and your name is hidden in game chats).
* Game parameters:
** A parameter to show / hide your friends' activity in the game logs
** A parameter to show / hide the ELO score of the players in games.
* Home page settings : Parameters to select the elements that you want to display on the home page of the site.
* Game in progress page settings:
** Parameters to select the elements that you want to display on the 'Game in progress' page.
** Parameter to display the tables with more colors.
* Fast table creation. The extension adds a button in the lobby games to quickly start a table using the last settings used.
** Set whether the table should be automatically opened to other players after creation.
** Setting whether to exclude players stronger than you
** Setting to exclude players with bad Karma (< 75%)
* Hidden games: Offer the possibility to undo the deletion of a game (see "Deleting a game" chapter).
* Ignored players: override player blocking in chat (see “Ignoring a player in "Mute a player in game chat” chapter)

[[File:Popup settings dark en.png|none|thumb|401x401px]]

== Advanced home page settings ==

By activating the advanced home page configuration, you can enter HTML code to place the elements you want exactly where you want them.

It is of course recommended that you have a minimum knowledge of HTML syntax to take full advantage of this option.

But by default, when you activate advanced mode, the extension offers you HTML code containing all possible elements. You can use this code as a starting point, deleting elements you don't need, moving elements around etc...

You can check your HTML code with an online tool like https://jsonformatter.org/html-validator

And if you've got an idea but can't write the HTML code for it, don't be frustrated - come and talk about it on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here] ;)
{| class="wikitable"
|+Predefined elements are:
!Code HTML
!Description
|-
|<nowiki><div id='bgaext-tournaments'></div></nowiki>
|Tournaments list
|-
|<nowiki><div id='bgaext-games-recent'></div></nowiki>
|New games list
|-
|<nowiki><div id='bgaext-games-popular'></div></nowiki>
|Popular games list
|-
|<nowiki><div id='bgaext-games-suggested'></div</nowiki>
|Recommended games list
|-
|<nowiki><div id='bgaext-achievements'></div></nowiki>
|Achievements
|-
|<nowiki><div id='bgaext-leaderboard'></div></nowiki>
|Hall of fame
|-
|<nowiki><div id='bgaext-newsfeed'></div></nowiki>
|Newfeed
|-
|<nowiki><div id='bgaext-service-status'></div></nowiki>
|Service status
|-
|<nowiki><div id='bgaext-games-classic'></div></nowiki>
|Discover our Classics
|-
|<nowiki><div id='bgaext-playmore'></div></nowiki>
|Play more!
|}
You can potentially write any HTML code, but the extension defines the following styles to help you:

* <nowiki><div class='bgaext-flex-col'></nowiki> : the elements in this DIV will be placed in columns, one below the other, with a small margin to separate them.
* <nowiki><div class='bgaext-flex-row'></nowiki> : the elements in this DIV will be placed in line, across the entire page width, trying to respect the optimal size for each element.
* <nowiki><div class='bgaext-flex-row-distribution'></nowiki> : the elements in this DIV have all the same width, but you will certainly need to set a width for this DIV.

'''Example containing all possible elements.'''

A first row of three columns contains :

* First column: Tournaments
* Second column: An area with two rows
** The first row contains a list of new games, popular games and recommended games.
** The second row contains the "Achievments" and the "Hall of fame"
* Third column: News feed and service status

A second line with two columns contains :

* First column: The list of classic games
* Second column: “Play more!” area

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki><div id='bgaext-leaderboard'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''A simpler example with fewer elements'''

The example contains a single line with, in order: the news feed, tournaments, new games and popular games.
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki></div></nowiki>
'''My favorite display'''
<style>
#bgaext-achievements { width: 600px; }
#bgaext-newsfeed .bga-homepage-newsfeed { max-height: 1050px; overflow: auto; }
</style>

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row-distribution'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''Tips'''

To limit the height of the news feed, you can add CSS code like this, for example, to make a scrollbar appear:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: auto;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
or like this to truncate the content:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: hidden;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
To limit the height of the "Hall of fame", you can use the following code :
<style>
#bgaext-leaderboard .bga-ranked-player-list {
max-height: 525px;
overflow: hidden;
}
</style>

==Dark Mode==
[[File:Dark mode off.png|left|thumb]]
This icon in the top right-hand corner of the screen activates the dark mode for the entire site.

Once activated, you can then select a dominant colour by clicking on the arrow next to the icon to change the display theme slightly.

[[File:Dark mode on.png|left|thumb]]
[[File:Dark mode color.png|none|thumb|Choosing a color for dark mode]]
When you are in a game, it is displayed by default with the settings you have chosen for the site, but you can customise the game theme by selecting a color.

The site will continue to be displayed with the color you chose for the site, and the game will now be displayed with the color you chose for it.
==Hide friend's activities in game log==
The extension allow you to stop displaying your friend's activity in the game log.

You can find this option in the options of the extension and in the settings tabs of the extension menu. This is activated by default.
[[File:Friends activity pref en.png|none|thumb|364x364px]]

== Fast start button ==
The extension add a "Fast start" in the games in the lobby.

This button start a table with your default settings as the classic "Start" button do, but you stay in the lobby.

This button can also automatically open the created table to other players, which can be configured in the extension's options and menu.

==Navigation menu==
In games where this is of interest, the extension adds a vertical menu on the left-hand side for quick navigation between the players' boards. In some games, there are also shortcuts to key elements of the game, such as the main board.
[[File:Side menu.png|none|thumb]]
This menu can be activated or deactivated in the game settings.
[[File:Sidemenu pref en.png|none|thumb|500x500px]]

==Floating menu==
If you're playing on a small screen, it could be a good idea to save space by hiding the game log and player panels.

An option allows you to display these two elements in floating menus.
[[File:Floatingmenu pref en.png|none|thumb|500x500px]]
[[File:Floatingmenu.png|none|thumb]]

==Deleting a game==
The extension adds a button for 'deleting' a game. This button appears next to the button for starting the game in the list of games.

Deleted games no longer appear in the list of games or in the lobby.
[[File:Delete game.png|none|thumb]]
It is possible to recover a deleted game by opening the extension options, or through the "settings" tab of the extension popup.
[[File:Delete game options en.png|none|thumb|800x800px]]

==Hide general chat==
[[File:Chat.png|left|thumb]]
An icon in the top right-hand corner of the screen allows you to show or hide the general chat.

This icon is not displayed when you are in a game and only allows you to hide the general chat; it does not allow you to stop receiving private messages or to hide the conversation in a game.

== Mute a player in game chat ==
[[File:Mute icon.png|left|thumb]]
In the game chat popup, the extension adds a new icon that lets you mute a player.

You can mute up to 10 players and manage the muted players list in the extension options.

This feature is designed to let you ignore a toxic player and finish the game in peace, but it doesn't report the user's behavior to Board Game Arena.

ChromeExtension

2025-03-04T15:02:14Z

Tof63: /* Settings */

An extension for [https://chrome.google.com/webstore/detail/bga-chrome-extension/kchnhmpeopknjdjejognciimepllkacb Google Chrome] and [https://addons.mozilla.org/addon/board-game-arena-bga-extension/ Firefox] brought to you by [https://boardgamearena.com/player?id=84278471 Flavien] and [https://boardgamearena.com/player?id=85644210 Christophe].

The Google Chrome extension is compatible with all Chromium based browsers (Edge, Brave ...) and could also be used with Kiwi Browser on Android smartphones.

If you have a problem, a suggestion, or just want to leave a nice note, you can write to us on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here]

This extension adds the following features to the boardgamearena.com website.

==List of current games==
If you've activated automatic table tracking (see next chapter), then the extension icon shows you the number of games you're currently expected to play.

Click on the extension icon to open the list of your games in progress and access them quickly.
[[File:Popup dark.png|none|thumb]]
You'll also find a list of pending invitations, as well as the tournaments you've entered.

The "Friend's tables" tab allow you to search for a table opened by one of your friends with a free chair.

== Settings ==
The "settings" tab lets you access some of the extension's parameters:

* Miscellaneous parameters :
** A parameter to enable or disable automatic tracking of the state of tables you are on. If this option is enabled, then the extension will be able to tell you when it's your turn to play at one of the tables you're at, but you'll always be seen as connected by other players. If this option is disabled, then the extension won't be able to tell you when it's your turn to play, but other players will only see you logged in if you're actually on the site.
** When the tracking is enable, you can activate a sound notification and associate the mp3 you prefer for this notification.
** A parameter to redirect the website links to the classic lobby instead of the new one.
** A parameter to change the behavior of the 'Fast create' button added to the games in the lobby.
** A parameter to replace the default "wood" background by a solid-color background.
** A parameter to change the behavior of the newsfeed, if it's activated the newsfeed contains only the messages of my groups.
** A setting to force player names to be displayed in chat windows (by default, player names are hidden in private chats, and your name is hidden in game chats).
* Game parameters:
** A parameter to show / hide your friends' activity in the game logs
** A parameter to show / hide the ELO score of the players in games.
* Home page settings : Parameters to select the elements that you want to display on the home page of the site.
* Game in progress page settings:
** Parameters to select the elements that you want to display on the 'Game in progress' page.
** Parameter to display the tables with more colors.
* Hidden games: Offer the possibility to undo the deletion of a game (see "Deleting a game").

[[File:Popup settings dark en.png|none|thumb|401x401px]]

== Advanced home page settings ==

By activating the advanced home page configuration, you can enter HTML code to place the elements you want exactly where you want them.

It is of course recommended that you have a minimum knowledge of HTML syntax to take full advantage of this option.

But by default, when you activate advanced mode, the extension offers you HTML code containing all possible elements. You can use this code as a starting point, deleting elements you don't need, moving elements around etc...

You can check your HTML code with an online tool like https://jsonformatter.org/html-validator

And if you've got an idea but can't write the HTML code for it, don't be frustrated - come and talk about it on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here] ;)
{| class="wikitable"
|+Predefined elements are:
!Code HTML
!Description
|-
|<nowiki><div id='bgaext-tournaments'></div></nowiki>
|Tournaments list
|-
|<nowiki><div id='bgaext-games-recent'></div></nowiki>
|New games list
|-
|<nowiki><div id='bgaext-games-popular'></div></nowiki>
|Popular games list
|-
|<nowiki><div id='bgaext-games-suggested'></div</nowiki>
|Recommended games list
|-
|<nowiki><div id='bgaext-achievements'></div></nowiki>
|Achievements
|-
|<nowiki><div id='bgaext-leaderboard'></div></nowiki>
|Hall of fame
|-
|<nowiki><div id='bgaext-newsfeed'></div></nowiki>
|Newfeed
|-
|<nowiki><div id='bgaext-service-status'></div></nowiki>
|Service status
|-
|<nowiki><div id='bgaext-games-classic'></div></nowiki>
|Discover our Classics
|-
|<nowiki><div id='bgaext-playmore'></div></nowiki>
|Play more!
|}
You can potentially write any HTML code, but the extension defines the following styles to help you:

* <nowiki><div class='bgaext-flex-col'></nowiki> : the elements in this DIV will be placed in columns, one below the other, with a small margin to separate them.
* <nowiki><div class='bgaext-flex-row'></nowiki> : the elements in this DIV will be placed in line, across the entire page width, trying to respect the optimal size for each element.
* <nowiki><div class='bgaext-flex-row-distribution'></nowiki> : the elements in this DIV have all the same width, but you will certainly need to set a width for this DIV.

'''Example containing all possible elements.'''

A first row of three columns contains :

* First column: Tournaments
* Second column: An area with two rows
** The first row contains a list of new games, popular games and recommended games.
** The second row contains the "Achievments" and the "Hall of fame"
* Third column: News feed and service status

A second line with two columns contains :

* First column: The list of classic games
* Second column: “Play more!” area

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki><div id='bgaext-leaderboard'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''A simpler example with fewer elements'''

The example contains a single line with, in order: the news feed, tournaments, new games and popular games.
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki></div></nowiki>
'''My favorite display'''
<style>
#bgaext-achievements { width: 600px; }
#bgaext-newsfeed .bga-homepage-newsfeed { max-height: 1050px; overflow: auto; }
</style>

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row-distribution'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''Tips'''

To limit the height of the news feed, you can add CSS code like this, for example, to make a scrollbar appear:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: auto;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
or like this to truncate the content:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: hidden;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
To limit the height of the "Hall of fame", you can use the following code :
<style>
#bgaext-leaderboard .bga-ranked-player-list {
max-height: 525px;
overflow: hidden;
}
</style>

==Dark Mode==
[[File:Dark mode off.png|left|thumb]]
This icon in the top right-hand corner of the screen activates the dark mode for the entire site.

Once activated, you can then select a dominant colour by clicking on the arrow next to the icon to change the display theme slightly.

[[File:Dark mode on.png|left|thumb]]
[[File:Dark mode color.png|none|thumb|Choosing a color for dark mode]]
When you are in a game, it is displayed by default with the settings you have chosen for the site, but you can customise the game theme by selecting a color.

The site will continue to be displayed with the color you chose for the site, and the game will now be displayed with the color you chose for it.
==Hide friend's activities in game log==
The extension allow you to stop displaying your friend's activity in the game log.

You can find this option in the options of the extension and in the settings tabs of the extension menu. This is activated by default.
[[File:Friends activity pref en.png|none|thumb|364x364px]]

== Fast start button ==
The extension add a "Fast start" in the games in the lobby.

This button start a table with your default settings as the classic "Start" button do, but you stay in the lobby.

This button can also automatically open the created table to other players, which can be configured in the extension's options and menu.

==Navigation menu==
In games where this is of interest, the extension adds a vertical menu on the left-hand side for quick navigation between the players' boards. In some games, there are also shortcuts to key elements of the game, such as the main board.
[[File:Side menu.png|none|thumb]]
This menu can be activated or deactivated in the game settings.
[[File:Sidemenu pref en.png|none|thumb|500x500px]]

==Floating menu==
If you're playing on a small screen, it could be a good idea to save space by hiding the game log and player panels.

An option allows you to display these two elements in floating menus.
[[File:Floatingmenu pref en.png|none|thumb|500x500px]]
[[File:Floatingmenu.png|none|thumb]]

==Deleting a game==
The extension adds a button for 'deleting' a game. This button appears next to the button for starting the game in the list of games.

Deleted games no longer appear in the list of games or in the lobby.
[[File:Delete game.png|none|thumb]]
It is possible to recover a deleted game by opening the extension options, or through the "settings" tab of the extension popup.
[[File:Delete game options en.png|none|thumb|800x800px]]

==Hide general chat==
[[File:Chat.png|left|thumb]]
An icon in the top right-hand corner of the screen allows you to show or hide the general chat.

This icon is not displayed when you are in a game and only allows you to hide the general chat; it does not allow you to stop receiving private messages or to hide the conversation in a game.

== Mute a player in game chat ==
[[File:Mute icon.png|left|thumb]]
In the game chat popup, the extension adds a new icon that lets you mute a player.

You can mute up to 10 players and manage the muted players list in the extension options.

This feature is designed to let you ignore a toxic player and finish the game in peace, but it doesn't report the user's behavior to Board Game Arena.

ChromeExtension

2025-03-04T15:01:21Z

Tof63: /* Settings */

An extension for [https://chrome.google.com/webstore/detail/bga-chrome-extension/kchnhmpeopknjdjejognciimepllkacb Google Chrome] and [https://addons.mozilla.org/addon/board-game-arena-bga-extension/ Firefox] brought to you by [https://boardgamearena.com/player?id=84278471 Flavien] and [https://boardgamearena.com/player?id=85644210 Christophe].

The Google Chrome extension is compatible with all Chromium based browsers (Edge, Brave ...) and could also be used with Kiwi Browser on Android smartphones.

If you have a problem, a suggestion, or just want to leave a nice note, you can write to us on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here]

This extension adds the following features to the boardgamearena.com website.

==List of current games==
If you've activated automatic table tracking (see next chapter), then the extension icon shows you the number of games you're currently expected to play.

Click on the extension icon to open the list of your games in progress and access them quickly.
[[File:Popup dark.png|none|thumb]]
You'll also find a list of pending invitations, as well as the tournaments you've entered.

The "Friend's tables" tab allow you to search for a table opened by one of your friends with a free chair.

== Settings ==
The "settings" tab lets you access some of the extension's parameters:

* Miscellaneous parameters :
** A parameter to enable or disable automatic tracking of the state of tables you are on. If this option is enabled, then the extension will be able to tell you when it's your turn to play at one of the tables you're at, but you'll always be seen as connected by other players. If this option is disabled, then the extension won't be able to tell you when it's your turn to play, but other players will only see you logged in if you're actually on the site.
** When the tracking is enable, you can activate a sound notification and associate the mp3 you prefer for this notification.
** A parameter to redirect the website links to the classic lobby instead of the new one.
** A parameter to change the behavior of the 'Fast create' button added to the games in the lobby.
** A parameter to replace the default "wood" background by a solid-color background.
** A parameter to change the behavior of the newsfeed, if it's activated the newsfeed contains only the messages of my groups.
** A setting to force player names to be displayed in chat windows (by default, player names are hidden in private chats, and your name is hidden in game chats).
* Game parameters:
** A parameter to show / hide your friends' activity in the game logs
** A parameter to show / hide the ELO score of the players in games.
* Home page settings : Parameters to select the elements that you want to display on the home page of the site.
* Game in progress page settings: Parameters to select the elements that you want to display on the 'Game in progress' page.
* Hidden games: Offer the possibility to undo the deletion of a game (see "Deleting a game").

[[File:Popup settings dark en.png|none|thumb|401x401px]]

== Advanced home page settings ==

By activating the advanced home page configuration, you can enter HTML code to place the elements you want exactly where you want them.

It is of course recommended that you have a minimum knowledge of HTML syntax to take full advantage of this option.

But by default, when you activate advanced mode, the extension offers you HTML code containing all possible elements. You can use this code as a starting point, deleting elements you don't need, moving elements around etc...

You can check your HTML code with an online tool like https://jsonformatter.org/html-validator

And if you've got an idea but can't write the HTML code for it, don't be frustrated - come and talk about it on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here] ;)
{| class="wikitable"
|+Predefined elements are:
!Code HTML
!Description
|-
|<nowiki><div id='bgaext-tournaments'></div></nowiki>
|Tournaments list
|-
|<nowiki><div id='bgaext-games-recent'></div></nowiki>
|New games list
|-
|<nowiki><div id='bgaext-games-popular'></div></nowiki>
|Popular games list
|-
|<nowiki><div id='bgaext-games-suggested'></div</nowiki>
|Recommended games list
|-
|<nowiki><div id='bgaext-achievements'></div></nowiki>
|Achievements
|-
|<nowiki><div id='bgaext-leaderboard'></div></nowiki>
|Hall of fame
|-
|<nowiki><div id='bgaext-newsfeed'></div></nowiki>
|Newfeed
|-
|<nowiki><div id='bgaext-service-status'></div></nowiki>
|Service status
|-
|<nowiki><div id='bgaext-games-classic'></div></nowiki>
|Discover our Classics
|-
|<nowiki><div id='bgaext-playmore'></div></nowiki>
|Play more!
|}
You can potentially write any HTML code, but the extension defines the following styles to help you:

* <nowiki><div class='bgaext-flex-col'></nowiki> : the elements in this DIV will be placed in columns, one below the other, with a small margin to separate them.
* <nowiki><div class='bgaext-flex-row'></nowiki> : the elements in this DIV will be placed in line, across the entire page width, trying to respect the optimal size for each element.
* <nowiki><div class='bgaext-flex-row-distribution'></nowiki> : the elements in this DIV have all the same width, but you will certainly need to set a width for this DIV.

'''Example containing all possible elements.'''

A first row of three columns contains :

* First column: Tournaments
* Second column: An area with two rows
** The first row contains a list of new games, popular games and recommended games.
** The second row contains the "Achievments" and the "Hall of fame"
* Third column: News feed and service status

A second line with two columns contains :

* First column: The list of classic games
* Second column: “Play more!” area

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki><div id='bgaext-leaderboard'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''A simpler example with fewer elements'''

The example contains a single line with, in order: the news feed, tournaments, new games and popular games.
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki></div></nowiki>
'''My favorite display'''
<style>
#bgaext-achievements { width: 600px; }
#bgaext-newsfeed .bga-homepage-newsfeed { max-height: 1050px; overflow: auto; }
</style>

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row-distribution'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''Tips'''

To limit the height of the news feed, you can add CSS code like this, for example, to make a scrollbar appear:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: auto;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
or like this to truncate the content:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: hidden;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
To limit the height of the "Hall of fame", you can use the following code :
<style>
#bgaext-leaderboard .bga-ranked-player-list {
max-height: 525px;
overflow: hidden;
}
</style>

==Dark Mode==
[[File:Dark mode off.png|left|thumb]]
This icon in the top right-hand corner of the screen activates the dark mode for the entire site.

Once activated, you can then select a dominant colour by clicking on the arrow next to the icon to change the display theme slightly.

[[File:Dark mode on.png|left|thumb]]
[[File:Dark mode color.png|none|thumb|Choosing a color for dark mode]]
When you are in a game, it is displayed by default with the settings you have chosen for the site, but you can customise the game theme by selecting a color.

The site will continue to be displayed with the color you chose for the site, and the game will now be displayed with the color you chose for it.
==Hide friend's activities in game log==
The extension allow you to stop displaying your friend's activity in the game log.

You can find this option in the options of the extension and in the settings tabs of the extension menu. This is activated by default.
[[File:Friends activity pref en.png|none|thumb|364x364px]]

== Fast start button ==
The extension add a "Fast start" in the games in the lobby.

This button start a table with your default settings as the classic "Start" button do, but you stay in the lobby.

This button can also automatically open the created table to other players, which can be configured in the extension's options and menu.

==Navigation menu==
In games where this is of interest, the extension adds a vertical menu on the left-hand side for quick navigation between the players' boards. In some games, there are also shortcuts to key elements of the game, such as the main board.
[[File:Side menu.png|none|thumb]]
This menu can be activated or deactivated in the game settings.
[[File:Sidemenu pref en.png|none|thumb|500x500px]]

==Floating menu==
If you're playing on a small screen, it could be a good idea to save space by hiding the game log and player panels.

An option allows you to display these two elements in floating menus.
[[File:Floatingmenu pref en.png|none|thumb|500x500px]]
[[File:Floatingmenu.png|none|thumb]]

==Deleting a game==
The extension adds a button for 'deleting' a game. This button appears next to the button for starting the game in the list of games.

Deleted games no longer appear in the list of games or in the lobby.
[[File:Delete game.png|none|thumb]]
It is possible to recover a deleted game by opening the extension options, or through the "settings" tab of the extension popup.
[[File:Delete game options en.png|none|thumb|800x800px]]

==Hide general chat==
[[File:Chat.png|left|thumb]]
An icon in the top right-hand corner of the screen allows you to show or hide the general chat.

This icon is not displayed when you are in a game and only allows you to hide the general chat; it does not allow you to stop receiving private messages or to hide the conversation in a game.

== Mute a player in game chat ==
[[File:Mute icon.png|left|thumb]]
In the game chat popup, the extension adds a new icon that lets you mute a player.

You can mute up to 10 players and manage the muted players list in the extension options.

This feature is designed to let you ignore a toxic player and finish the game in peace, but it doesn't report the user's behavior to Board Game Arena.

ChromeExtension

2025-03-04T14:56:11Z

Tof63: /* Advanced home page settings */

An extension for [https://chrome.google.com/webstore/detail/bga-chrome-extension/kchnhmpeopknjdjejognciimepllkacb Google Chrome] and [https://addons.mozilla.org/addon/board-game-arena-bga-extension/ Firefox] brought to you by [https://boardgamearena.com/player?id=84278471 Flavien] and [https://boardgamearena.com/player?id=85644210 Christophe].

The Google Chrome extension is compatible with all Chromium based browsers (Edge, Brave ...) and could also be used with Kiwi Browser on Android smartphones.

If you have a problem, a suggestion, or just want to leave a nice note, you can write to us on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here]

This extension adds the following features to the boardgamearena.com website.

==List of current games==
If you've activated automatic table tracking (see next chapter), then the extension icon shows you the number of games you're currently expected to play.

Click on the extension icon to open the list of your games in progress and access them quickly.
[[File:Popup dark.png|none|thumb]]
You'll also find a list of pending invitations, as well as the tournaments you've entered.

The "Friend's tables" tab allow you to search for a table opened by one of your friends with a free chair.

== Settings ==
The "settings" tab lets you access some of the extension's parameters:

* Miscellaneous parameters :
** A parameter to enable or disable automatic tracking of the state of tables you are on. If this option is enabled, then the extension will be able to tell you when it's your turn to play at one of the tables you're at, but you'll always be seen as connected by other players. If this option is disabled, then the extension won't be able to tell you when it's your turn to play, but other players will only see you logged in if you're actually on the site.
** When the tracking is enable, you can activate a sound notification and associate the mp3 you prefer for this notification.
** A parameter to redirect the website links to the classic lobby instead of the new one.
** A parameter to change the behavior of the 'Fast create' button added to the games in the lobby.
** A parameter to replace the default "wood" background by a solid-color background.
** A parameter to change the behavior of the newsfeed, if it's activated the newsfeed contains only my activity (and the messages of my groups).
* Game parameters:
** A parameter to show / hide your friends' activity in the game logs
** A parameter to show / hide the ELO score of the players in games.
* Home page settings : Parameters to select the elements that you want to display on the home page of the site.
* Game in progress page settings: Parameters to select the elements that you want to display on the 'Game in progress' page.
* Hidden games: Offer the possibility to undo the deletion of a game (see "Deleting a game").

[[File:Popup settings dark en.png|none|thumb|401x401px]]

== Advanced home page settings ==

By activating the advanced home page configuration, you can enter HTML code to place the elements you want exactly where you want them.

It is of course recommended that you have a minimum knowledge of HTML syntax to take full advantage of this option.

But by default, when you activate advanced mode, the extension offers you HTML code containing all possible elements. You can use this code as a starting point, deleting elements you don't need, moving elements around etc...

You can check your HTML code with an online tool like https://jsonformatter.org/html-validator

And if you've got an idea but can't write the HTML code for it, don't be frustrated - come and talk about it on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here] ;)
{| class="wikitable"
|+Predefined elements are:
!Code HTML
!Description
|-
|<nowiki><div id='bgaext-tournaments'></div></nowiki>
|Tournaments list
|-
|<nowiki><div id='bgaext-games-recent'></div></nowiki>
|New games list
|-
|<nowiki><div id='bgaext-games-popular'></div></nowiki>
|Popular games list
|-
|<nowiki><div id='bgaext-games-suggested'></div</nowiki>
|Recommended games list
|-
|<nowiki><div id='bgaext-achievements'></div></nowiki>
|Achievements
|-
|<nowiki><div id='bgaext-leaderboard'></div></nowiki>
|Hall of fame
|-
|<nowiki><div id='bgaext-newsfeed'></div></nowiki>
|Newfeed
|-
|<nowiki><div id='bgaext-service-status'></div></nowiki>
|Service status
|-
|<nowiki><div id='bgaext-games-classic'></div></nowiki>
|Discover our Classics
|-
|<nowiki><div id='bgaext-playmore'></div></nowiki>
|Play more!
|}
You can potentially write any HTML code, but the extension defines the following styles to help you:

* <nowiki><div class='bgaext-flex-col'></nowiki> : the elements in this DIV will be placed in columns, one below the other, with a small margin to separate them.
* <nowiki><div class='bgaext-flex-row'></nowiki> : the elements in this DIV will be placed in line, across the entire page width, trying to respect the optimal size for each element.
* <nowiki><div class='bgaext-flex-row-distribution'></nowiki> : the elements in this DIV have all the same width, but you will certainly need to set a width for this DIV.

'''Example containing all possible elements.'''

A first row of three columns contains :

* First column: Tournaments
* Second column: An area with two rows
** The first row contains a list of new games, popular games and recommended games.
** The second row contains the "Achievments" and the "Hall of fame"
* Third column: News feed and service status

A second line with two columns contains :

* First column: The list of classic games
* Second column: “Play more!” area

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki><div id='bgaext-leaderboard'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''A simpler example with fewer elements'''

The example contains a single line with, in order: the news feed, tournaments, new games and popular games.
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki></div></nowiki>
'''My favorite display'''
<style>
#bgaext-achievements { width: 600px; }
#bgaext-newsfeed .bga-homepage-newsfeed { max-height: 1050px; overflow: auto; }
</style>

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row-distribution'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''Tips'''

To limit the height of the news feed, you can add CSS code like this, for example, to make a scrollbar appear:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: auto;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
or like this to truncate the content:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: hidden;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
To limit the height of the "Hall of fame", you can use the following code :
<style>
#bgaext-leaderboard .bga-ranked-player-list {
max-height: 525px;
overflow: hidden;
}
</style>

==Dark Mode==
[[File:Dark mode off.png|left|thumb]]
This icon in the top right-hand corner of the screen activates the dark mode for the entire site.

Once activated, you can then select a dominant colour by clicking on the arrow next to the icon to change the display theme slightly.

[[File:Dark mode on.png|left|thumb]]
[[File:Dark mode color.png|none|thumb|Choosing a color for dark mode]]
When you are in a game, it is displayed by default with the settings you have chosen for the site, but you can customise the game theme by selecting a color.

The site will continue to be displayed with the color you chose for the site, and the game will now be displayed with the color you chose for it.
==Hide friend's activities in game log==
The extension allow you to stop displaying your friend's activity in the game log.

You can find this option in the options of the extension and in the settings tabs of the extension menu. This is activated by default.
[[File:Friends activity pref en.png|none|thumb|364x364px]]

== Fast start button ==
The extension add a "Fast start" in the games in the lobby.

This button start a table with your default settings as the classic "Start" button do, but you stay in the lobby.

This button can also automatically open the created table to other players, which can be configured in the extension's options and menu.

==Navigation menu==
In games where this is of interest, the extension adds a vertical menu on the left-hand side for quick navigation between the players' boards. In some games, there are also shortcuts to key elements of the game, such as the main board.
[[File:Side menu.png|none|thumb]]
This menu can be activated or deactivated in the game settings.
[[File:Sidemenu pref en.png|none|thumb|500x500px]]

==Floating menu==
If you're playing on a small screen, it could be a good idea to save space by hiding the game log and player panels.

An option allows you to display these two elements in floating menus.
[[File:Floatingmenu pref en.png|none|thumb|500x500px]]
[[File:Floatingmenu.png|none|thumb]]

==Deleting a game==
The extension adds a button for 'deleting' a game. This button appears next to the button for starting the game in the list of games.

Deleted games no longer appear in the list of games or in the lobby.
[[File:Delete game.png|none|thumb]]
It is possible to recover a deleted game by opening the extension options, or through the "settings" tab of the extension popup.
[[File:Delete game options en.png|none|thumb|800x800px]]

==Hide general chat==
[[File:Chat.png|left|thumb]]
An icon in the top right-hand corner of the screen allows you to show or hide the general chat.

This icon is not displayed when you are in a game and only allows you to hide the general chat; it does not allow you to stop receiving private messages or to hide the conversation in a game.

== Mute a player in game chat ==
[[File:Mute icon.png|left|thumb]]
In the game chat popup, the extension adds a new icon that lets you mute a player.

You can mute up to 10 players and manage the muted players list in the extension options.

This feature is designed to let you ignore a toxic player and finish the game in peace, but it doesn't report the user's behavior to Board Game Arena.

ChromeExtension

2025-03-04T14:54:00Z

Tof63: /* Advanced home page settings */

An extension for [https://chrome.google.com/webstore/detail/bga-chrome-extension/kchnhmpeopknjdjejognciimepllkacb Google Chrome] and [https://addons.mozilla.org/addon/board-game-arena-bga-extension/ Firefox] brought to you by [https://boardgamearena.com/player?id=84278471 Flavien] and [https://boardgamearena.com/player?id=85644210 Christophe].

The Google Chrome extension is compatible with all Chromium based browsers (Edge, Brave ...) and could also be used with Kiwi Browser on Android smartphones.

If you have a problem, a suggestion, or just want to leave a nice note, you can write to us on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here]

This extension adds the following features to the boardgamearena.com website.

==List of current games==
If you've activated automatic table tracking (see next chapter), then the extension icon shows you the number of games you're currently expected to play.

Click on the extension icon to open the list of your games in progress and access them quickly.
[[File:Popup dark.png|none|thumb]]
You'll also find a list of pending invitations, as well as the tournaments you've entered.

The "Friend's tables" tab allow you to search for a table opened by one of your friends with a free chair.

== Settings ==
The "settings" tab lets you access some of the extension's parameters:

* Miscellaneous parameters :
** A parameter to enable or disable automatic tracking of the state of tables you are on. If this option is enabled, then the extension will be able to tell you when it's your turn to play at one of the tables you're at, but you'll always be seen as connected by other players. If this option is disabled, then the extension won't be able to tell you when it's your turn to play, but other players will only see you logged in if you're actually on the site.
** When the tracking is enable, you can activate a sound notification and associate the mp3 you prefer for this notification.
** A parameter to redirect the website links to the classic lobby instead of the new one.
** A parameter to change the behavior of the 'Fast create' button added to the games in the lobby.
** A parameter to replace the default "wood" background by a solid-color background.
** A parameter to change the behavior of the newsfeed, if it's activated the newsfeed contains only my activity (and the messages of my groups).
* Game parameters:
** A parameter to show / hide your friends' activity in the game logs
** A parameter to show / hide the ELO score of the players in games.
* Home page settings : Parameters to select the elements that you want to display on the home page of the site.
* Game in progress page settings: Parameters to select the elements that you want to display on the 'Game in progress' page.
* Hidden games: Offer the possibility to undo the deletion of a game (see "Deleting a game").

[[File:Popup settings dark en.png|none|thumb|401x401px]]

== Advanced home page settings ==

By activating the advanced home page configuration, you can enter HTML code to place the elements you want exactly where you want them.

It is of course recommended that you have a minimum knowledge of HTML syntax to take full advantage of this option.

But by default, when you activate advanced mode, the extension offers you HTML code containing all possible elements. You can use this code as a starting point, deleting elements you don't need, moving elements around etc...

You can check your HTML code with an online tool like https://jsonformatter.org/html-validator

And if you've got an idea but can't write the HTML code for it, don't be frustrated - come and talk about it on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here] ;)
{| class="wikitable"
|+Predefined elements are:
!Code HTML
!Description
|-
|<nowiki><div id='bgaext-tournaments'></div></nowiki>
|Tournaments list
|-
|<nowiki><div id='bgaext-games-recent'></div></nowiki>
|New games list
|-
|<nowiki><div id='bgaext-games-popular'></div></nowiki>
|Popular games list
|-
|<nowiki><div id='bgaext-games-suggested'></div</nowiki>
|Recommended games list
|-
|<nowiki><div id='bgaext-achievements'></div></nowiki>
|Achievements
|-
|<nowiki><div id='bgaext-leaderboard'></div></nowiki>
|Hall of fame
|-
|<nowiki><div id='bgaext-newsfeed'></div></nowiki>
|Newfeed
|-
|<nowiki><div id='bgaext-service-status'></div></nowiki>
|Service status
|-
|<nowiki><div id='bgaext-games-classic'></div></nowiki>
|Discover our Classics
|-
|<nowiki><div id='bgaext-playmore'></div></nowiki>
|Play more!
|}
You can potentially write any HTML code, but the extension defines the following styles to help you:

* <nowiki><div class='bgaext-flex-col'> : the elements in this DIV will be placed in columns, one below the other, with a small margin to separate them</nowiki>
* <nowiki><div class='bgaext-flex-row'> : the elements in this DIV will be placed in line, across the entire page width, trying to respect the optimal size for each element</nowiki>

'''Example containing all possible elements.'''

A first row of three columns contains :

* First column: Tournaments
* Second column: An area with two rows
** The first row contains a list of new games, popular games and recommended games.
** The second row contains the "Achievments" and the "Hall of fame"
* Third column: News feed and service status

A second line with two columns contains :

* First column: The list of classic games
* Second column: “Play more!” area

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki><div id='bgaext-leaderboard'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''A simpler example with fewer elements'''

The example contains a single line with, in order: the news feed, tournaments, new games and popular games.
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki></div></nowiki>
'''My favorite display'''
<style>
#bgaext-achievements { width: 600px; }
#bgaext-newsfeed .bga-homepage-newsfeed { max-height: 1050px; overflow: auto; }
</style>

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row-distribution'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''Tips'''

To limit the height of the news feed, you can add CSS code like this, for example, to make a scrollbar appear:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: auto;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
or like this to truncate the content:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: hidden;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
To limit the height of the "Hall of fame", you can use the following code :
<style>
#bgaext-leaderboard .bga-ranked-player-list {
max-height: 525px;
overflow: hidden;
}
</style>

==Dark Mode==
[[File:Dark mode off.png|left|thumb]]
This icon in the top right-hand corner of the screen activates the dark mode for the entire site.

Once activated, you can then select a dominant colour by clicking on the arrow next to the icon to change the display theme slightly.

[[File:Dark mode on.png|left|thumb]]
[[File:Dark mode color.png|none|thumb|Choosing a color for dark mode]]
When you are in a game, it is displayed by default with the settings you have chosen for the site, but you can customise the game theme by selecting a color.

The site will continue to be displayed with the color you chose for the site, and the game will now be displayed with the color you chose for it.
==Hide friend's activities in game log==
The extension allow you to stop displaying your friend's activity in the game log.

You can find this option in the options of the extension and in the settings tabs of the extension menu. This is activated by default.
[[File:Friends activity pref en.png|none|thumb|364x364px]]

== Fast start button ==
The extension add a "Fast start" in the games in the lobby.

This button start a table with your default settings as the classic "Start" button do, but you stay in the lobby.

This button can also automatically open the created table to other players, which can be configured in the extension's options and menu.

==Navigation menu==
In games where this is of interest, the extension adds a vertical menu on the left-hand side for quick navigation between the players' boards. In some games, there are also shortcuts to key elements of the game, such as the main board.
[[File:Side menu.png|none|thumb]]
This menu can be activated or deactivated in the game settings.
[[File:Sidemenu pref en.png|none|thumb|500x500px]]

==Floating menu==
If you're playing on a small screen, it could be a good idea to save space by hiding the game log and player panels.

An option allows you to display these two elements in floating menus.
[[File:Floatingmenu pref en.png|none|thumb|500x500px]]
[[File:Floatingmenu.png|none|thumb]]

==Deleting a game==
The extension adds a button for 'deleting' a game. This button appears next to the button for starting the game in the list of games.

Deleted games no longer appear in the list of games or in the lobby.
[[File:Delete game.png|none|thumb]]
It is possible to recover a deleted game by opening the extension options, or through the "settings" tab of the extension popup.
[[File:Delete game options en.png|none|thumb|800x800px]]

==Hide general chat==
[[File:Chat.png|left|thumb]]
An icon in the top right-hand corner of the screen allows you to show or hide the general chat.

This icon is not displayed when you are in a game and only allows you to hide the general chat; it does not allow you to stop receiving private messages or to hide the conversation in a game.

== Mute a player in game chat ==
[[File:Mute icon.png|left|thumb]]
In the game chat popup, the extension adds a new icon that lets you mute a player.

You can mute up to 10 players and manage the muted players list in the extension options.

This feature is designed to let you ignore a toxic player and finish the game in peace, but it doesn't report the user's behavior to Board Game Arena.

ChromeExtension

2025-02-25T19:34:17Z

Tof63: /* Settings */

An extension for [https://chrome.google.com/webstore/detail/bga-chrome-extension/kchnhmpeopknjdjejognciimepllkacb Google Chrome] and [https://addons.mozilla.org/addon/board-game-arena-bga-extension/ Firefox] brought to you by [https://boardgamearena.com/player?id=84278471 Flavien] and [https://boardgamearena.com/player?id=85644210 Christophe].

The Google Chrome extension is compatible with all Chromium based browsers (Edge, Brave ...) and could also be used with Kiwi Browser on Android smartphones.

If you have a problem, a suggestion, or just want to leave a nice note, you can write to us on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here]

This extension adds the following features to the boardgamearena.com website.

==List of current games==
If you've activated automatic table tracking (see next chapter), then the extension icon shows you the number of games you're currently expected to play.

Click on the extension icon to open the list of your games in progress and access them quickly.
[[File:Popup dark.png|none|thumb]]
You'll also find a list of pending invitations, as well as the tournaments you've entered.

The "Friend's tables" tab allow you to search for a table opened by one of your friends with a free chair.

== Settings ==
The "settings" tab lets you access some of the extension's parameters:

* Miscellaneous parameters :
** A parameter to enable or disable automatic tracking of the state of tables you are on. If this option is enabled, then the extension will be able to tell you when it's your turn to play at one of the tables you're at, but you'll always be seen as connected by other players. If this option is disabled, then the extension won't be able to tell you when it's your turn to play, but other players will only see you logged in if you're actually on the site.
** When the tracking is enable, you can activate a sound notification and associate the mp3 you prefer for this notification.
** A parameter to redirect the website links to the classic lobby instead of the new one.
** A parameter to change the behavior of the 'Fast create' button added to the games in the lobby.
** A parameter to replace the default "wood" background by a solid-color background.
** A parameter to change the behavior of the newsfeed, if it's activated the newsfeed contains only my activity (and the messages of my groups).
* Game parameters:
** A parameter to show / hide your friends' activity in the game logs
** A parameter to show / hide the ELO score of the players in games.
* Home page settings : Parameters to select the elements that you want to display on the home page of the site.
* Game in progress page settings: Parameters to select the elements that you want to display on the 'Game in progress' page.
* Hidden games: Offer the possibility to undo the deletion of a game (see "Deleting a game").

[[File:Popup settings dark en.png|none|thumb|401x401px]]

== Advanced home page settings ==

By activating the advanced home page configuration, you can enter HTML code to place the elements you want exactly where you want them.

It is of course recommended that you have a minimum knowledge of HTML syntax to take full advantage of this option.

But by default, when you activate advanced mode, the extension offers you HTML code containing all possible elements. You can use this code as a starting point, deleting elements you don't need, moving elements around etc...

You can check your HTML code with an online tool like https://jsonformatter.org/html-validator

And if you've got an idea but can't write the HTML code for it, don't be frustrated - come and talk about it on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here] ;)
{| class="wikitable"
|+Predefined elements are:
!Code HTML
!Description
|-
|<nowiki><div id='bgaext-tournaments'></div></nowiki>
|Tournaments list
|-
|<nowiki><div id='bgaext-games-recent'></div></nowiki>
|New games list
|-
|<nowiki><div id='bgaext-games-popular'></div></nowiki>
|Popular games list
|-
|<nowiki><div id='bgaext-games-suggested'></div</nowiki>
|Recommended games list
|-
|<nowiki><div id='bgaext-achievements'></div></nowiki>
|Achievements
|-
|<nowiki><div id='bgaext-leaderboard'></div></nowiki>
|Hall of fame
|-
|<nowiki><div id='bgaext-newsfeed'></div></nowiki>
|Newfeed
|-
|<nowiki><div id='bgaext-service-status'></div></nowiki>
|Service status
|-
|<nowiki><div id='bgaext-games-classic'></div></nowiki>
|Discover our Classics
|-
|<nowiki><div id='bgaext-playmore'></div></nowiki>
|Play more!
|}
You can potentially write any HTML code, but the extension defines the following styles to help you:

* <nowiki><div class='bgaext-flex-col'> : the elements in this DIV will be placed in columns, one below the other, with a small margin to separate them</nowiki>
* <nowiki><div class='bgaext-flex-row'> : the elements in this DIV will be placed in line, across the entire page width, trying to respect the optimal size for each element</nowiki>

'''Example containing all possible elements.'''

A first row of three columns contains :

* First column: Tournaments
* Second column: An area with two rows
** The first row contains a list of new games, popular games and recommended games.
** The second row contains the "Achievments" and the "Hall of fame"
* Third column: News feed and service status

A second line with two columns contains :

* First column: The list of classic games
* Second column: “Play more!” area

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki><div id='bgaext-leaderboard'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''A simpler example with fewer elements'''

The example contains a single line with, in order: the news feed, tournaments, new games and popular games.
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki></div></nowiki>
'''Tips'''

To limit the height of the news feed, you can add CSS code like this, for example, to make a scrollbar appear:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: auto;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
or like this to truncate the content:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: hidden;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
To limit the height of the "Hall of fame", you can use the following code :
<style>
#bgaext-leaderboard .bga-ranked-player-list {
max-height: 525px;
overflow: hidden;
}
</style>

==Dark Mode==
[[File:Dark mode off.png|left|thumb]]
This icon in the top right-hand corner of the screen activates the dark mode for the entire site.

Once activated, you can then select a dominant colour by clicking on the arrow next to the icon to change the display theme slightly.

[[File:Dark mode on.png|left|thumb]]
[[File:Dark mode color.png|none|thumb|Choosing a color for dark mode]]
When you are in a game, it is displayed by default with the settings you have chosen for the site, but you can customise the game theme by selecting a color.

The site will continue to be displayed with the color you chose for the site, and the game will now be displayed with the color you chose for it.
==Hide friend's activities in game log==
The extension allow you to stop displaying your friend's activity in the game log.

You can find this option in the options of the extension and in the settings tabs of the extension menu. This is activated by default.
[[File:Friends activity pref en.png|none|thumb|364x364px]]

== Fast start button ==
The extension add a "Fast start" in the games in the lobby.

This button start a table with your default settings as the classic "Start" button do, but you stay in the lobby.

This button can also automatically open the created table to other players, which can be configured in the extension's options and menu.

==Navigation menu==
In games where this is of interest, the extension adds a vertical menu on the left-hand side for quick navigation between the players' boards. In some games, there are also shortcuts to key elements of the game, such as the main board.
[[File:Side menu.png|none|thumb]]
This menu can be activated or deactivated in the game settings.
[[File:Sidemenu pref en.png|none|thumb|500x500px]]

==Floating menu==
If you're playing on a small screen, it could be a good idea to save space by hiding the game log and player panels.

An option allows you to display these two elements in floating menus.
[[File:Floatingmenu pref en.png|none|thumb|500x500px]]
[[File:Floatingmenu.png|none|thumb]]

==Deleting a game==
The extension adds a button for 'deleting' a game. This button appears next to the button for starting the game in the list of games.

Deleted games no longer appear in the list of games or in the lobby.
[[File:Delete game.png|none|thumb]]
It is possible to recover a deleted game by opening the extension options, or through the "settings" tab of the extension popup.
[[File:Delete game options en.png|none|thumb|800x800px]]

==Hide general chat==
[[File:Chat.png|left|thumb]]
An icon in the top right-hand corner of the screen allows you to show or hide the general chat.

This icon is not displayed when you are in a game and only allows you to hide the general chat; it does not allow you to stop receiving private messages or to hide the conversation in a game.

== Mute a player in game chat ==
[[File:Mute icon.png|left|thumb]]
In the game chat popup, the extension adds a new icon that lets you mute a player.

You can mute up to 10 players and manage the muted players list in the extension options.

This feature is designed to let you ignore a toxic player and finish the game in peace, but it doesn't report the user's behavior to Board Game Arena.

ChromeExtension

2025-02-18T16:31:00Z

Tof63: /* Advanced home page settings */

An extension for [https://chrome.google.com/webstore/detail/bga-chrome-extension/kchnhmpeopknjdjejognciimepllkacb Google Chrome] and [https://addons.mozilla.org/addon/board-game-arena-bga-extension/ Firefox] brought to you by [https://boardgamearena.com/player?id=84278471 Flavien] and [https://boardgamearena.com/player?id=85644210 Christophe].

The Google Chrome extension is compatible with all Chromium based browsers (Edge, Brave ...) and could also be used with Kiwi Browser on Android smartphones.

If you have a problem, a suggestion, or just want to leave a nice note, you can write to us on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here]

This extension adds the following features to the boardgamearena.com website.

==List of current games==
If you've activated automatic table tracking (see next chapter), then the extension icon shows you the number of games you're currently expected to play.

Click on the extension icon to open the list of your games in progress and access them quickly.
[[File:Popup dark.png|none|thumb]]
You'll also find a list of pending invitations, as well as the tournaments you've entered.

The "Friend's tables" tab allow you to search for a table opened by one of your friends with a free chair.

== Settings ==
The "settings" tab lets you access some of the extension's parameters:

* Miscellaneous parameters :
** A parameter to enable or disable automatic tracking of the state of tables you are on. If this option is enabled, then the extension will be able to tell you when it's your turn to play at one of the tables you're at, but you'll always be seen as connected by other players. If this option is disabled, then the extension won't be able to tell you when it's your turn to play, but other players will only see you logged in if you're actually on the site.
** When the tracking is enable, you can activate a sound notification and associate the mp3 you prefer for this notification.
** A parameter to redirect the website links to the classic lobby instead of the new one.
** A parameter to change the behavior of the 'Fast create' button added to the games in the lobby.
** A parameter to replace the default "wood" background by a solid-color background.
* Game parameters:
** A parameter to show / hide your friends' activity in the game logs
** A parameter to show / hide the ELO score of the players in games.
* Home page settings : Parameters to select the elements that you want to display on the home page of the site.
* Game in progress page settings: Parameters to select the elements that you want to display on the 'Game in progress' page.
* Hidden games: Offer the possibility to undo the deletion of a game (see "Deleting a game").

[[File:Popup settings dark en.png|none|thumb|401x401px]]

== Advanced home page settings ==

By activating the advanced home page configuration, you can enter HTML code to place the elements you want exactly where you want them.

It is of course recommended that you have a minimum knowledge of HTML syntax to take full advantage of this option.

But by default, when you activate advanced mode, the extension offers you HTML code containing all possible elements. You can use this code as a starting point, deleting elements you don't need, moving elements around etc...

You can check your HTML code with an online tool like https://jsonformatter.org/html-validator

And if you've got an idea but can't write the HTML code for it, don't be frustrated - come and talk about it on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here] ;)
{| class="wikitable"
|+Predefined elements are:
!Code HTML
!Description
|-
|<nowiki><div id='bgaext-tournaments'></div></nowiki>
|Tournaments list
|-
|<nowiki><div id='bgaext-games-recent'></div></nowiki>
|New games list
|-
|<nowiki><div id='bgaext-games-popular'></div></nowiki>
|Popular games list
|-
|<nowiki><div id='bgaext-games-suggested'></div</nowiki>
|Recommended games list
|-
|<nowiki><div id='bgaext-achievements'></div></nowiki>
|Achievements
|-
|<nowiki><div id='bgaext-leaderboard'></div></nowiki>
|Hall of fame
|-
|<nowiki><div id='bgaext-newsfeed'></div></nowiki>
|Newfeed
|-
|<nowiki><div id='bgaext-service-status'></div></nowiki>
|Service status
|-
|<nowiki><div id='bgaext-games-classic'></div></nowiki>
|Discover our Classics
|-
|<nowiki><div id='bgaext-playmore'></div></nowiki>
|Play more!
|}
You can potentially write any HTML code, but the extension defines the following styles to help you:

* <nowiki><div class='bgaext-flex-col'> : the elements in this DIV will be placed in columns, one below the other, with a small margin to separate them</nowiki>
* <nowiki><div class='bgaext-flex-row'> : the elements in this DIV will be placed in line, across the entire page width, trying to respect the optimal size for each element</nowiki>

'''Example containing all possible elements.'''

A first row of three columns contains :

* First column: Tournaments
* Second column: An area with two rows
** The first row contains a list of new games, popular games and recommended games.
** The second row contains the "Achievments" and the "Hall of fame"
* Third column: News feed and service status

A second line with two columns contains :

* First column: The list of classic games
* Second column: “Play more!” area

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki><div id='bgaext-leaderboard'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''A simpler example with fewer elements'''

The example contains a single line with, in order: the news feed, tournaments, new games and popular games.
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki></div></nowiki>
'''Tips'''

To limit the height of the news feed, you can add CSS code like this, for example, to make a scrollbar appear:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: auto;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
or like this to truncate the content:
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: hidden;
}
</style>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
To limit the height of the "Hall of fame", you can use the following code :
<style>
#bgaext-leaderboard .bga-ranked-player-list {
max-height: 525px;
overflow: hidden;
}
</style>

==Dark Mode==
[[File:Dark mode off.png|left|thumb]]
This icon in the top right-hand corner of the screen activates the dark mode for the entire site.

Once activated, you can then select a dominant colour by clicking on the arrow next to the icon to change the display theme slightly.

[[File:Dark mode on.png|left|thumb]]
[[File:Dark mode color.png|none|thumb|Choosing a color for dark mode]]
When you are in a game, it is displayed by default with the settings you have chosen for the site, but you can customise the game theme by selecting a color.

The site will continue to be displayed with the color you chose for the site, and the game will now be displayed with the color you chose for it.
==Hide friend's activities in game log==
The extension allow you to stop displaying your friend's activity in the game log.

You can find this option in the options of the extension and in the settings tabs of the extension menu. This is activated by default.
[[File:Friends activity pref en.png|none|thumb|364x364px]]

== Fast start button ==
The extension add a "Fast start" in the games in the lobby.

This button start a table with your default settings as the classic "Start" button do, but you stay in the lobby.

This button can also automatically open the created table to other players, which can be configured in the extension's options and menu.

==Navigation menu==
In games where this is of interest, the extension adds a vertical menu on the left-hand side for quick navigation between the players' boards. In some games, there are also shortcuts to key elements of the game, such as the main board.
[[File:Side menu.png|none|thumb]]
This menu can be activated or deactivated in the game settings.
[[File:Sidemenu pref en.png|none|thumb|500x500px]]

==Floating menu==
If you're playing on a small screen, it could be a good idea to save space by hiding the game log and player panels.

An option allows you to display these two elements in floating menus.
[[File:Floatingmenu pref en.png|none|thumb|500x500px]]
[[File:Floatingmenu.png|none|thumb]]

==Deleting a game==
The extension adds a button for 'deleting' a game. This button appears next to the button for starting the game in the list of games.

Deleted games no longer appear in the list of games or in the lobby.
[[File:Delete game.png|none|thumb]]
It is possible to recover a deleted game by opening the extension options, or through the "settings" tab of the extension popup.
[[File:Delete game options en.png|none|thumb|800x800px]]

==Hide general chat==
[[File:Chat.png|left|thumb]]
An icon in the top right-hand corner of the screen allows you to show or hide the general chat.

This icon is not displayed when you are in a game and only allows you to hide the general chat; it does not allow you to stop receiving private messages or to hide the conversation in a game.

== Mute a player in game chat ==
[[File:Mute icon.png|left|thumb]]
In the game chat popup, the extension adds a new icon that lets you mute a player.

You can mute up to 10 players and manage the muted players list in the extension options.

This feature is designed to let you ignore a toxic player and finish the game in peace, but it doesn't report the user's behavior to Board Game Arena.

ChromeExtension

2025-01-29T12:58:48Z

Tof63: /* Advanced home page settings */

An extension for [https://chrome.google.com/webstore/detail/bga-chrome-extension/kchnhmpeopknjdjejognciimepllkacb Google Chrome] and [https://addons.mozilla.org/addon/board-game-arena-bga-extension/ Firefox] brought to you by [https://boardgamearena.com/player?id=84278471 Flavien] and [https://boardgamearena.com/player?id=85644210 Christophe].

The Google Chrome extension is compatible with all Chromium based browsers (Edge, Brave ...) and could also be used with Kiwi Browser on Android smartphones.

If you have a problem, a suggestion, or just want to leave a nice note, you can write to us on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here]

This extension adds the following features to the boardgamearena.com website.

==List of current games==
If you've activated automatic table tracking (see next chapter), then the extension icon shows you the number of games you're currently expected to play.

Click on the extension icon to open the list of your games in progress and access them quickly.
[[File:Popup dark.png|none|thumb]]
You'll also find a list of pending invitations, as well as the tournaments you've entered.

The "Friend's tables" tab allow you to search for a table opened by one of your friends with a free chair.

== Settings ==
The "settings" tab lets you access some of the extension's parameters:

* Miscellaneous parameters :
** A parameter to enable or disable automatic tracking of the state of tables you are on. If this option is enabled, then the extension will be able to tell you when it's your turn to play at one of the tables you're at, but you'll always be seen as connected by other players. If this option is disabled, then the extension won't be able to tell you when it's your turn to play, but other players will only see you logged in if you're actually on the site.
** When the tracking is enable, you can activate a sound notification and associate the mp3 you prefer for this notification.
** A parameter to redirect the website links to the classic lobby instead of the new one.
** A parameter to change the behavior of the 'Fast create' button added to the games in the lobby.
** A parameter to replace the default "wood" background by a solid-color background.
* Game parameters:
** A parameter to show / hide your friends' activity in the game logs
** A parameter to show / hide the ELO score of the players in games.
* Home page settings : Parameters to select the elements that you want to display on the home page of the site.
* Game in progress page settings: Parameters to select the elements that you want to display on the 'Game in progress' page.
* Hidden games: Offer the possibility to undo the deletion of a game (see "Deleting a game").

[[File:Popup settings dark en.png|none|thumb|401x401px]]

== Advanced home page settings ==

By activating the advanced home page configuration, you can enter HTML code to place the elements you want exactly where you want them.

It is of course recommended that you have a minimum knowledge of HTML syntax to take full advantage of this option.

But by default, when you activate advanced mode, the extension offers you HTML code containing all possible elements. You can use this code as a starting point, deleting elements you don't need, moving elements around etc...

You can check your HTML code with an online tool like https://jsonformatter.org/html-validator

And if you've got an idea but can't write the HTML code for it, don't be frustrated - come and talk about it on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here] ;)
{| class="wikitable"
|+Predefined elements are:
!Code HTML
!Description
|-
|<nowiki><div id='bgaext-tournaments'></div></nowiki>
|Tournaments list
|-
|<nowiki><div id='bgaext-games-recent'></div></nowiki>
|New games list
|-
|<nowiki><div id='bgaext-games-popular'></div></nowiki>
|Popular games list
|-
|<nowiki><div id='bgaext-games-suggested'></div</nowiki>
|Recommended games list
|-
|<nowiki><div id='bgaext-achievements'></div></nowiki>
|Achievements
|-
|<nowiki><div id='bgaext-leaderboard'></div></nowiki>
|Hall of fame
|-
|<nowiki><div id='bgaext-newsfeed'></div></nowiki>
|Newfeed
|-
|<nowiki><div id='bgaext-service-status'></div></nowiki>
|Service status
|-
|<nowiki><div id='bgaext-games-classic'></div></nowiki>
|Discover our Classics
|-
|<nowiki><div id='bgaext-playmore'></div></nowiki>
|Play more!
|}
You can potentially write any HTML code, but the extension defines the following styles to help you:

* <nowiki><div class='bgaext-flex-col'> : the elements in this DIV will be placed in columns, one below the other, with a small margin to separate them</nowiki>
* <nowiki><div class='bgaext-flex-row'> : the elements in this DIV will be placed in line, across the entire page width, trying to respect the optimal size for each element</nowiki>

'''Example containing all possible elements.'''

A first row of three columns contains :

* First column: Tournaments
* Second column: An area with two rows
** The first row contains a list of new games, popular games and recommended games.
** The second row contains the "Achievments" and the "Hall of fame"
* Third column: News feed and service status

A second line with two columns contains :

* First column: The list of classic games
* Second column: “Play more!” area

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki><div id='bgaext-leaderboard'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''A simpler example with fewer elements'''

The example contains a single line with, in order: the news feed, tournaments, new games and popular games.
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki></div></nowiki>
'''Tips'''

To limit the height of the news feed, you can add CSS code like this, for example, to make a scrollbar appear:
<nowiki><div class='bgaext-flex-row'></nowiki>
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: auto;
}
</style>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>
or like this to truncate the content:
<nowiki><div class='bgaext-flex-row'></nowiki>
<style>
#bgaext-newsfeed .bga-homepage-newsfeed {
max-height: 900px;
overflow: hidden;
}
</style>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki></div></nowiki>

==Dark Mode==
[[File:Dark mode off.png|left|thumb]]
This icon in the top right-hand corner of the screen activates the dark mode for the entire site.

Once activated, you can then select a dominant colour by clicking on the arrow next to the icon to change the display theme slightly.

[[File:Dark mode on.png|left|thumb]]
[[File:Dark mode color.png|none|thumb|Choosing a color for dark mode]]
When you are in a game, it is displayed by default with the settings you have chosen for the site, but you can customise the game theme by selecting a color.

The site will continue to be displayed with the color you chose for the site, and the game will now be displayed with the color you chose for it.
==Hide friend's activities in game log==
The extension allow you to stop displaying your friend's activity in the game log.

You can find this option in the options of the extension and in the settings tabs of the extension menu. This is activated by default.
[[File:Friends activity pref en.png|none|thumb|364x364px]]

== Fast start button ==
The extension add a "Fast start" in the games in the lobby.

This button start a table with your default settings as the classic "Start" button do, but you stay in the lobby.

This button can also automatically open the created table to other players, which can be configured in the extension's options and menu.

==Navigation menu==
In games where this is of interest, the extension adds a vertical menu on the left-hand side for quick navigation between the players' boards. In some games, there are also shortcuts to key elements of the game, such as the main board.
[[File:Side menu.png|none|thumb]]
This menu can be activated or deactivated in the game settings.
[[File:Sidemenu pref en.png|none|thumb|500x500px]]

==Floating menu==
If you're playing on a small screen, it could be a good idea to save space by hiding the game log and player panels.

An option allows you to display these two elements in floating menus.
[[File:Floatingmenu pref en.png|none|thumb|500x500px]]
[[File:Floatingmenu.png|none|thumb]]

==Deleting a game==
The extension adds a button for 'deleting' a game. This button appears next to the button for starting the game in the list of games.

Deleted games no longer appear in the list of games or in the lobby.
[[File:Delete game.png|none|thumb]]
It is possible to recover a deleted game by opening the extension options, or through the "settings" tab of the extension popup.
[[File:Delete game options en.png|none|thumb|800x800px]]

==Hide general chat==
[[File:Chat.png|left|thumb]]
An icon in the top right-hand corner of the screen allows you to show or hide the general chat.

This icon is not displayed when you are in a game and only allows you to hide the general chat; it does not allow you to stop receiving private messages or to hide the conversation in a game.

== Mute a player in game chat ==
[[File:Mute icon.png|left|thumb]]
In the game chat popup, the extension adds a new icon that lets you mute a player.

You can mute up to 10 players and manage the muted players list in the extension options.

This feature is designed to let you ignore a toxic player and finish the game in peace, but it doesn't report the user's behavior to Board Game Arena.

ChromeExtension

2025-01-29T07:47:28Z

Tof63: /* Advanced home page settings */

An extension for [https://chrome.google.com/webstore/detail/bga-chrome-extension/kchnhmpeopknjdjejognciimepllkacb Google Chrome] and [https://addons.mozilla.org/addon/board-game-arena-bga-extension/ Firefox] brought to you by [https://boardgamearena.com/player?id=84278471 Flavien] and [https://boardgamearena.com/player?id=85644210 Christophe].

The Google Chrome extension is compatible with all Chromium based browsers (Edge, Brave ...) and could also be used with Kiwi Browser on Android smartphones.

If you have a problem, a suggestion, or just want to leave a nice note, you can write to us on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here]

This extension adds the following features to the boardgamearena.com website.

==List of current games==
If you've activated automatic table tracking (see next chapter), then the extension icon shows you the number of games you're currently expected to play.

Click on the extension icon to open the list of your games in progress and access them quickly.
[[File:Popup dark.png|none|thumb]]
You'll also find a list of pending invitations, as well as the tournaments you've entered.

The "Friend's tables" tab allow you to search for a table opened by one of your friends with a free chair.

== Settings ==
The "settings" tab lets you access some of the extension's parameters:

* Miscellaneous parameters :
** A parameter to enable or disable automatic tracking of the state of tables you are on. If this option is enabled, then the extension will be able to tell you when it's your turn to play at one of the tables you're at, but you'll always be seen as connected by other players. If this option is disabled, then the extension won't be able to tell you when it's your turn to play, but other players will only see you logged in if you're actually on the site.
** When the tracking is enable, you can activate a sound notification and associate the mp3 you prefer for this notification.
** A parameter to redirect the website links to the classic lobby instead of the new one.
** A parameter to change the behavior of the 'Fast create' button added to the games in the lobby.
** A parameter to replace the default "wood" background by a solid-color background.
* Game parameters:
** A parameter to show / hide your friends' activity in the game logs
** A parameter to show / hide the ELO score of the players in games.
* Home page settings : Parameters to select the elements that you want to display on the home page of the site.
* Game in progress page settings: Parameters to select the elements that you want to display on the 'Game in progress' page.
* Hidden games: Offer the possibility to undo the deletion of a game (see "Deleting a game").

[[File:Popup settings dark en.png|none|thumb|401x401px]]

== Advanced home page settings ==

By activating the advanced home page configuration, you can enter HTML code to place the elements you want exactly where you want them.

It is of course recommended that you have a minimum knowledge of HTML syntax to take full advantage of this option.

But by default, when you activate advanced mode, the extension offers you HTML code containing all possible elements. You can use this code as a starting point, deleting elements you don't need, moving elements around etc...

You can check your HTML code with an online tool like https://jsonformatter.org/html-validator

And if you've got an idea but can't write the HTML code for it, don't be frustrated - come and talk about it on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here] ;)
{| class="wikitable"
|+Predefined elements are:
!Code HTML
!Description
|-
|<nowiki><div id='bgaext-tournaments'></div></nowiki>
|Tournaments list
|-
|<nowiki><div id='bgaext-games-recent'></div></nowiki>
|New games list
|-
|<nowiki><div id='bgaext-games-popular'></div></nowiki>
|Popular games list
|-
|<nowiki><div id='bgaext-games-suggested'></div</nowiki>
|Recommended games list
|-
|<nowiki><div id='bgaext-achievements'></div></nowiki>
|Achievements
|-
|<nowiki><div id='bgaext-leaderboard'></div></nowiki>
|Hall of fame
|-
|<nowiki><div id='bgaext-newsfeed'></div></nowiki>
|Newfeed
|-
|<nowiki><div id='bgaext-service-status'></div></nowiki>
|Service status
|-
|<nowiki><div id='bgaext-games-classic'></div></nowiki>
|Discover our Classics
|-
|<nowiki><div id='bgaext-playmore'></div></nowiki>
|Play more!
|}
You can potentially write any HTML code, but the extension defines the following styles to help you:

* <nowiki><div class='bgaext-flex-col'> : the elements in this DIV will be placed in columns, one below the other, with a small margin to separate them</nowiki>
* <nowiki><div class='bgaext-flex-row'> : the elements in this DIV will be placed in line, across the entire page width, trying to respect the optimal size for each element</nowiki>

'''Example containing all possible elements.'''

A first row of three columns contains :

* First column: Tournaments
* Second column: An area with two rows
** The first row contains a list of new games, popular games and recommended games.
** The second row contains the "Achievments" and the "Hall of fame"
* Third column: News feed and service status

A second line with two columns contains :

* First column: The list of classic games
* Second column: “Play more!” area

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki><div id='bgaext-leaderboard'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''A simpler example with fewer elements'''

The example contains a single line with, in order: the news feed, tournaments, new games and popular games.
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki></div></nowiki>

==Dark Mode==
[[File:Dark mode off.png|left|thumb]]
This icon in the top right-hand corner of the screen activates the dark mode for the entire site.

Once activated, you can then select a dominant colour by clicking on the arrow next to the icon to change the display theme slightly.

[[File:Dark mode on.png|left|thumb]]
[[File:Dark mode color.png|none|thumb|Choosing a color for dark mode]]
When you are in a game, it is displayed by default with the settings you have chosen for the site, but you can customise the game theme by selecting a color.

The site will continue to be displayed with the color you chose for the site, and the game will now be displayed with the color you chose for it.
==Hide friend's activities in game log==
The extension allow you to stop displaying your friend's activity in the game log.

You can find this option in the options of the extension and in the settings tabs of the extension menu. This is activated by default.
[[File:Friends activity pref en.png|none|thumb|364x364px]]

== Fast start button ==
The extension add a "Fast start" in the games in the lobby.

This button start a table with your default settings as the classic "Start" button do, but you stay in the lobby.

This button can also automatically open the created table to other players, which can be configured in the extension's options and menu.

==Navigation menu==
In games where this is of interest, the extension adds a vertical menu on the left-hand side for quick navigation between the players' boards. In some games, there are also shortcuts to key elements of the game, such as the main board.
[[File:Side menu.png|none|thumb]]
This menu can be activated or deactivated in the game settings.
[[File:Sidemenu pref en.png|none|thumb|500x500px]]

==Floating menu==
If you're playing on a small screen, it could be a good idea to save space by hiding the game log and player panels.

An option allows you to display these two elements in floating menus.
[[File:Floatingmenu pref en.png|none|thumb|500x500px]]
[[File:Floatingmenu.png|none|thumb]]

==Deleting a game==
The extension adds a button for 'deleting' a game. This button appears next to the button for starting the game in the list of games.

Deleted games no longer appear in the list of games or in the lobby.
[[File:Delete game.png|none|thumb]]
It is possible to recover a deleted game by opening the extension options, or through the "settings" tab of the extension popup.
[[File:Delete game options en.png|none|thumb|800x800px]]

==Hide general chat==
[[File:Chat.png|left|thumb]]
An icon in the top right-hand corner of the screen allows you to show or hide the general chat.

This icon is not displayed when you are in a game and only allows you to hide the general chat; it does not allow you to stop receiving private messages or to hide the conversation in a game.

== Mute a player in game chat ==
[[File:Mute icon.png|left|thumb]]
In the game chat popup, the extension adds a new icon that lets you mute a player.

You can mute up to 10 players and manage the muted players list in the extension options.

This feature is designed to let you ignore a toxic player and finish the game in peace, but it doesn't report the user's behavior to Board Game Arena.

ChromeExtension

2025-01-28T21:10:27Z

Tof63: /* Advanced home page settings */

An extension for [https://chrome.google.com/webstore/detail/bga-chrome-extension/kchnhmpeopknjdjejognciimepllkacb Google Chrome] and [https://addons.mozilla.org/addon/board-game-arena-bga-extension/ Firefox] brought to you by [https://boardgamearena.com/player?id=84278471 Flavien] and [https://boardgamearena.com/player?id=85644210 Christophe].

The Google Chrome extension is compatible with all Chromium based browsers (Edge, Brave ...) and could also be used with Kiwi Browser on Android smartphones.

If you have a problem, a suggestion, or just want to leave a nice note, you can write to us on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here]

This extension adds the following features to the boardgamearena.com website.

==List of current games==
If you've activated automatic table tracking (see next chapter), then the extension icon shows you the number of games you're currently expected to play.

Click on the extension icon to open the list of your games in progress and access them quickly.
[[File:Popup dark.png|none|thumb]]
You'll also find a list of pending invitations, as well as the tournaments you've entered.

The "Friend's tables" tab allow you to search for a table opened by one of your friends with a free chair.

== Settings ==
The "settings" tab lets you access some of the extension's parameters:

* Miscellaneous parameters :
** A parameter to enable or disable automatic tracking of the state of tables you are on. If this option is enabled, then the extension will be able to tell you when it's your turn to play at one of the tables you're at, but you'll always be seen as connected by other players. If this option is disabled, then the extension won't be able to tell you when it's your turn to play, but other players will only see you logged in if you're actually on the site.
** When the tracking is enable, you can activate a sound notification and associate the mp3 you prefer for this notification.
** A parameter to redirect the website links to the classic lobby instead of the new one.
** A parameter to change the behavior of the 'Fast create' button added to the games in the lobby.
** A parameter to replace the default "wood" background by a solid-color background.
* Game parameters:
** A parameter to show / hide your friends' activity in the game logs
** A parameter to show / hide the ELO score of the players in games.
* Home page settings : Parameters to select the elements that you want to display on the home page of the site.
* Game in progress page settings: Parameters to select the elements that you want to display on the 'Game in progress' page.
* Hidden games: Offer the possibility to undo the deletion of a game (see "Deleting a game").

[[File:Popup settings dark en.png|none|thumb|401x401px]]

== Advanced home page settings ==

By activating the advanced home page configuration, you can enter HTML code to place the elements you want exactly where you want them.

It is of course recommended that you have a minimum knowledge of HTML syntax to take full advantage of this option.

But by default, when you activate advanced mode, the extension offers you HTML code containing all possible elements. You can use this code as a starting point, deleting elements you don't need, moving elements around etc...

And if you've got an idea but can't write the HTML code for it, don't be frustrated - come and talk about it on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here] ;)
{| class="wikitable"
|+Predefined elements are:
!Code HTML
!Description
|-
|<nowiki><div id='bgaext-tournaments'></div></nowiki>
|Tournaments list
|-
|<nowiki><div id='bgaext-games-recent'></div></nowiki>
|New games list
|-
|<nowiki><div id='bgaext-games-popular'></div></nowiki>
|Popular games list
|-
|<nowiki><div id='bgaext-games-suggested'></div</nowiki>
|Recommended games list
|-
|<nowiki><div id='bgaext-achievements'></div></nowiki>
|Achievements
|-
|<nowiki><div id='bgaext-leaderboard'></div></nowiki>
|Hall of fame
|-
|<nowiki><div id='bgaext-newsfeed'></div></nowiki>
|Newfeed
|-
|<nowiki><div id='bgaext-service-status'></div></nowiki>
|Service status
|-
|<nowiki><div id='bgaext-games-classic'></div></nowiki>
|Discover our Classics
|-
|<nowiki><div id='bgaext-playmore'></div></nowiki>
|Play more!
|}
You can potentially write any HTML code, but the extension defines the following styles to help you:

* <nowiki><div class='bgaext-flex-col'> : the elements in this DIV will be placed in columns, one below the other, with a small margin to separate them</nowiki>
* <nowiki><div class='bgaext-flex-row'> : the elements in this DIV will be placed in line, across the entire page width, trying to respect the optimal size for each element</nowiki>

'''Example containing all possible elements.'''

A first row of three columns contains :

* First column: Tournaments
* Second column: An area with two rows
** The first row contains a list of new games, popular games and recommended games.
** The second row contains the "Achievments" and the "Hall of fame"
* Third column: News feed and service status

A second line with two columns contains :

* First column: The list of classic games
* Second column: “Play more!” area

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki><div id='bgaext-leaderboard'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''A simpler example with fewer elements'''

The example contains a single line with, in order: the news feed, tournaments, new games and popular games.
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki></div></nowiki>

==Dark Mode==
[[File:Dark mode off.png|left|thumb]]
This icon in the top right-hand corner of the screen activates the dark mode for the entire site.

Once activated, you can then select a dominant colour by clicking on the arrow next to the icon to change the display theme slightly.

[[File:Dark mode on.png|left|thumb]]
[[File:Dark mode color.png|none|thumb|Choosing a color for dark mode]]
When you are in a game, it is displayed by default with the settings you have chosen for the site, but you can customise the game theme by selecting a color.

The site will continue to be displayed with the color you chose for the site, and the game will now be displayed with the color you chose for it.
==Hide friend's activities in game log==
The extension allow you to stop displaying your friend's activity in the game log.

You can find this option in the options of the extension and in the settings tabs of the extension menu. This is activated by default.
[[File:Friends activity pref en.png|none|thumb|364x364px]]

== Fast start button ==
The extension add a "Fast start" in the games in the lobby.

This button start a table with your default settings as the classic "Start" button do, but you stay in the lobby.

This button can also automatically open the created table to other players, which can be configured in the extension's options and menu.

==Navigation menu==
In games where this is of interest, the extension adds a vertical menu on the left-hand side for quick navigation between the players' boards. In some games, there are also shortcuts to key elements of the game, such as the main board.
[[File:Side menu.png|none|thumb]]
This menu can be activated or deactivated in the game settings.
[[File:Sidemenu pref en.png|none|thumb|500x500px]]

==Floating menu==
If you're playing on a small screen, it could be a good idea to save space by hiding the game log and player panels.

An option allows you to display these two elements in floating menus.
[[File:Floatingmenu pref en.png|none|thumb|500x500px]]
[[File:Floatingmenu.png|none|thumb]]

==Deleting a game==
The extension adds a button for 'deleting' a game. This button appears next to the button for starting the game in the list of games.

Deleted games no longer appear in the list of games or in the lobby.
[[File:Delete game.png|none|thumb]]
It is possible to recover a deleted game by opening the extension options, or through the "settings" tab of the extension popup.
[[File:Delete game options en.png|none|thumb|800x800px]]

==Hide general chat==
[[File:Chat.png|left|thumb]]
An icon in the top right-hand corner of the screen allows you to show or hide the general chat.

This icon is not displayed when you are in a game and only allows you to hide the general chat; it does not allow you to stop receiving private messages or to hide the conversation in a game.

== Mute a player in game chat ==
[[File:Mute icon.png|left|thumb]]
In the game chat popup, the extension adds a new icon that lets you mute a player.

You can mute up to 10 players and manage the muted players list in the extension options.

This feature is designed to let you ignore a toxic player and finish the game in peace, but it doesn't report the user's behavior to Board Game Arena.

ChromeExtension

2025-01-28T21:01:01Z

Tof63: /* Advanced home page settings */

An extension for [https://chrome.google.com/webstore/detail/bga-chrome-extension/kchnhmpeopknjdjejognciimepllkacb Google Chrome] and [https://addons.mozilla.org/addon/board-game-arena-bga-extension/ Firefox] brought to you by [https://boardgamearena.com/player?id=84278471 Flavien] and [https://boardgamearena.com/player?id=85644210 Christophe].

The Google Chrome extension is compatible with all Chromium based browsers (Edge, Brave ...) and could also be used with Kiwi Browser on Android smartphones.

If you have a problem, a suggestion, or just want to leave a nice note, you can write to us on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here]

This extension adds the following features to the boardgamearena.com website.

==List of current games==
If you've activated automatic table tracking (see next chapter), then the extension icon shows you the number of games you're currently expected to play.

Click on the extension icon to open the list of your games in progress and access them quickly.
[[File:Popup dark.png|none|thumb]]
You'll also find a list of pending invitations, as well as the tournaments you've entered.

The "Friend's tables" tab allow you to search for a table opened by one of your friends with a free chair.

== Settings ==
The "settings" tab lets you access some of the extension's parameters:

* Miscellaneous parameters :
** A parameter to enable or disable automatic tracking of the state of tables you are on. If this option is enabled, then the extension will be able to tell you when it's your turn to play at one of the tables you're at, but you'll always be seen as connected by other players. If this option is disabled, then the extension won't be able to tell you when it's your turn to play, but other players will only see you logged in if you're actually on the site.
** When the tracking is enable, you can activate a sound notification and associate the mp3 you prefer for this notification.
** A parameter to redirect the website links to the classic lobby instead of the new one.
** A parameter to change the behavior of the 'Fast create' button added to the games in the lobby.
** A parameter to replace the default "wood" background by a solid-color background.
* Game parameters:
** A parameter to show / hide your friends' activity in the game logs
** A parameter to show / hide the ELO score of the players in games.
* Home page settings : Parameters to select the elements that you want to display on the home page of the site.
* Game in progress page settings: Parameters to select the elements that you want to display on the 'Game in progress' page.
* Hidden games: Offer the possibility to undo the deletion of a game (see "Deleting a game").

[[File:Popup settings dark en.png|none|thumb|401x401px]]

== Advanced home page settings ==

By activating the advanced home page configuration, you can enter HTML code to place the elements you want exactly where you want them.

It is of course recommended that you have a minimum knowledge of HTML syntax to take full advantage of this option.

But by default, when you activate advanced mode, the extension offers you HTML code containing all possible elements. You can use this code as a starting point, deleting elements you don't need, moving elements around etc...

And if you've got an idea but can't write the HTML code for it, don't be frustrated - come and talk about it on the forum [https://boardgamearena.com/forum/viewtopic.php?t=30509 here] ;)
{| class="wikitable"
|+Les éléments prédéfinis sont les suivants :
!Code HTML
!Description
|-
|<nowiki><div id='bgaext-tournaments'></div></nowiki>
|Tournaments list
|-
|<nowiki><div id='bgaext-games-recent'></div></nowiki>
|New games list
|-
|<nowiki><div id='bgaext-games-popular'></div></nowiki>
|Popular games list
|-
|<nowiki><div id='bgaext-games-suggested'></div</nowiki>
|Recommended games list
|-
|<nowiki><div id='bgaext-achievements'></div></nowiki>
|Achievements
|-
|<nowiki><div id='bgaext-leaderboard'></div></nowiki>
|Hall of fame
|-
|<nowiki><div id='bgaext-newsfeed'></div></nowiki>
|Newfeed
|-
|<nowiki><div id='bgaext-service-status'></div></nowiki>
|Service status
|-
|<nowiki><div id='bgaext-games-classic'></div></nowiki>
|Discover our Classics
|-
|<nowiki><div id='bgaext-playmore'></div></nowiki>
|Play more!
|}
You can potentially write any HTML code, but the extension defines the following styles to help you:

* <nowiki><div class='bgaext-flex-col'> : the elements in this DIV will be placed in columns, one below the other, with a small margin to separate them</nowiki>
* <nowiki><div class='bgaext-flex-row'> : the elements in this DIV will be placed in line, across the entire page width, trying to respect the optimal size for each element</nowiki>

'''Example containing all possible elements.'''

A first row of three columns contains :

* First column: Tournaments
* Second column: An area with two rows
** The first row contains a list of new games, popular games and recommended games.
** The second row contains the "Achievments" and the "Hall of fame"
* Third column: News feed and service status

A second line with two columns contains :

* First column: The list of classic games
* Second column: “Play more!” area

<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki><div id='bgaext-games-suggested'></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-achievements'></div></nowiki>
<nowiki><div id='bgaext-leaderboard'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-col'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-service-status'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-games-classic'></div></nowiki>
<nowiki><div id='bgaext-playmore'></div></nowiki>
<nowiki></div></nowiki>
<nowiki></div></nowiki>
'''A simpler example with fewer elements'''

The example contains a single line with, in order: the news feed, tournaments, new games and popular games.
<nowiki><div class='bgaext-flex-row'></nowiki>
<nowiki><div id='bgaext-newsfeed'></div></nowiki>
<nowiki><div id='bgaext-tournaments'></div></nowiki>
<nowiki><div id='bgaext-games-recent'></div></nowiki>
<nowiki><div id='bgaext-games-popular'></div></nowiki>
<nowiki></div></nowiki>

==Dark Mode==
[[File:Dark mode off.png|left|thumb]]
This icon in the top right-hand corner of the screen activates the dark mode for the entire site.

Once activated, you can then select a dominant colour by clicking on the arrow next to the icon to change the display theme slightly.

[[File:Dark mode on.png|left|thumb]]
[[File:Dark mode color.png|none|thumb|Choosing a color for dark mode]]
When you are in a game, it is displayed by default with the settings you have chosen for the site, but you can customise the game theme by selecting a color.

The site will continue to be displayed with the color you chose for the site, and the game will now be displayed with the color you chose for it.
==Hide friend's activities in game log==
The extension allow you to stop displaying your friend's activity in the game log.

You can find this option in the options of the extension and in the settings tabs of the extension menu. This is activated by default.
[[File:Friends activity pref en.png|none|thumb|364x364px]]

== Fast start button ==
The extension add a "Fast start" in the games in the lobby.

This button start a table with your default settings as the classic "Start" button do, but you stay in the lobby.

This button can also automatically open the created table to other players, which can be configured in the extension's options and menu.

==Navigation menu==
In games where this is of interest, the extension adds a vertical menu on the left-hand side for quick navigation between the players' boards. In some games, there are also shortcuts to key elements of the game, such as the main board.
[[File:Side menu.png|none|thumb]]
This menu can be activated or deactivated in the game settings.
[[File:Sidemenu pref en.png|none|thumb|500x500px]]

==Floating menu==
If you're playing on a small screen, it could be a good idea to save space by hiding the game log and player panels.

An option allows you to display these two elements in floating menus.
[[File:Floatingmenu pref en.png|none|thumb|500x500px]]
[[File:Floatingmenu.png|none|thumb]]

==Deleting a game==
The extension adds a button for 'deleting' a game. This button appears next to the button for starting the game in the list of games.

Deleted games no longer appear in the list of games or in the lobby.
[[File:Delete game.png|none|thumb]]
It is possible to recover a deleted game by opening the extension options, or through the "settings" tab of the extension popup.
[[File:Delete game options en.png|none|thumb|800x800px]]

==Hide general chat==
[[File:Chat.png|left|thumb]]
An icon in the top right-hand corner of the screen allows you to show or hide the general chat.

This icon is not displayed when you are in a game and only allows you to hide the general chat; it does not allow you to stop receiving private messages or to hide the conversation in a game.

== Mute a player in game chat ==
[[File:Mute icon.png|left|thumb]]
In the game chat popup, the extension adds a new icon that lets you mute a player.

You can mute up to 10 players and manage the muted players list in the extension options.

This feature is designed to let you ignore a toxic player and finish the game in peace, but it doesn't report the user's behavior to Board Game Arena.

ChromeExtension

2025-01-28T20:45:38Z

Tof63: /* Advanced home page settings */

ChromeExtension

2025-01-28T19:13:52Z

Tof63:

ChromeExtension

2025-01-23T15:38:53Z

Tof63: /* List of current games */

ChromeExtension

2025-01-07T18:45:14Z

Tof63:

ChromeExtension

2025-01-05T19:45:39Z

Tof63:

ChromeExtension

2024-10-14T16:39:51Z

Tof63: /* Mute a player in game chat */

ChromeExtension

2024-10-14T10:17:28Z

Tof63: Mute player feature

File:Mute icon.png

2024-10-14T10:10:56Z

Tof63:

Mute icon

File:Friends activity pref en.png

2024-10-09T15:41:57Z

Tof63: Tof63 uploaded a new version of File:Friends activity pref en.png

Friends activity pref en

ChromeExtension

2024-10-09T15:41:41Z

Tof63:

File:Sidemenu pref en.png

2024-10-09T15:40:36Z

Tof63: Tof63 reverted File:Sidemenu pref en.png to an old version

Sidemenu pref en

ChromeExtension

2024-10-09T15:39:34Z

Tof63:

File:Sidemenu pref en.png

2024-10-09T15:39:01Z

Tof63: Tof63 uploaded a new version of File:Sidemenu pref en.png

Sidemenu pref en

ChromeExtension

2024-10-09T15:38:27Z

Tof63: /* Hide friend's activities in game log */