Probably a stupid question, but I cannot figure out the name of the grey element in the Classic theme header (moodle 4.1).
Reason for asking: I want to add a background image to that element via Advanced settings -> Raw SCSS
Looking at the elements inspector (f12 or Ctrl-Shift-I):
It looks as if the elements you're looking for are either #page-header .card { } or #page-header .card-body { }
Make sure you don't try to target .card or .card-body without including #page-header as the card classes are used everywhere.
Thanks, that's it.
In case someone is interested:
The CSS used to replace the full site name by an image (CSS in Home ... Site administration ... Appearance ... Themes ... Classic ... Advanced settings ... Raw SCSS):
#page-header .card-body {
height: 86px;
background-size: 638px 86px; /* image dimensions */
background-image: url('...'); /* link to your image */
background-repeat: no-repeat; /* show the image once ... */
background-position: center; /* ... in the center of the header */
}
.page-header-headings h1 {
font-size: 0px; /* hide the full site name (as it is already shown in the image) */
}
#page-header .card-body {
height: 86px;
background-size: 638px 86px; /* image dimensions */
background-image: url('...'); /* link to your image */
background-repeat: no-repeat; /* show the image once ... */
background-position: center; /* ... in the center of the header */
}
.page-header-headings h1 {
font-size: 0px; /* hide the full site name (as it is already shown in the image) */
}