GalaxyAnvil CSS Customization Guide

Table of Contents

1. Changing Color Schemes
2. Removing Rounded Images

This article contains various tweaks to the CSS you can make in the custom CSS field of your world while using the Galaxy Anvil theme. Most of these exist here as alternatives to the default layout and setup of the theme, or as options not included in the theme because they change some core functionality or layout of WA and make more sense as an 'opt-in' system.

Changing Color Schemes

Galaxy Anvil is built around a set of color variables using a tri-color scheme of varying shades. Each color has 3 'groups' - A main color group, a muted color group (Heavily desaturated; Used for text to make readability easier), and a transparent color group (Used for backgrounds of large blocks). Each block then has 15 individual colors, labelled with the hexadecimal numbers 1 through E. The higher the number, the brighter the color, with 1 being near-black and E being full color (Or near-white for the muted set). The default color scheme, which can also be used as a template, as well as a color palette is below:

Code

.user-css, .user-css-extended {
  
  --default1: #1D1E0F;
  --default2: #2F3020;
  --default3: #414233;
  --default4: #505142;
  --default5: #626354;
  --default6: #747566;
  --default7: #838476;
  --default8: #959687;
  --default9: #A7A899;
  --defaultA: #B6B7A8;
  --defaultB: #C8C9BB;
  --defaultC: #DADBCB;
  --defaultD: #E9EADC;
  --defaultE: #FBFCED;


  --default1Muted: #1D1E0F;
  --default2Muted: #2F3020;
  --default3Muted: #414233;
  --default4Muted: #505142;
  --default5Muted: #626354;
  --default6Muted: #747566;
  --default7Muted: #838476;
  --default8Muted: #959687;
  --default9Muted: #A7A899;
  --defaultAMuted: #B6B7A8;
  --defaultBMuted: #C8C9BB;
  --defaultCMuted: #DADBCB;
  --defaultDMuted: #E9EADC;
  --defaultEMuted: #FBFCED;


  --default1Transparent: rgba(29, 30, 15, 0.5
  --default2Transparent: rgba(47, 48, 32, 0.5
  --default3Transparent: rgba(65, 66, 51, 0.5
  --default4Transparent: rgba(80, 81, 66, 0.5
  --default5Transparent: rgba(98, 99, 84, 0.5
  --default6Transparent: rgba(116, 117, 102, 0.5
  --default7Transparent: rgba(131, 132, 118, 0.5
  --default8Transparent: rgba(149, 150, 135, 0.5
  --default9Transparent: rgba(167, 168, 153, 0.5
  --defaultATransparent: rgba(182, 183, 168, 0.5
  --defaultBTransparent: rgba(200, 201, 187, 0.5
  --defaultCTransparent: rgba(218, 219, 203, 0.5
  --defaultDTransparent: rgba(233, 234, 220, 0.5
  --defaultETransparent: rgba(251, 252, 237, 0.5


  
  --primary1: #1C0500;
  --primary2: #2D0800;
  --primary3: #3F0700;
  --primary4: #4F0900;
  --primary5: #601300;
  --primary6: #720D00;
  --primary7: #821100;
  --primary8: #931100;
  --primary9: #A51300;
  --primaryA: #B52100;
  --primaryB: #C61A00;
  --primaryC: #D82700;
  --primaryD: #E52200;
  --primaryE: #F91D00;


  --primary1Muted: #1E120F;
  --primary2Muted: #302320;
  --primary3Muted: #423533;
  --primary4Muted: #514442;
  --primary5Muted: #635754;
  --primary6Muted: #756866;
  --primary7Muted: #847876;
  --primary8Muted: #968987;
  --primary9Muted: #A89B99;
  --primaryAMuted: #B7ABA8;
  --primaryBMuted: #C9BDBB;
  --primaryCMuted: #DBCECB;
  --primaryDMuted: #E8DEDC;
  --primaryEMuted: #FCEFED;


  --primary1Transparent: rgba(28, 5, 0, 0.5
  --primary2Transparent: rgba(45, 8, 0, 0.5
  --primary3Transparent: rgba(63, 7, 0, 0.5
  --primary4Transparent: rgba(79, 9, 0, 0.5
  --primary5Transparent: rgba(96, 19, 0, 0.5
  --primary6Transparent: rgba(114, 13, 0, 0.5
  --primary7Transparent: rgba(130, 17, 0, 0.5
  --primary8Transparent: rgba(147, 17, 0, 0.5
  --primary9Transparent: rgba(165, 19, 0, 0.5
  --primaryATransparent: rgba(181, 33, 0, 0.5
  --primaryBTransparent: rgba(198, 26, 0, 0.5
  --primaryCTransparent: rgba(219, 39, 0, 0.5
  --primaryDTransparent: rgba(229, 34, 0, 0.5
  --primaryETransparent: rgba(249, 29, 0, 0.5


  
  --accent1: #0F1D1E;
  --accent2: #202F30;
  --accent3: #334142;
  --accent4: #425051;
  --accent5: #546263;
  --accent6: #667475;
  --accent7: #768384;
  --accent8: #879596;
  --accent9: #99A7A8;
  --accentA: #A8B6B7;
  --accentB: #BBC8C9;
  --accentC: #CBDADB;
  --accentD: #DCE9EA;
  --accentE: #EDFBFC;


  --accent1Muted: #0F1D1E;
  --accent2Muted: #202F30;
  --accent3Muted: #334142;
  --accent4Muted: #425051;
  --accent5Muted: #546263;
  --accent6Muted: #667475;
  --accent7Muted: #768384;
  --accent8Muted: #879596;
  --accent9Muted: #99A7A8;
  --accentAMuted: #A8B6B7;
  --accentBMuted: #BBC8C9;
  --accentCMuted: #CBDADB;
  --accentDMuted: #DCE9EA;
  --accentEMuted: #EDFBFC;


  --accent1Transparent: rgba(15, 29, 30, 0.5
  --accent2Transparent: rgba(32, 47, 48, 0.5
  --accent3Transparent: rgba(51, 65, 66, 0.5
  --accent4Transparent: rgba(66, 80, 81, 0.5
  --accent5Transparent: rgba(84, 98, 99, 0.5
  --accent6Transparent: rgba(102, 116, 117, 0.5
  --accent7Transparent: rgba(118, 131, 132, 0.5
  --accent8Transparent: rgba(135, 149, 150, 0.5
  --accent9Transparent: rgba(153, 167, 168, 0.5
  --accentATransparent: rgba(168, 182, 183, 0.5
  --accentBTransparent: rgba(187, 200, 201, 0.5
  --accentCTransparent: rgba(203, 218, 219, 0.5
  --accentDTransparent: rgba(220, 233, 234, 0.5
  --accentETransparent: rgba(237, 251, 252, 0.5


  
  --midPrimaryAccentA: #AF6C5C; 
  --midPrimaryAccent8: #8D534B; 
  --midDefaultAccentA: #AFB7B0; 
  --midDefaultAccent8: #9FA69F; 
  --defaultAFullTransparent: rgba(182, 183, 168, 0 
}

Removing Rounded Images

To remove the rounded corners in images, add the following to your world's custom CSS:

.user-css img, .user-css-extended img, .user-css .user-css-image-thumbnail img, .user-css-extended .user-css-image-thumbnail img {
  border-radius: 0;
}

To also remove the rounded corners from the credits attached to the bottom of images, use the following instead:

.user-css img, .user-css-extended img, .user-css .user-css-image-thumbnail, .user-css-extended .user-css-image-thumbnail, .user-css .user-css-image-thumbnail img, .user-css-extended .user-css-image-thumbnail img {
  border-radius: 0;
}