Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Customizing Responsive-- Gray Header Bar

I'm working with Twine's Responsive theme, and trying to customize the gray bars on the top and bottom. I've been able to customize the "Restart" and "Bookmark" tabs just fine. But after a lot experimenting, I still cannot figure out how to change the colors of the gray bars, or change the font of the title. Help?


  • Both Firefox and Chrome have a Inspect Element option which you can use to look at the CSS related to each part of a webpage.
    In Windows you place the mouse cursor over the thing you want to look at, click the right mouse button and select the Inspect Element option.

    The Responsive Header Bar has an ID of #header-container, and the CSS your interested in is as follows:
    #header-container {
    	background-color: #555;
    	border-bottom: 20px solid #666;
    	box-shadow: 0px 5px 10px #AAA

    The Footer Bar has an ID of #footer-container, and the related CSS is:
    #footer-container {
    	background-color: #555;
    	border-top: 20px solid #666;

    The Story Title has an ID of #storyTitle, and the related CSS is:
    #storyTitle {
    	font-size: 2em;
    	line-height: 1em;
  • Thank you! Code worked excellently! :D
Sign In or Register to comment.