Dit is standaard Joomla 4 ingesteld op kleur alternatief, bordeaux rood.
Op joomla4.be vind je aangepaste J4 template kleuren via eigen mycustom.css
Hier is alleen een Knop met afgeronde rand gemaakt, de extreem grote titel van artikel h1 en Bold zijn NIET aangepast

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 custom.css, ook de witte achtergrond aangepast door transparante motor 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, System, Site template styles, Cassiopeia defauts, Advanced, color theme: Alternative.

Op joomla4.be vind je aangepaste J4 template kleuren via eigen mycustom.css
Hier is alleen een Knop met afgeronde rand gemaakt, de extreem grote titel van artikel h1 en Bold zijn NIET aangepast

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 custom.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 in templates/cassiopeia/index.php
JHtml::_('stylesheet', 'mycustom.css', array('version' => 'auto', 'relative' => true)); /* extra regel in index.php op regel 45 */

mycustom.css in map: templates/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.

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.
Dit is een standaard joomla 4 site, niet aangepast dus extreem groot! zie joomla4.be

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 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 aanpassen */
--cassiopeia-color-link: #01349B; /* 224faa link algemene basis kleur aanpassen */
--cassiopeia-color-hover: #016799; /* kleur 2 rechts 1b578f en hover algemene basis kleur aanpassen, nu 016799 */
}

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

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>

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.35rem; /* afgeronde rand */
line-height: 2.5em; /* extra ruimte onder blauwe vak voor de tekst, hierdoor bij td boventitel een mindere ruimte opgeven */
}

#boventitel100 /* om link in table wit te maken */ Opmerking zie ook info Tabel 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 */

}

* 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.