Drupal CMS Powerstart Tutorial 2: Responsive websites with Bootstrap 3 and Drupal

This tutorial will showcase how we have made Bootstrap 3 and especially its responsive grid system and integral part of the platform, and will show you how to use some easy tools to make any website component or content mobile friendly!

About Bootstrap 3 in CMS Powerstart

The Drupal CMS Powerstart disbitrution has made Bootstrap 3 an integral part of the platform. The main reason we did this is to leverage the Bootstrap 3 responsive grid system. This grid system is not just functional, practical and effective.. it's also widely used, widely understood and very well documented. On top of that, Bootstrap 3 is an active open source project, like Drupal, and also supported very well with Drupal through a basetheme and various modules. This tutorial will teach you about these integrations and how to use them to create awesome responsive websites with ease. This tutorial will focus more on Drupal integration than on the gridsystem itself. For a quick introduction to the grid system check out this tutorial. For real life examples check out our Drupal themes.

2.1 Bootstrap on blocks

Forget about themes with 16 regions, or 25 regions. If your'e using Bootstrap you really only need full-width regions that stack on top of one another. The horizontal division will be provisioned by block classes, with responsive layout switching that is customized for your content, not for your theme (-designer) or for an outdated wireframe.

In Drupal CMS Powerstart I added the block_class module and added a patch that assists in our responsive designing labours by auto-completing the Bootstrap 3 grid system classes. 

2.2 Bootstrap in Views

To use Bootstrap 3 in views we will use the views_bootstrap Drupal module. Let's take a look at how this module is used to create a Portfolio grid page for theDrupal CMS Powerstart Portfolio component.

Live demo of portfolio grid.

The views_bootstrap module provides an array of new Views display plugins:

  • Bootstrap Accordion
  • Bootstrap Carousel
  • Bootstrap Grid
  • Bootstrap List Group
  • Bootstrap Media Object
  • Bootstrap Tab
  • Bootstrap Table
  • Bootstrap Thumbnails 

 

This grid of portfolio thumbnails uses the Bootstrap Grid views display plugin. The Bootstrap Grid plugin allows you to output any content in a grid using Bootstrap's grid html markup. A current shortcoming in the module is that it only allows you to select the number of columns for the 'large' media query. Fortunately, there is a patch for that:

https://www.drupal.org/node/2203111

The Drupal CMS Powerstart distribution has this patch included and uses it in views to create truly responsive grids, where you can set the number of columns per media query. It works quiet well out of the box. Here is the views format configuration used for the portfolio:

As you can see it's real easy to create responsive views with this Views Bootstrap 3 integration! Without writing any code you can leverage the tried and tested responsive systems that are provided by Bootstrap. The views_bootstrap module gives you a whole set of tools that help you build responsive layouts and widgets using your trusted Views backend interface. This means site builders can rely less on themers/programmers and get work done quicker.

Using custom markup in views

The View Bootstrap module is great at organizing rows of data into responsive layouts, but it doesn't have the same level of support for fields inside a row of data. This is what we did to create a responsive events listing for the Drupal CMS Powerstart events component:

Live demo of events view.

The events view uses the 'Unformatted list' plugin that is provided by the views module itself. This prints each row of data in a div container. There are 2 ways to make the contents of these rows responsive. One would be to generate node teasers inside the rows, and configure the content type's teaser display mode to use grid classes on the fields. This method will be covered in the next part of this tutorial. For the events view we don't use teasers, we are building a fields view because it gives us more flexibility in the fields we show in our view. Luckily the views interface makes it easy for us to add grid classes right where we need them. First, we will add a row class to each views row by clicking Settings under Format and adding row in the Row class field:

Now we can add responsive column classes to our fields and they will be organized within each row. We simply add classes by clicking each field and editing the Style Settings CSS class field:

