Should you have any issues with the theme, need assistance in setting it up or have feedback, please email me via the contact form.

Features

• Custom Post-Types
• Static Global Fields
• Featured post
• Custom write panels
• About page
• Contact page
• Archives page
• Gallery page
• Category Archives
• Highlighted Author Comments
• Breadcrumbs
• Pagination
• Recent Posts
• Photography section on Homepage
• Tweet This icon
• Twitter posts
• Excerpts
• Fluid layout design
• Breadcrumbs
• Thumbnails enabled
• Custom Widgets
• Custom functions
• WordPress 3.2.1
• jQuery Fancybox
• Custom Illustrations
• Custom icons & buttons
• Modern Webfonts
• HTML4.01
• CSS3
• Fluid Layout
• Supports all modern browser versions + IE from version 8 and upward.
• 3 months free support

Categories: Design Development

Tags:

The theme currently has English and German enabled. Due to a very generous person, the theme will have a French version included with the theme's next release which isn't too far away now. There are some minor bug fixes, typographic and contrast enhancements, and some fine-tuning here and there that will benefit the theme, and, more importantly, you!

So, stay tuned and thanks to everyone who's using the theme. If you like me to take a look, hit me up via email.

You can download the theme from Smashing Magazine

Categories: Development Freebies

Tags: freebie, smashing magazine, themes, wordpress

Everyone who's studied Bauhaus in adequate depth will immediately see where my clock, heavily inspired by Max Bill's clock (shape), breaks the pure Bauhaus spirit. The clock clearly has too much belly fat, or non-functional space, if you prefer. Then again, I've never been a strict follower of, well, anything.

While my breaking of one of the fundamental principles that distinguishes Bauhausian modernism from pretty much every other modernism inspired artistic direction dating back to the early 20th Century, isn't far from being a crime, I herewith present you with the most useless, pointless, futile, drivel-inducing clock known to... this blog.

Download, schmownload, and do whatever suits your fancy.
To make it as convenient as possible, I've sized them to be 2560x1600 pixels. That should cover most screen resolutions. The wallpaper comes in 7 colour variations and they're all dull. Dullisciously dull, if I may say so myself. Matter it does not. Aaaand... because I don't want to indulge any longer in my slightly manic verbal diarrhoe, clearly evident all over this post, I must cease instanter to leave you be and get back to my client work.

Download:

Download .zip file (9.37MB): Bauhaus Clock Wallpapers

Categories: Design Downloads

Tags: bauhaus, download, wallpaper

But all that whining and complaining aside, WordPress is a good tool. Why be humble...WordPress is an excellent tool! That's why I'm creating another theme that'll soon be distributed all over the net.

It's a theme in which I make use of the wp_list_pages function. If you've used WordPress for a while, you'll know that this function outputs quite a few extra classes by the name of page-item. Well, I don't need them and don't want them in the code. To remove them, I've taken all my PHP know-how, ahem, cough... and timbered together a small function, more precisely, a WordPress filter which has the sole purpose of stripping the class attribute and its associated content. The ingredients with which the page-item class and the HTML class attribute get removed from the markup is as follows:

  
function remove_page_class($wp_list_pages) {
$pattern = '/\<li class="page_item[^>]*>/';
$replace_with = '<li>'
return preg_replace($pattern, $replace_with, $wp_list_pages);
}
add_filter('wp_list_pages', 'remove_page_class');
 

1. 1. Create function remove_page_class
2. 2. Define a variable $pattern and assign it a regex pattern that selects the li attribute class and its values
3. Define a variable with the code that you want to replace the above with
4. 3. I use preg_replace, a function that searches and replaces a regular expression. In this case, I'd like to modify the output of $wp_list_pages, thus my preg_replace searches in $wp_list_pages for the markup that matches the value I specified in my $pattern variable and replaces it with the value of my $replace_with variable

And that's pretty much it. If a PHP guru or— PHP Ninja, as an expert is referred to these days— and find there's a better, leaner method, do shout away. I've just started learning PHP and am grateful for all sorts of input.

Categories: Development

Tags: php, theme, wordpress

The grid is about 92% done, there are still some minor inconsistencies I need to iron out. I realise there are ready-made CSS grids out there, and I could have just slammed one of them on here. But ready-made CSS grids are like fast-food. You consume them because they're fast, easy, and convenient. And you haven't a clue what's what underneath. You just trust it does everything the way it is propagated. That's one reason I don't really like fast-food. Not that it's bad, but I prefer to cook my own meals if I can. And I prefer to code my own grids, even if it makes the whole process a bit slower. It just feels better. :D

