Creating different colored tabs in StoryMaps downloadable template?

AWuenschel

I would like to have header type tabs that indicate the general theme of the underlying tabs which are all records of science research projects and ecology type monitoring (themes are general categories like wildlife, air quality, vegetation ecology, etc.) in my storymaps project. I'm privately hosting the template. It would be nice to visually distinguish these header tabs with different colors than their underlying projects, so users recognize quickly what they are how it is organized. I looked through the config.js page (pasted below) and it looks like everything is controlled the same. Does anyone know of a way to edit separate tab background colors?

Thanks very much,

Ami

            id: "accordion",

            thumbnail: "resources/tpl/builder/icons/builder-layout-accordion.png",

            liveApp: "http://links.esri.com/storymaps/map_series_example_side_accordion",

            sizes: { small: '25%', medium: '35%', large: '45%' },

            positions: ["left", "right"],

            themes: [

                {

                    name: "accordion-default-1",

                    group: "default",

                    themeMajor: "white",

                    header: "#283239",

                    headerTitle: "#FFFFFF",

                    headerText: "#D9D9D9",

                    panel: "#DBD9DA",

                    text: "#000000",

                    textLink: "#555555",

                    media: "#FFFFFF",

                    mapControls: "#DBD9DA",   

                    softText: "#444444",

                    softBtn: "#444444",

                    esriLogo: "white",

                    esriLogoMobile: "black",

                    // Arrow and entries separator

                    accordionArrow: "#58ADCC",

                    accordionArrowActive: "#FFFFFF",

                    accordionArrowHover: "#9ACCDE",

                    accordionNumber: "#60788A",

                    accordionTitle: "#000000"

StephenSylvia

The best way to accomplish this is to add custom CSS to the index.html page. At the top of the body section you will find a empty style tag with comments to add your CSS. The CSS3 nth-child selector (http://www.w3schools.com/cssref/sel_nth-child.asp) will allow you to target individual tabs to change their color respectively.