University of Oregon

@media print {who knew?}

I was working on including a printable stylesheet the a module and noticed a CSS inline media declaration option I’d never seen before.
It works inside style tags as well as in included stylesheets.

How did this elude me for so long?

Here’s an example:

@media print {
  /*printable*/
  #header .content, #header #search-box, #uolinks, #suckerfishmenu2, #sidebar-left, #sidebar-right, .tabs, .book-navigation, #add_content_to_book
  {
    display:none;
    visibility:hidden;
  }

  body, #header, #header h1.site-name a, #uobar, #middlecontainer h1.title
  {
    color:black;
    background:none;
    background-color:transparent;
    border:none;
  }

  #header
  {
    height:50px;
    min-height:50px;
  }

  #footer { width:768px; }
}

Put Taxonomy Super-Select Check Boxes into 1, 2 or 3 Columns

I really like Taxonomy Super Select (http://drupal.org/project/taxonomy_super_select) but I’m not crazy about the jumbled display of the check boxes and labels.

So I came up with some css that puts everything into columns:

Here’s the default display: (more…)

Drupal 6 adding styles from a themed view variable output

Here’s an overview of what I did to add a style to the doc head from within a themed view for a specific variables output. I’ll likely post more on that scenario later.
I don’t intend to raise a discussion about whether or not we should be adding one-off styles in a view vs. appending a master stylesheet, but the facts remain that I did it, it came in pretty handy for testing and it requires some configuration worthy of saving for later (so I don’t have to try and figure it out again!). The best part was being able to keep the custom styles in the same page where I was working on theming the view.
To make things a little more complicated I only wanted to append one rule to the head of the page and not adding a style to each row (which could be done with jquery).
So here’s what I did: (more…)

Edit CSS and removing line breaks to process through js

I wanted to append the head of a doc with some styles but I didn’t want any line breaks.
So I used this function:

<?php
function removeLB($content){
	$content = str_replace(chr(10), " ", $content); //remove carriage returns
	$content = str_replace(chr(13), " ", $content); //remove carriage returns
	return $content;
}

That way I could edit with line breaks but send it through the jQuery append without.
(more…)

Specifying page breaks for printing using CSS

We received a call today that our HR Unclassified online application wasn’t printing correctly for some mac users. As it turns out the printable application relies on a CSS Property:

page-break-before

I’ve never used this before this but after looking into it, the property has been available for years so I figured it must be some cross-browser quirk.

Here’s our usage:

<br />

And here’s what I found:
Note that page-break-after may not work with <br> or <hr> tag in some browsers.
Thanks to Specifying page breaks for printing using CSS.

So I’ll change it to a div and we should be good to go.

dhtml-menu functionality w/o the menu module

So why would you want to take advantage of dhtml-menu functionality w/o using the built in Drupal menu module?
In this case we want to use the nested menus style for the content while employing consistent show-hide functionality. Here’s the catch: The content isn’t a list of links it’s paragraphs where each section heading collapses and expands the sub-content. (more…)

WP Dynamic StyleSheet Switcher – stage 2

I added a background image array and integrated it with the rand() function.
Images from the free image section of bigstockphoto.com and iStockPhoto.

I also changed the html background color back to brown but the body’s is now the blue with a min-height:100% on the body and Layer1 so the image stick to the bottom of the screen not the bottom of the post. Then the brown earth color continues below that.
(more…)

WP Dynamic StyleSheet Switcher – stage 1

I’ve done a quick mod to my stylesheet to enable me to turn on and off css enhancements.

The concept is based on the idea that you can create your own theme by extending another theme and adding your stylesheet changes to a style.css file in the new theme folder.

The concept in action:
In the themes folder I now have a folder for my base theme: grassland and my modified theme: vGrassland. No changes have been made to grassland but in the vGrassland folder there only needs to be one file: style.css.

That stylesheet must contain all the necessary info to define the theme (Theme Name, URI, Desc. Version…) but the essential one is TEMPLATE: grassland.
Then the magic happens.

For me I wanted to use my modified theme but I’d grown attached to the original so changing back and forth would be fun.

So here’s the low down.
Point the styles to a dynamic page: style.php and in that page show or hide the style enhancements.

Here are the contents of both files. (more…)