The only thing we need to do here is check the Create a CSS class checkbox, and a textbox will appear that allows us to add grid classes to the field. This field uses the class col-sm-6, which makes our event title use 50% of its parent container's width (because Bootstrap uses a 12 column grid) when on a small device. This means that on an extra small device there is not grid class active and the title will use 100% of it's parent container's width, as you can see in the mock-up above. We can't say this method is as easy as the point and click method discussed earlier but if you are familiar with the views interface already this method will become intuitive with a little bit of practice and will allow you to have very fine-grained control over responsive behaviors in your views.

2.3 Bootstrap in Fields

Often you want to organise content fields in a layout. A module that can be of help here is Display Suite, but even with the ds_bootstrap_layouts extension this will give you a limited set of layouts. We can easily build any layout by simply adding bootstral grid classes on fields. This is not to say I don't like Display Suite but since CMS Powerstart focuses on simplicity I will choose the simplest solution. 'Big' tools like Panels and Display Suite are definitely more appropriate for larger Drupal projects.

To make an example I will start building a new Drupal CMS Powerstart component. There was a feature request for a 'shop' component, so we will be building a content type as part of a simple component that will help brick and mortar shops display their inventory. First we will create a new content type called Object.  Since Bootstrap columns need to be wrapped in row classes, we are adding the field_group module. Once you have downloaded and enabled the field_group module, you will have a new option 'Add new group' under the manage fields tab of your Object content type. We are adding a group called Bootstrap row using the default widget fieldset. Now drag the image and body field to the indented position under the Bootstrap row field group. This will create a visual indication in the node/add and node/edit interface that fields belong to the same group. Your Manage Fields interface should now look like this:

Next we will go to the Manage Display tab of the Object content type. This is where the Bootstrap magic happens. Our goal is to display the body text and image field beside eachother on big device and above one another in small devices. First, we have to create our Bootstrap row group again, this time we add a group named Bootstrap row and make it the 'Div' format. Give our field group the following configuration settings:

  • Fieldgroup settings: open
  • Show label: no
  • Speed: none
  • Effec none:
  • Extra CSS classes: row (you can remove the default classes)

Next we wil drag the Body and Image fields to the indented position under the field group. Now we simply configure the field formatters to use the Bootstrap grid classes of our choice. To add these classes in the Manage Display interface we are going to install another module: field_formatter_class. Once you have downloaded and enabled this module you can go back to the Manage Display interface and you will see an option to add a class on each field. You will now set both the Body and Image field to have the Field Formatter Class col-sm-6. This will create a 2 column layout on devices wider than 768px and a stacked layout on smaller devices. If you are using Drupal CMS Powerstart, you can set the Image style of your image field to Bootstrap 3 col6. This will resize the image to exactly fit the 6 column grid container.

Your Manage Display tab should now look like this: 

Now if you create a node using your new content type it should look similar to this:

Using our new fieldgroup tool we can easily add bootstrap rows and columns to any content type, and since classes are listed and edited in the Manage Fields interface, it's relatively quick and and easy to manage per-node layouts. At least it's a step up from managing a ton of node templates.

2.4 Bootstrap in Content: Shortcodes

Sometimes you (or a client) just want to create a special page that needs more attention than other pages of the same type. Unfortunately there aren't any free tools that give our clients a true WYSIWYG experience for creating responsive Bootstrap grids. If you know one please let me know! Our fallback option is the bs_shortcodes module that I ported from a Wordpres plugin. This module let's you add nearly all Bootstrap components, including grid elements, using a WYSIWYG-integrated form. 

To see the power and flexibility of what you can do with these shortcode check out this demo page:

http://glazed-demo.sooperthemes.com/content/responsive-columns

This system leverages the Drupal Shortcode API, which is a port of the Wordpress shortcode API. The Drupal CMS Powerstart distribution ships with a WYWISYG component that includes CKEditor 4 with the neccesary Shortcode API and shortcode-provisioning submodules. Since the configuration of this setup is complex and beyond the scope of this article I'm just going to assuming you are using Drupal CMS Powerstart and ready to use the WYSIWYG with Shortcodes integration.

