Cassiopeia template
Ik vind de standaard blauwe kleuren van de header achtergrond aan de rechterkant niet mooi, zien er verbleekt uit (foto's onder), ik heb ze aangepast via een extra mycustom.css, ook de witte achtergrond aangepast door transparante motor of eigen foto, 10% doorlatend.
Je kunt sinds december 2020 in de template nu ook een alternatieve kleur kiezen, bordeaux rood.
Hoe stel je de alternatieve kleur in, in Joomla admin ga naar;
System, Site template styles, Cassiopeia defauts, Advanced, color theme: Alternative.

Verder heb ik de Menu kleuren aangepast, en een Knop met afgeronde rand gemaakt, 
de extreem grote titel van artikel h1 en Bold aangepast
en het edit icoon aangepast, dit stond door de tekst van de menuknoppen heen.
Foto 1 Alternatieve bordeaux rode J 4 kleur, foto 2 mijn kleuren en achtergrond met blauw menu, foto 3 standaard blauw J 4
Hoe stel je de alternatieve kleur in, System, Site template styles, Cassiopeia defauts, Advanced, color theme: Alternative.

De lelijke standaard kleuren.

Aanpassen via een mycustom.CSS Op de een of andere manier hadden aanpassingen in de standaard templates.css files geen effect (cache buffer legen) en ik las ergens dat je een eigen custom.css moet aanmaken met aanpassingen.
Naar deze custom.css moet ook verwezen worden dus ook verwijzing toegevoegd in index.php van de template.
Ik las recent dat sommige editors de naam custom.css al gebruiken, heb er daarom nu mycustom.css van gemaakt.

De verwijzing naar dit bestand plaats je in templates/cassiopeia/index.php      De verwijzing J4:
JHtml::_('stylesheet', 'mycustom.css', array('version' => 'auto', 'relative' => true));  /* extra regel in index.php op regel 46 */
Verwijzing J5;
$wa->registerAndUseStyle('stylesheet', 'mycustom.css', array('version' => 'auto', 'relative' => true)); /*  opmerking oud was JHtml::_ wordt op regel 96 $wa->registerAndUseStyle alternatief regel 96 */

mycustom.css in map: templates/cassiopeia/css/mycustom.css * Let op nu in media/templates/site/cassiopeia/css/ mycustom.css
ik heb een eigen gemaakte witte transparante achtergrond met motorafbeelding toegevoegd, en heb de blauwe headerkleuren aangepast van lelijk paars naar blauw.

* LET OP! Grote verandering in map Cassiopeia template in J4.1.0.  
Ik was na de update naar 4.1 ineens mijn mycustom.css kwijt, o.a. map css in templates/cassiopeia/css verdwenen maar alles werkte nog wel.
Wat blijkt, ze hebben cassiopeia map templates/cassiopeia/ opgesplitst, error.php, index.php e.d. (inhoud/opmaak is ook iets gewijzigd) staan nog op dezelfde plek maar ze hebben de meeste submappen CSS, IMAGES,... verplaatst naar media/templates/site/cassiopeia/css
Dus map css was templates/cassiopeia/css staat nu op media/templates/site/cassiopeia/css/ mycustom.css
Ook map images was templates/cassiopeia/images staat nu op media/templates/site/cassiopeia/images/

Dit geldt ook voor de map administrator/templates/atum/css e.d. nu  media/templates/administrator/atum/css.... ik heb hier nu verder geen aanpassingen in op dit moment (beschrijf het wel ergens favicon.ico).

De achtergrond foto, in een fotobewerkingsprogramma kies nieuw, afbeelding 1920x1080 transparant (png), vul de achtergrond met wit, de motorfoto is ook 1920x1080 een jpg, kopieer de foto, ga naar de transparante foto, plak als nieuwe layer, kies bij transparantie 90% (-10%), kies opslaan als bg2.jpg. Upload naar templates/cassiopeia/images/

inhoud mycustom.css
body {
background: #fff url(../images/bg2.jpg) repeat top center ; /* motor afbeelding transparant wit foto 10% */
background-attachment: fixed; } /* extra */

H1, H2, H3,.... zijn extreem groot, Titel artikel was H2, nu H1, titel artikel was 2.5rem nu 1.3rem beter...
Er is nu ook verschil tussen kleiner of groter scherm. Het varieert wanneer je het volledig scherm langzaam kleiner maakt.... in mijn aanpassing was de titel alleen bij volledig scherm kleiner! Nu ook de variabele titel aangepast, dat is die cal(1.1rem + 0.2vw) samen 1.3 rem.
in mycustom.css h1, h2, h3.... aangepast;
9-3-2021 LET OP lettergrootte titel werd bepaald door h2, nu door H1 waardoor extreem groot, 2.5rem!

h1, .h1 {
font-size: calc(1.1rem + 0.2vw); /* was 1.375rem + 1.5vw nu 1.1rem + 0.2vw gelijk aan H1 bij 1200 scherm */
color: #016799; /* extra om de titelkleur artikel aan te passen */
}
@media (min-width: 1200px) {
h1, .h1 {
font-size: 1.3rem; /* 2.5 was veel te groot nu 1.3 */
color: #016799; /* extra om de titelkleur artikel aan te passen */
}
}

h2, .h2 {
font-size: calc(1.1rem + 0.1vw); /* was 1.2821rem + 0.3852vw nu 1.1rem + 0.1vw gelijk aan H2 bij 1200 scherm */
color: #016799; /* extra was titelkleur artikel aan te passen */
}
@media (min-width: 1200px) {
h2, .h2 {
font-size: 1.2rem; /* 2rem was veel te groot nu 1.2 */
color: #016799; /* extra was om de titelkleur artikel aan te passen */
}
}

h3, .h3 {
font-size: calc(1.0rem + 0.15vw); /* was 1.3rem + 0.6vw nu 1.0rem + 0.15vw gelijk aan H3 bij 1200 scherm */
color: #016799; /* extra om kleur H3 aan te passen */
}
@media (min-width: 1200px) {
h3, .h3 {
font-size: 1.15rem; /* 1.75 was veel te groot 1.15 */
color: #016799; /* extra om kleur H3 aan te passen */
}
}

h4, .h4 {
font-size: calc(1.0rem + 0.1vw); /* was 1.275rem + 0.3vw nu 1.0rem + 0.1vw gelijk aan H3 bij 1200 scherm */
color: #016799; /* extra om kleur H3 aan te passen */
}
@media (min-width: 1200px) {
h4, .h4 {
font-size: 1.1rem; /* 1.5 was veel te groot 1.1 */
color: #016799; /* extra om kleur H4 aan te passen */

}
}

h5, .h5 {
font-size: 1.05rem; /* 1.25rem standaard nu 1.05 aangepast */
color: #016799; /* extra om kleur H5 aan te passen */
}

h6, .h6 {
font-size: 1.0rem; /* 1rem standaard nu 1.0 aangepast */
color: #016799; /* extra om kleur H6 aan te passen */
}

/* EXTRA dit is om de te vette tekst minder vet te maken bij titels, was 700 nu 600 in font weigth: var 700 */
h1, .h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
font-family: var(--cassiopeia-font-family-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
font-weight: var(--cassiopeia-font-weight-headings, 600);
}

b, strong {
color: #016799; /* extra om de vetgedrukte tekst een zachtere en eigen kleur geven, blauw op deze site */
font-weight: 600 !important; /* extra om de vetgedrukte tekst iets minder vet te maken font-weight: 600 was 700? */
}

In het origineel is h6 nu 1 rem, h5 1.2 en wordt extreem groot, titel h1 2.5 belachelijk groot.

Mijn h1 met kleurtje

Mijn h2 met kleurtje

Mijn h3 met kleurtje

Mijn h4 met kleurtje

Mijn h5 met kleurtje

Mijn h6 met kleurtje

Font Wijzigen Je kunt onder system, site template styles, cassiopeia defaults, bij advanced de fonts aanpassen.
OP dit moment gebruik ik gewoon de standaard font, bij System, site template styles, cassiopeia defaults,
bij advanced, Fonts Scheme: None is gewoon goed leesbaar, niks aan doen.

Of je kunt de font in je eigen custom.css doen; {
font-family: "Fira Sans", Arial, sans-serif; /* Font veranderen, standaard: "Fira Sans", Arial, sans-serif of */
Het best leesbaar lijkt Arial, dat kies je zo:
font-family: Arial, sans-serif; } /* Font veranderen, of kies deze: Arial, sans-serif, "Fira Sans" */

OP dit moment gebruik ik de standaard font, bij System, site template styles, cassiopeia defaults, bij advanced, Fonts Scheme: None gewoon goed leesbaar, niks aan doen.

De blauwe headerkleuren aanpassen
Deze info is nu ook beschikbaar.....
Omdat je nu ook in Cassiopeia een andere alternatieve kleur kunt kiezen wordt het nu veel makkelijker de kleuren aan te passen. De code daarvoor heb ik gekopieerd naar mijn custom file en daar pas je de 3 root: kleuren aan. De Code;

.container-header {
position: relative;
z-index: 10;
background-color: var(--cassiopeia-color-primary);
background-image: linear-gradient(135deg, var(--cassiopeia-color-primary) 0%, var(--cassiopeia-color-hover) 100%);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.03) inset;
}

