setzer

Side Matter turns footnotes into sidenotes, magically aligning each note in the sidebar next to its corresponding reference in the text. Unlike hyperlinked footnotes, sidenotes don’t require jumping down the page to follow up on each reference; instead, they perch humbly and accessibly beside the material to which they refer.
To use, place the Side Matter widget in your sidebar, then enclose sidenote text in a page or post using the <code>[ref]</code> shortcode, like so:
<pre><code>Here's the text to annotate.[ref]Note text goes here.[/ref]
</code></pre>
To change default settings, use the Side Matter options page linked under the Appearance menu on your admin screen.
<h3>Styling Side Matter with CSS</h3>
Changing the appearance of Side Matter elements—for example, editing your notes’ typeface or indentation—requires using CSS. The simplest way to go about this is to install a custom CSS plugin that will preserve your rules even when Side Matter or your theme is updated. (<a href="https://wordpress.org/plugins/simple-custom-css/" rel="ugc">Simple Custom CSS</a> is a good example.)
Side Matter comes with a set of built-in class selectors. As an example, all sidenote and reference elements may be styled at once using the class <code>side-matter</code>. The following CSS will render all Side Matter elements in blue serif text:
<pre><code>.side-matter {
 color: blue;
 font-family: serif;
}
</code></pre>
Notes and figures may be formatted with greater precision using element-specific class selectors. For example, the following CSS will render reference and list numerals in green and sidenote text in black:
<pre><code>a.side-matter-ref, ol.side-matter-list {
 color: green;
}

div.side-matter-text {
 color: black;
}
</code></pre>
<h4>List of Class Selectors</h4>
Here is a full list of Side Matter class selectors and their uses:
<ul>
<li><code>a.side-matter-ref</code> selects the link elements that enclose in-text reference numerals. Use this class to modify the links’ colors, underline, etc.</li>
<li><code>sup.side-matter-sup</code> selects the <code>sup</code> (superscript) elements that enclose in-text reference numerals. Use this class to modify the numerals’ typographic properties, such as size, offset, and font.</li>
<li><code>.widget_side_matter</code> (note the underscores) selects the widget container element, which may be an <code>aside</code> or a <code>div</code>.</li>
<li><code>ol.side-matter-list</code> selects the <code>ol</code> (ordered list) element that encloses notes in the sidebar, including list numerals.</li>
<li><code>li.side-matter-note</code> selects sidenote <code>li</code> (list item) elements, including each note’s numeral.</li>
<li><code>div.side-matter-text</code> selects the <code>div</code> elements that enclose sidenote text, but not sidenote list numerals. Use this to style sidenote text separately from numerals.</li>
</ul>
Each paragraph within a note is further wrapped in a <code>p</code> tag. However, as they’re generated outside the plugin, these <code>p</code> elements cannot be selected directly using the <code>side-matter</code> class. Instead, select them indirectly, e.g. <code>div.side-matter-text > p</code>.
<h4>Default CSS</h4>
Side Matter sets a few rules by default in the included stylesheet <code>side-matter.css</code>. These rules will generally defer to your theme stylesheet in the event of a conflict.
The first rule removes underlines from reference numeral links:
<pre><code>a.side-matter:link,
a.side-matter:visited,
a.side-matter:hover,
a.side-matter:active {
 text-decoration: none;
}
</code></pre>
The second rule specifies a consistent cross-browser, cross-theme format for superscript figures:
<pre><code>sup.side-matter-sup {
 position: relative;
 top: -0.5em;
 vertical-align: baseline;
 font-size: 0.75em;
 line-height: 0;
}
</code></pre>

Side Matter

Turns footnotes into sidenotes, magically aligning each note in the sidebar next to its corresponding reference in the text.

Design for WP

Effortlessly create stunning images with ScreenGlow. Paste, upload and edit images and screenshots, create mockups, add backgrounds, annotate screenshots, and beautify designs — all within your WordPress dashboard. ScreenGlow is the ultimate tool to elevate your website’s visual storytelling with just a few clicks!
<h3>Features</h3>
📋 Paste Screenshots Directly: Quickly paste screenshots from your clipboard into the Media Library using Ctrl/Cmd+V.
🖥️ Create Beautiful Mockups in One Click: Transform plain screenshots into polished visuals with customizable mockups, like browser windows.
↔️ Resize Images: Resize images to fit perfectly with pre-defined or custom dimensions.
🌅 Add Stunning Backgrounds: Enhance your visuals with background colors, gradients, and patterns.
🧑‍🎨 Image Filters & Styling: Style your images with filters, such as contrast & saturation, rounded corners, drop shadows, grayscale image, and more.
⭕️ Add Annotations: Use arrows, shapes, text and more to highlight key parts of your images and screenshots.
🚀 Lightweight & Optimized: ScreenGlow is built for speed, with custom settings to ensure your WordPress site runs smoothly.
🔌 WordPress-Friendly: Built to work effortlessly with WordPress’ Media Library for a smooth editing experience.
Experience all of these features for free!
<a href="https://www.designforwp.com/screenglow/" rel="nofollow ugc">Learn more</a> about everything ScreenGlow has to offer.
<h3>Integrate with Ease 🪢</h3>
The ScreenGlow image editor seamlessly integrates with the WordPress Media Library, supporting media upload modals in the most popular pages and page builders:
<ul>
<li>Default WordPress Media Library</li>
<li>Classic page builder</li>
<li>Elementor</li>
<li>Gutenberg</li>
<li>and more…</li>
</ul>
<h3>More Features with ScreenGlow Premium ⭐</h3>
Upgrade to ScreenGlow Premium and unlock exclusive tools for screenshot and image edit tasks. Enjoy a 14-day money-back guarantee when you upgrade!
📄 Presets: Save your settings as presets for one-click application.
🖼️ More frames & patterns: Access an expanded collection of exclusive frames and patterns.
↙️ Image crop: Easily crop images on the canvas.
👥 User role management: Specify which user roles can access the image editor.
♾️ Access to Updates: Enjoy access to future updates, including new frames and patterns.
<a href="https://www.designforwp.com/screenglow/" rel="nofollow ugc">See all Premium features</a>

ScreenGlow Image Editor – Beautify, Mockup, Annotate, and Edit Images and Screenshots

Paste or upload screenshots or images, create mockups, add backgrounds, and annotate screenshots. All directly from your Media Library or editor.

Side Matter vs ScreenGlow Image Editor – Beautify, Mockup, Annotate, and Edit Images and Screenshots