To create a simple 2 column layout like in the previous examples we first add a row shortcode:

Then we select the column shortcode and find the code that corresponds to 6 columns on a small devices:

Now if we use 2 6 column shortcodes and put in the same content used in the Field and Field Group tutorial in will look like this in the editor:

After saving the page it will look exactly as the Test Object page we created in the previous tutorial. I admit that shortcodes are a rather crude tool for a complex problem but anyone who is willing the learn the basic principles of a 12 column grid system will have a huge amount of flexibility and capability in creating responsive content. When you combine the Bootstrap 3 grid documentation, the WYSIWYG integration, and for emergencies the documentation of the Wordpress plugin you already have a fully documented tool for savvy clients who don't want to deal with raw HTML code. Shortcodes don't seem like the most userfriendly tool but I've seen clients pick it up quickly and appreciate the flexibility it gives them in organising their most important pages. In the future we migh see improvement in this area from tools like Visual Composer and the Drupal-compatible alternative Azexo Composer.

In Part 3 of this tutorial series I will write about using shortcodes as a site building tool and demonstrate what you can do with shortcodes in a real life Drupal CMS project. To get a sneak preview of the shortcode elements I will be using, check out our Drupal themes.

Drupal CMS Powerstart Tutorial 1: Introduction and Overview

With Drupal CMS Powerstart you can build a beautiful responsive CMS website in 5 minutes

That basically covers the primary goal of the CMS Powerstart distribution: to make Drupal easier and less intimidating to new users. Drupal has a problem: it is relatively difficult to set up and has a steep learning curve. This impedes Drupal's growth as a small-business CMS and by extension it is costing the Drupal community as a whole precious talent: beginning developers, designers and enthusiasts who learn Wordpress and develop awesome plugins and themes for Wordpress because it was too difficult to get started with Drupal.

Another project that tries to make Drupal into something more comprehensible is Backdrop CMS, but I believe Drupal can be user-friendly and developer friendly without needing a fork. While Backdrop focuses on creating a more newbie-friendly code architecture I'm trying to focus on awesome tools Drupal offers to 'develop' websites without writing any code. 

If you are reading this, you probably at some point installed Drupal and realized that it's powerful modular architecture and contrib modules make it a way more extendable and customizable tool than say, Wordpress. We love Drupal because in many ways its better than the competition, better than Joomla, Django, sharepoint or Wordpress. Still, somehow even very prominent Drupal agencies choose to build their site in Wordpress. And they are right, for a small responsive website, you can download and customize a themeforest theme and be done much quicker than with Drupal. What does Wordpress have that we lack? A built in WYSIWYG editor, handy shortcodes, WYSIWYG site building tools... and an enormous selection of premium themes. But it doesn't have a fine-grained permission system, views (unless you shell out 100 dollars for a premium plugin), webform etc.

In flexibility and extendibility Drupal is still better than Wordpress, but I think Drupal doesn't have to lag behind in user-friendliness and that's why I built this distribution; to offer fully configured CMS components and responsive design out of the box. Building this distribution was a challenge but it also showed me that Drupal has potential outsmart Wordpress in the areas where Wordpress is currently better. A common complaint about themeforest Wordpress themes is that their installations are heavy and slow. Thanks to the configuration-in-code architecture of CMS Powerstart I was able to make a custom-build interface so that you only get the code you really need:

http://www.sooperthemes.com/minisites/drupal-cms-powerstart-custom

Just pick the features you plan to use in your project and download a customized build. 

What do I get?

At a Glance

  • Responsive Design
  • Fully configured CKEditor 4 WYSIWYG
  • Light and heavy WYSIWYG profiles
  • Media library for content images
  • Shortcodes for graphical elements
  • Shortcodes for complete Bootstrap 3 support in content
  • Image resizing that matches Bootstrap grid
  • Integrates Views and blocks with Bootstrap 3
  • Blog component*
  • Events component
  • Event registrations component
  • Portfolio component
  • News component
  • Contact form component
  • Demo content
  • SEO Optimized
  • Frontend and backend performance optimized

