Nerdliness.com

Testing the body field.

Let's make this short and to the point:

1. I haz Simler invites.
2. You wants Simler invites.

Wouldn't it be nice to get what you want for a change?

Just leave a comment on this here post telling us why monkeys are so damn awesome and I'll give you one of my ten.  Easy. 

Oh, and make sure you include your email address in the comment form thingie so I can hook you up.  Nobody sees it but me, my stalkers, and the government agents who planted the chip in my skull during the 90s and have been monitoring all my thoughts ever since.

Don't know what the hell we're talking about?  Just go read the Silicon Florist post about Simler from a few days ago.

Well, that was relatively painless, wasn't it?

We're now up and running at Network Redux, a Portland-based hosting company we were introduced to after they hosted a Beer and Blog event a couple weeks ago.  Clearly, we haven't been over here long enough to really give a detailed opinion, but I have to say that first impressions are great.  The site seems zippier, their support's been fantastic (and available on Twitter)...  so far, so good.

You might notice their banner at the top and wonder if this here post is part of some clandestine plot to drive customers their way, that they've been greasing our palms with bottles and bucks.  Well, not exactly.

While we can totally be bought, that's not why we're shoing them love. Yeah, if you followed that Beer and Blog link above you saw that they gave free hosting accounts to everyone who attended.  They also picked up the tab for many, many IPAs we polished off.   

Truth is, simply, that they seem to deliver.  Even with the shared hosting package they've hooked us up with, we're seeing better performance than we did with our previous hosts.  And if our needs outgrow this hosting package, Network Redux will be the first place we consider when it's time for us to actually shell out some greenbacks.

It's moving day here at Nerdliness! 

We'll be moving the site to its new home with Network Redux shortly.  Assuming everything goes according to Hoyle, I'd expect the move to be finished within, oh, let's say an hour.

Of course, just because we'll be finished with the file/database migration doesn't mean that YOU, gentle reader, will hit the new host right away.  DNS propagation will probably take a bit for some of you, meaning you may be reading this message on our old host instead of our new one.

So here's the deal.  When the move's complete, I'll throw up another post that says we're in our new home, we've unpacked, and you're all invited over for cookies. Until then, assume you're still visiting the old site, and any comments left will be lost in the back of our virtual U-Haul van.

See you all at Network Redux!

It's been a LONG time since my last post (roughly a year) so I thought it was time to finally post something new. I've been lucky enough to build quite a few Drupal themes lately and below are some bits of code that I use on a dailly basis when adding to or developing custom themes. The nice part is everything below should be easy enough to copy and paste! *Note: All code below is for Drupal 6.

Views horizontal scrollbar

You know that annoying horizontal scroll bar that appears on your browser everytime you hover over a View on your site? This short bit of CSS gets rid of that. Place the following code in your theme's CSS file and away goes the horizontal scroll. div.view div.views-admin-links { width: auto; }

Admin page columns

Ever built a theme only to have the "/admin" columns display one on top of each other? That's typically due to not enough width in the content area to properly float the two columns. Add this bit of CSS to your theme's CSS file and you will no longer have the problem of floating your admin page columns. div.admin .left, div.admin .right { margin-left: 1%; margin-right: 1%; }

Rounded tabs from Zen

I'm a big fan of the rounded "edit" and "view" tabs on the Zen theme and wanted to incorporate them into my own themes. There's a couple of files you'll need to edit but it's really quite simple copy and paste. Be sure to download the tabs images and place them in your themes folder in the "images/tabs" folder so the paths below match up.

CSS For Tabs

/* styling for node tabs (e.g., View, Edit) */ #content-tabs { margin: 0 0 1em 0; } #content-tabs ul.primary { background: url(images/tabs/tab-bar.png) repeat-x left bottom; border-width: 0; line-height: normal; list-style: none; margin: 0; padding: 0 0 0 10px; white-space: nowrap; } #content-tabs ul.primary li { float: left; margin: 0; padding: 0; } #content-tabs ul.primary li a { background-color: transparent; background: url(images/tabs/tab-left.png) no-repeat left -38px; border-width: 0; color: #777; display: block; font-weight: bold; height: 24px; margin: 0; padding: 0 0 0 5px; /* width of tab-left.png */ text-decoration: none; } #content-tabs ul.primary li a .tab { background: url(images/tabs/tab-right.png) no-repeat right -38px; border-width: 0; display: block; height: 20px; /* 24px (parent) - 4px (padding) */ line-height: 20px; margin: 0; padding: 4px 13px 0 6px; } #content-tabs ul.primary li a:hover, #content-tabs ul.primary li a:focus { background-color: transparent; background: url(images/tabs/tab-left.png) no-repeat left -76px; border-width: 0; color: #4e4e4e; } #content-tabs ul.primary li a:hover .tab { background: url(images/tabs/tab-right.png) no-repeat right -76px; } #content-tabs ul.primary li.active a, #content-tabs ul.primary li.active a:hover, #content-tabs ul.primary li.active a:focus { background-color: transparent; background: url(images/tabs/tab-left.png) no-repeat left 0; border-width: 0; color: #000; } #content-tabs ul.primary li.active a .tab, #content-tabs ul.primary li.active a:hover .tab { background: url(images/tabs/tab-right.png) no-repeat right 0; } #content-tabs ul.secondary { background: url(images/tabs/tab-secondary-bg.png) repeat-x left bottom; border-bottom: 1px solid #c0c0c0; font-size:0.8em; list-style: none; margin: 0; padding: 0; white-space: nowrap; } #content-tabs ul.secondary li { border-right: none; float: left; margin: 0 5px 0 0; padding: 3px 0; } #content-tabs ul.secondary a { background: url(images/tabs/tab-secondary.png) repeat-x left -56px; border: 1px solid #c0c0c0; color: #777; display: block; height: 24px; margin: 0; padding: 0; text-decoration: none; } #content-tabs ul.secondary a .tab { display: block; height: 18px; /* 24px (parent) - 6px (padding) */ line-height: 18px; margin: 0; padding: 3px 8px; } #content-tabs ul.secondary a:hover, #content-tabs ul.secondary a:focus { background: url(images/tabs/tab-secondary.png) repeat-x left bottom; } #content-tabs ul.secondary a.active, #content-tabs ul.secondary a.active:hover, #content-tabs ul.secondary a.active:focus { background: url(images/tabs/tab-secondary.png) repeat-x left top; border: 1px solid #c0c0c0; color: #000; }

