List Markup Guide

Styling the list with CSS

The plugin automatically creates a Heading and a list of posts with the following XHTML markup and CSS classes/IDs:

• The entire list is contained in a <div> which is automatically assigned an ID of serial-posts-wrapper.
• A List Heading in <h3> tags, with a class of serial-posts-heading. The Heading is made up of three elements: “Text before” “Serial Name” and “Text after” (see Settings Page) and each of these three elements is output in <span> tags with the following class names:
  • <span class=”serial-pre-text”> for the “Text before Serial name” element.
  • <span class=”serial-name”> for the “Serial Name” itself. For example if the Serial name is “My great series of articles” the generated class name will be my-great-series-of-articles.
  • <span class=”serial-post-text”> for the “Text after Serial name” element.
• The list of links for the posts is output as either an ordered or unordered list, as per the user’s selection in the plugin’s Settings Page). The <ul> or <ol> tags are output with a user definable class name or, by default, serial-posts.
• Each post in the list is displayed as a link in <li> tags with a class of serial-posts-list-item.
• If the “Include current post in list of Serial Posts” checkbox is checked, the <li> tag for the current post is given an additional class of current-active or current-inactive depending on whether or not the “Show current post as a link” checkbox is checked.

All of this means that by adding these classes to your theme’s stylesheet you have full control over the styling of every element in the plugin’s output. You don’t need to do anything with the CSS if you are happy with the default look of the plugin’s output, but the capability to customise the styling is there if you want to use it.

Example 1

Settings:

• Text Before and Text After fields have been used
• Hide Serial Name is unchecked, therefore Serial name will be shown in the Heading
• List type <ul> or <ol> is <ul>
• List <ul>/<ol> class is left as default, ie serial-posts
• Include current post is checked (in the below example, the current post is Post Title 2)
• Show current post as a link is unchecked (this adds a class of current-inactive to the <li> tag)

Output:

<div id="serial-posts-wrapper">
	<h3 class="serial-posts-heading">
		<span class="serial-pre-text">Text before</span>
		<span class="serial-name">Serial name</span>
		<span class="serial-post-text">Text after</span>
	</h3>
	<ul class="serial-posts">
		<li class="serial-posts-list-item">
			<a href="permalink" title="title">Post Title 1</a></li>
		<li class="serial-posts-list-item current-inactive">
			<a href="permalink" title="title">Post Title 2</a></li>
	</ul>
</div>

Example 2

Settings:

• Text Before is used, Text After field is blank
• Hide Serial Name is checked (this automatically removes the Text After markup)
• List type <ul> or <ol> is <ol>
• List <ul>/<ol> class is entered as my-serial
• Include current post is checked (in the below example, the current post is Post Title 2)
• Show current post as a link is checked (this adds a class of current-active to the <li> tag)

Output:

<div id="serial-posts-wrapper">
	<h3 class="serial-posts-heading">
		<span class="serial-pre-text">Text before</span>
	</h3>
	<ol class="my-serial">
		<li class="serial-posts-list-item">
			<a href="permalink" title="title">Post Title 1</a></li>
		<li class="serial-posts-list-item current-active">
			<a href="permalink" title="title">Post Title 2</a></li>
	</ol>
</div>