*In CMS Powerstart a component is a fully configured feature, often including a content type and one or more views and whatever else is needed to create a user-friendly, good looking website component.

Author Empowerment

WYSIWYG

Especially for beginning Drupal users, adding a WYSIWYG editor is a difficult task. Even experienced Drupal professionals can be surprised by some the capabilities of modern WYSIWYG systems like CKEditor 4. WYSIWYG editors are an important part of the author experience on your website and  CMS Powerstart has ships with 2 fully configured WYSIWYG profiles. There is a 'full' profile that offers a wide range of rich content tools and a 'simple' profile that shows a toolbar with only simple text editing tools. 

Shortcodes

Shortcodes allow you to create rich content and layouts without using any HTML or CSS code. Using WYSIWYG integration you can even generate all the codes without having to remember  the codes. This is great for clients who want to have control over columns and buttons in long pages but it can also be great  for site builders who know HTML and CSS. I personally prefer to use shortcodes over HTML to great bootstrap grids within content because using the WYSIWYG button I get a form that listsall the breakpoints that bootstrap uses and I can easily fill in column sizes that fit the content I'm working on right now.

Other shortcodes I like to use as a site builder are Bootstrap tooltips, popovers, carousels and other interactive elements, because I don't know all the  syntax of these elements by heart. It's great to just highlight a text or image in CKEditor and then use the shortcode button to create a popover bubble with additional information.

Media Library

A media library is great because it allows you to re-use assets on your website without having to re-upload them for every page. The Drupal media module is pretty incredible, it pulls together uploaded files, it can integrate media from many internet sources including youtube, media, soundcloud etc. It also gives you a nice overview and history of files that are part of your website and gives you a sense of control over content added by yourself and other contributors on your website. The downside of the media module is it's complexity: It was a lot of work to create a nice basic media library experience in CMS Powerstart and the finaly product uses the latest development branch and a number of patches to create a smooth user experience and integration with Bootstrap 3 column sizes in the image resizing interfaces. Luckily for you, this is now available to you in the CMS WYSIWYG component in Powerstart. 

Site builder tools

Plug and Play CMS Components

Drupal CMS Powerstart is built as a core distribution with add-on components. This architecture was chosen because from my experience with other Drupal distributions (and wordpress themes) I know that you often get much more features than you need. The result of this is not only a slower, heavier website but also an interface that is more complicated than it needs to be. If you want a website with a blog and a news section, you need need to have modules, content types, blocks and views for events and portfolio content. Your administration interface is cleaner and simpler if you only install the modules you will actually need, and that is what the custom build interface is for.

Bootstrap 3

Nowadays any website that isn't responsive is leaving money on the table. More and more internet users access websites on their portable devices. Google has also started integrating mobile-friendliness in their results page rankings so possible you are even missing out on desktop users when your site is not mobile friendly. This is why CMS Powerstart has made responsiveness an integrated part of the project. The powerful Bootstrap 3 responsive grid system is used throughout the Powerstart components: views, fields, and blocks are responsive out of the box.

The WYSIWYG component also includes an extensive bootstrap shortcodes library, giving you access to all Bootstrap 3 components right in the WYSIWYG.

If you are not familiar with Bootstrap 3, you can still use Powerstart together with a custom theme and custom grid. Being a designer myself I used to dislike any grid frameworks because it limits what you can do creatively, but the 12 column grid in Bootstrap 3 is divisible by 2, 3, and 4, making it a hugely practicaly tool to translate any content smoothly to devices of all sizes. I previously used custom grid system tools like Susy and Singularity but now I feel confident I can create anything I need with the Bootstrap 3 system. Bootstrap isn't the best choice to create that unique 7 column layout that you have in mind for some funky design concept, but really when is the last time you actually used a unique layout system for an edgy design concept? It's not worth the hassle. 