:root {
--cassiopeia-color-primary: #016799;  /* kleur 1 links bg 016799 algemene basis kleur links aanpassen */
--cassiopeia-color-link: #01349B;       /* 224faa linkkleur, algemene basis kleur van de link aanpassen */
--cassiopeia-color-hover: #016799;    /* kleur 2 rechts 1b578f en hover kleur, ik heb deze nu zelfde als kleur 1, nu 016799 hiermee vervalt ook de werking van de hover kleur */
}

Menu in kleur
Nog wat eigen aanpassingen, Menu in kleur of Transparant kan ook.
De info over hoe menu aan te passen is nog niet beschikbaar, nog in bewerking.
Menu kleur achtergrond nu in het blauw, link wit

Top menu dropdown menu
Normaal witte achtergrond blauwe links, nu ook blauwe achtergrond gemaakt met witte links.
De info over hoe menu aan te passen is nog niet beschikbaar, nog in bewerking.

22-03-2021 Update edit bugje, het staat er nog steeds doorheen maar het is transparant gemaakt, voor mij nog niet helemaal de oplossing maar er wordt aan gewerkt, alleen nog probleem bij top Menu, footer en main-bottom, de rest acceptabel. Mijn oplossing

Laatste beta 7 versie, update beta 7 van 22-01-2021. Bug edit iconen dwars door alles heen indien ingelogd.
Dat ze door alles heen stonden was al zo maar nu ook witte achtergrond, ook in standaard template.
In sommige modules zoals Login, Zoeken (op positie:sitebar-), hoofdmenu kun je het edit bugje oplossen door title weergave op aan te zetten, dit helpt niet bij top-menu positie: menu
Dit bugje is overigens alleen zichtbaar voor de administrator indien ingelogd voorzijde, dus niet zo belangrijk.

