How to Create a Great Title Page
by Zikara
Overview
This article will help you set up the first page of your story game to look like the cover of a book, and a link to lead you to the start of the story. This gives it a nice "novel" feel to your story, and generally just looks really cool. You can also use this method to set up chapter pages to be more like a book too, or just to change the look of your story in general.
This system uses:
- Images
- Setting an image to the background
- Editing the title of a page
- Changing font, colour, size using html
- Making a main text link
Prerequisites
This is fairly basic, and everything will be explained fully so you don't need to know much before using the concepts in this article, except that the main text links are a bit confusing, but you don't need them and there will be an option to use another method instead (which still looks fairly good). Also, even though this is in the Advanced Editor section, you can also do this in the basic editor, and steps to do that will be explained here as well.
Changing the title
To change the title, you need to edit what is typed into the page title box. Once you go there, and delete the title, you can start adding in some html tags to change what the title looks like. You want to type something like this:
<font size="#" color="COLOUR" face="FONT TYPE">PAGETITLE</font>
Change # above for the size of font you want. This isn't by pixels, but ranges from 1 to 7. 7 is what I used in my story. Here are the different sizes you can use: 1 2 3 4 5 6 7.
Changing the title's Colour​
Change COLOUR above for the colour you want the font to be. I used 'gold'. There are many different colours you can use. Here is a good page I like to use for this as it has a nice chart with different colours and a few links to different tools for html colour picking:
http://www.computerhope.com/htmcolor.htm is a good page I like to use for this, as it has a nice chart with different colours and a few links to different tools for html colour picking.
Changing the title's Font​
Change FONT TYPE above for any web-safe font type. The one I am using in the image is 'fantasy' which I think is just great (and about the only not-boring web safe font). For a handy list of web safe fonts take a look at:
http://www.angelfire.com/fl5/html-tutorial/fontlist.htm.
Then change PAGETITLE to what you want the title of your page to be and voila! You have a fancier looking title. One thing to note is that if you want the font to be different on every page you actually have to do it manually. There is no way to apply this kind of change using global scripts.
Changing the background
To change the background you need to do a couple of things:
First, find an image that you want to use as a background, and save it to your computer. Then upload it to CYS by going to My Stuff, then Pictures, and then click on the button at the top that says Upload Image. Choose a title, any tags you want for it (or nothing at all), and then click on Choose File. Find where you saved the image, and then click upload. After you do that, you need to find the image in your pictures and click on it. This will open up the image into a new window. You want to copy what is in the address bar.
Then, go into your story, where you want to put the background (if you want this for just the first page, then you will go to the first page in your story, if you want to apply this to all the pages in your story you need to go to the global script and use scripting to add it into each page, which I will explain later). Then, at the beginning of the page (right before the text of your story) you put in this:
<body background="URL">
Change 'URL' to the url you found earlier, and it will have the background set up as that image.
Size Limitations​
There is a catch to this method, though, which is that CYS only allows you to put up an image that is at maximum 600x500 pixels, or something like that. You can get a url like that from somewhere else, though. You can either upload the image to photobucket or some other image hosting site, or (my favourite) just go to the place where you found the image, and either right click on it and select something similar to 'open image in new window' (may be different for different operating systems or different browsers), or click and drag the image up to the address bar. This should open the image to its own window, and you can use the url for that page (it should end in something like .jpg or .png or something like that, not .html). Then, you exchange that url for where it says URL in the code above.
Global Background Change
To set up a background image to all of the pages, without having to manually put in the code on every page you can use simple scripting. Its actually pretty easy. To do this, your story must be an advanced editor story, and you must have scripting turned on. Then, you click on the Scripts tab in your story, and click on Global Page Script. This opens up a window, and what you type in here will get applied to all the pages in your story. This is what you need to type in the scripting window:
$PAGETEXT := $PAGETEXT + "<body background='URL'>"
Then change 'URL' to the url you found earlier. You can still easily have a single page have a different background from the others (for instance, having the first page look like a book cover, and then the other pages have an aged paper look to it). All you have to do is go to the individual page and then put the background image code in that page and it will override the one on the global script.
Link to the next page
If you are using this to make the first page a book cover, you probably don't want to have a link that says 'go to the first page'. It just kind of takes away from the look of the cover. So, there are two ways to do this:
The first and easiest way is to actually create a link that says 'By yourusername' then it just looks like just a credit to the author. You can also change the colour, font, size of the text there, too, by using the same method you used in the title, by writing html stuff in the name of the link.
The second, and harder way of making a link to the next page is to make the title a link to the next page. This makes it unobtrusive, but still rather obvious, and doesn't ruin at all the look of the page. To do this, you need to set up the page with a link to the page you want it to go to. Then, save the page and then view your story in the story game viewer (like how you test out the game). When you are on the first page (or whatever page you want this to be on), right click on the page and you should see an option that is something like 'View Source'. When you click on that a page will pop up with a lot of confusing looking code. Luckily, alexp made it a bit easier to find things using headers in the code, so you want to look for a link that is under the header. After you click that there will be a bit of code that looks something like this:
<a onclick="PostBack('FollowLink','1');return false;" href="#">LINK</a>
After you find the right link, you need to copy it, and then paste the<a onclick="PostBack('FollowLink','1');return false;" href="#"> part into the page title text box along with the font changes.
That is all the information you need to know for creating cover pages to your stories that look exactly how you would like them to. Good Luck and Happy Creating!
