Making one page look different in Drupal

Here is a demo page showing how to make one page a a Drupal site look different from the rest. One way to do this would be to add page-specific css to your style sheet (i.e. style.css in your theme's folder), but I don't want to add bloat to my theme just for one page.

So I'm going to use my custom code field (with Input Format "as is") and just put the css on the page. Details about setting up this field and input format can be found in this article.

There's not much to it really. Basically, I just copied the css I wanted to change from style.css, pasted it in, and changed its attributes. I changed the background colors of all elements to match the header so the whole page would have the same background color. And I hid the advertising in the right sidebar.

I also styled the horizontal navigation anchors to give them that CSS3 look (Hence the multiple declarations for -moz, -webkit, etc.)


#primary_links a:link, #primary_links a:visited {
  color: #fff;
  text-decoration: none;
  background-color: #555;
  padding: 2px 16px;
   border-top: 1px solid #cccccc;
   background: #666666;
   background: -webkit-gradient
     (linear, left top, left bottom, from(#888888), to(#666666));
   background: -moz-linear-gradient(top, #888888, #666666);
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   border-radius: 12px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
}
#primary_links a:hover {
  color: #bde;
  text-decoration: none;
  border-top-color: #888888;
   background: #555555;
}

Since this code is loaded after the main style sheet it takes precedence over the main style sheet - in most cases.

There were a couple times I needed to use "!important" to get it to work. I suspect this has something to do with "specificity" where something in the main style sheet was more "specific".


#main-holder  { 
  width: 800px !important;
  background-color: #fff;
  padding: 20px;
  margin: 0 20px;
  border: 1px solid #444 !important;
  font-size: 1.5em;
  font-family: courier, 'courier new', monospaced;
  border: 1px solid #333;
  -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   border-radius: 12px;
}

There's a little more code that I haven't mentioned. If you want to see it, you can "View Source" and find it there.