LEFT: The categories we assigned for stories along with pins and icons
RIGHT: The back end of our story map
Edited by Adam Kercheval of Jumbo Code
This document will serve as a step-by-step guide for any BINJ-like organization looking to create their own story map site like the one we've created for BINJ. It will also provide a general overview of the structure of the code for the website, so you'll know where to look if something breaks or if you want to change something in the future.
The majority of the code for the website (that's worth changing, anyway) is located in the "public" directory. In it, you can see the html, Javascript, and CSS files for every page accessible on the app. For example, index.html is the main page, admin.html is the main admin page, and newstory.html is the page you see when creating a new story. Any stylistic or structural changes you might want to make to the app should be done on these pages and, in some cases, in their corresponding CSS pages. Some pages don't have a dedicated CSS page. In that case, style.css, is the usual catch-all CSS document.
There are also various javascript files that correspond to html files throughout the app. These don't do much for the design of the app, and messing with them could get pretty nasty, so unless you want to change the function of the app in some way, it's probably a good idea to avoid messing with them.
return next();
is useful for editing the app without having to log in to see the admin pages. Comment it to require normal authentication to view the pages. Un-comment it to allow for the viewing of those pages without authentication.Below is a list of things you might want to change and where to look to change them.
#f3f694
(the original background color) throughout the whole app's codebase and change any instances of it to your new color. In fact, style.css as a whole is the best file to look in if you're looking to change the way the app looks.