Ik heb via mycustum.css het volgende aangepast

/* de edit knop staat over de tekst van menu, search en sitemenu-'s heen, oplossing voor nu; */

.btn.jmodedit {
position: absolute; /* oud op relative, nu weer op org: absolute */
top: 15px; /* was 0, nu 15px ter voorkomen van tekst over elkaar in top-menu */
right: 0;
left: auto;
z-index: 900;
color: #7AC143; /* extra groene tekst 7AC143 was color: var(--cassiopeia-color-link); */
background-color: rgba(255, 255, 255, 0.0); /* bg kleur met optie transparantie, kleur 255 3x en transparantie van 0.0 tot 0.99. zet border ook op 0 indien bg 0.0 */
/* background-color: transparent; OUD, new zie hierboven, was white nu transparent, popup witte bg kleur van edit knop */
border: 0px solid #dfe3e7; /* border 2 nu op 0 */
border-radius: 0.25rem; /* nvt indien border 0 */

}

Dat ziet er dan zo uit... update 25 maart 2021 Terug naar edit bug

Eigen knop met of zonder rand
Afgeronde rand bleek te groot wanneer knoppen op elkaar aansluiten, dus geminimaliseerd.

Knop met afgeronde rand - Code in de link: <a href="/" id="boventitel" >Knop met afgeronde rand</a>

Knop zonder link - Code in de link: <span id="boventitel" >Knop zonder link gebruik span</span>

Knop zonder rand - Code in de link: <a href="/" id="boventitel100">Knop zonder rand</a>

Opmerking De naam 'boventitel' is gebruikt omdat dit in al mijn joomla 3.9 sites ook zo is, zodat ze bij migratie naar joomla 4 ook nog werken. Ze werden als losse knop gebruikt maar ook om de tabelkleuren aan te passen, het is mogelijk dat dit nog conflicten geeft met joomla 4 tabel. Zie ook info Tabel maken

In het mycustom.css bestand;
#boventitel
{
background-color:#016799; /* maakt knop met border met blauwe achtergrond background-color:#1b578d; */
color: #ffffff; /* link kleur wit #ffffff */
text-decoration: none; /* onderlijnen uit */
padding: 4px 5px 4px 5px; /* bepaald ruimte om tekst 4px 5px 4px 5px */
border: 2px solid #CCCCCC; /* border grote 2 */
border-radius: 0.15rem; /* afgeronde rand 0.35 bleek te veel wanneer knoppen aansluiten op elkaar dus 0.15 */
line-height: 2.2em; /* extra ruimte, regelhoogte blauwe vak voor de tekst, hierdoor bij klein scherm voldoende regel afstand ook tussen links */
}

#boventitel100 /* om link in table wit te maken */
{
background-color:#016799; /* blue #1a799e fel 0a7ede 5488b4 0099cc 537FAE 1B94BB nu 016799 */
color: #ffffff; /* link kleur wit #ffffff */
padding: 4px 5px 4px 5px; /* bepaald ruimte om tekst 4px 5px 4px 5px */
text-decoration: none; /* onderlijnen aan of uit werkt */
border: 0px solid #CCCCCC; /* border grote uit 0 */
line-height: 2.2em; /* extra ruimte, regelhoogte blauwe vak voor de tekst, hierdoor bij klein scherm voldoende regel afstand ook tussen links */

}

Opmerking De naam 'boventitel' is gebruikt omdat dit in al mijn joomla 3.9 sites ook zo is, zodat ze bij migratie naar joomla 4 ook nog werken. Ze werden als losse knop gebruikt maar ook om de tabelkleuren aan te passen, het is mogelijk dat dit nog conflicten geeft met joomla 4 tabel. Zie ook info Tabel maken