Drupal Interview questions : Omega Responsive theme tutorial

How to create custom responsive theme using omega as base theme in drupal7.

Today responsive layout for the website is very important to target all device users using web standards. Below, i have mentioned basic steps to create custom responsive theme for your drupal website. In next article we’ll see how we can make it more user friendly and interactive using Drupal API, PHP, CSS3 and Jquery.

Steps to create basic custom layout using Omega.

• Step 1 : Download “Omega” theme from drupal.org
  
• Step 2 : Create your sub-theme using omega starterkit
  
• Step 3 :Basic Customization using css, zone, regions. Later on we’ll see custom layout using templates, slideshow and jquery
  

Step1: Download Omega theme for drupal 7 from here: http://drupal.org/project/omega – Here, Also
you can find more information about theme layout and useful tools.

Now enable and set “Omega” as default theme using drupal admin panel (Path : /admin/appearance)

Below its shown how it should look like at first point.

Now if you disable grid you will see layout like this. You can disable grid using “grid” icon on screen.

Now if you disable block you’ll see layout like this. You can disable block using “block” icon on screen.

Step 2 : Create your sub-theme using omega starterkit.

Copy omgea-html5 folder from sites/all/themes/omega/starterkits/omega-html5 if  you want to use HTML5 configuration Or You can use Omgega-xhtml from same folder to configure site as per xhtml standards.

Here we are using omega-html5 for reference but you can follow same steps for xhtml standards.

Paste the “omgea-html5” folder to sites/all/themes/ folder and rename it to “yoursubthemename”.

For example we are using theme name “drupal7withomega”. I renamed this folder to “drupal7withomega”.

Change screenshot.png inside the folder relate to subtheme name so you can easily initialize inside drupal configuration.

Here is the example how you can easily chess theme using screenshot image

Rename .info file with new sub-theme name which is drupal7withomega in our case. So new info file is drupal7withomega.info. Open info file using any editor and delete two lines shown here.
Also, change name to drupal7withomegaand you can change description for file as well.

Here is the example :

In same folder you can see “css” folder. In css folder we have 4 alpha layout css which starts with yourthemename prefix. Replace “ypurthemename” with “drupal7withomega”.

We are done with basic changes and other cutsomization we’ll see in next step.
Step 3 :Basic Customization using css, zone, regions.

Go to drupal admin panel and select appearance screen. you can see your subtheme already listed in available themes.
Here you can see drupal7withomega in admin panel.

Enable and Set “drupal7withomega” as default theme.

Now we’ll do Basic Customization to make it user friendly and interactive:

First we’ll rearrange the zone and region and then we’ll update css3 to change layout

Below are the steps for Changes which I’ve made with my subtheme layout. you can update as per your requirements.

First we go into the drupal7withomega settings using drupal admin panel and using path : /admin/appearance/settings/drupal7withomega.
You can see first is grid settings, we can use same default settings for this section.

Now you can see Zone and Region configuration. We’ll update region and zone as per our requiremnet.
I’ve modified “Header Section” to make layout compitible.

you can see under header section, User Zone and regions

I have disabled userbarsecond and update width 100% for the userbarfirst

Here is the Example

We can disable grid and debugging blocks using debugging settings on our sub-theme settings page. Below, image shows the settings for grid and debugging blocks.

For basic layout we can use default setting for Toggle library and style and advance elements.

Now you can edit and update global.css as per your requirements.

Here is the demo responsive layout. I’ve created for “drupal7withomega subtheme”

Brief review for the changes I have made for this demo responsive layout

• Create subtheme folder and enables through admin pannel
• Copy omega-html5 folder from omega starter kit. Rename folder to “drupal7withomega”. Rename .info to “drupal7withomega.info”. Delete two lines from info file.
• Change screenshot.png to recognize theme in admin panel.
• Under css folder for subtheme we have four alpha-default css. Replace “Yourtheme” to “drupal7withomega”.
• Enable drupal7withomega theme from drupal admin UI. and Set s default

Now update Settings for subtheme from drupal admin

• I’ve updated user zone by removing region-user-second and update region-user-first for 24 columns.
• Also removed sidebar first and sidebar second from content zone. And update content region to 24 columns.
• Disabled debugging blocks and grids

Create Content and blocks to show up in Regions

• Here I’ve added horizontal user login form to the region-user-first. In next post i’ll show you how to create horizontal login form using css and jquery.
• Disabled default logo and added custom logo
• Created Slider content and added to views_slideshow_block and enabled into content region. I’ll show you how you can use views slideshow to cretae interactive slider to your website within few minutes.
• Created footer block and added content to that block and enabled to footer zone

Here is the exampple “blocks” looklike on admin panel.

Add custom style to global.css to make responsive layout user friendly using firebug

Here is the css i’ve updated to make layout interactive using firebug

View demo page to test user location display in map: