No worries. I can just add "by Hawk" under the title. Let me know if you spot any more of those, but they're hardly going to land anyone in trouble. Well I don't think so. I suppose I depends what you got up to.
I figured I might as well do the error pages. It's common to have friendlier ones these days and they're very simple to do.
I only started thinking about SSI because the old 401 file had an SS include on it. It turns out to be really easy. All you do is add your bits like this:
Code: Select all
<body>
<div id="wrapper">
<div id="content">
<!--#include virtual="cs/files/header.html" -->
<!--#include virtual="cs/files/menu.html" -->
I decided to do them like this on local because my desktop server wasn't configured for running .htm and .html files as .php. I had to reconfigure something to get the relevant bits showing on my test pages, so it was either set up a rewrite for PHP, or just enabe SSI. The latter looked easier, so I did that. Now I'm thinking it might make sense online too. The server is bound to be set up for it already.
Had a bit of a brainwave about the map archives pages too. There's no need to code in the map regions menu on every page. That can be done as a basic include too. Then I can use some of that new-fangled CSS stuffz to play some tricks on it, and make the current page look like a header bar without touching any markup.
That bar that says "Railroad Tycoon 3 Maps of Asia" is just a standard menu link that says "Asia" by default. The CSS looks like this:
Code: Select all
.archives_menu {
display: flex;
flex-wrap: wrap;
margin-top: 2em;
padding: 0 28px;
}
.archives_menu li {
flex: 0 0 auto;
margin: 0 4px;
font-family: "trebuchet ms", sans-serif;
}
.archives_menu li a:link, .archive_menu li a:visited,
#content>p:last-child a:link, #content>p:last-child a:visited {
color: #4d2e14;
text-decoration: none;
box-shadow: inset 0 -1px 0;
}
.archives_menu li a:hover, .archive_menu li a:focus,
#content>p:last-child a:hover, #content>p:last-child a:focus {
color: #000;
box-shadow: inset 0 -2px 0;
}
.archives_menu li:nth-child(3) {
order: 9;
width: 100%;
margin: .75em 0 0;
}
.archives_menu li:nth-child(3) a:link,
.archives_menu li:nth-child(3) a:visited {
display: block;
padding: 4px 6px;
background: url(img/main/gw_bckgrnd5.jpg);
color: #ffeb7f;
font-weight: 400;
font-size: 1.25rem;
line-height: 1.375em;
font-family: georgia, serif;
text-shadow: 0 0 1px #000;
border: 1px solid #000;
border-radius: 3px 3px 0 0;
box-shadow: none;
}
.archives_menu li:nth-child(3) a::before {
content: "Railroad Tycoon 3 Maps of ";
}
The last few chunks are the relevant bits for the fake header bar. "Asia" is the third link in the menu, so sits inside the third li. Using order: 9; makes the li display last in the menu regardless of where it sits in the markup. Most of the rest is just to make it look like a header bar, and the ::before adds the content text in front of the link's visible text.
This means all pages can call the same menu bar markup, and most of the same CSS from an external file. For the current page all I have to do is have a small inline stylesheet up in head has those last three chunks, and I just edit the (3) to whatever number suits that page's link. Hey presto, instant header bar.
That wasn't my only brainwave either. I'm having too much fun here.
![!DUH! *!*!*!](./images/smilies/smilie120.gif)
Anyway, that scaling of the one image to make the thumbnail on the main page and the bigger image inside the briefing. I added a bit more there, so now depending on which class I assign I can use straight crops from my box for new maps, but can re-use the existing images that are already on the server for all the existing maps in the archives.
In that screenshot, China Heartland is running a new crop from my box. Baghdad Railway is too, as I made one for it before I started thinking. Burma, Ceylon and Colonial India are all running their old image, just with a different scaling and positioning. This will save a lot of messing around, and makes cleaning up the whole thing a much less daunting prospect.
![thumbs_up !*th_up*!](./images/smilies/ok.gif)