GalaxyAnvil CSS Customization Guide

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:

 
GalaxyAnvil Color Palette
  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;
}

Comments

Please Login in order to comment!
6 Aug, 2018 08:04

This is a great service to the community; thank you :)   Are you planning on expending it with all your other awesome secret knowledge? :)

6 Aug, 2018 10:04

Possibly. This particular guide is exclusive to the Galaxy Anvil theme that I made though - Most of the things I'll be adding to this won't apply to other themes or the default WA theme.

6 Aug, 2018 10:19

Still super-cool. :)   I can think of at least one ideas rocking around in my noggin that could benefit from this theme, for sure.