User Interface and Theme

Theming

Drupal 8 Twig vs PHP template and twig basics

Drupal 8 uses Twig framework instead of PHPTemplate. This means that now, instead of the usual *.tpl.php files we use the *.html.twig files.

Twig is a PHP-based compiled templating language. When your web page renders, the Twig engine takes the template and converts it into a 'compiled' PHP template which it stores in a protected directory in sites/default/files/php/twig. The compilation is done once. Template files are cached for reuse and are recompiled on clearing the Twig cache.

Drupal Single (one) page / Pageless Design

Pageless design has come into existence is the new standard in building websites. So why would anyone want to go pageless or Single page design?. Its not only affordable but also leads to higher conversion rates. Users are interested with action oriented buttons they see on single page design, the loading may be slow but once loaded it is high performance, the reduces the bounce rates. Pageless design will look great on all devices like tablet, mobile, PC etc. This is the need of the hour.

How to display Book Navigation or Book Tree as Menu

For one of the sites, I had created a huge book with lot of pages , child pages. Now I wanted to display that as menu. It was really tough, as I did not find any writeup for the same.  I found the solution and thought of sharing with my readers. I wanted to place the Top page of the book as one of the menu in the Main menu of my drupal Site. And on mouse over all child pages should be displayed. I search in the basic configuration and did not find any way to do this. This is how to proceed.

Drupal Panels - Introduction and Theming with Example

I have collected few videos which will help you get started with Panels module, which is a very powerful way to organize your website. Without panels you would have to write lot of PHP code, now we can just use a GUI to make regions and blocks and place content whichever way we like. Checkout the video below for Introduction to Panels

Drupal display suite module - Videos - Screencasts

I was really excited when I learnt about Display suite module and all the great things it can do. It took me couple of hours to get the full hang of the module , but its worth every second spent. See the videos below and You will also get quickly introduced and will be able to do lot of advanced stuff with the module. Display Suite allows you to take full control over how your content is displayed using a drag and drop interface. Arrange your nodes, views, comments, user data etc. the way you want without having to work your way through dozens of template files. A predefined list of layouts (D7 only) is available for even more drag and drop fun! By defining custom view modes (build modes in D6), you can define how one piece of content should be displayed in different places such as teaser lists, search results, the full node, views etc.

Create Drupal 7 theme from HTML - 5 part video series

Following is a 5 part video series for beginners, covers how to create a drupal 7 theme from HTML. This series will show you how to setup a custom theme in drupal 7 from an HTML template.

Video 1 shows you the thought process behind the converting the theme to Drupal 7 (What do I need to create for the page? What regions? etc) , the modules / tools needed and begins preparing the site for theming.

Video 2 goes through setting up image presets and creating dummy articles for us to use while setting up the site and creating the theme around.

Drupal 7 theme Video Tutorials

Adding some more great videos Series on this page, which will help you learn about Drupal theme, Following vidoes are sure to get you started with drupal themeing, Not only that you will also learn about what tools to use when making drupal themes.

Learn Drupal: Theme Makeover - Modifying an Existing Theme

 

See Below for more videos

Learn Drupal Theming without a book - Basic to Advanced Videos

Some videos showing how to do theming for Drupal 7, from basics to quite advanced stuff. Contents are as below

Advanced theming in drupal - Video

Check this video which gives good overview of template.php and the powerful things you can do with that. This Advanced Theming in Drupal 7 series picks up where the Theming Basics with Drupal 7 left off. This video gives a high-level overview of the the template.php file, which is where a lot of the theming preprocess functions, form alters and other PHP logic within each theme is located. This series will cover the new page rendering system, and shows you the process of iterating through the theming process with the use of various debugging statements and the theme developer tool.

What to look for in a Drupal Theme ? - Theme Features

What to look for in a Drupal theme ? Checkout some of they key features and which themes offer those.

Pages

Subscribe to RSS - User Interface and Theme