@Jacic asked how I did this with Cake Shop Shadows, and I thought I’d put it here in case others are looking for instructions later!
note: You do have to go in and edit the CSS for this to work, and you also need somewhere to host the images (or, e.g. you need to put it all in a zip for distribution)
easy mode: just wrapping the text area in a frame
Once you have a .png image with your frame, open up the style.css file in the choicescript-main/web directory.
Make the following changes to the CSS:
#main {
/* don't touch the existing CSS, just add this at the bottom! */
background-image:url('file-name.png');
background-size: 100% 100%;
min-height:300px;
}
This will add your provided frame image and will stretch it to fill the background area both vertically and horizontally.
You may need to play around a bit with your frame image if (e.g.) the “frame” portions look too squished.
In my case, I made the center part of the image transparent. If you do that, and you want to change the background colour of the text area, you will also want to add a background-color: #ABABAB line of your choice. (I added it to .container instead of #main because I wanted the colour to go all the way to the top and bottom of the screen, not just inside the text area.)
For Cake Shop Shadows, I wanted to add more than just a frame around the text. I also wanted to pull in the top and bottom parts of the cover image, so that it looked like the whole game text was being wrapped inside the cover.
That is, here’s the cover:
and here’s a screenshot of the game:
You can see it’s not perfect (I just could not figure out how to get rid of the gap below the header buttons and before the #main CSS begins, bah)
slightly more finicky: Fake framing the whole thing
For this version, you’re actually going to make three separate images. One will go in the header area, in place of the title/author info. The second is the main frame. And the last part will go at the bottom, just below the game text.
You will want these to look like part of the same frame–make sure the “frame” parts bleed a little into the footer image, and are present in the top image as well.
Once you have your .png images with your frame, open up the style.css file in the choicescript-main/web directory.
After making the changes in “easy mode” for the main text frame, make the following change for the bottom banner:
.container {
/* leave the rest of the CSS for this alone, and add the following: /*
background-image:url('bottom-file-name.png');
background-repeat: no-repeat;
background-size: 100% 6em;
background-position:bottom;
}
#main {
/* leave the rest of the CSS for this alone, and add the following: /*
margin-bottom:4em;
}
This will add the “bottom part” of the frame at the very bottom of the container area, and the #main bottom margin adds enough space for it to appear in. Depending on the size of your “bottom part,” you may need to increase the margin size and vertical background size.
Then add the following new CSS immediately above @media (max-width: 480px) or (max-height: 640px)
#header {
background:url('top-file-name.png');
background-repeat: no-repeat;
background-size: 100% 100%;
}
#title {
font-size: 1.25em;
position: relative;
padding-bottom: 1em;
z-index: -999;
}
#author {
display: none;
}
Finally, delete any rules for #title, #header, and #author which are in either of the @media rules. This will make sure the header appears on all screen sizes.
