setzer

Another update: as of version 0.7, the span element referred to above has been replaced by a div tag. This addresses a persistent formatting issue in some themes/browsers. Use div.side-matter-text to style the text inside a sidenote. This should be the last such change to this feature.

breadncup, thanks for the screenshot. I think this may be a CSS issue. The notes are getting positioned alongside their references, so it doesn’t look like side-matter.js is the culprit.

The problem with note 2 in your screenshot (where the note text appears below a line break) is a known issue with the anchor elements used to link to sidenotes; I’ve fixed it in the development version and will release an update soon.

I’m not sure what’s up with the other notes. I copied your post and CSS as closely as I could to see if I could replicate the problem, but had no luck (see here).

You might try reverting any custom CSS you’ve added/modified within side-matter.css and/or your theme files — that may do the trick. Or if you can provide your custom CSS here, I’ll take a look.

Glad to hear it’s working now. Version 0.7 waits for page elements (including images) to load before determining note position; seems like it was starting the loop too soon before.

breadncup, on my end the Pilot Fish theme appears to be working OK with Side Matter (in Chrome, Safari, and Firefox). Here’s what I see.

I do see that Pilot Fish does not include a sidebar in static pages (only posts), but it sounds like that isn’t the issue – you mentioned a problem with note alignment.

Can you provide more details about what looks wrong? A screenshot would also be useful.

Hi quiet.mysecret,

Is your site or theme available online? It would be helpful to see exactly what’s happening (a screenshot would also help).

Do the sidenotes appear out of position when a page first loads, or only after the browser is resized/zoomed?

My guess is that the script responsible for positioning notes, side-matter.js, is getting tripped up in some way. It’s possible your theme employs some javascript that conflicts with Side Matter, or perhaps there’s a different layout issue.

One suggestion is to update to version 0.7 of the plugin (uploaded today) and to see if the misalignment still occurs. Version 0.7 fires the note-aligning function at a different point, so it may work better. It also has an options menu that allows you to turn off responsive positioning on window resize/zoom, in case that’s the issue.

Update to my previous post: version 0.6 of the plugin is now up, and does includes the extra markup needed to style sidenote numerals separately from sidenote text. I’ve also streamlined the classes used for Side Matter content, so the above example can be ignored in favor of the following:

To customize Side Matter list numerals, style the ol.side-matter tag (either in side-matter.css or in your theme’s stylesheet):

ol.side-matter {
    color: orangered;
}

To customize the text within each list item, style the span.side-matter tag:

ol.side-matter > li.side-matter > span.side-matter {
    color: black;
}

xammamax, good question. Styling ol list numbers with CSS is unnecessarily complicated, but doable. Your question inspired me to include the following feature when I commit Side Matter 0.6 later this week, but you can also DIY, if you like, as follows:

Since any style applied to an ol or li tag applies both to the list number and the text inside each li, the least complicated way to give your numbers their own style this is by interpolating a span tag inside each li. You can do this on your own by changing line 63 of side-matter.php to the following:

$notes .= '<a id="note-' . $n . '" class="side-matter"></a><li id="note-item-' . $n . '" class="side-matter side-matter-notes"><span class="side-matter side-matter-note-text">' . $note . '</span></li>';

Then, add to your side-matter.css some version of the following:

ol#side-matter-list { color: orangered; }
span.side-matter-note-text { color: black; }

(P.S. It’s also possible to style ol numbers without the additional span markup, but the process is complex and less widely supported across browsers: see here for details.)

xammamax – that is very strange indeed; thanks for bringing it to my attention. I’ve done some poking around in the Pinboard templates today, and it appears the culprit lies somewhere in the code for a Pinterest social bookmark (of all things).

Anyway, I’ve found an easy solution. Go to your Pinboard Theme Options page, then scroll down to “Single Posts” and uncheck “Pinterest.” (The other Social Bookmarks are still fine to use.) On my end, at least, this resolves the problem completely.

Hope this works for you!

quiet.mysecret, it’s likely a stylesheet issue. Based on your question, it sounds like your theme’s style.css is somehow overriding the note list’s default list-style-type to none, producing a list without numbers. (It should be decimal, per side-matter.css.)

I’d have to take a look at the theme files to be sure, though. Is the theme available for download on wp.org?

OK, I believe I’ve fixed the problem (improper instantiation of class Side_Matter_Widget). The updated version is available here: download.

Hope this resolves your error, quiet.mysecret!

quiet.mysecret – give this version a shot and let me know if it fixes anything.

Hi there – sorry you’re having trouble with the plugin! Hope I can help, though I’m not sure what is behind this problem. What versions of WordPress and PHP are you using?