Anyhow, I'm using the latest version of ExpressionEngine, EE2, and I'm having a blast! I found the admin interface to be slightly confusing at first — still find it a bit counter-intuitive in bits and pieces — but on the whole, it's refreshing to work with it. The Admin doesn't come off quite as well in Opera 10.60, my favourite browser, as it does in other browsers, but it's good enough for me.

That's all I have to write for now. I'm still working on getting the minor quirks and bugs ironed out, and complete my grid. Should you find any bugs or have critique, want to shout me down, please don't hesitate!

Categories: Update

Tags: redesign

Everything they touch seems to turn into gold, every web application they produce an instant success. Not just for this it stands to reason that they would write about and share with the rest of the world what made them so effective and, eventually, so successful.

What I particularly like about this book is that it’s bold. It’s bold, brisk and highly opinionated. And that’s a good thing in my book (no pun) because you sense the amount of passion and dedication Jason Fried, founder of 37signals, with every drop of ink this book has consumed.

What we get to learn about is their philosophy, their idea of what makes good work great, and the particular frame of mind it takes to do what they have done and continue to do.

What we don’t get to learn are in-depth explanations and thorough examinations on how to implement the ideas and methodologies the fine folk at 37signals applied to their way of working.

What to do when the conditions, such as deadlines, firm-specific work ethics, a boss, or any and all factors that need to be accounted for and that you have zero control over, overwhelmingly limit and restrict us in our day-to-day work and design process?

If you’re one of a hundred, have no veto and generally little influence over how you work, then you might as well leave this book on the shelves. Likewise, should you expect to be exposed to an in-depth view on interaction design or given technical instructions and guidance on how to apply the propagated methodologies within long established companies with little incentive to change how they work, then you’re out of luck.

However, should you be a small(ish) company, your team comprising no more than a handful of people, have good control over how things get done, can motivate and enthuse your team members to follow a certain dogma, then this book is more than apt and fitting.

In short; Getting Real is a 170 pages long comprehensive mantra on how to get things done.

Fried suggests that we focus on the big idea, that we build from macro to micro, having the big picture and working ourselves down and getting to the nitty gritty details at a much, much later time in the process.

While we’re at it, should you be one of those hopeless perfectionists... [I aggressively wave my arms in the air, nodding vehemently, and that’s a nose-bleeding heavy nod!] you might as well leave that unwanted characteristica at the door before going any further.

So how does ignoring perfectionism and other astronomic ideals set free the means and devices needed to aid us in our journey to becoming more efficient, more successful business people?

Short answer: By getting real (har, har), by not setting goals and expectations we can’t meet, because they’re either impractical or simply unrealistic.

Well, that’s the short answer. The slightly longer answer goes as follows:

Keeping it Small

The book gives us plenty examples that demonstrate the advantages of keeping things small. A small team can better manage tasks because there are less people to communicate with, less instances or pre-production cycles to overcome. Being small allows you to react to your site visitors, the people who use your product, faster. Being small makes you agile and permits changes, and bug fixes to be done instantly. Being small reduces the distance between yourself and your customers, service and support can be more personal. Many more advantages are explained in the book, so the ones depicted here are a select few.

Focusing on the Essentials and Learning to Say No

Focusing on the big idea does not imply that your product or service must be filled with more features than you can eat. It does not mean that you have to offer everything. It does not mean that you have to outperform your competition, be it in features or in price. Fried suggests that you outperform your competition by underperforming. While that thought might sound strange at first, the book offers sound reasoning why that makes perfect sense and additionally presents us with opinions of some popular voices in our industry.

He even goes as far as recommending that you upload your unfinished product or service. Why? Because you’ll never have it complete — that goes back to the perfectionism thing I touched on earlier — a design, a product, a service, everything is a process, a process of iteration. So why not get it out there, even if it still has a bug or two, needs some code optimization, and no more than barely the essentials?

What you get in return is the most precious thing any of us should value at this very early stage of production - namely the feedback of your customers. The sooner you get your product or service out to the people, the quicker you understand what works and what doesn’t. Those are first-hand reactions to your product. And since those are the people who’ll later be paying for your offerings, it makes good business sense to optimize it to reflect what your site visitors have communicated.

And finally, one more significant aspect of 37signals’ philosophy is that of negation. Saying no, and saying it often, allows your products to stay focused on what is essential, and do what it is supposed do well. By saying no to every feature you think of at the start of a project, you can quickly learn what you really need by simply leaving out everything else. In other words, the book strongly suggests that the competition isn’t mimicked, that we don’t fill our application with everything that we think we need just because someone else has it. We are encouraged to keep things simple, build on the essentials and add features responsibly and only if these really extend the effectiveness of using said product.