Themes

Works with any theme, 25 officially supported themes

The extra benefit you get from the officially supported themes is that I tested them and added code to the installer that puts blocks in the right regions. Powerstart is built to look as good as possible out of the box but to be as extendable as Drupal itself. This means you can develop themes (and modules) for CMS Powerstart as you would for any Drupal website. You can build a theme with or without Bootstrap 3 for Powerstart, but I would recommend giving Bootstrap a shot, it has proven to be a big time saver for me.

Premium Themes

Premium themes, especially the Glazed theme are available to take your Powerstart site to the next level, on a small budget. The Glazed premium theme is built for and with the CMS Powerstart distribution. It offers additional features including advanced theme options, premium shortcode elements and an advanced mega menu. The Glazed project and the CMS Powerstart distribution were developed together, and I hope that revenues generated from the premium themes club allow me to keep improving Powerstart, and to port it to Drupal 8. 

SEO done right

Drupal's SEO is not bad out of the box, but with additional modules and metatag configuration you can have top tier SEO, on par with the popular Wordpress+Yoast combination that is used by many SEO professionals. CMS Powerstart comes with automatic semantic path aliases and redirects, but also implements more advanced techniques to Drupal. For instance, the metatag module is used to limit duplicate content problems and focus your link power on the right pages. In the Events component this is done by putting no-index metatags on the Events archive views, which basically only contain duplicate content of your event pages. This makes sure your link juice is spent on actual event pages.  

100% Drupal

The CMS Powerstart project is a Drupal distribution. Distributions are installation profiles that install Drupal + a number of features that relate to a specific type of website. For example, for e-commerce there is Drupal Commerce and for advanced group/community websites there is Drupal Commons. Dries wrote about distributions in 2006:

The fact that Drupal 5.0 will support distributions is big, and most people have yet to see its full potential. I don't think that any other Open Source project has done something like this before -- or at least, not on the scale that we might end up doing this.

Dries Buytaert

Clearly there were high expectations of distributions in Drupal, even in 2006. From what I can see the concept of distributions did not really catch on as much as expected. I think this is in part because the framework to create distributions needed to mature but also because Drupal.org is not offering a good portal for distributions. That's why I chose to create a separate interface for composing and downloading CMS Powerstart. The one Distribution that did breaking through the 10.000 active users barrier is Drupal Commerce Kickstart, and it's easy to see why. They put a ton of effort into both the distribution and the installer. If CMS Powerstart gains some traction I hope to develop it into something of similar quality.

I will try to regulary write more tutorials to show you how Powerstart can be used to create awesome websites like civinex.nl and lorenagarcia.nl in record-breaking time. I promise the next tutorials will also be more tutorial-esque than this introduction.

Introducing SooperThemes.com version 5 and Drupal CMS Powerstart


Welcome to the fifth redesign of sooperthemes.com!

What's new at SooperThemes

The fifth major update to sooperthemes.com is the biggest update ever. It's a completely new site, unlike the previous sites which were built on top of the original alldrupalthemes.com (2007!)!

The new site comes with a big shift in focus. With Drupal 7 sites becoming more complex, and the upcoming Drupal 8 introducing new power and flexibility, but also complexity, we work hard to offer tools, services and products that allow everyone to profit form Drupal's flexibility without having to suffer the steep learning curve (alone). In addition to selling Drupal themes with turn-key demo sites we now offer more services:

  • Custom built ticket system on sooperthemes.com, to work alongside e-mail support
  • Design to Drupal service, for affordable and top quality Drupal themes based on your own design
  • Enterprise Drupal services, including art direction, design, theming, data driven design and consulting.
  • No more one-off theme sales, total focus on club membership and long term support

Our new tools are the best part, read on to learn about our major plans to support Drupal for small/medium businesses.

