Hi, there.
Just wondering if there is a relatively simple solution to this simple problem: I would simply like to enlarge the size of the logo image appearing at the top of the logon panel in the Boost theme.
The file in question is loaded in the logos area for the theme, and it is 980 px wide x 183 px high.
I'm looking for the code that is causing it to display so small in the logon panel, and I'm not able to find it.
thanks for any help.
Jacques
Hi Jacques,
The height is restricted to 150px and set in the code which is generated in this part of your site's /theme/boost/classes/output/core_renderer.php:
Hope this helps?
Mary
Hi Jacques,
Further to my last comment about the renderer.
The actual CSS is:
.pagelayout-login .card-title h2 img {
max-width: 100%;
max-height: 100px;
}
Which can be set to be bigger:
.pagelayout-login .card-title h2 img {
max-width: 100%;
max-height: 183px !important;
}
I really appreciate the help, Mary, but I guess I am missing some of the underlying knowledge for using your advice.
For instance, I have never used Github. When you point me to a code file in Gitbub, and a line of code there, I'm not sure what to do with that. You then followed up with some css code, and I don't know where this CSS code is located.
I know how to retrieve files via FTP, edit them (basic knowledge of HTML and CSS so far...), and re-upload them, but I need a bit of hand-holding re the locations of files, and the specific changes to make.
We are a small institution here, with a tiny IT team that has limited capacity to support the virtual campus group. We're doing everything we can to become self-reliant.
Thanks for your patience.
JL
Hi,
I was trying to explain that the problem you have with the theme is one that isgenerated in Moodle core code. In this case a renderer. This is a section of the core code that is adjusted in a theme and made to act differently than normal.
So in this case your image is smaller becasue of that renderer. But you can over ride this using CSS.
The CSS can be added via the Boost theme's Advanced settings page.
To explain it better here is an image of the code and where that code needs to be added.
Thanks very much, Mary. That's perfect!