By stevebo77 on

Hello!
No City In The World just soft-launched this week. This is a freebie site for a friend of mine who wanted to document the music and bands that have come out of Reno Nevada since the early 1970s.

What's with the name? You must have seen photos of the Reno Arch before (Which says "RENO.. The Biggest Little City In The World").. if you're not from Reno you may not know that there is another arch on Lake street that had a funny mishap. Half the sign went dark one night and we were left with "NO.. City In The World" :) I've animated the header to have a feeble neon effect every 40 seconds or so.

Aside from posting articles the site will sell special re/un-released vinyl, as he gets more bands to allow him to do so- also will be selling digital download music for stuff he can get the permissions for (these are all small or non-existent labels anymore). I just gave him the keys to the site yesterday, so lots of real content will start filling up the site soon I hope.

I've been wanting to make a parallax effect site for ages and this site ended up being the one to get the works. A few huge PNG layers plus jParallax.js provide the header effects you see up top.

Capped two column frontpage made possible by Panels module and some custom Views panes/pages.

Site is using:

  • Drupal 6.13
  • Pathauto
  • Panels+all its sub mods
  • CCK
  • Image/Gallery
  • ImageAPI/ImageCache
  • Mollom
  • GoogleAna
  • Thickbox
  • UberCart
  • Views
  • Additional jParallax script linked in head
  • Custom theme design and build by me
  • Annnd FCKEditor
⋅ Categories: Drupal 6.x

Comments

mani.atico’s picture

mani.atico commented

Didn't know such thing as parallex existed... awesome header and theme design!

dRaz’s picture

dRaz commented

The site looks very clean - good job.

Instantly I am wondering how you have managed to integrate bold lettering and smilies though.

Is this custom or a module such as FCKeditor?

stevebo77’s picture

stevebo77 commented

Yes you're right, I'm using FCKeditor for content creation there, I totally forgot to add that to the list of modules used - edited my post to show that now.

krolpl’s picture

krolpl commented

Wow thats really nice design, jParallax makes site looks COOL, good job it would be nice to have a theme or module to use that effect.

stevebo77’s picture

stevebo77 commented

Hmmm, you're giving me good ideas.
That's something to think about and I'll try my hand at it.
And thanks for the kudos :)

stunch’s picture

stunch commented

Very Clean, and the header rox, well done

socialtalker’s picture

socialtalker commented

link is broke, unfortunately

stevebo77’s picture

stevebo77 commented

The silly owner forgot to pay for his domain renewal! Ack!
Doubly unfortunate for him that he went through siteground, who are dragging their feet to get the DNS back up on this site.
I look forward to the site being back up this week tho.

~Steve

stevebo77’s picture

stevebo77 commented

until the dirty domain squatters lay off of my claim, the site url has changed to http://nocityintheworld.net

grr
~Steve

michelle’s picture

michelle
she/her
Primary language English
Location Wisconsin, USA
commented

You might want to turn on anonymous access to the front page. :)

Michelle

stevebo77’s picture

stevebo77 commented

I wish I'd read your comment earlier.. someone just contacted me about that too. I'm blushing up a storm over this right now. :S

Had unpublished that Panel Pane for a second to do a test and never remembered to repub it..

~Idiot Hryniuk

socialtalker’s picture

socialtalker commented

spectacular header!
i am planning a parallax header myself.
how did you animate the sign? can you use flash inside the header or this is just an animated gif? or something else?

stevebo77’s picture

stevebo77 commented

I'm loving the parallax fun and am working on a more full parallax with drag-n-dop functionality with a drupal backing.. it will be arduous but worth the effort I think.
Hoping it won't be too resource intensive for the end user tho. ( a very basic concept is up at http://hryniuk.com/nocity .. just showing the two effects playing together, but not doing anything useful yet )

The animated portion of the sign is just an animated gif with a little CSS to make sure it stays positioned correctly within the Arch while the movements take place. I bet flash would work too, but I don't tend to do much with flash anymore.

kraymer’s picture

kraymer commented

Nice work! looks really good.

I didn't read through your entire write-up and thought I was tripping when I saw the header moving -haha

looks good.

~kraymer

jfb67’s picture

jfb67 commented

That is a very nice, clean design. very easy to navigate. How much technical knowledge, effort did it require? I would like to do soething similar. Thanks.

stevebo77’s picture

stevebo77 commented

Well not sure! I don't feel like a master of all things Drupal yet, so I'll say that this wasn't entirely hard to pull off for the average developer.
The front page with the 3 panels of content was very easily accomplished with Panel Panes addition for Views module. Then simply beaten over the head with lots of CSS, aimed at the specific panes, titles, teasers, and such. The recent articles pane (lower left) is just a pane that queries for Article content type and sorts by last updated with a short teaser. The lower right pane is nice space filler but really only does the same thing as the left, except try to appeal to people who like pictures instead of teaser text. That pane looks only for articles that have an imagefield attachment and shows just one image from the article; the pane is set to shuffle the images randomly and the thumbs link to their respective articles.

I added a nice little icon to indicate if an article has downloadable music attached.. write-up for that is at http://hryniuk.com/public/blog/drupal-show-icon-title-if-node-has-attach...
That adds a nice little pop and bonus to the page :)

The Articles listing page is also just a Views page, querying for all Article content types, whose content is not blank, and displaying in alphabetical.
The Bands listing page is another Views page, querying for all Article content types (whether it has content or not), displayed in alphabetical.

Before building NoCity I had never seriously played with the power of the Views module before. It was hard for a second, but after I played around with the querying settings, filters, and relationships it was very nice to use.

hrapp89’s picture

hrapp89 commented

I'm in love with that header and your great use of Views and Panels.. amazing work!

JohnWoltman’s picture

JohnWoltman commented

Very nice looking website. As others have said the header is fantastic, and the other graphics fit in well with each other.

stevebo77’s picture

stevebo77 commented

@ JohnWoltman and hrapp89, I appreciate the good feedback very much :)