I’m making pages of lyrics that will feed off a main page not on my site. On their site, the names of songs will appear, and when clicked on, the lyrics on my site will pop up in another window that can just be closed when they’re done looking at the lyrics. The remote site has a color scheme of white text on black background.
On my site, to make the pages look uniform wrt font style and keeping with their background, I made a .css file and put a link into the top of each lyric page. My problem is that when the remote owner went to print out one of the song lyrics, it printed in white on black! On my computer, it doesn’t do that, it prints grey text on a white background.
Short of losing the original color scheme and making the pages black text on white, how can I make sure the random person’s printer doesn’t go and use up all their black ink by printing a black background?
I know there’s a way to do it in style sheets by adding something to the .css file, and I went looking for pages that explained how, but I couldn’t understand the instructions, which seemed to take for granted that the person reading had in-depth knowledge of style sheets. That’s not me, I’m a total newbie. I need to know exactly what to add where.
Also, how can I even test it? My printer doesn’t print a black background anyway. I’d hate to ask someone else to test it and it not work and it uses a chunk of their blank ink.
Here’s a link to one of the pages: http://happyrhodes.org/findmelyrics/oneandmany.html (yes, I am into very very simple html. I hate source pages that are messy and hard to read)
The header says (I purposely typed hmtl so it wouldn’t have a problem showing up):
<hmtl>
<head>
<title>Happy Rhodes lyrics - One And Many</title>
<link rel=“stylesheet” href=“happylyrics.css”>
</head>
The .css file looks like this:
BODY {background: black; color: white; font: 12pt Comic Sans MS;}
H1 {font: 14pt Comic Sans MS; font-variant:small-caps}
.copywrite { font-family: Comic Sans MS; font-size: 10pt }
.chorus { margin-left: 0.5in }
.chorus2 { margin-left: 0.8in }
(The Comic Sans was not my idea, btw)
Simple enough, so what do I add that will speak to all the different printers out there?
Unrelated…I couldn’t get this page to work with style sheets, and ended up using a kluged table. If I knew more about style sheets I’m sure I could do it, since that’s the whole point of style sheets. I tried using the original Word document transported into Front Page, but the result was a nightmare. If I changed anything it broke, and I couldn’t figure out how it worked in the first place. Beyond that, the source code looked like a jungle. I like to be able to make and view pages in Notepad and see at a glance what’s going on. Needless to say, I will never get a job doing web pages. Complicated and messy are like badges of honor.
Thanks in advance for any tips.