Alignment

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.

It happens to me as well.

The theme is https://www.ads-software.com/extend/themes/pilot-fish

And, it happens in Safari, but Firefox looks to be ok. I haven’t tested other browser.

FYI, I’m Mac User.

Please, test above browser with the theme, and let me know if the alignment in sidebar issue is resolved soon because I like this plug-in.

Thanks!
Daniel

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.

I use a licensed theme, so unfortunately I can’t share the actual theme. But on my end, the v0.7 of the plug-ins works great so far. The alignment issue seems to be OK. Using Mac as well and tested both on Safari and Firefox.

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.

Hi Setzer,

Here is the screenshot captured for my issue:

https://postimg.org/image/6qtaoswid/

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.

Thanks, setzer,

I’ve updated your plugin to 0.7, and now the alignment problem like the screenshot was gone!

Thank you, so much.

And, one more suggestion or question. It looks the basic css doesn’t give a color and it’s plain. Like your ad’s screen or others, I had to add customized css, but it is annoying whenever the plugin is updated because it is disappeared. Do you know how to avoid it? Is this the way in how WP works?

Anyway, here is the css I’ve slightly added to match my theme (pilot fish)

/*
side-matter.css
Version 0.7

Plugin: Side Matter
Author: Christopher Setzer
URI: https://www.ads-software.com/extend/plugins/side-matter/
License: GPLv2
*/

/* Selects all tags generated by Side Matter. Useful for toggling things like <code>display</code> or <code>visibility</code>. */
.side-matter {
}

/* Selects the hyperlinks enclosing in-text reference numerals. Target a specific reference link by appending its number, e.g. <code>a.side-matter-ref-5</code>. */
a.side-matter-ref:link,
a.side-matter-ref:visited,
a.side-matter-ref:active,
a.side-matter-ref:hover {
	text-decoration: none;
	color: inherit;
}

/* Selects superscript tags enclosing in-text reference numerals. Target a specific element by appending <code>sup.side-matter-sup-</code> with its number, e.g. <code>sup.side-matter-sup-3</code>. */
a.side-matter-ref > sup.side-matter-sup {
    color: orangered;
    vertical-align: super;
    font-size: 0.75em;
}

/* Selects the Side Matter widget. Widget can also be targeted using <code>div.side-matter</code>, but note that this will also target the <code>div.side-matter-text-</code> tags nested inside sidenote <code>li</code> tags. */
div.side-matter-widget {
}

/* Selects ordered list of sidenotes, including sidenote numerals. List can also be targeted using <code>ol.side-matter</code>. Note that this tag is not always enclosed in the Side Matter widget; it can also be generated using the custom action <code>side_matter_list_notes</code>. */
ol.side-matter-ol {
	list-style-type: decimal !important; /* Do not change; prevents interference by themes and resets */
    color: orangered;
}

/* Selects sidenotes within ordered list, including their numerals. Target a specific sidenote by appending <code>li.side-matter-li-</code> with the sidenote number, e.g. <code>li.side-matter-li-6</code>. */
ol.side-matter-ol > li.side-matter-li {
}

/* Selects the anchor tags used to target each sidenote by its corresponding in-text reference hyperlink. These <code>a</code> tags contain no content, and serve only as anchors; styling them is unnecessary. If styling is needed, a specific anchor may be targeted by appending its number, e.g. <code>a.side-matter-note-4</code>. */
ol.side-matter-ol > li.side-matter-li > a.side-matter-note {
	display: none !important; /* Do not change; corrects spacing issue in some browsers */
}

/* Selects sidenote text only (but not list numerals). Use this to style sidenote text separately from sidenote numerals. Helpful for rendering numerals in a different color or typeface. Target the text of a specific sidenote by appending <code>div.side-matter-text-</code> with the sidenote number, e.g. <code>div.side-matter-text-2</code>. (This replaces the <code>span.side-matter</code> tag used in earlier versions.) */
ol.side-matter-ol > li.side-matter-li > div.side-matter-text {
}

/* Selects all sidenote paragraph tags. All sidenote text is wrapped in <code>p</code> tags by WordPress's built-in <code>wpautop</code> function. Useful for custom indents, although the above <code>div.side-matter-text</code> should be used when styling text color, font, etc. Note that because they are generated by WP outside of the plugin, these <code>p</code> tags cannot be selected using the class <code>side-matter</code>; they must be selected using specificity, as below. */
ol.side-matter-ol > li.side-matter-li > div.side-matter-text > p {
    color: #41434A;
}

Thanks and, I love this plugIn.

I’m glad it works! You have a good point about maintaining custom CSS across update. By default, WordPress does overwrite the old plugin files with the latest version.

One option, for the time being, is to add the custom CSS to your current theme’s stylesheet instead of side-matter.css. However, know that this may result in the same issue when the theme is upgraded.

Now that most formatting issues have been ironed out, I’d like the plugin to preserve custom CSS on update in future versions — shouldn’t be too much work to make it happen.