CSS for tabs - IE7

#content-tabs ul.primary li a:hover { color: #555; cursor: pointer; text-decoration: none; } #content-tabs ul.secondary li a:hover{ color: #555; cursor: pointer; text-decoration: none; }

CSS for tabs - IE6

#content-tabs ul.primary li a, #content-tabs ul.primary li a .tab, #content-tabs ul.secondary li a, #content-tabs ul.secondary li a .tab { display: inline; /* Otherwise the blocks mistakenly get 100% width in IE5 */ display: inline-block; /* Otherwise the blocks mistakenly get 100% width in IE6 */ } #content-tabs ul.primary, #content-tabs ul.secondary { width: 100%; /* Otherwise IE5 treats the ul as floated */ width: auto; /* Reset to auto width for IE6 */ } #content-tabs ul.primary li a { background: url(images/tabs/tab-left-ie6.png) no-repeat left -38px; } #content-tabs ul.primary li a .tab { background: url(images/tabs/tab-right-ie6.png) no-repeat right -38px; } #content-tabs ul.primary li a:hover { background: url(images/tabs/tab-left-ie6.png) no-repeat left -76px; color: #555; cursor: pointer; /* Minor fix for primary and secondary tabs in IE */ text-decoration: none; } #content-tabs ul.secondary li a:hover{ color: #555; cursor: pointer; /* Minor fix for primary and secondary tabs in IE */ text-decoration: none; } #content-tabs ul.primary li a:hover .tab { background: url(images/tabs/tab-right-ie6.png) no-repeat right -76px; } #content-tabs ul.primary li.active a, #content-tabs ul.primary li.active a:hover { background: url(images/tabs/tab-left-ie6.png) no-repeat left 0; } #content-tabs ul.primary li.active a .tab, #content-tabs ul.primary li.active a:hover .tab { background: url(images/tabs/tab-right-ie6.png) no-repeat right 0; }

Template.php

/** * Adds class of "tab" to tab menu items so they can be styled. */ function phptemplate_menu_item_link($link) { if (empty($link['options'])) { $link['options'] = array(); } // If an item is a LOCAL TASK, render it as a tab if ($link['type'] & MENU_IS_LOCAL_TASK) { $link['title'] = ''. check_plain($link['title']) .''; $link['options']['html'] = TRUE; } if (empty($link['type'])) { $true = TRUE; } return l($link['title'], $link['href'], $link['options']); } /** * Duplicate of theme_menu_local_tasks() but adds clear-block to tabs. */ function phptemplate_menu_local_tasks() { $output = ''; if ($primary = menu_primary_local_tasks()) { $output .= "

\n". $primary ."

\n"; } if ($secondary = menu_secondary_local_tasks()) { $output .= "

\n". $secondary ."

\n"; } return $output; } After making these changes go to the Performance page and clear your site's cache "/admin/settings/performance".

Hover working on non-links in IE6

Since IE6 isn't capable of handling hovers on anything other than links (a href), it requires a specific bit of jQuery to get things working right. Thankfully Drupal 6 ships with jQuery so we can leverage it's power for the site's needs. For this example I am using a background image for my submit buttons on the site and I wanted to have the hover work for all browser, including IE6. You'll need to create a "script.js" file and add this bit of code. The reason I said to create a "script.js" file is that Drupal 6 picks that up by default, just as how it picks up the "style.css" file automatically.

script.js

Drupal.behaviors.myModuleBehavior = function (context) { // IE6 & less-specific functions // Add hover class to primary menu li elements on hover if ($.browser.msie && ($.browser.version < 7)) { $('.form-submit').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }); }; }; Now that we have the code in place for the script, it's time to edit the CSS to make it all come together. Normally we do the ".form-submit:hover" to make the style change per hover on the submit button. Since IE6 doesn't understand that, we need to change that a little bit. We need to add a "form-submit.hover" along with the "form-submit:hover". The above Javascript code goes in and makes things work so IE6 can understand what we are trying to do.

CSS

.form-submit { background: url(images/input-submit.png) repeat-x top center; color: #000; } .form-submit:hover, .form-submit.hover { background-position: bottom center; color: #fff; } Well that should do it for now. I've got a LOT more tips and tricks with Drupal theming, just need to get them out of my mind an up here. Hopefully I'll get around to soon. If you have any tips or tricks and it's easy enough to copy and paste please leave a comment below. Would love to hear what other's are using with their themes.