Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

How can I add sidenotes (footnotes shown on the side of the article)?

  1. ahistofthepres
    Member

    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 ahistoryofthepresent.wordpress.com.

  2. thesacredpath
    Member

    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.

  3. ahistofthepres
    Member

    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!

  4. designsimply
    Staff

    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

  5. designsimply
    Staff

    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.]

  6. ahistofthepres
    Member

    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?

  7. designsimply
    Staff

    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?

  8. devblog
    Member

    it seems ahistofthepres fixed it.

  9. thesacredpath
    Member

    /hat tip to @designsimply

    Nice job.

  10. timethief
    Member

    Here's an active link to the blog in question > http://ahistoryofthepresent.wordpress.com/

  11. designsimply
    Staff

    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!

  12. ahistofthepres
    Member

    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!

  13. ahistofthepres
    Member

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags