Gaia Project artwork revamp

[Diazepam]

Hello Gaia Project lovers!

I am here to share with you a small project that combines the incredible artwork of the talented Olagarro in this BGG post.
Olagarro’s stunning images deserve to be showcased in all their glory, and I’ve put together a CSS code that you can use to apply these images to your BGA gameplay.

It’s time to bring a fresh, visually appealing experience to our beloved Gaia Project on BGA!

Code: Select all

/*  Gaia Project modifications */

/* Player board */
.gpj-factionName {
  display: none;
}

.gpj-playerBoard {
    background-size: cover;
    background-position-x: center;
    background-repeat: no-repeat;
    background-position-y: center;
}

.gpj-action:hover {
	opacity: .3;
	transition: opacity .7s;
}

/* Board components position */

.gpj-playerBooster {
	transform: scale(0.76);
	:hover {
		opacity: .1;
		transition: opacity .7s;
	}
}

.gpj-playerBoard .gpj-playerBooster {
	left: 998px !important;
	top: 220px;
}

.gpj-factionRule {
	left: 224px !important;
}

/* Power Bow */

.gpj-powerBowl0 {
	top: 75px !important;
}

.gpj-powerBowl1 {
	top: 150px !important;
}

.gpj-powerBowl2 {
	top: 35px !important;
}

.gpj-powerBowl3 {
	top: 75px !important;
}

/* Structure */

.gpj-structure5 {
	transform: scaleX(-.6) scaleY(.6);
}

/* Buildings */

.gpj-buildings2 {
	top: 180px !important;
	left: 843px; !important;
}

.gpj-buildings4 {
	top: 580px !important;
	left: 128px !important;
	transform: scale(0.98) !important;
}

.gpj-buildings5 {
	top: 445px !important;
	left: 110px !important;
	transform: scale(0.96) !important;
}

.gpj-buildings6 {
	top: 440px !important;
	transform: scale(0.98) !important;
}

.gpj-buildings7 {
	top: 270px !important;
}

.gpj-buildings8 {
	top: 270px !important;
}

.gpj-buildings9 {
	top: 270px !important;
}

/* Races */

/* race1 - Terrans */
.gpj-playerBoard.gpj-race1 {
    background-image: url('https://cf.geekdo-images.com/DfTQ3YuYgQaK9_H9HzljVQ__original/img/JykQACyiFlxhX0u3a0WAxtk2ugs=/0x0/filters:format(jpeg)/pic4754021.jpg');
}

/* race2 - Lantids */
.gpj-playerBoard.gpj-race2 {
    background-image: url('https://cf.geekdo-images.com/7ofIoYtd_1B0hExObOzGbg__original/img/LAgFI_XPXvNRRmWt4w_3DSjw-Bk=/0x0/filters:format(jpeg)/pic4754022.jpg');
}

/* race3 - Xenos */
.gpj-playerBoard.gpj-race3 {
    background-image: url('https://cf.geekdo-images.com/RG_O4smtrhudBc9A18pb-Q__original/img/Ef49T75V9PF1SIjGREntPANRVnE=/0x0/filters:format(jpeg)/pic4754025.jpg');
}

/* race4 - Gleens */
.gpj-playerBoard.gpj-race4 {
    background-image: url('https://cf.geekdo-images.com/2bk9kqM21Kq6qcFf17YG7g__original/img/eBVA_a3Q88FbQ38rdtwFeQFnmzk=/0x0/filters:format(jpeg)/pic4754026.jpg');
}

/* race5 - Taklons */
.gpj-playerBoard.gpj-race5 {
    background-image: url('https://cf.geekdo-images.com/lJ9j34sOeD3JS9DpKD03kg__original/img/RbP0WJqFoS6Qq-DZYDCwwb4h8uA=/0x0/filters:format(jpeg)/pic4754024.jpg');
}

/* race6 - Ambas */
.gpj-playerBoard.gpj-race6 {
    background-image: url('https://cf.geekdo-images.com/GOiKA1641WJ4kDMjoDFbsg__original/img/WEc0CYkAUCZXytvcKZ425F2sSfs=/0x0/filters:format(jpeg)/pic4754023.jpg');
}

/* race7 - Hadsch Hallas */
.gpj-playerBoard.gpj-race7 {
    background-image: url('https://cf.geekdo-images.com/G0Sd-EAi9M0SkUZ_XBSmfQ__original/img/dhZJi-9Y8T80MP0jtMQ3ql6E9Vk=/0x0/filters:format(jpeg)/pic4754027.jpg');
}

