How to place quotes side-by-side
How to make a horizontal line in posts
How to modify placement of cover images in Commento
How to style intro bullet points in Commento
How to place quotes side-by-side
Here’s an example of a side-by-side quote as it appears on the site:
In order to get the quotes to line up side-by-side, you’ll need to add a few html tags in the WordPress admin.
1. Log into the admin and go to the post you’d like to edit.
2. Make sure you are editing in “Text” mode. You’ll find this option in the top right of the post editing field:
3. Enclose the entire quotation block in a tag called <div class=”two-col”>
4. Enclose each column in a tag called <pre>
So for the quote above, the coding should look like this:
How to make a horizontal line in posts
1. Log into the admin and go to the post you’d like to edit.
2. Within the post field, place your cursor where you’d like your line to appear.
3. To create a horizontal line while in “Visual” mode, click on the “Toolbar Toggle” button at the far right of the toolbar. This will reveal a second row of formatting options:
4. Next, click on the “Horizontal line” button:
A line will now appear in your post.
Note: to create a line while in “Text” mode, insert the tag <hr /> where you’d like your line to appear.
How to modify placement of cover images in Commento
By default, the large cover images in the Commento are aligned with the top of the browser window. If you’d like to adjust the way the image is cropped, you can specify a number in the WordPress admin that will move the image upward.
1. Log into the admin and go to the post you’d like to edit.
2. Scroll down and you’ll notice a section called “Custom Fields”.
(Note: if you don’t see a “Custom Fields” section, scroll up to the top of the page and look for a button called “Screen Options”. Click on that button and make sure “Custom Fields” is checked).
Here’s what the Custom Fields section looks like:
3. In the dropdown on the left side, select “cover-image-position”.
4. Enter a value in the “Value” box. The number you enter here is in pixels, so if you enter 500, you’ll move the image 500 pixels upward.
5. Save or “Update” your post and view the new image placement on the site.
For reference, here’s the cover image for Inferno 1 before moving the image upward:
Now here’s the image where cover-image-position is set to 812:
How to style intro bullet points in Commento
The introductory bullet points in the Commento are styled a little differently from other bullet points (e.g., the font size is smaller and the spacing is slightly different). To use this styling, view the post in text mode and add the class ‘intro’ to the ul tag. Example:
And the correct structure for a list with sub-bullets should look something like this:
<ul class=”intro><li>First Level</li><li>First Level</li><ul class=”intro><li>Second level</li><li>Second level</li><li>Second level</li></ul><li>First Level</li></ul><hr>main text…
Return to top