| Comments

My blog runs on Subtext which has a pretty good skinning model (albeit a tad outdated) and allows you to customize whatever you want.  I’ve had my own custom theme since 2009.  I figured I was due for an update.  I was further strengthened by a post from Jon Galloway last week.

Now when I saw this I figured it was another nudge.  I did also have some time this weekend without any distractions so I took it as an opportunity to do some ‘work’ on this here blog.  Now a while back I was inspired by what Scott Hanselman had done on his site with a designer.  I reached out to a few designers that I admired, but frankly never heard back :-(.  I figured that was okay as I wasn’t in a position to really pay what I know it is worth for a good designer.  So I went looking for things on the web that I could do myself.  I did want some subtle design tweaks to represent some things I’m currently passionate about.

Bootstrap your CSS

After some digging I saw a ton of pointers to Bootstrap.  This is an Open Source Javascript/CSS library that sets your site up for styling success and layout goodness.  The documentation was some of the better docs I’ve seen for a library.  Each aspect of the library/styles where in the docs that I could visually see, interact with and see the code that produced the behavior.  I liked what I saw and went to work.

When I got all the styles configured (using the basic setup from Bootstrap) I went to work on some of my own minor tweaks.  One of the things I really liked is the responsive layout options, not only for the grid but also for different screen sizes.  By adding a simple class I can specify certain aspects that shouldn’t be displayed when viewing the site on a tablet or phone.  There were other cool responsive options for this such as the main menu will switch to a drop-down approach when on a smaller device.  Using Firebug, IE F12 tools and real devices I was able to get the precise tweaks that I wanted.  Here’s what my site looks like on an iPhone as an example:

timheuer.com on an iPhone

Notice the menu at the top is gone but replaced with a little icon (which is a drop-down).  Also notice the sidebar area is no longer visible (it is on the bottom of the site in this device view).  I like this subtle configuration that was really easy to do with just adding a class name to the area I wanted to collapse.

The other thing I wanted was to implement my primary navigation links in a little-more-than-text style.  I used the CSS sprite method by creating a single image that I would then define styles that used clips within that image to pull out the right area.  Here is the image in entirety:

Notice how the normal and hover states are the same image. 

NOTE: I put this on a black background so you can see them but it is actually a transparent background so the theme’s background shows through.

What I do then is just define a style for the <a> tag like:

   1: #follow {
   2:     background-image: url("navbarglyphs.png");
   3:     background-position: -195px 0px;
   4: }
   6: #follow:hover {
   7:     background-image: url("navbarglyphs.png");
   8:     background-position: -195px -70px;
   9: }

Now I was having a bit of difficulty with this because I was misunderstanding the background-position value in CSS.  A quick set of second eyes with Shawn Wildermuth (who is doing a bunch of HTML dev posts right now) helped me realize my math was wrong and I needed to use the negative value instead of what I was using.  Once that forehead-slap moment was done, I was set. 

I still have a few tweaks to go (need to re-work the comments sections but didn’t have the time to think about a design more) but I’m happy with the quick re-design.  It is very simple for sure, but I like it.  I tried on a few different screen sizes and I think I have met Jon’s challenge to adapt to the available space for the screen.  If you are working with a new site and aren’t a CSS/JS guru I highly recommend looking at Bootstrap as a solid starting point for your efforts.

| Comments

got mad design and css skillz?  take a stab at redesigning the mix web site for a contest.  i saw through twitter that adam kinney noted only one person entered yet.  and there are three prizes!!! should make winning pretty simple right now ;-).

visitmix.com - restyle

of course i'm ineligible (that's my way of getting off, because i have no mad design skillz), but might i suggest a few themes to try out:

    • halo 3
    • rockband/guitar hero - have you seen this and this yet?
    • reno 911 - man i love this show -- 'sheriff's department!' -- hmm...ballmer as lt. dangle?
    • dora and diego -- go ScottGu go!
    • high school musical
    • election 2008

either way, all you have to do is visit the restyle contest page and download the starter kit.  so what are you waiting for?  deface, er...i mean...restyle the site in a creative way!

| Comments

this post is more for the locals to my home (phoenix, arizona metro area) as i wanted to call attention to some of the great work being done by our community contributors.  in the recent months, we've had two individuals get published in techno geek mags, Code Magazine and ASP.NET Pro.

Spike Xavier is one of the coolest guys i've met.  he's not only a super passionate geek (and trust me when i say passionate), but he's really a nice guy (not that other geeks aren't, but let's face it...we can be a little "sheltered" sometimes) and is passionate about a few other things in his life as well, like music.  spike is in a band and knows a ton of people 'in the biz' -- he is also one of the brainchilds behind the billboard top hit 'no more dll hell' along with dan wahlin.  i think they are still waiting for royalty checks.  i heard that there was interest in working with michelle leroux-bustamante on a follow-up entitled "Managed Girl" (to the tune of Material Girl)...maybe her people can talk to their people...or maybe a twist on her smelly cat rendition?  seriously though, if you get a chance to meet spike, do it.  anyhow, i digress.  spike was recently published in ASP.NET Pro magazine and got the cover story featuring becoming a "master of your domain" with regard to using master pages and good css practices.  way to go spike!  i'm not sure if there are any magazines in circulation as i heard his family bought them all ;-)

and then just recently another one of our community luminaries was published.   has been working in the biz for about 7 years now doing a ton of really solid enterprise application development, helping his employers and customers build enterprise-class systems that scale.  part of these implementations involve leveraging biztalk server.  rick is one of our local community authorities on aspects of biztalk.  his recent thoughts are set in history now in in an article entitled "Enterprise Application Integration with Microsoft BizTalk Server 2006-Part 1" (i assume 'part 1' implies a 'part 2' will come as well).  with a title like that i'm curious if rick consulted with the microsoft product naming department ;-).  rick is a superstar and has really been stepping up this past year to help with the community, user groups and code camps.

congratulations to both of these fine gentlemen for being published.  i often get asked "how do i become an MVP" (that's a post i've drafted a few times)...an MVP is in-part a peer-nominated award, and demonstrating your technical prowess through blogs and articles and working with product teams to write these articles is an excellent way to serve the broader community and demonstrate MVP qualities.