Tutorials Category

In a previous post, we took a look at some of the major changes with the Omega 4 base theme. This time around we’re going to get our hands dirty and actually start using this powerful set of tools for Drupal theme development.

Before we get too far along, we need to get clear on a few major points. Omega 4 is a really big change in the way many have been working with Omega theme in the past. It’s now much more akin to the Zen base theme (heck, you can even use Zen grids in your themes without much fuss) and it requires the skills of a front-end dev to use to its full potential.

The beginner-friendly UI layout tools are gone. Setting up a “best practice” development environment may also be a bit of a speed bump. So the first step in using Omega as intended, is to get your workspace set up with the tools you’re going to need.

In this lesson we're going to talk about what is possibly the most useful Drupal site building module of them all - Views. If you're coming from a WordPress or Joomla background, you won't have experienced anything quite like it. Not only does Views allow you to easily build queries on your site's content, but it gives an amazing degree of control over the display of those query results.

We're going to begin by creating a very basic view just to get acquainted with the interface and some of the settings we'll be using the most often. If you've been following along and are using my free installation profile, then everything you'll need is ready to go. If you're using your own site, make sure you have Views installed along with some content you can work with. If you have a fresh install of Drupal, the Devel module is great for generating dummy content.

One of the best things about Drupal is the ability to flexibly manage your content. If you're coming from a WordPress background, you'll know that system uses the Post and Page for its content types. In Drupal you have something similar in the Article and Basic page, but also an easy to use interface for creating a virtually unlimited number of other content types.

When it comes to Drupal, Omega theme is hard to beat for building a responsive, mobile-friendly website. It has powerful GUI configuration tools that make it very appealing to those who don't want to mess about with code. Omega theme has taken care of the messy bits and all that's left for you is to tinker with the settings. In this post we'll go over some of the most important of these configuration settings.

I should also note that in this series of lessons we're not going to discuss creating an Omega sub-theme from scratch. For that I'll refer you to this nice little tutorial on Drupal.org. Instead, we'll do a walk-through of the settings and then finish up by talking about Omega's companion modules, which can help take your responsive site building to the next level.

Working with images is a bit different on a Drupal website. Most of the differences make it much easier to use images consistently across a site, particularly once you turn things over to non-technical content editors. But there are a few things to watch out for that can really throw a wrench into things.

For example, most web designers are in the habit of optimizing images before adding them to a site. Using Photoshop or a tool like Smush.it is standard operating procedure. In this tutorial we're going to take look at why that may not be the best practice when working with Drupal. We'll also go over using the image toolkit, creating image styles and using styles with the IMCE module.

I guess you could say I was in a bit of a rut. The modules I had been using for SEO had been working well, so I hadn't bothered to look at any alternatives in quite a while. Then I had a customer ask if I'd consider switching to the Metatag module. I took a look and came away very impressed with what I saw.

In this tutorial we'll review the Metatag module and explore the settings it provides (including the advanced ones) and how they can help optimize your site for search engines. Let's begin with a bit of set up and general configuration.

Website performance has been on my mind a lot lately, especially with regard to responsive web design. It's quite important, but it also requires a shift in thinking that is still underway for many involved with web projects, particularly clients.

How quickly your page loads has a big impact on everything from your site's search rankings to the abandonment rate for shopping carts.  But as I mentioned in a previous post, there are tensions between commonly desired features and mobile performance. I'll give you an example we run into here at Friendly Machine all the time.

I thought it would be fun to do a little experiment. I have a project for a client that is wrapping up and one of the final things I'm doing for them is optimizing the site's performance. The client is a good candidate for this little demonstration because they have their Drupal site in a shared hosting environment, something that's quite common, but often limiting with regard to what you can do to improve performance. 

Omega theme has some cool features that have rightly been given a lot of attention, but one companion module that doesn't get discussed as much is Omega Tools. It's a very useful module and one of its features is the ability to export theme settings, something that may come in handy on your next project.

Modules are the workhorses of a Drupal site. Most are useful, some are essential, but there aren't many that qualify as fun. This tutorial is about one of those rare modules that is actually a real good time, @font-your-face. 

For many years there were only about a dozen web safe fonts that you could use on your site. In retrospect, it was very boring. In the past couple years, however, things have completely changed. We'll skip the glorious story of CSS3 web typography for now and instead get straight into using @font-your-face to spiff up your site with some cool new fonts. 

One day about five years ago my boss called me into his office. There was a problem, he said. There had been some complaints and they needed to be promptly addressed. As I shifted nervously in my chair wondering who I had inadvertently angered, he opened his laptop and asked, "Have you ever heard of Drupal?"

When you're first getting started with any content management system there is a lot to learn and Drupal's past has given it an undeserved reputation as being especially challenging. Here's some quick advice to set beginners on an easier path.

You know those nifty "smooth scrolling" effects you've seen? Well, today I'm going to show you how to implement this animation on your Drupal site. As a bonus, you'll learn how to add any jQuery snippet or plugin the "Drupal way". But first, a little background.

Today I'm going to show you something really cool. If you follow what's going on with Drupal, you've no doubt heard about Omega theme. But maybe you haven't heard about its companion module, Delta. When used in conjunction with the Context module, Delta provides a simple, yet powerful templating system.

I recently did some work for a client setting up a multisite install on a shared hosting account using cPanel. With shared hosting, if you run into any problems you're pretty much on your own. And unfortunately for me, there were problems. Since I'm always looking for an opportunity to turns lemons into lemonade, I thought I'd write a 'how to' post to save others a bit of aggravation.  

Let's step through the process...

I returned from a long vacation over the holidays to discover that one of the sites that I manage had developed some serious performance issues. Page load times had gone from 1 or 2 seconds to more than 8 seconds on some of the slowest loading pages. 

After messing around with a few of the usual suspects, I decided to give the Drupal Boost module a try in hopes that it would speed up the site while I worked on tracking down the underlying issue. 

Adding stylesheets to a web page is one of the first things a designer or developer learns how to do, but adding a stylesheet the "Drupal way" calls for a different approach. In my rush to finish the custom theme for my first Drupal site, I skipped the documentation on adding CSS and simply placed a link to the stylesheet in the page.tpl.php template file. 

I was recently asked how much a web manager should care about Drupal SEO. Isn't that something for the marketers, after all? I think optimizing for search engines is something everyone who manages a Drupal website should understand, but it can be tough for those new to the subject to know where to start.

The Backup and Migrate module not only makes moving your Drupal database a snap, it could also save your job one day. We've all heard stories about the guy that didn't backup his database. When the day came that the server finally crashed, it was disaster. This Drupal module can help ensure you aren't that guy! 

Installing a Drupal WYSIWYG editor is usually one of the first things a site builder will want to do. After all, not many content contributors will want to code HTML by hand, right? This video tutorial demonstrates how to install and configure three modules that will enable us to provide users with an easy to use rich text editor.

Pages