/* race8 - Ivits */
.gpj-playerBoard.gpj-race8 {
    background-image: url('https://cf.geekdo-images.com/O-6WV_Kfp3S9qVZYghdctw__original/img/o1yunkTgu4RUzJjbfINLR2zT6TU=/0x0/filters:format(jpeg)/pic4754028.jpg');
}

/* race9 - Geodens */
.gpj-playerBoard.gpj-race9 {
    background-image: url('https://cf.geekdo-images.com/5xS7P1HPnmW9Lp95yZnc4w__original/img/gKNDTJ29JjT9mdFusvkfyo-6OrE=/0x0/filters:format(jpeg)/pic4754031.jpg');
}

/* race10 - Bal T'aks */
.gpj-playerBoard.gpj-race10 {
    background-image: url('https://cf.geekdo-images.com/zg8e_SfZqRKd-xIxAYaJNw__original/img/BlFkV-iez79c8sR_QCgnCLJX1E4=/0x0/filters:format(jpeg)/pic4754032.jpg');
}

/* race11 - Firaks */
.gpj-playerBoard.gpj-race11 {
    background-image: url('https://cf.geekdo-images.com/kOdH_KBO_npKT3F69VnxOA__original/img/NlqFlaXIY3HKzbRGekA0bL0OkSk=/0x0/filters:format(jpeg)/pic4754029.jpg');
}

/* race12 - Bescods */
.gpj-playerBoard.gpj-race12 {
    background-image: url('https://cf.geekdo-images.com/dEXRmatWuoneUPeueEUs6A__original/img/lm3d2LPWITBrCWW_cPDiutOlSUw=/0x0/filters:format(jpeg)/pic4754030.jpg');
}

/* race13 - Nevlas */
.gpj-playerBoard.gpj-race13 {
    background-image: url('https://cf.geekdo-images.com/q2GlHsqZqzBMIxFpJWzHdw__original/img/_ZsHdKbNvvsZv5b2BQLtgeNKwT4=/0x0/filters:format(jpeg)/pic4754033.jpg');
}

/*  race14 - Itars  */
.gpj-playerBoard.gpj-race14 {
    background-image: url('https://cf.geekdo-images.com/6UdIaUJSkxFGifdFLCg0fA__original/img/-K8eOLP5iCwxaqBte8VggawL1oY=/0x0/filters:format(jpeg)/pic4754034.jpg');
}

If you didn't know, BGA allow us to inject CSS in in it's website.
You can access this config in this path:
- Click in your profile picture > Settings > Preferences > Advanced
- If you are already loged in, you can just click here.
- Simply copy the code above and paste in the text box at this page.

OBS 1: This is a 100% safe code (you can ask GPT about it), CSS just changes the look of your BGA, if you don't like it, just remove this code.
OBS 2: This code use the images available in the gDrive from Olagarro, if it changes, the images just gone too.

Enjoy the revamped aesthetic and may your games be as beautiful as they are strategic!

EDIT: Now you don't need to be logged in to Google to see the images!

[Kayvon]

Beautiful design. Thanks for sharing this.

[sphyle]

Thanks for sharing,

I immediately tried this. Unfortunatelly i only get empty playerboards.
Even deleting cache in browser did not help.

(Firefox 132.0.2)

Edit: Could it be that I have to be logged in to Google in order to access the data?

[Diazepam]

Thanks for sharing,

I immediately tried this. Unfortunatelly i only get empty playerboards.
Even deleting cache in browser did not help.

(Firefox 132.0.2)

Edit: Could it be that I have to be logged in to Google in order to access the data?

You were right!
I just edited the post, now the URLs are public and you don't need to be logged in to Google to see the images.

[Timm-E]

@Diazepam,
When using this custom CSS, i get the below error when opening bug reports. Is that normal behaviour when using custom CSS, or is it due to this specific CSS?


Sorry, an unexpected error has occurred...

You cannot access this section because you are using some custom CSS (see Preferences > Advanced)

[Diazepam]

@Diazepam,
When using this custom CSS, i get the below error when opening bug reports. Is that normal behaviour when using custom CSS, or is it due to this specific CSS?


Sorry, an unexpected error has occurred...

You cannot access this section because you are using some custom CSS (see Preferences > Advanced)

Yes, this is the correct behavior.
To avoid misleading bugs, bga Team decided to block this option while you have custom CSS in your account.
To allow you to report, simply remove it (I recommend to save your customization) and report the bug freely.