How can I add sidenotes (footnotes shown on the side of the article)?
-
Hi, I have recently been learning a bit of CSS to customise my blog (ahistoryofthepresent.wordpress.com) and have been trying to get an effect such as the one shown here (http://www.grantland.com/story/_/id/6640925/time-lebrondown-part-ii) with sidenotes (ie footnotes shown on the side of the article). I’m using the Pilcrow theme and have managed to get footnotes to show nicely with some CSS editing, but I can’t figure out how to put them on the right as they are in that example. From examining that page’s CSS it seems they are in a column as an aside. Could anyone show me how to do that? Thanks!
The blog I need help with is: (visible only to logged in users)
-
To do something like this would require setting up a new “div” in the underlying theme PHP script files, and since this is a multi-user platform, we do not have access to those files. (A change by one person would change it for everyone using that particular theme.) There is a way to create two columns in an individual post content area, but getting things to align properly would be quite a task since you would have to use margin-top as inline CSS for the quotes.
Not really doable with CSS along is what I’m saying.
-
Hi thanks very much for your reply. Would it be possible with WordPress.org, or would I face the same problem that way? Thanks again!
-
Yes, you get full control of the code when you use WordPress.org whereas at WordPress.com you can get the option to add CSS (with the paid upgrade for Custom Design) but you cannot modify theme HTML code.
Check out these help pages to learn more about switching:
http://en.support.wordpress.com/com-vs-org/
http://en.support.wordpress.com/moving-a-blog/#moving-to-wordpress-org -
I started thinking about the footnote thing might actually be doable, so I gave it a shot:
Add something like this html into the body of a post:
<a class="footnote" href="#3">3</a><span class="footnote"><a name="3">3.</a> Blah blah blah. I love CSS. Aren't footnotes so cute? Blah blah.</span>Then try this CSS:
.two-column #content { overflow: visible; } .footnote { display: block; width: 234px; margin-left: 543px; height: 0px; } a.footnoteref, a:visited.footnoteref, .footnote a { color: red; text-decoration: none; }Of course, the theme really isn’t built to show footnotes in the sidebar that way, so you would have to make sure to keep the sidebar mostly clear of other things. It could overlap in funny ways if you added a bunch of widgets.
[Update: This CSS is for the Pilcrow theme and Content-Sidebar layout option.]
-
Wow that works! Thanks! Took a bit of fiddling to figure out how to stop the default widgets showing up in the sidebar but replacing them with a blank text widget worked. Thanks very much! The only oddity in it is that the notes display one line down from their mark in the content. Any idea why that is?
-
Yes, it’s because that’s where it really actually falls within the document structure. I couldn’t figure out a way to get it to move up though.
@thesacredpath or @devblog, do you see a way to do that?
-
-
-
Here’s an active link to the blog in question > http://ahistoryofthepresent.wordpress.com/
-
Thanks @thesacredpath. :)
Looks like ahistofthepres rearranged the html a bit by wrapping it in a <small> tag, and that sorted the spacing issue. Looks nice!
-
Thanks very much for your help guys! I actually fixed the next-line problem by moving the “footnote” before where it should appear in the text (ie to put it after “Hello”, I inserted it just before “Hello”). Put in little superscript number to make it look like a note and then changed the text in the note to small and italic. Thanks very much for a great fix!
-
One final question: is there a way to style the text in the footnote span you created? I’ve tried adding the usual font-weight etc but it doesn’t seem to do anything.
- The topic ‘How can I add sidenotes (footnotes shown on the side of the article)?’ is closed to new replies.
WordPress.com Forums 