Totara Learn Open Discussions

Resizing Logo with custom css?

 
Mikael Salonen
Resizing Logo with custom css?
by Mikael Salonen - Wednesday, 18 April 2018, 2:48 AM
 

I'm using a logo in the Basis theme (png 500px wide, 310 high).

But still it is very small in the LMS :-(

So, how do I change the size of the logo with Custom CSS in the Basis theme?

I've tried with several css-snippets, but to no avail.

Anyone how knows how to solve this?


(And if anyone at the same time knows how to change the color of the logged in user name top right)



John Unnever
Re: Resizing Logo with custom css?
by John Unnever - Wednesday, 18 April 2018, 7:24 AM
Group Partners

Try this in your custom CSS box.  You might have to play with adding padding too.


.navbar-site .navbar-brand>img {
 height: 310px;

 width: 500px;

}

Mikael Salonen
Re: Resizing Logo with custom css?
by Mikael Salonen - Thursday, 19 April 2018, 12:55 AM
 

Thanks! That made the trick :-)

Brian Barnes (Core Developer)
Re: Resizing Logo with custom css?
by Brian Barnes (Core Developer) - Wednesday, 18 April 2018, 1:51 PM
Group Totara

Hi Mikael,

The CSS Selector you need to target is ".navbar-site .navbar-brand" for the logo (overwriting height), and for the user name '.usermenu .usertext'

PS. If the logo is to be displayed at full size, that's going to take up ~ 1/3 of your screen height on a 1080p monitor.

Cheers,

Brian

Mikael Salonen
Re: Resizing Logo with custom css?
by Mikael Salonen - Thursday, 19 April 2018, 12:56 AM
 

Thanks!


Yes, I know. I wanted an extreme value to see the effect. Now I can fine tune it :-)