To summarise: Less in every shape or form is neither a deficit nor a hindrance to success. Having a small and smart product or service, one that was borne out of ones own needs and was later formed into a product based on what our customers have said, makes for a powerful, user-centric solution. Being small does not hurt either. It can facilitate more agility, allow us to communicate with our customers closely, react to their feedback quickly and submit our iteration fast and conveniently.

Categories: Books

Tags: books, reviews

1. <ul id="nav">
2. <li><a href="homepage.html">Home</a></li>
3. <li><a href="about.html">About</a></li>
4. <li class="last"> <a href="contact.html">Contact</a></li>
5. </ul>

I might also want to change the last class attribute for the third weblog entry because I've decided that I want my last column to not have any margins.

There are plenty of ways to go about altering the first, last, or odd item, but I've chosen to use one of the very simple means, namely using ExpressionEngine's built-in conditional global variables.

So, to be clear: What I want is to have three columns in a row. All three columns have the same class, in this case the class is column. I want the third column to have the additional CSS class last-item because I'd like to change the value of this item's margin. Yes, we could use CSS' ":last-child" or "nth-child" property, but that's for another day. Today, I'd just like to show you how you can manipulate small chunks of code - or large chunks for that matter - by simply using EE's conditionals and variables. You can apply this logic to pretty much any piece of code you'd like to modify.

Raw HTML code without ExpressionEngine tags:

1. <div class="column">
2. <h2>My title</h2>
3. <p>My excerpt</p>
4. </div>

But we want to take advantage of EE's tags and create dynamic content, so our code will now look like this:

1. {exp:weblog:entries weblog="blog" limit="3"}
2. <div class="column">
3. <h2>{title}</h2>
4. <p>{excerpt}</p>
5. </div>
6. {/exp:weblog:entries}

The third entry needs a second class appended to the HTML. I'm giving it a class name of "last-item".

1. {exp:weblog:entries weblog="blog" limit="3"}
2. <div class="column {_if count == 3}last-item{/_if}">
3. <h2>{title}</h2>
4. <p>{excerpt}</p>
5. </div>
6. {/exp:weblog:entries}

(remove the underscore before the opening and closing if)

What's changed? If you look at the class attribute of the div, you'll see that I've added a conditional global variable, namely the if conditional. In addition to that I've applied the single variable {count}. In plain English it reads as follows: "If the item is equal to 3 (the third item), then append the CSS class last-item to the HTML element."

And that's it. There are plenty of conditional global variables and single variables that allow for tons of flexibility without resorting to add-ons.

In closing it should be noted that this technique works for EE2 as well. Replace weblog with channel and you're good to go.

Categories: Development

Tags: expressionengine, tutorials

Yes, I'm alive!

My last blog post has been a while. I'd have loved to be able to say that I was so busy that every effort of stealing a fraction of a minute to quickly write together a post were all but a luckless effort. Or that my clients dragged me into a dark, scary, empty room, shut the door, and condemned me to keep the silence forevermore!

Alas, none of that happened.

I neglected to write anything for no other reason than not finding a reason to write. I concentrated on working on my clients' projects, successfully neglecting and blissfully ignoring everything else.

I am, of course, still working on my clients' projects. However, a designer's life comprises more than working for others, day in, day out. While a priority, I've realised that I tire much quicker when a day's ritual is entirely void of diversion and there's no room left to train the mind and explore ideas that are not bound to a deadline.

And I have ideas. I have plenty ideas. Even some good ones. And now is the time to no longer be my own worst critique, and just put myself out there and write, no matter how futile, horrible, or good.

I've evolved. I've been gradually and consistently honing my skills. I've garnered insights to complex matters that have altered - and dare I say bettered - my view on designing for the web.

These are exciting times to be in the industry. The tasks of a web designer are getting more convoluted, intricated by the day. And, at the same time, the web is getting quite a bit more flexible. It's the electrifying beauty of the insanely fast-paced progression that's prompted me to hop back onto the blogosphere - not that I've ever been part of it - and write about all the things that inspire, astound, irritate, and energize me, and - if I'm lucky - you too.

Categories: Update

Tags: updates

Who’s the Author?

Dan Cederholm is undoubtedly a renowned and recognized expert in our field and has an audaciously impressive resume, ranging from Google to MTV. He's written two other books, both of which I've read and will review in the not so distant future.

To round off the fantastic reading experience, Ethan Marcotte, another well-respected web designer and senior creative head of Airbag Industries, treats us to a fine chapter on fluid layout design.

What’s the Book About?

As the title suggests, the book is about crafting design with CSS, however not so much with CSS2.1, the current standard, but rather with the über mighty CSS3.

