Themes - Cockatrice/Cockatrice GitHub Wiki

Table of Contents

Introduction

This page explains how to customize the visual aspect of Cockatrice. Starting in September 2015, Cockatrice has the ability to load a visual "theme" that defines a custom look (colors, fonts, sizes..) and allows the use of custom images.

What is a theme?

A Cockatrice theme is a folder containing a style sheet (css) and custom resources (images). Some basic themes are already bundled with Cockatrice inside the "themes" directory, typically installed to:

  • Windows: C:\Program Files (x86)\Cockatrice\themes
  • Linux: /usr/share/cockatrice/themes or /usr/local/share/cockatrice/themes
  • Mac OSX: Cockatrice.app/Contents/Resources/themes

Bundled themes should not be modified; new installs may overwrite changes to that location. To make changes, create a new theme inside your user's app data directory. Cockatrice will load and list themes found both in the bundled location and in your user data.

Non-default themes should be placed in the following locations. Create this directory if it doesn't exist.

  • Windows: C:\Users\USERNAME\AppData\Local\Cockatrice\Cockatrice\themes
  • Linux: ~/.local/share/Cockatrice/Cockatrice/themes
  • Mac OSX: ~/Library/Application Support/Cockatrice/Cockatrice/themes

Copy the "Default" theme folder and paste it into the user themes directory, then replace the files inside with whatever images you wish to use.

How to create a theme?

First locate the "themes" folder inside of your user's profile directory; if the directory doesn't exist yet, you can create one in the location above.

Then create a new folder inside the "themes" directory and name it you chosen theme name. This will be the base directory containing all the files that make up your theme.

Customizing images

In order to customize the images used by Cockatrice, you can add your custom images inside your theme folder with the right image name. If an image is not found in your theme, the default image bundled with Cockatrice will be used, so you only need to add the images that you want to customize.

You can add the image using any format that Cockatrice is able to "load" on your pc. Typically, PNGs, JPGs, or SVGs should be the more preferable formats.

The long list of all image

Related images are grouped in subfolders. If you can't find an image in this list we probably missed it please have a look here.

In addition, you can view the tree structure of the themes folder here.

Main folder:

Image name Description
cardback card back
hand image to visualize hand size
hr an horizontal line used in the deck print
cockatrice the application icon

"config" subfolder - icons used in the settings page

Images should be around 64x64px in size.

Image name Description
appearance icon for the "appearance" section
deckeditor icon for the "deckeditor" section
general icon for the "general" section
interface icon for the "interface" section
messages icon for the "messages" section
shorcuts icon for the "shorcuts" section
sound icon for the "sound" section

"counters" subfolder - different colors counters

Images are rendered at 20x20px (25x25px for life counter)

Image name Description
b Black counter
b_highlight Highlighted black counter
g Green counter
g_highlight Highlighted green counter
general General counter (used for life)
general_highlight Highlighted general counter
r Red counter
r_highlight Highlighted red counter
storm Storm counter
storm_highlight Highlighted storm counter
u Blue counter
u_highlight Highlighted blue counter
w White counter
w_highlight Highlighted white counter

"countries" subfolder - all the countries flags

One image per flag. Images are named after the lowercase 2-characters country code. (See wikipedia)

Example:

Image name Description
it Flag for "Italy"
us Flag for "USA"

"genders" subfolder - gender icons

These icons are used to represent the gender the user prefers getting talked as.

Image name Description
female The user chose feminine pronouns
male The user chose masculine pronouns
unknown The user didn't make a choice (neutral)

"icons" subfolder - generic icons used in the interface

These are generic icons used in the interface to map basic actions or functionalities. They are typically drawn on buttons, so their size is around the size of an icon: 64x64 px should be fine.

Deck and set editor: arrows

Image name Description
arrow_bottom_green Double down arrow, green
arrow_down_green Single down arrow, green
arrow_left_green Left arrow, green
arrow_right_blue Right arrow, blue
arrow_right_green Right arrow, green
arrow_top_green Double up arrow, green
arrow_up_green Up arrow, green

In game: player status

Image name Description
player Player icon in game
conceded Player status: the player has conceded the game
not_ready_start Player status: the player is not "ready to start" the game
ready_start Player status: the player is "ready to start" the game
spectator Player status: the user is a spectator

Generic icons

Image name Description
clearsearch Clear the search terms
decrement Decrement a counter (less)
delete "Delete" something
increment Increment a counter (plus)
lock Locked, like password-protected games
pencil "Edit" something
remove_row Remove a row from a list
search Icon on search field
settings Settings icon
tab_changed An event happened in the room (displayed on the room tab)
update Update card prices
view "View" something (eg. a replay)

"phases" subfolder - phases icons used in game

Image name Description
cleanup Cleanup (end) phase
combat_attackers Combat phase: declare attackers
combat_blockers Combat phase: declare blockers
combat_damage Combat phase: damage
combat_end Combat phase: end
combat_start Combat phase: start
draw Draw phase
main1 First main phase
main2 Second main phase
nextturn Next turn (pass)
untap Untap phase
upkeep Upkeep phase

"replay" subfolder - special icons used in replay

Image name Description
fastforward Fast forward replay
pause Pause replay
start Start replay (play)

"userlevels" subfolder - pawns icons used in the userlist

Image name Description
admin Buddy icon for admins
admin_buddy Admins icon
moderator Moderators icon
moderator_buddy Buddy icon for moderators
normal Unregistered user icon
registered Registered user icon
registered_buddy Buddy icon for registered users

"zones" subfolder - in game zones backgrounds

Zone background are tiled, so each image is repeated both horizontally and vertically until the whole zone area is filled. Check if the image is big enough to cover its entire area, or in the case of a smaller image ensure that it has a repeating pattern.

Image name Description
handzone Background for the "hand" zone
playerzone Background for the "player" zone
stackzone Background for the "stack" zone
tablezone Background for the "table" zone

For all those zones, note that you can have a different image for each player, you just need to add the player's number at the end.
So for example tablezone2 will be used for Player 2, tablezone3 will be used for Player 3 and so on.

The style sheet file (Advanced)

Inside your theme's folder you can create a text file named "style.css" containing css code that changes the Cockatrice visual styling. As an example, adding the following code will set Cockatrice to only use 14pt bold text:

* {
    font: bold 14px;
}

You can see more examples in the Qt documentation.

Custom User Created Themes

In this section, you can see some of the awesome themes our players have created.

Please note that nothing in this section is affiliated with any of the developers who have or currently work on the project and this is a user-editable section of the wiki!

Themes vary from very simple and basic ones to more complex and elaborate designs which change the overall appearance of the app.

Feel free to mix and match assets from themes - and provide your own designs to the community!

Feel free to contact and connect with us on Discord, Gitter and Reddit!

⚠️ **GitHub.com Fallback** ⚠️