Ik vind de blauwe kleuren van de header achtergrond aan de rechterkant niet mooi, zien er verbleekt uit (foto onder), ik heb ze aangepast via een extra custom.css, ook witte achtergrond aangepast door transparante motor foto, 10% doorlatend.
Verder heb ik het Menu en de kleuren aangepast.  

Hierboven de standaard joomla 4, foto 2 mijn kleuren en transparant menu, foto 3 plus blauw menu


De lelijke standaard kleuren.

Aanpassen via custom.CSS Op de een of andere manier hadden aanpassingen in de standaard .css files geen effect 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.

De verwijzing in templates/cassiopeia/index.php
JHtml::_('stylesheet', 'custom.css', array('version' => 'auto', 'relative' => true)); /* extra regel in index.php op regel 43 */

custom.css inhoud, een eigen gemaakte witte achtergrond met motorafbeelding, en blauwe header kleur van lelijk paars naar blauw.

body {
background: #fff url(../images/bg2.jpg) repeat top center ; /* motor afbeelding transparant wit foto 10% */
background-attachment: fixed; /* extra */
 font-family: "Fira Sans", Arial, sans-serif;   /* Font veranderen, standaard: "Fira Sans", Arial, sans-serif  of   */
Het best leesbaar is Arial!!!!! dat kies je zo:
 font-family: Arial, sans-serif;   /* Font veranderen, of kies deze: Arial, sans-serif, "Fira Sans"  */
}

De blauwe headerkleur aanpassen
.container-header {
    position: relative;
    z-index: 10;
    margin-bottom: 20px;
    background-color: #112856;
    background-image: linear-gradient(135deg, #112856 0%, #1b578f 100%);   /* begin en eindkleur header was #112856 0%, #434178 100%  new #112856 en #1b578f   */
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.03) inset;
}

Nog wat eigen aanpassingen, Menu in kleur of Transparant op joomla4.be is menu in kleur te zien.
De info over hoe menu aan te passen is nog niet beschikbaar, nog in bewerking.

knop met rand aangemaakt, in de link  id="boventitel"
Knop met rand 

knop zonder rand, in de link  id="boventitel100"
Knop zonder rand

#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   */
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    */
{
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   */

}


Terug naar boven Terug naar boven youtube.png Joomla 4 Beta 6 Webdesign & Hosting by HostingBy.nl 1993 - 2020