Inevitably, that leads to the question why Cederholm has written a book about a version of a markup language that is neither a standard (yet) nor a language that finds wide support as of July 2010, most notably — and quite frustratingly — in Internet Explorer, the world’s most used browser and the designer’s greatest headache, well, the legacy versions anyway.

The answer is quite simple: The book explores design techniques that allow you to circumvent those particular strains that go along with creating designs that look identical in all browsers, from legacy to the newest versions. Cederholm proposes to stop designing with pixel-perfection in mind. While we’ve struggled with rounded corners, experimented with probably no less than twenty different rounded corner techniques, some with the aid of Javascript, some without, all these previous techniques had and have one thing in common; They either require plenty of extra markup, bloating up your beautiful code, need the assistance of a dynamic scripting language (Javascript), use too many images, exhausting your server with an insane amount of extra HTTP-Requests, or forfeit your design’s flexibility and thus make it a pain and a horror prospect, should your client ask for something as trivial as a colour change.

CSS3 offers a property that will make those concerns tremors of the past. That property, that very feature which obviates any and all potential panic attacks is called border-radius. While we still need to use vendor-specific browser prefixes,this is one of those CSS3 properties that can be used today and is supported in all modern browsers, minus all versions of Internet Explorer up to version 8.

So what if clients are not in accordance with the fact that IE doesn’t render the pages like the other browsers do? Cederholm makes the case by creating a fictional Coffee website, implementing a handful of modern CSS3 techniques that render beautifully in Opera, Safari/Chrome, and Firefox and degrade gracefully — the aesthetics of which are only marginally lost — in Internet Explorer as well as all other legacy browsers.

It is important to note that Cederholm merely suggests using these techniques, if the environment allows for it. Not every site is suitable for such an aggressively progressive, foward-thinking approach to coding. Sometimes we need to abide by the rules set forth by our clients, boss, our working environment, and most importantly, our target audience. The most advanced and smartest design in the world is worth nil, nada, niente, if the people who visit your site, who are the sole reason of your site’s existence, can’t use it, and use it well.

Cederholm introduces plenty more examples of modern coding techniques, comparing them to older, tried methods, weighs us in on considerations, such as making use of alpha-transparency by using CSS3’s RGBA property, how to make content sections modular, proposing the use of flexible-width layouts — or should I say fluid grids — a most inspiring chapter written by Ethan Marcotte, as well as briefly touching on the subject of implementing non-standard fonts via the @font-face property.

Conclusion

I can say with great confidence that this is a book that should be in every designer’s bookshelf. There are books that go into much greater detail, but if you are in accordance with the Utilitarian approach to design depicted in this book, want a well-rounded, wonderfully composed companion that makes you thirst for more in-depth information on any of the topics discussed, then I wholeheartedly recommend this book to you.

Categories: Books Development

Tags: books, css, progressive enhancement, reviews

We start by creating a new global variable and assigning it to the template we use to render our single entries.

1. {assign_variable:current_entry="{segment_3}"}

What we've done: we have created a new global variable with the name of current_entry and assigned it the value of {segment_3}, the third segment of the URL.

An Example: mysite.com/index.php/blog/single/my-entry-title

In this example, the entry title is the third segment of the URL. index.php does not count as a segment. If you've never worked with ExpressionEngine's URL segments before, you can find all information on how to use them in the EE docs.

In our single entries template we insert our code somewhere at the top, e.g. below our other assigned global variables.

1. {assign_variable:my_template_group="blog"}
2. {assign_variable:my_weblog="blog"}"}
3. {assign_variable:current_entry="{segment_3}"}

Now we can apply the newly created global variable to use as a parameter value in our weblog:entries tag.

The Logic

We have stored the entry title in {current_entry} in order to use this global variable in our weblog:entries tag as a parameter value. Next, we'll tell our function to exclude the entry title from our recent entries in our single entries template.

1. <ul class="recent-entries">
2. {exp:weblog:entries weblog="{my_weblog}" dynamic="off" url_title="not {current_entry}"}
3. <li><a href="/blog/single/{url_title}" title="read more on {title}">{title}</a></li>
4. {/exp:weblog:entries}
5. </ul>

It is important to have dynamic="off" in our weblog: entries tag.
In this example, we've added the url_title parameter and assigned it the value of {current_entry}. Additionally, we have prepended the value "not", which translates to the following: if we view a single entry, do NOT include the current URL title.

That's it. We could also separate this piece of code from our template and then include it via embeds. However, I prefer to not use too many embeds to ensure that not too many queries are used that might effect speed/performance.

Categories: Development Tutorials

Tags: expressionengine, tutorial