how to replicate this for my own use?
August 28, 2016 4:37 AM   Subscribe

n00b question coming up. I love everything about the layout of this page for making long lists of topical reading manageable on the eye. I really want to replicate it to keep track of my own reading. But how?

I have tried copying and pasting the source code into an html editor, but it doesn't look the same (presumably I don't have the css file and am not savvy enough to figure it out). Is there a content management editor or similar theme that can help me make this for myself, or something I am missing about how to replicate this?
posted by starcrust to Computers & Internet (8 answers total) 2 users marked this as a favorite
I don't know how important it is to you to have this as a webpage. If you just want columns which are either white with black text or red with white text, you could easily replicate it with Microsoft Excel or Google Sheets.
posted by bjrn at 4:51 AM on August 28, 2016

The CSS is in the file- it's not a linked stylesheet. The divs are the 'boxes', and are named things like 'whitebox' and 'redbox'.

I copied the whole thing into a htm file and was able to open it with no formatting changes from my own machine.

If you're careful not to remove the div tags, you should be able to remove the content and populate it with your own.
posted by freethefeet at 5:07 AM on August 28, 2016 [1 favorite]

Unless you need to share the list with the world or are wedded to that exact look, it strikes me that Trello would be a flexible way of achieving the same functionality, possibly more efficiently: a new board per reading topic, a column per date range, file your books as 'index cards' with relevant notes/links/images. Horizontal scrolling and you can share with other Trello users too.
posted by doornoise at 5:59 AM on August 28, 2016 [2 favorites]

If you want it to be even more readable, make all the text a sans, like Verdana, not a serif font like Times.
posted by zadcat at 7:05 AM on August 28, 2016 [1 favorite]

This is actually a really easy layout to copy - everything is inline in the page.

Open the webpage, right click, 'view page source'. Ctrl-A, Ctrl-C (select all, copy). Paste into a *text-editor* (not word or similar, as that will screw up the formatting). Save the file.

Open this file in your browser (note I used Chrome for all of this). It should look exactly like the site does.

Editing is more tricky without accidentally deleting the tags, but you want to look for the sections like:

<div class="redblock">{Change This}</div><div class="whiteblock">{Change this}</div><div class="redblock2">{Change this}</div><div class="whiteblock2">{Change this}</div>...
posted by cgg at 8:17 AM on August 28, 2016

This is pretty simple to do on your own. You don't need to know much CSS. Check this out.
posted by kevinbelt at 9:23 AM on August 28, 2016

Response by poster: I managed it! Thanks so much - the tip about divs was key. And interesting point about Trello, I will check it out. I have found, though, that there is something procedurally important about doing bibliographies by hand!
posted by starcrust at 4:49 PM on August 28, 2016

I use spreadsheets to order information in a somewhat similar fashion. You didn't say that it has to be html based but spreadsheets are much more powerful without having to program anything. Google spreadsheets are available if you want it web-based.
posted by JJ86 at 7:42 AM on August 29, 2016

« Older H&M Blouse Size-mergency   |   So is coffee healthy or not? Newer »
This thread is closed to new comments.