Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

allow custom class for individual posts #2

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

allow custom class for individual posts #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,13 @@ Create a Google Spreadsheet with the following columns:
* caption
* body
* read more url
* class

**Please note that the the _display date_ column must be in the format _Month day, Year_ (April 25, 2012) for proper javascript parsing.**
**Also, all columns must be _plain text_ format, including the two date columns.**

The _class_ value will be added to the class attribute of the main div for that post, to support custom css.

Now follow the instructions over at Tabletop.js to publish the Spreadsheet.

The Spreadsheet used in the example index.html file is at [https://docs.google.com/spreadsheet/ccc?key=0AsmHVq28GtVJdG1fX3dsQlZrY18zTVA2ZG8wTXdtNHc](https://docs.google.com/spreadsheet/ccc?key=0AsmHVq28GtVJdG1fX3dsQlZrY18zTVA2ZG8wTXdtNHc)
Expand Down Expand Up @@ -51,4 +54,4 @@ You also need to update the name of the spreadsheet 'sheet' that holds the data
The following plugins/libraries are used:
[jQuery](http://jquery.com/), [Isotope](http://isotope.metafizzy.co), [Tabletop.js](http://github.com/jsoma/tabletop), [Handlebars.js](http://handlebarsjs.com/), [jQuery imagesLoaded plugin](http://github.com/desandro/imagesloaded), and [jQuery resize event](http://benalman.com/projects/jquery-resize-plugin/)

NOTE: All of the elements are free for non-commercial use. Commercial use of [Isotope](http://isotope.metafizzy.co) requires a $25 [license](http://metafizzy.co/#isotope-license).
NOTE: All of the elements are free for non-commercial use. Commercial use of [Isotope](http://isotope.metafizzy.co) requires a $25 [license](http://metafizzy.co/#isotope-license).
11 changes: 9 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,13 @@
<link rel="stylesheet" href="css/style.css">

<script src="js/libs/modernizr-2.5.3.min.js"></script>
<style type="text/css">
/* class "negative" makes post appear white on black */
.negative div.inner, .negative div, .negative h3 {
background: #000 !important;
color: #fff !important
}
</style>
</head>
<body>
<div id="page">
Expand Down Expand Up @@ -68,7 +75,7 @@ <h1>Balance Media's Vertical Timeline</h1>
</script>

<script id="post-template" type="text/x-handlebars-template">
<div class="item post">
<div class="item post {{class}}">
<div class="inner">
<div class="timestamp">{{timestamp}}</div>
<div class="title"><h3>{{title}}</h3></div>
Expand Down Expand Up @@ -101,4 +108,4 @@ <h1>Balance Media's Vertical Timeline</h1>
</script>

</body>
</html>
</html>