Welcome to Verge Hack Week

1. Create your spreadsheet

Build a new Google Spreadsheet using the TimelineJS Template. Once you're done editing, publish the spreadsheet to the web (File > Publish to the Web > Start Publishing). Refer to Knight Lab's TimelineJS site for more information.

2. Enter your spreadsheet

Copy and paste your spreadsheet's URL here:

4. Use this css

Paste this into the HTML view of your timeline post in Chorus to override the Vox.com styles and make it look all sweet and verge-ified.

<style> /*custom verge styles*/ .vco-slider .nav-previous .icon, .vco-slider .nav-next .icon, .vco-slider .nav-next:hover .icon, .vco-slider .nav-previous:hover .icon { background-color: #fa4b2a !important; } .vco-slider .nav-previous .icon:hover, .vco-slider .nav-next .icon:hover{ background-color: #cb3c21 !important; } .vco-timeline .vco-navigation .timenav .content .marker.active .dot { background-color: #fa4b2a !important; } .vco-storyjs .vco-feature h1, .vco-storyjs .vco-feature h2, .vco-storyjs .vco-feature h3, .vco-storyjs .vco-feature h4, .vco-storyjs .vco-feature h5, .vco-storyjs .vco-feature h6 { color:#000; font-family: "adelle",serif; } .vco-storyjs p, .vco-storyjs blockquote, .vco-storyjs blockquote p, .vco-storyjs .twitter blockquote p { font-family: arial !important; } .vco-timeline .vco-navigation .timenav-background .timenav-line { background-color: #fa4b2a; } .vco-skinny.vco-notouch .vco-slider .nav-previous .icon, .vco-storyjs div.vco-loading .vco-loading-container .vco-gesture-icon,.vco-storyjs div.vco-explainer .vco-loading-container .vco-gesture-icon,.vco-storyjs div.vco-loading .vco-explainer-container .vco-gesture-icon,.vco-storyjs div.vco-explainer .vco-explainer-container .vco-gesture-icon, .vco-notouch .vco-navigation .timenav .content .marker .flag:hover, .vco-notouch .vco-navigation .timenav .content .marker .flag-small:hover, .vco-notouch .vco-navigation .timenav .content .marker .flag-small.flag-small-last:hover, .vco-timeline .vco-navigation .timenav-background .timenav-indicator, .vco-timeline .vco-navigation .timenav .content .marker.active .flag, .vco-timeline .vco-navigation .timenav .content .marker.active .flag-small, .vco-timeline .vco-navigation .timenav .content .marker .flag, .vco-timeline .vco-navigation .timenav .content .marker .flag-small { background-image:url('http://cdn0.vox-cdn.com/uploads/chorus_asset/file/653722/timeline.0.png'); } .vco-notouch .vco-navigation .timenav .content .marker .flag:hover .flag-content h3 { color:#000; } .vco-timeline .vco-navigation .timenav .time .time-interval .era6, .vco-storyjs h3,.vco-storyjs h4,.vco-storyjs h5,.vco-storyjs h6 .vco-storyjs h3 .active,.vco-storyjs h4 .active,.vco-storyjs h5 .active,.vco-storyjs h6 .active, .vco-notouch .vco-slider .slider-item .content .content-container .media .media-container .wikipedia h4 a:hover, .vco-slider .slider-item .content .content-container .googleplus .proflinkPrefix, .vco-storyjs a, .vco-storyjs a:hover, .vco-toolbar .zoom-out:hover,.vco-notouch .vco-navigation .vco-toolbar .back-home:hover, .vco-notouch .vco-navigation .timenav .content .marker.active:hover{cursor:default}.vco-notouch .vco-navigation .timenav .content .marker.active:hover .flag .flag-content h3,.vco-notouch .vco-navigation .timenav .content .marker.active:hover .flag-small .flag-content h3,.vco-notouch .vco-navigation .timenav .content .marker.active:hover .flag .flag-content h3,.vco-notouch .vco-navigation .timenav .content .marker.active:hover .flag-small .flag-content h3, .vco-notouch .vco-navigation .timenav .content .marker .flag:hover .flag-content h3,.vco-notouch .vco-navigation .timenav .content .marker .flag-small:hover .flag-content h3, .vco-timeline .vco-navigation .timenav .content .marker.active .dot, .vco-timeline .vco-navigation .timenav .content .marker.active .line, .vco-timeline .vco-navigation .timenav .content .era6 div, .vco-timeline .vco-navigation .timenav .time .time-interval .era6, .vco-storyjs h3 .active,.vco-storyjs h4 .active,.vco-storyjs h5 .active,.vco-storyjs h6 .active { color:#222; } .vco-timeline .vco-navigation .timenav-background { background:#fff; } .vco-storyjs { background:#fff; border: 1px solid #eee; } </style>

Show me an example

or h

Note: Any changes you make to your spreadsheet should automatically update in the timeline. If you toggle back and forth between HTML and visual view, you will likely have to re-copy and paste the embed code into the HTML view.