Brief Overview
This showcase is different from the others you usually see on Drupal showcase. Since the project is to create a generic theme that provide a concept design, high flexibility and easy customization ability to users; not for a specific business organization. We strive for a general method of building a site based on the predefined concept.
Inspired by Pinterest, project’s objective is building a theme that has grid layout and responsive design used for heavy-content sites. The theme has to meet high demands of site performance and multiple content type displaying. And last but not least, it must be a clean & clear design.
First of all, most of other CMSs (specifically Wordpress & Joomla) already have various theme versions of Pinterest concept. While in Drupal due to limited number of professional theme providers, this project can be considered as one of those first initiatives bringing Pinterest layout to Drupal.
And how Drupal helps us in the project development? Absolutely it does, and does so well. Thanks to Drupal high flexibility, we are confident that our outcome would be a multi-purposed theme that users can tune in and customize as they like.
Furthermore, vast amount of Drupal third party modules make it easier for us and users to implement our ideas. For us that is a theme serving multi purpose with capability of display heavy content at optimized speed. For users it could be a scalable site, maybe some small blog to start with and then a news site when number of daily visitors reaches thousands.
The objective of the project is to create a theme with creative grid layout, optimized speed performance, good usability, mobile-ready. Moreover, apart from our existing themes, this one has to be different from the rest so we can maintain the diversity and fulfill our collection.
Although the project team is small, we use Scrum to take advantage of its fast development cycle and strong adaptability to change.
In order to satisfy the requirements, we came up with a set of features that are necessary to implement:
- Infinite scroll: improve usability, lessen interruption from clicking “Next page”
- Lazy loading: optimize performance, also support for infinite scroll
- Smart grid layout: depends on the defined content (each has different display dimension), providing best layout possible to keep the appearance well-organized
- Various content appearance: size, color, badge, content types...
- Responsive design: a must in nowadays web design since the number of users using mobile & tablets has increased rapidly
- Social media feed: of course it’s essential
- User interaction: comment, post articles... are common features
Challenges
There was a number of challenges in front of us to fulfill goals of the project. One of them was to create an innovative front page layout like Pinterest with full of customization for each node teaser (background, size, badge). Moreover, implementing infinite scroll was another obstacle. This feature would be used in different pages such as homepage and other categories pages. Therefore, it must be implemented in a reusable approach. Finally, pop-up content and showcase with different images were challenging as well.
Sites made with TB Wall
Below are some of our customers' sites made with TB Wall:
- http://www.seanreiser.com by Sean Reiser
- http://www.dosavannah.com/
- http://www.mediakraut.de/
- http://gffis.org/
- http://estiluz.com/
Technical specifications
- Nucleus (base theme): This is a solid and flexible Drupal base theme which is developed by us ThemeBrain team. This base theme provides a smart grid system, flexible typography, advanced block styling, and other useful theming features. These features save us ton of time to develop a new sub-theme for TB Wall.
- Views: one of the most powerful module in Drupal 7 community which provides ton of features to create dynamic and flexible pages and blocks.
- Views Infinite Scroll: provides a pluggable pagers that enables view infinite scrolling, autopaging or endless pages. Combining this module with views page display will automatically load another page whenever the user reaches bottom of the page.
- jQuery Masonry (JS libraries): is a JavaScript grid layout. It works by placing elements in optimal position based on available vertical space.
- Superfish: One of the most popular modules which integrates jQuery plugin with Drupal menu to provide a user-friendly and stable drop-down menu with full of options to adjust animation, themes and other useful features.
- Colorbox: a nice module which provide a light-weight customizable plugin for jQuery to show content in an overlay.
- Gallery Formatter: This is a helpful module. It provides a CCK formatter for images field, which will turn any image field into a jQuery Gallery.
- Taxonomy Menu: provide a useful feature to transform any of your taxonomy vocabularies into existing menus easily.
3 contributed modules was made back into the Drupal community:
As usual, our project team for creating a theme is lean, it consists of 1 css, 1 developer, 1 QA/QC (she was in charge of both job), 1 designer.
Time line: 6 weeks (Please find the diagram below)
Comments
Your feedback & comments are greatly appreciated
Leave your questions/opinion below, we'll answer them all asap! :)
Well-- how can we get this
Well-- how can we get this theme :) ?
Dear 1kenthomas, You can
Dear 1kenthomas,
You can visit this link: http://themebrain.com/drupal-theme/tb-wall
Also for our other free & premium themes: http://themebrain.com/drupal-themes
We have a program that if you are building a website for non-profit/charity organizations, shoot us an email at help@themebrain.com; we can offer some discount or even give-aways.
Hiding the Create New Account option on user breadcrumb
Hello,
This theme is hiding the create new account breadcrumb on the user option, one has to manually go to user/register to see that option. How can that be disabled?
Thanks.
tb wall images can not be seen
It is very beautiful, the problem is that only works with the old version of Drupal. I bought this theme but with the latest version of Drupal, the images no longer see, I played with it a few days. But without updates it is not useful. Or have to pay for each update? The license is only for 6 months.
When I tried to download the update: Oops! You are unauthorized to download TB Wall.
All licenses, purchased by your email (xxxx@xxxx.com) and valid to download the theme, have been expired.
See our Support Policy to find more information.
So pay attention when buying, because they are not constant updates. So when you buy if you need to update your drupal core for security updates, the risk is to no longer work
www.coozila.com
Using TB Wall per content type
Hi, Love your theme. Would it be possible to use something like Content Theme so we can just use TB Wall for sections of our site e.g. the blog section and upcoming events / news? We want to keep our own custom theme for the rest of the site and ideally just use TB Wall's pinboard in our main content area for some sections.