Alicorn comments on Luminosity (Twilight fanfic) discussion thread - Less Wrong

12 Post author: FAWS 25 August 2010 08:49AM

You are viewing a comment permalink. View the original post to see all comments and the full post content.

Comments (435)

You are viewing a single comment's thread. Show more comments above.

Comment author: Alicorn 30 August 2010 11:28:02AM 3 points [-]

I like it too, but people have complained. White-on-black will remain the default; I just want to make it possible to switch.

Comment author: JulianMorrison 02 September 2010 01:02:21PM 3 points [-]

My reason for preferring plain black-on-white: makes it less conspicuous to read at work.

Comment author: Alicorn 02 September 2010 01:13:14PM 2 points [-]

As an interim solution, try http://luminous.elcenia.com/story/luminosity##.html where ## is the chapter number. This is where I upload the files with the text, and then they go wherever else they need to be via file include.

Comment author: JulianMorrison 02 September 2010 01:21:17PM 1 point [-]

Thanks. I did read you mentioning that trick, but it's good to be reminded.

I see your posts appear via the RSS feed, which currently contains a title and a one sentence summary. If you changed the configuration to include the whole chapter text into the feed, that would neatly obviate the problem.

Comment author: Alicorn 02 September 2010 01:22:56PM *  3 points [-]

I'll do a little testing and see if I can make it take file includes there. Pasting would leave the problem that the feed would require separate correction if I fix a typo or something.

Edit: I just tried a test of this and it didn't work. If anyone knows how to make RSS feeds accept file includes, please let me know (it'd be useful for Elcenia, too! HTHT already sends the new comic page through the feed, but that's just an image.)

Comment author: jimrandomh 02 September 2010 01:39:46PM 3 points [-]

The best solution would be to put some Javascript links on the page that change the text and background colors when you clicked on them. The downside to this would be that it would revert to default every time you went to a different chapter, though.

That Javascript is something I could reasonably write in ten minutes after I get home from work tonight. I'll do so and post it here unless someone produces a better solution before then.

Comment author: thomblake 02 September 2010 05:32:42PM 1 point [-]

The downside to this would be that it would revert to default every time you went to a different chapter, though.

Well they're all on the same domain, so it should be easy enough to cookie it up.

Comment author: Alicorn 02 September 2010 02:01:41PM 1 point [-]

Thanks! I have, just barely, the coding skills to do this myself, and it was the solution I was planning to use when I got around to it - but it'd take me way more than ten minutes.

Comment author: jimrandomh 03 September 2010 12:15:37AM *  3 points [-]

This should do it. Put a copy of jquery-1.4.2.min.js in the same directory (jQuery is a Javascript library for keeping browser compatibility bugs at bay).

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script>
function setColorScheme(colorScheme)
{
setCookie("colorScheme", colorScheme, 30);
if(colorScheme=="whiteOnBlack")
{
$("body").css({
"background-color": "black",
"color": "white"
});
}
else if(colorScheme=="blackOnWhite")
{
$("body").css({
"background-color": "white",
"color": "black"
});
}
}
$(document).ready(function()
{
var cookie = getCookie("colorScheme");
if(cookie)
setColorScheme(cookie);
});
function setCookie(c_name,value,expiredays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toUTCString());
}
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1)
{
c_start=c_start + c_name.length+1;
c_end=document.cookie.indexOf(";",c_start);
if (c_end==-1) c_end=document.cookie.length;
return unescape(document.cookie.substring(c_start,c_end));
}
}
return "";
}
</script>
Background color: <a href="javascript:setColorScheme('blackOnWhite')">white</a> | <a href="javascript:setColorScheme('whiteOnBlack')">black</a>

This stores the color scheme in a cookie, so it's preserved when you move between chapters. The setCookie and getCookie functions came from here. Given the example, this should be pretty easy to extend for things like changing text size and margins, if you are so inclined.

Comment author: Alicorn 03 September 2010 03:34:39PM *  2 points [-]

This appears to work perfectly! However, it looks like the default color scheme is black on white, and I'd like it to be the other way around - what do I change to make the black background default?

Also, is there any way for changing the color scheme to bring a different set of navigation buttons in? I made some white ones (not a complete set yet) which would look much nicer than the existing ones on the white background.

Comment author: jimrandomh 03 September 2010 03:42:26PM *  2 points [-]

That's odd - if I'm understanding it correctly it'll leave the page unchanged unless you click one of the links or have a cookie set. But it's not handling the default case explicitly, so try replacing the $(document).ready section in the code above with this:

var defaultColorScheme = "whiteOnBlack";
$(document).ready(function()
{
var cookie = getCookie("colorScheme");
if(cookie && cookie != "")
setColorScheme(cookie);
else
setColorScheme(defaultColorScheme);
});

To see what first-time visitors would see, clear your cookies. Otherwise it should remember what color it was last time.

Comment author: jimrandomh 03 September 2010 04:42:17PM *  1 point [-]

Also, is there any way for changing the color scheme to bring a different set of navigation buttons in?

Yes. First, move the determination of which images to use into CSS, by making each navigation a div with its own CSS class, and making a style like

.blackBackground .navButtonNext {
background-image: url("nextButtonBlack.png");
width: 123px;
height: 123px;
}

Add "class=blackBackground" to the <body> tag. Make CSS classes like this for each of the buttons and each of the background colors. Then in setColorScheme, use

$("body").addClass("blackBackground");
$("body").removeClass("whiteBackground");

And the reverse, to change the class on the body tag.

Comment author: thomblake 02 September 2010 08:45:52PM 2 points [-]

If anyone knows how to make RSS feeds accept file includes, please let me know

In case anyone else is having this problem, I've posted one solution on my blog: Using SSI in XML for RSS

Comment author: thomblake 02 September 2010 01:31:19PM 1 point [-]

I've had the same thought