How to create a sidenote box at WordPress.com

wordpress.comwordpress.com-tags

There is a blockquote box which is well established meaning for putting quotes. I would like to add another box in my post — a sidenote, something like you see in books when some part of the text needs emphasis.

I don’t care about visual style — all it is required to be different than regular text and different than blockquote.

So, is there such tag present in regular WordPress (free, wordpress.com)? If yes, what is the tag?

For the record, example of the sidenote (not WP site): http://www.gigamonkeys.com/book/

As the workaround I simply put a raw div with some style defined (see: skila.pl). The downside is I will have to copy&paste it in every post.

Best Answer

As for being a "tag present in regular WordPress" that's not quite how it works. Tags/Elements are HTML and are dependent on the WordPress theme you're using, not WordPress globally.

If your theme doesn't have styling for <aside> (which is a newer HTML5 element) you could create a style for it using the WordPress.com Custom CSS Upgrade

If your theme is not using HTML5 and hence <aside> would be out of place you could create a custom CSS class, for example <div class="sidequote">.

Update: based on your link what I'm suggesting is you can using Custom CSS to define:

.sidequote {margin-left:4em;border-top:4px solid Indigo;border-bottom:4px solid Indigo;padding-bottom:.35em;padding-top:.35em;}

Then in your content you just write: Lorem Ipsum

This is a much better solution as you can globally update the style by changing it the Custom CSS, and avoid later having to going through and changing each and every instance of the inline CSS you wrote.

Final Note: If you didn't want to pay for the Custom CSS upgrade, I think I might write it this way into your post (I think inline <style> tags work, just add them at the top of each post). Rather than directly inline on the div.

<style>.sidequote {margin-left:4em;border-top:4px solid Indigo;border-bottom:4px solid Indigo;padding-bottom:.35em;padding-top:.35em;}</style>
<p>some content...</p>
<div class="sidequote">Lorem Ipsum</div>
<p>more content...</p>
Related Topic