Swap CSS

} I'd like a button that will reload the current controller/action/view
} but with an alternative CSS (eg, Print Version and Large Text Version).
} Has anyone done this in Rails and if so are you able to provide me with
} your code?

This is the wrong approach, both for efficiency and for the convenience of
the user. It is preferable to serve up CSS only once and have the client
browser cache it, even if that means sending more CSS the first time.
Within reason, it is worthwhile to trade larger data sends for fewer HTTP
connections (i.e. send more CSS at once so you don't have to send another
chunk later).

The way to go about this is to have all of your CSS rooted at
body.class_name and have a different class name for each style. Changing
styles can be done in JavaScript by just changing the class of the body
tag, which improves the user experience as well (no page refresh to get a
new style).

Of course, to work with browsers that have JavaScript turned off (and to
support saving a user's preferred style) you need to have the
class="class_name" of the body tag in a conditional in your view, and grab
that class_name from the params, the session, or stored user data. Your
"change style" link/button/whatever needs to do a page refresh with the
right style param unless JavaScript intervenes and just changes the body
class on the fly.

To make this clearer, I'll give an example:

<script src="javascripts/prototype.js"></script>
Event.observe(window, 'load', function() {
  var select = $('style_choice');
  var body = document.getElementsByTagName('body')[0];
  $('hideme').className = 'hidden';
  Event.observe(select, 'change', function() {
    body.className = select.value;
<style type="text/css">
.hidden { display: none; }
#content { /* default theme */
  background-color: #EEEEEE;
  color: black;
  width: 20em;
  padding: 3ex;
  text-align: center;
body.green_theme #content {
  background-color: #99FF99;
  color: black;
body.blue_theme #content {
  background-color: #9999FF;
  color: black;
body.christmas #content {
  background-color: green;
  color: red;


<div id="content">The quick brown fox jumps over the lazy dog.</div>
<form id="change_style">
<select name="style" id="style_choice">
<option value="">Default</option>
<option value="green_theme">Green</option>
<option value="blue_theme">Blue</option>
<option value="christmas">Merry Christmas!</option>
<input type="submit" id="hideme" value="Change style" />

Note that the inline CSS should really be in a separate static file. Also
note that the JavaScript depends on Prototype. There is a certain lack of
cleanliness to this since it's just an example, but I did test it with

} Thanks