Drupal Developers will Love these New Tools:

A new Distribution: Drupal CMS Powerstart

Drupal's awesome architecture is what makes it such an awesome alternative to competing CMS like Wordpress and Joomla, but setting up shop with Drupal is described by many as painful and too complicated. Here, Drupal's power in flexibility is also it's weakness. It takes too much time to install basic features like WYSIWYG with media management: you need to find modules and set up complicated configurations, sometimes needing patches or development versions of modules, external libraries, etc.
To solve this problem, we created a Drupal CMS Distribution, targeted to small business sites and aiming to make life easier for developers and shops who create small sites.

Drupal CMS Powerstart needs beta testers: https://www.drupal.org/project/cms

Dries has mentioned in several keynotes that Distributions are the key to make Drupal more accessible and therefore the Drupal ecosystem more succesful. We too believe distributions are the solution but we don't like how they are currently made and how they are managed by drupal.org. Therefore we have created a new interface: A user-friendly interface to our distribution that lets you pick features, so that you don't get a bulky distro with everything in it, and the kitchen sink.

Check out the custom build interface to Drupal CMS Powerstart:

Drupal CMS Custom Build

Twitter Bootstrap Fans will love what we did with Bootstrap 3

In order to create a truly responsive distribution, we developed and refined a lot Bootstrap 3 Drupal-integration. Responsive grid control from Views, content organisation with Bootstrap shortcodes: https://www.drupal.org/project/bs_shortcodes and all our features come with default layouts that regardless of whether you use a Bootstrap theme.

Development of Drupal CMS Powerstart is sponsored by sooperthemes.com and if you want to support future development of this new platform, please help beta testing and/or consider becoming a member of our premium themes club, you can see our "premium themed" version of CMS Powerstart here: http://glazed-demo.sooperthemes.com/ - more Drupal themes.

Arctica: The New Base Theme for Responsive Web site/Web app Design

Making Responsive Design Easy for You

Have you been hearing a lot of talk about responsive design and media queries, maybe even checked the http://mediaqueri.es/ website, but you’re unsure how to get started with this new technology? Then you’re not alone. Responsive design is a big change and while the surge of tablets and smartphones with broadband internet demands we make our websites work on small devices now, there is still a lot of figuring out to do. Arctica takes the next step in facilitating responsive web design in Drupal. It works in the background, providing Drupal with a layout system via the Skinr module and its own CSS management system. But unlike other base themes it doesn’t stop there; The Arctica Configurator (aka theme settings form) provides an entirely new interface that reduces the complexity of responsive design by showing and telling what is happening in the background, when your website is elegantly adapting to and infinite number of screen sizes.

Also check the minisite: www.sooperthemes.com/arctica/ Arcitica Configurator screenshot (click for enlargement):

Other Responsive Themes

