Hello I am from Nepal and we have very few drupal developers (module/theme) here. I usually am focused in drupal module developement so had average knowledge of drupal theme development But recently I threw myself a challenge to work in drupal theming to test my skills. I decided to do everything i.e. from PSD to HTML template slicing to drupal theme (template) coding everything from scratch. So that I can have thorough understanding of the drupal theme engine.

I always wanted to make use of CSS framework so I chosed to use 960 grid for PSD theme and the layout I choosed to make is for newspaper.

Later on, I sliced PSD to HTML.

I would rate it intermediate.

Problems faced:
I started to change HTML to drupal compatible theme. The first problem I faced was to choose a good theme which I can use as base. I picked up with “bartik” theme that comes with drupal fresh installation. I copied “bartik” themes folder to sites/default/themes. There inside I renamed the theme name to “basic”. I renamed .info file to reflect the it so the info file now becomes “basic.info”. Inside basic.info I removed regions that I didn't wanted to use and added my own custom regions as needed. But this theme was not detected by the drupal and always gave me an error “not compatible with drupal7”. I didn't know what caused the error. After googling for few errors, I came to know that there are few must have regions in drupal theme.

regions[content] = Content  
regions[help] = Help  
regions[page_top] = Page top  
regions[page_bottom] = Page bottom

I removed the page_top and page_bottom regions as they didn't make any sense to me. As soon as I added them back to the .info file drupal recognized my theme. I added few stylesheet files and then few javascripts.

Customizing the template.php for handling the views template.

I had used many views during the site development. So I copied the appropriate view template file from sites/default/modules/views/theme to my template's root directory and then added then made changes to the field title 'views-view-field–title.tpl.php' because I wanted to wrap title field with <h2></h2> tag.

I had a custom page–front.tpl.php file as this had different regions then the page.tpl.php and node.tpl.php.

Changes for slideshow To keep it simple. I directly hardcoded the slideshow html markup in the page.tpl.php and page–front.tpl.php file and then initialized the script from the template.php by adding it to template.php

function basic_preprocess_html(&$variables) {
    if (!empty($variables['page']['footer'])) {  
        $variables['classes_array'][] = 'footer';  
    }

    if (!empty($variables['page']['video_news'])) {  
        $variables['classes_array'][] = 'video_news';  
    }

    if (!empty($page['video_news_boxed_left']) ||  
        !empty($page['video_news_boxed_right']) ||  
        !empty($page['video_news_boxed_list_items'])) {  
        $variables['classes_array'][] = 'video_news_boxed';  
    }

    // Added myself these lines
    drupal_add_js(path_to_theme() . '/js/slides.min.jquery.js');
    drupal_add_js(path_to_theme() . '/js/slides-init.js');
}

directly added the last two lines myself. This made the slideshow functional.
I created many blocks from views. I assigned them directly to regions.

Knowledge gained drupal theme development :
So this experience of drupal theme development has sharpened my knowledge of drupal's internal theme engine. Still there are much more to learn in drupal theme development and module development.

I came from the past experience of drupal module development and I found most of them quite related from file naming conventions to internal theme parser and module parsers. Drupal make use of the design patterns called “decorator pattern” for module and theme development, which primarily, focuses on the changing of output without altering the base codes. So, I find it very useful to study the drupal's internal core architecture to understand drupal thoroughly.

Summary : I have skipped many things here to make this article short. If you think you need to have details on some points or You think I might have missed the important part please let me know. Thanks for your valuable time.

Currently the theme developed is not mobile friendly and has many design flaws. I have to re-work on it and optimize it, make it mobile friendly. I have skipped those for the next session. When I have more time I will play with responsive designs with this “basic” theme and have guidance from my Sr. Drupal Theme Developer colleague and have his words on my drupal theme development skills. If you have any questions please let them coming.