I know, I promised no CSS! But there are a few common problems you can enter specific “rules” to correct. You don’t have to write it; I’ll tell you what to type. You might need to experiment to find the numbers that make the spacing right for you.
In the Customize menu, most themes provide a way to add CSS rules, usually on the first screen of the menu, under Additional CSS or Custom CSS.
It’s OK to have blank lines or add line breaks for readability. Enter a comment with every rule so you’ll remember what it’s for. A comment starts with /* and ends with */ and can appear anywhere in the CSS except inside a quoted string.
Correct List Formatting
One of the common fails in themes is list formatting within the content area. There might be no vertical space between the items, or poor indentation when the line wraps.
When what we’d like is this:
This rule makes the adjustment:
/* Correct theme’s lists so second line aligns with first. */
#content li {
text-indent: 0px;
margin-left: 15px;
margin-top: 8px;
}
Tweak the numbers to suit yourself.
- The text-indent line reflects the spacing between the position of the bullet and the first character of text.
- The margin-left line controls the amount by which a bullet point is indented relative to higher-level bullets.
- The margin-top line controls the vertical spacing between bullet points.
I also like it when themes vary the bullet style based on indentation. In the above examples, the first-level list items use filled-disc bullets, the second level has circles, and the third level uses filled squares. If your theme doesn’t do this, and you care, you can add rules to make it happen.
/* Vary bullet style depending on list indentation level. */
#content ul li { list-style: disc; }
#content li ul li { list-style: circle; }
#content li li ul li { list-style: square; }
Similarly, if multilevel numbered lists use the same style of numbering on each level, add these rules:
/* Vary numbering style depending on list indentation level. */
#content li ol li { list-style: lower-alpha; }
#content li li ol li { list-style: lower-roman; }
If your problem is with the spacing above or below the entire list, adjust it as follows:
#content ol, #content ul {
margin-top: 0px;
margin-bottom: 0px;
}
The numbers (0 in this example) control the spacing above or below the whole list without affecting spacing between list items.
MyBookTable Book Page Margins
When you set up your site, I had you use the Mooberry Book Manager for your book catalog. This section is about a different book catalog plugin I described elsewhere (MyBookTable Plugin). So this might not apply to you.
Depending on your theme, the MyBookTable plugin’s single-book page might have too much indentation on the left.
The Twenty Sixteen theme has this problem, for instance. Correct it with this rule:
/* Let MyBookTable use full width of content area. */
article.mbt_book .entry-content {
width: 100% !important;
}
Some themes have a different problem: the title and content area align with each other, but there’s no margin between them and the containing rectangle.
To fix this, add the following CSS rule:
/* Add space around book page in MyBookTable. */
article.mbt_book {
padding: 25px;
}
Tweak the number to make the appearance match your other pages or what looks good to you.
Test the result in a narrow window also. Sometimes the same adjustment doesn’t work for both cases. If that happens, the fix is more difficult and you’ll need expert help (or a different theme).
Anchor links with fixed header
“Anchor links” are points within a webpage that have their own URL, so that you can create a link from elsewhere not just to a page, but to a specific point within the page. Here, for instance, is a link to the definition of anchor link in the glossary: https://torknado.com/obook-author/glossary#anchor
The format of the URL is the URL of the page with a # and the name of the anchor appended (in this case I chose the name “anchor”). The name can be anything with just letters and numbers, no spaces. Enter the name in the Advanced section of the Block properties of the paragraph or heading you want to jump to.
Unfortunately, if your website has a fixed header, as this one does at the moment, the browser will scroll the page so the anchor is at the top, but that might be underneath the fixed header, so it’s covered up. The following rule fixes this.
/* when jumping to an anchor link allow this much space above it to clear the fixed header */
p, h1, h2, h3, h4 {
scroll-margin-top: 6em;
}
This rule makes the anchor scroll further down by a specified amount (6em in this example) so that it’s below the fixed header. Adjust this number to a distance that works for your website, depending on the height of your fixed header. The rule has no side effects on spacing.