> On Nov 9, 2017, at 10:52 AM, Michael Anteau <
antea...@gmail.com> wrote:
>
> Terrific, that's exactly what I needed, and it's MUCH easier.
> I've gotten my custom switchlist to appear, now I'm trying to figure out how to change font sizes. I want everything to be a little bigger. I copied a switchlist.css from one of the other templates, and changed all the font sizes from 10 to 14. But it doesn't seem to work. Am I missing something here?
> This is the switchlist.css file I put in the same directory as switchlist.html.
The Railroad Letterhead doesn't include a separate CSS file, so it doesn't know to look at switchlist.css. Instead, all the CSS formatting is at the top of the file, in between the <style> and </style> tags. All of the freight cars get drawn in a big HTML table, so changing the font size for <TD> tags (table data - one of the cells of the table) will change the size of all the text. You can do that by changing:
p,li,td {
font-family: Arial;
font-size: 10pt;
}
to
p,li {
font-family: Arial;
font-size: 10pt;
}
td {
font-family: Arial;
font-size: 12pt;
}
That change separates the formatting for table cells from regular text ("<p> blah </p>") and dotted lists ("<li>"), and says that the table data cells should be 12 point while all the other kinds of text should default to 10 point.
Note that you don't need to load a template into SwitchList to see it - you can also load it into Safari (open in Safari like any other file, or drag your template file from the Finder to Safari.) All the template stuff won't look right, but you'll quickly get an idea how the formatting looks without going through multiple steps in SwitchList.
Just in case you're new to web pages and CSS, here's a quick rundown of cascading style sheets (CSS): (To learn more about CSS, there's a bunch of great tutorials on the Internet. All this is not only useful for customizing switchlists, but is also lets you customize web pages in general.
The stuff in the <style> .. </style> tags or stuff in a css file included by a web page lets you add formatting to regular HTML all at once - change how big bold text is, adjust the widths of blocks of text, or do even more clever and crazy things. CSS really is the basis for modern web pages. Each group in curly brackets in the style section of an HTML file specifies some kind of HTML that should have its formatting changed (the "selector"), and then names all the formatting - changes to CSS properties - to apply to things that match. CSS can apply to all of the matching tag in a file:
td {
color: blue;
}
says all table cells in the document should use blue text to draw.
You can narrow that by identifying only tags with a specific class by adding dot in front:
.reportingMarks {
color: red;
}
This looks for tag with class="reportingMarks":
<span class="reportingMarks"> B&O 12305 </span>
This causes the text for B&O 12305 (and all other things labelled as reportingMarks) to be drawn as red.
You can also indicate only a single thing should have that attribute:
#letterhead {
text-align: center;
}
says that anything with id="letterhead" should be centered: There's only supposed to be one tag with a particular id value in an HTML document:
<div id="letterhead"> My Railroad <br> 1 Market Street <br> San Francisco </div>
would make a big centered block with
My Railroad
1 Market Street
San Francisco
all centered.
Hope this helps,
Robert