Before starting the 3-month code/test/code/test sprint it finally took, I thoroughly researched the currently available options, most notably adaptivetheme and omega. Here are some points that Arctica does different that I think are important:
  1. Provides a usable and flexible interface to the layout system, giving you a birds eye view of what your design is doing on different devices.
  2. Not making assumptions about how you want to implement responsive design. Media queries are not hardcoded in the theme, they exist in the configurator and you are encouraged to make your own. You are free to choose a mobile first design, a content first design or the less intimidating top-down design (desktop->mobile). Not every website needs the same approach, that’s why I also made the number of media queries flexible. Some websites might need as much as 7 media query contexts to work in all devices but many simple websites can easily do it with 2 or 3 media queries.
  3. Fixed-width gutters. Many flexible layout systems use flexible width gutters. Being a designer myself I found this a big issue. Design is all about ratios and rythm, and white-space is a fundamental part of the design. I developed my own layout system (long before working on Arctica) that supports flexible width with fixed gutters. This avoids the problem of having your vertical gutters shrink and expand inifintely to fit the viewport while your horiztonal gutters do not respond at al, thus breaking the foundation of your design.
  4. Performance: I’ve always been a into optimizing code and monitoring server performance. Arctica is probably not yet perfectly optimized but it has a very low performance impact considering the amount of “stuff” it does for you. I spent a whole day ab testing all the latest base themes and found that most base themes had an acceptable performance impact, adding a ~5% penalty compared to Stark. An exception was Omega which performed around 10% slower than Stark in both throughput and response time. Complex stand-alone themes such as Marinelli and Danland also incurred about a 10% performance penalty compared to Stark. Now remember that stark is a bare bones "theme" and while being fast it doesn't make your website responsive, or pretty.
  5. I added some new features such as built in polyfills and mobile browser tweaks, CSS3PIE integration, Arctica Visual Bootstrap, providing design defaults for common Drupal elements and turning off core stylesheets. All of this is optional of course you can turn it all off. I’m also using SASS/Compass in all my new base/sub themes but I’m not assuming everyones else wants to know about SASS so I make everything compatible with hacking regular CSS.
  6. What Arctica doesn’t / shouldn’t do is also something I thought about. Some things are better left for modules to do. For instance text strings are content, not theming, so I didn’t add a 100 theme options to change node links and comments links etc. You can use the stringoverrides module for that.

Arctica in the Wild

Allthough Arctica is brand new and just at the beginning of a long road of active development, there are some themes that demonstrate its features:
  • The arctica minisite (very much a work in progress). You can download this minisite and play with it to see how the advanced skinr integration makes an Arctica site so easy to manage: http://drupal.org/project/starterkit_arti
  • More info about this in another blog post: http://drupal.org/project/touchpro which uses the new http://drupal.org/project/tundra base theme extender
  • Premium themes Deviant and HelloFolio

You can download Arcitca now

http://drupal.org/project/arctica

Testers Wanted

I would love to hear your opinion and ideas, feel free to comment or tweet @sooperthemes or @jurriaanroelofs with #arctica.

The easiest way to learn Arctica

The easiest way to try the themes is by installing the StarterKits (installation profiles) that install a demo site with demo content, including production-ready responsive design configurations. You can try the free arti theme but you'll have an even better resource if you buy the new Deviant premium theme or Hellofolio premium theme. Both come with a StarterKit. They come with responsive blocks, views and images. If you've been on the fence about buying premium themes, I've just now started a 50% discount promotion on SooperThemes.com to celebrate the introduction of the new theme. This is the first time in 2.5 years of business that the premium Drupal 7 themes are on sale.

Community vote result: TouchPro = Free Premium Drupal Theme

It was very exciting for me to watch you all vote on the poll for the first free premium theme by sooperthemes.com The race was between HelloFolio and Touchpro and these 2 themes overtook eachother many times in the voting, until finally I had to close the poll on march 30th when TouchPro won with a difference of just one vote! This means that TouchPro will be released on drupal.org as a contrib theme, and the other 2 themes will go on sale on sooperthemes.com. Follow development of TouchPro here: http://drupal.org/project/touchpro

UC Affiliate v2 Setup Guide - Creating the SooperFriends premium drupal themes affiliate program

I've just finished setting up my drupal-powered drupal themes affiliate program and I figured I should share how I did it, since I think my set-up is better than what's done in the original documentation, for some people. This set-up guide also highlights some problems in the module.

1. Download modules

As the affiliate modules' scope is limited to the actual affiliate center, we need some extra modules for signing up new members and having existing users apply for the program:

You have to download and enable the above modules.

2. Create the affiliate info/sign-up page

You need to create a webpage to advertise the affiliate program and point people to the sign-up pages. As an example, take a look at my Premium Drupal theme affiliate program called SooperFriends. For now just create a simple page stating the terms of your program and the payouts your affiliates will receive. Creating the sign-up buttons is covered in the next steps.

3. Adding affiliate related fields to the user profile

Pages

Subscribe to RSS - planet