Keep the header content in one line

[Alexander Goryntsev]

As I guess from the style definitions for the #coursetitle it's expected that with the title truncating the whole content of the header is kept in one line within its height, which is now - thanks - specified in settings. It'd be really nice.

However it doesn't happen, see the screenshot. For smaller window width the truncated title moves to the second line that looks a bit weird. It should be easy to improve with custom CSS, but I fail to find my own solution so far. Even if we really want to get the second line then the title should be truncated based on its new actual width below the logo.

As to the #titlecontainer I think it makes sense to make it truncated as the #coursetitle does and keep the site header in one line as the course header does.

[Alexander Goryntsev]

I was trying to improve it with custom CSS and tweaking #coursetitle style that led to weird results.Then I noticed that the selectors of the rule included both #coursetitle and #coursetitle span, see the screenshot. Doesn't it lead to double styling of the title? For example in Firefox Style Inspector a doubled left padding is clearly visible. Is it OK?

Also I needed to move the course title upwards to position it where the site title is, see it on the same screenshot.

[Jeremy Hopkins]

I am not sure what the issue is here. There is a setting under the "header" sction called "coursetitlemaxwidth" which you can use to adjust the size of the title. I just altered that so it can be set up to 80%, i can increase that further if needed.

Does altering that setting not resolve the issue?

[Alexander Goryntsev]

Hi Jeremy! I've tried changing the max-width to different values - no progress so far, see the screenshot. Instead of truncating the title just drops down into second line. I really can't figure it out as it's enough space in one line and I don't see for instance any unused empty boxes that just hold a space for something...

[Jeremy Hopkins]

What happens if you reduce that max width? If the value is too BIG it will spill, a lower value should prevent this. Try setting it at the lowest (35px) and see what happens.

[Jeremy Hopkins]

Sorry I see you have already tried that and it does not fill the space. I am not sure the problem is with the course title but the logo to the left of it. Could you give me the url to your site to look at?

[Alexander Goryntsev]

I also have an idea the #logo could be the one to blame as it still has a style applied very long time ago that might be incompatible with the last theme changes. You already have access to my site at http://тримаршрута.рф/

[Jeremy Hopkins]

I cannot find the details you gave me before, could you send account details for your site to me via private message on Moodle.Org:

https://moodle.org/user/profile.php?id=230467

Or just reset the password as you did before and I will change it after logging in.

Just one other point, have you cleared your browser cache?

[Alexander Goryntsev]

Being an early adopter I clear my browser cache as often as I brush my teeth :) Yes, I have.

I've sent you the account details in a private message on moodle.org. You can change them if you want. Pls., let me know if it doesn't work out.

I've removed all custom CSS for #logo that I had before; now the header is in its initial state.

I'm interested if you can replicate this on your site if you make a long course name?

[Jeremy Hopkins]

Hi Alex,

I tested this and the max width of "coursetitle" is set to 50% on your site. Changing that to 80% displayed the course title as you want it. There is already an admin setting for this, in older versions it was under "layout" but in the latest version it is under "header". If you search your admin settings for "coursetitlemaxwidth" you should find it. The two screen shots below show what the effect should be:

[Alexander Goryntsev]

Thanks, Jeremy! That was clear and I could adjust the max-width as from the backend as with custom CSS - and I did it. My issue is whether it's possible to always keep a logo and a course title in one line for any page width. As I get from your comments apparently it is not. Anyway it's a minor thing.

What is worth your attention is that the site title unlike a course title is not truncating when the page width gets smaller. On my site I've improved it with custom CSS. Another thing is that the site title and a course title are differently positioned within the header area, a course title is about 5px lower. On my site I also have improved it with custom CSS.

Probably you would consider these improvements worth implementing into the source code of the theme.

[Jeremy Hopkins]

Hi Alex,

It would be possible to reduce font sizes as the theme collapses via the mobile settings page but that would still not give you what you want, we just hide the site title on mobile. It maybe possible to do this with LESS but we deliberately avoided LESS to make the theme easier to work with. I think Fernando is probably better placed to comment on that issue.

Regards changing the site title to collapse like course title I just did that in issue #395. If you update to the latest version you will see there is now a max width setting in the "header" page and it will truncate if you have an overly long title. In short it now behaves the same as coursetitle but should be kept separate so different font sizes / styles can be applied.

[Alexander Goryntsev]

Thanks Jeremy,

it looks good now though the course title still needs some fine custom positioning to be aligned with logo as it is with the site title.

The issue with the second line in the header I could solve at my end just avoiding long course names :) When it's short - it looks fine with any header layout.

Thanks for your support. Let's close it.