Changing the way the default Quills CSS handles overflow, to have long lines handled nicely.
I've transfered all of the entries that were in the Computers and Code folder
previously into my blog folder here. In doing that, I ran into a problem with
overflow and some of the long lines that are in the code in some of these
entries. In a regular document content type, these lines caused a horizontal
scrollbar to appear, which was great. But in a Quills entry, they made the
central column very wide, which was not great.
The problem had to be in the Quills CSS, since I knew these exact same entries
worked fine in the document content type. domestos on #plone suggested I use
the Firefox DOM inspector to help find the problem.
The DOM inspector is very handy. Debian users can get it with
install mozilla-firefox-dom-inspector. It gives a nice visual view of
the document structure so you can tell what CSS is affecting what stuff.
Anyway, this was not a complicated problem in the end. Adding
overflow: auto; to
.weblog-body in the Quills CSS seems to
have solved the issue. The former fixes it on the overview page, while the
latter fixes it in the individual entry view.
I was flustered for a while after this by the width of the content column
in the individual entry view. It was even wider than the long code lines, so
this was a separate problem from the above. Then I noticed how long the
Trackback URL was at the bottom. The solution is to add
overflow: auto to
div.trackbacks. Don't add it to
div.entry-trackback, otherwise you will end up with a little
vertical scrollar as well.