Joomla 4 user stylesheet
Het was wel een hoop werk om Joomla 4 upgrade te doen door alle speciale opmaak die ik in Joomla 3 met Artisteer had gemaakt. Daarom heb ik besloten de site zo simpel mogelijk te houden en de standaard template Cassiopeia te gebruiken. Maar dan wel met gebruik van aanpassingen in de user style sheet.
Een bug bij het aanmaken van de user stylesheet
Op deze site: https://magazine.joomla.org/all-issues/february-2022/joomla-4-cassiopeia-template-a-bunch-of-tips-tricks kun je allerlei trucs leren om Cassiopeia aan te passen. Een van de eerste dingen die je moet doen is een bestand user.css aanmaken. Toen ik dat deed ging het fout. Het was wel even zoeken waar dat door kwam. Maar uiteindelijk bleek de oplossing simpel: Update eerst de language module Nederlands!
Mijn aanpassingen
Op het moment van schrijven heb ik dit in mijn user.css zitten:
|
body {
background: rgb(0,0,0);
background: linear-gradient(270deg, rgba(0,0,0,0.26934523809523814) 0%, rgba(255,255,255,1) 50%, rgba(107,82,46,0.7371323529411764) 100%);
}
h1,h2,h3,h4 {
font-family: "Times New Roman", Times, serif;
color: #6b522e;
}
h1 { font-size: 36px;}
h2 { font-size: 20px}
h3 { font-size: 16px; font-style: normal; font-weigth: normal;}
h4 { font-size: 14px;}
header .card-body{ padding: 0;}
header .container-nav, .container-header nav{ padding-top:0; margin-top:0;}
.mybanner {
min-width: 100%;
background-image: url("/images/basklarinet.png");
background-position: center;
background-repeat: no-repeat;
background-size: 500px;
text-align: center;
font-family: "Times New Roman", Times, serif;
color: black;
min-height: 70px;
margin-bottom:0;
}
.mybanner h1 {font-size: 80px; }
.container-header .container-nav {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-between;
padding-bottom: 1em;
display: grid;
justify-content: center !important;
}
.container-header, .card {
background: none;
border: none;
}
.container-header .navbar-toggler {
color: #6b522e;
}
.container-header .mod-menu {
color: #6b522e;
margin-left: auto;
margin-right: auto;
}
.header nav {
width: 100%;
margin-left: auto;
margin-right: auto;
justify-content: center !important;
}
.card-body {
border: none;
}
.container-header .mod-menu li a {
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
padding: 3px 15px;
color: #6b522e;
}
.container-header .mod-menu li a:hover {
background-color: #ffe;
}
.grid-child {
max-width: 1200px !important;
}
.active a{
background-color: #eee;
}
.category-desc img {
float: right;
}
table p {
margin-bottom: 0;}
|