Superfish Theming

.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
  left: 0;
  top: 1.77em;
That little snippet of code's been giving me grief for a month. Well, this one, really:
/*Adjust top to line up submenu with shorter main menu*/
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
  top: 2em;
When I set this site up, I wanted dropdowns. Y'know, menus that expand when you hover them. They were initially provided by Nice Menus. For some reason, some time later (and no, I don't know why), Nice Menus stopped being nice. The dropdown's wouldn't drop. 

Spring Cleaning

Escapades dropdown menu
Check it out! Animation! On a site!

Nitkin.net is a year old. A year and three days, in fact.

Since I set up the domain, I've been using it to document projects - a reprap over the summer, coding games in the spring, a wooden lock, and some really weird stuff. All that writing took a toll on site organization.

(This post has a lot of big words. Instead of worrying about them, take a look at the brand-new Escapades menu above!)


Previously, I created a custom module to change the symbol set provided by CKEditor, the WYSIWYG text editor on this site. (CKEditor is an applet that shows live formatting instead in lieu of HTML). Since then, a few other flaws have come up. 

  1. Spellcheck is provided by a third party, but doesn't work in Opera. Modern browsers have their own spellcheckers, which were being suppressed. 
  2. CKEditor provides a few styles for theming text. There are two problems with those styles. First, they're inline styles. Second, they're ugly. 
  3. CKEditor uses its own styling. Ordinary formatting such as italics and headings look okay, but styles I've defined don't show up. 

Module Hacks

I installed a WYSIWYG (what you see is what you get) module for Drupal recently. The module adds a formatting bar to edit fields, and displays what a post will look like after HTML is applied. It's called WYSIWYG (creative!), and I'm using it with a pretty little editor called CKEditor.

CKEditor contains a symbol select, which is incredibly useful for inserting characters like α and © into posts. Unfortunately, the default symbols selector was full of garbage (it contained mostly keyboard letters, without any greek. I write about coding and ECE, so symbols like Ω and µ will see a lot of use. 

Fortunately, there's an incredibly simple override. The Drupal module overrides the editors own settings, but overriding the WYSIWYG module it trivial. 

Archives, Redux

Views does almost what it should. There doesn't seem to be support for nesting lists, which I was looking for. It refuses to create a nested list (below). JQuery and AJAX could've done a great job of theming that into an accordian menu.

  • 2012
    • Oct
    • Nov
    • Dec
  • 2013
    • Jan
    • Mar
    • Apr


Views is an amazing module.

By default, the Drupal homepage shows a "Teaser" of each node (piece of content) that's been promoted to the front page. If there are more than 10 posts, it'll do you the favor of displaying a pager at the bottom. That's all it does, though. There's no filtering, only rudamentary ordering, and general lack of customization.

When the site came online, I used the Path module to give content a snazzy URL (in lieu of the Drupal default "nitkin.net/node/17"). All of the articles (the things in the frontpage use the URL format "nitkin.net/year/month/title"). I wanted the home page to filter using the same yyyy/mm scheme to allow granular browsing.

nitkin.net/2012 shows all posts from 2012

nitkin.net/2012/6 shows all posts from June 2012nitkin.net/2012/6/views displays this post

That's where Views comes in.

Searching for a Theme

I have nothing against the default Drupal theme, but it's the definition of generic. It's like using Helvitica (an intentionally generic font) to brand your business. With that in mind, I set out to find a more interesting theme for this site.

My brother and I browsed through the Drupal theme repository, but didn't find much we liked. Alpine, the best theme we saw, had a promising layout, but carried an outdoors motif. We tried to refit the images, but the theme wasn't designed to be modified. A surprising number of the themes are starter kits, and those that aren't tended to be clean and businesslike.

Perhaps it's fitting that we didn't find any perfect themes online.


[[{"type":"media","view_mode":"media_original","fid":"54","attributes":{"alt":"Smiley face!","class":"media-image","height":"32","title":"The original bitmap","typeof":"foaf:Image","width":"32"}}]]

Here's some left-floated text.

This is a fake article from the past to test the archive block. I'm also testing out theming stuff on it.

[[{"type":"media","view_mode":"media_large","fid":"54","attributes":{"alt":"Smiley face!","class":"media-image","height":"32","title":"The original bitmap","typeof":"foaf:Image","width":"32"}}]]

This is more text. Honest to god, I swear. If I see any more text... This is text. Really, truly, absolutely. It flows, it jives, and does everything text does. Lorem ipsum and so on. Rambley ramble ramble. Ramshackle huts littered the river's edge. As the skiff pulled up to the dock, its passengers prepared to debark. They thanked the captain for guiding them so far into the Amazon. The ramshackle dock groaned under their weight as they climbed out of the boat. I think that's enough text to show how the image is floated right. Hooray.

Gosh, I wish that the formatting showed in the editor, too. Fah.