Mkdocs-material: How Can I Revert to The 'Look' and 'Behavior' of v0.2.4?

[yannduran]

I chose this theme (v0.2.4) specifically because I liked how it 'looked' and how it 'functioned'.

I've just come back to use it again for another site, and I'm shocked to find that the theme has completely changed how it 'looks' and how it 'behaves'.

I liked how there was a clear delineation of the 'content' from the 'background'. Now the theme looks a bit rediculous on a large desktop screen, though I imagine it looks good on a tablet or mobile. The previous layout looked fine.

I also liked the expandable headings on the left of the site. My only gripe was that I would have liked it to go down one more level. That's now been replaced with a TOC on the right side of the site. Using a mouse to move around now requires clicking backwards and forwards between the far left of the site and far right of the site. This dramatically hampers the theme's usability compared to the earlier behavior.

How easy would it be easy to revert the 'behavior' and the 'look', without having to go back to using a beta release of theme?

I'm happy to fork the theme, but I have absolutely no idea how to achieve the changes. If it can't be done then this theme is no longer of any use to me, which is sad because I loved it how it was.

My documentation has gone from:

to this:

Unfortunately, resizing these images no longer shows the hideously large font (IMO) that the content now uses.

[squidfunk]

A few things to consider: this is an open source project and yes, it is highly opinionated. Most of the people seem to be very happy with the new look, which IMHO is from a UX perspective in many cases far better than 0.2.4, but opinions might differ.

You can always install mkdocs-material==0.2.4, it will remain online on PyPI. However, here are a few possible solutions to the things you're addressing:

I liked how there was a clear delineation of the 'content' from the 'background'. Now the theme looks a bit rediculous on a large desktop screen, though I imagine it looks good on a tablet or mobile. The previous layout looked fine.

You could set a background on the container .md-content and adjust the top-margin a little.

I also liked the expandable headings on the left of the site. My only gripe was that I would have liked it to go down one more level. That's now been replaced with a TOC on the right side of the site. Using a mouse to move around now requires clicking backwards and forwards between the far left of the site and far right of the site. This dramatically hampers the theme's usability compared to the earlier behavior.

The table of contents actually is embedded on the left side under the currently active menu item. However, it is hidden on desktop, as it's shown on the right, but needed on mobile. You could override the styles for that and show the TOC on the left, adjust the width of the main content container (or better margin) and stretch it to the right. This will pretty much restore the theme like it was before.

Also: other people are pretty happy about the new way nav and toc are handled, as they have a very huge documentation project that doesn't really work with 0.2.4 as it includes loads and loads of endless scrolling. The new layout fixes this.

How easy would it be easy to revert the 'behavior' and the 'look', without having to go back to using a beta release of theme?

pip install mkdocs-material==0.2.4

It's not a beta release, it's a stable release which you can continue to use.

I'm happy to fork the theme, but I have absolutely no idea how to achieve the changes. If it can't be done then this theme is no longer of any use to me, which is sad because I loved it how it was.

I hope I could help you a little and clarify how you can "fix" things. You can very easily tweak the font size with extra CSS, all of which is documented in detail.

[carlosperate]

Truth be told, I wouldn't mind a theme with the content in a "white card" and grey general background as in the previous version. I played with the developer tools for a couple of minutes and it should be quite simple to overwrite some CSS in your deployment to achieve a similar effect:

Would it be possible to have a selection mode or something along those lines to support more than one style? (And please feel guilt-free to say this is outside of the scope of the project, this is some great work you are doing already!)

[squidfunk]

Thanks, looks reasonable. I would indeed consider this being out of scope. You can't be everybody's darling :-) Maybe you can post your changes here. I thought about doing a Customization FAQ, but this might be a question to specific.

[facelessuser]

I honestly think you've covered the basics of customization. You've covered adding extra CSS, and overriding templates. It's probably best left up to people to just inspect and play around with CSS in their browser and figure out what they want.

I guess you could also enable the wiki for the project where people could post interesting tweaks.