#notes list

I've simplified the explanations as much as I think necessary, but if you're unsure about anything and can't get it to work, send me an ask.

So, to get started, have your notes list placed within a div, like so (the PostNotes block is used to make the note list div only appear when on a permalink page, and the post actually has notes to show):

[block:PostNotes]     <div class="noteslist">         [PostNotes-64]     </div> [/block:PostNotes]

(Due to Tumblr actually parsing these sections as normal theme blocks, I've had to replace the braces with brackets. Remember that all square brackets above should be the braces instead.)

(If the "noteslist" part doesn't go green in Tumblr's Edit HTML window, re-type the quotes. Sometimes unicode quotes are replaced with stylized versions that don't properly parse in HTML.)

Also note that you don't need to use class. Feel free to use id if you want, just replace the period in the CSS with a hash (#) to make it an ID instead of a class. I just prefer to use class, since each ID can be assigned to only one div for an entire page and there are (very occasionally) uses to place this sort of styling in multiple places on the same page.

One final note before we properly start this... keep your damn CSS tidy. It is a pain in the neck for you to go digging through later if you want to change it up (or even find it easily) if it's all messy. Use extra lines and tab-indentation to make it look nice and structured.

Now, the actual tags used for the notes list are <ol> (ordered or numbered list), <li> (each list entry), <img> (for the avatars of each blog), and <span> (for the xxxxx reblogged this from xxxxx part -- the text of each list entry).

To make use of this, you can stylise each part of the notes by using your noteslist class and styling each of the tags used within it, like so:

.noteslist ol { } .noteslist li { } .noteslist img { } .noteslist span { }

The very first thing I'd recommend you do is get rid of the numbers on the list, or at least style them to fit your theme. This can be done by using the list-style-type property in the ol styling. Set it to none to remove the numbers. It takes a variety of different operators, if you'd like to make it bullet-points instead, or something else. In addition, if you remove the numbers entirely, you'll want to reset the padding of the list. Example:

.noteslist ol {     list-style-type: none;     padding: 0; }

Now, you should add a padding value to the .noteslist li {} styling to give them a little bit of space from each other. 5px should be plenty for most themes, for readability. 

Now, to get the images lined up with the text and stop them going all over the place and looking horrible, you want to do the following:

Add the line display: block; to the .noteslist span {} styling and the .noteslist img {} styling. This allows you to style the width and height of the span and the images, making it a block element, whilst also keeping it within the list line, to prevent things going pear-shaped. It also allows us to properly do the next part.

Add the line float: left; to the .noteslist img {} styling and the .noteslist span {} styling. This will make both elements "float" as far left as they can, to the very left of the <li> element. (N.B.: this means that the image will float to the left of the <li> element, and the <span> element will sit beside it.)

Add some padding-left to your .noteslist span {} styling, to keep the text from being obscured by the image. 10px is usually pretty adequate. If you want to add some padding to the right side as well, do so, but this should not be necessary except in very narrow themes.

Set an image width. We've taken the 64px notes tag to make the image avatars nice and big. Somewhere around width: 24px; in the .noteslist img {} styling is pretty good for keeping things nice and similar-sized, but anything up to 64px is perfectly possible.

Add a line-height to your .noteslist span {} that is the same as your img width. This will keep the text in line with their corresponding avatars. If you add a margin or padding to the top or bottom of the images, do the same with the span styling, to keep the text in line with the images.

Add the line overflow: hidden; to the .noteslist li {} styling. Without it, you'll probably find that the image and span are partially or even completely outside of the actual li element (check this by applying a background colour to both of them). Floated elements don't "stretch" their parent elements by default. Making the overflow hidden forces the li element to stretch around them, as long as it doesn't have a set height. You could also just give it a specific height, as I have done. I recommend you set it to the image width (images here are square), plus whatever the padding value in the img styling is.

This is the code I myself have styled the notes list with follows (with a screenshot, so you can see how it looks.

As you can see, I've added box shadows to the images as well as rounded corners to both images and note list entries. The span has a thick border on the left side, and each list entry has a bit of padding and margins, as well as a border and background colour (which is partially transparent).

Feel free to stylise it further to whatever degree you want.

I found out which elements the notes list uses by essentially loading up a post permalink page with unstyled note list and looking at it with Chrome's Developer tools, which has a magnifier tool which essentially tells you all the HTML and tags used in a particular element. Invaluable tool.

N.B: If you want the additions to the post from people who reblog it to show up in the list properly, you need to remove the height parameter from the li classes and add a .noteslist blockquote {} styling as well (I recommend adding the line clear: both; to this styling so it displays underneath the image and "xxx reblogged this and added" text).