Totara Learn Open Discussions

Resizing Logo with custom css?

 
Mikael Salonen
Resizing Logo with custom css?
par Mikael Salonen, Wednesday 18 April 2018, 02:48
 

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?
par John Unnever, Wednesday 18 April 2018, 07:24
Groupe 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?
par Mikael Salonen, Thursday 19 April 2018, 00:55
 

Thanks! That made the trick :-)

Brian Barnes (Core Developer)
Re: Resizing Logo with custom css?
par Brian Barnes (Core Developer), Wednesday 18 April 2018, 13:51
Groupe 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?
par Mikael Salonen, Thursday 19 April 2018, 00:56
 

Thanks!


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