[Drupal] About Omega - An HTML5, responsive, grid960 Drupal theme
BY jiby.john
6 years ago
0 comments comment

If you are a web developer then in some point of time some client may have asked you to develop sites one for desktop and one for mobile, (probably in iPhone) with almost same contents. If you meet that client again after 2 or 3 years he will ask you to develop more than 5 sites to view it in different popular devices. I don't think it is a good solution to have bespoke designs for each device, since our device landscape is rapidly progressing. So we developers should start thinking radically to meet with this issue.

Its high time to move toward a future friendly web. A future web where nobody is really not interested in window width,resolution, devices portrait and landscape modes.Yes i am talking about Responsive web design.

Since I am now exclusively dealing with Drupal, my search for a responsive theme ended at Omega.Responsiveness was the main feature that attracted me to omega, but later I found that Omega had got some really cool staff beyond responsiveness, that make Drupal theming more easy. As the theme contributor Jake Strawn says Omega is is a highly configurable HTML5/960 grid base theme that is 100% configurable.If you are the one who always searches for the shortest path to do somthing with out compromising to quality, then omega is the best choice.It helps you to write less and do more.

Theming using Omega is different from normal drupal theming.The main difference is that it contains Section, Zones, Regions instead of only 'Regions' that make it highly configurable.Omega is more powerfull when you use following modules along with it Omega Tools, Delta and Context.

Configuring Omega.

Lets assume you had installed and enabled above mentioned modules.Then Install and enable Omega theme, ohoo I forgot to say Omega is a base theme, so never set it as your default theme.Instead create a subtheme of Omega. The Omega Tools module will help you to create a sub theme of Omega. Omega is coming with two starterkits. Select your required one, finish your setup and download or install the subtheme directly.Now make this subtheme as your default theme.

The most important feature of Omega theme is its large number of setting to customize it.So lets look into the Settings of Omega theme.

In the Grid settings we can choose between 960gs or fluid system. Also we have the right to enable or disable responsive feature of the theme. If you had enabled the responsive feature, then Omega gives you 3 layouts ie, Narrow, Normal, Wide.This layouts help to make omega responsive.There are corresponding css files which loads for each layout.You can find the default media queries for each layout which determines when to load the css files.The basic css loading format is like this

0px to 740px wide - global.css 
	741px to 979px wide - global.css + default.css + narrow.css 
	980px to 1219px wide - global.css + default.css + normal.css
1220px and wider - global.css + default.css + wide.css

One more thing I forgot to say Omega is developed according to the “Mobile first approach”. Thats why global.css is loaded in all layouts.

The Zone and Region configuration helps us customize the layout of the theme.Almost everything in our theme is configurable through this setting.

As I already told you Omega has got Sections, Zones, Regions. Sections contains zones and zones contains regions

There are 3 sections in Omega theme; Header, Content, Footer.

shows the default zones of Omega theme.It also possible to add our own zones and regions to Omega.It is done with the help of the .info file. Just add the following code to anywhere in info file and flush the cache and see the zones loaded to settings pages.Same with Regions.

zones[zone_name] = 'Zone Name' 
regions[region_name] = 'Region Name'

You can add or remove any number of zones to any section.Same with Regions; ie any number of regions can be added to zones. Then the question may be how you can style each zone and region; the answer is also simple, with the help of .tpl files.Suppose we want to style the User zone in header section, then just create zone—user.tpl.php in your templates folder. And add your styles, the contents in that zone is available in the variable $content. Same with Regions just replace zone with region, interesting isn't it?

What to do if you need some regions disabled or added in some specific pages like Home page, contact page etc.Here comes the use of Delta and Context Module.

We can add template in the Delta module and configure it.The configuration helps to customize our Omega settings to that context only.So you can remove or add regions or zones in this template that will reflect in that template only. Then you have to use the Context module where to use this template based on the context condition. Delta will be available in the reaction section of context. By this way we can have customized design in different pages with little effort.Sounds great?

So in my experience Omega is Fluid, Responsive and Highly Configurable.One thing you have to remember is that Omega only supplies the base requirements for the design to be Responsive and Fluid.It will not be fully Responsive and Fluid until you don't know how to make fluid grids and flexible images in your custom CSS. Anyway Omega is the best base theme choice for the future-oriented web design.



on 01st January 2008 / by webmaster
We have added a few new modules to our site recently. Drupal Technical StumbleThis Leave a reply Your email address will not be published. Required fields are marked * Sean (not verified) access_time 24 May 2020 - 03:56 Hi there, I uploaded the files, enabled the modules to use SU, and now I see the link, but there is no icon... How can I fix this? Thanks, Sean webmaster access_time 24 May 2020 - 03:56 In reply to Icon doesn't show by Sean (not verified) What do you see when you view the source? Search for stumblethis_button and you should be able to see the code for the image and the URL. Then you should be able to troubleshoot from there. Juicy Couture Addict (not verified) access_time 24 May 2020 - 03:56 thanks for the post. would love to hear more of you. by the way, drupal's really popular nowadays as it has easy and fast features. you agree with me? thanks. Add new comment

on 16th January 2008 / by webmaster
Most webmasters do not realize this, but a lot of the content on lot of websites can be accessed from multiple URLs. A simple example would be where www.example.com and example.com leads to the same page. This is a fatal mistake in Search Engine Optimization and search engines penalize you for duplicate content. The correct configuration would be where the above two urls will lead you to the same page but example.com will redirect you to www.example.com with a 301 (Moved permanently) status which will not result in search engines penalizing the page. It is very easy to configure 301 redirects using Apache .htaccess file and the process is the same for a Drupal installation also. Drupal Technical Apache htaccess SEO Leave a reply Your email address will not be published. Required fields are marked * Anonymous (not verified) access_time 24 May 2020 - 03:56 Hello. I'm trying to make example.com show as www.example.com, and I'm running into difficulties. I'm on Apache 2.0 and using the following lines in my httpd.conf file: RewriteEngine on RewriteCond %{HTTP_HOST} ^xxxxxxxxxx\.com$ [NC] RewriteRule ^(.*)$ http://www.xxxxxxxxxx.com/$1 [L,R=301] When I go to http://xxxxxxxxxx.com, I get http://www.xxxxxxxxxx.com (as expected). However, when I go to http://xxxxxxxxxx.com/node/1 (it's a Drupal site), I get a 404 thrown and the URL changes to xxxxxxxxxx.com/var/www/drupal/node/1. Same thing with www.xxxxxxxxxx.com/node/1. Any suggestions? I want to run without Drupal's .htaccess file (instead incorporating these calls into my httpd.conf file). webmaster access_time 24 May 2020 - 03:56 In reply to Rewrite including filesystem path by Anonymous (not verified) I think the problem is with the base path which results in the redirection to /var/www/ part. The best approach I would think is to start with drupal htaccess and then strip out parts and move to httpd SNVC (not verified) access_time 24 May 2020 - 03:56 This is definitely a good guide. Thanks for this. wellyson access_time 24 May 2020 - 03:56 This is really nice and helpful. Add new comment

on 08th February 2008 / by webmaster
Attachment Size slashdotit.tar.gz 173.55 KB Similar to the StumbleThis module that we had created earlier we have created another bookmarking Drupal Technical Slashdotit Leave a reply Your email address will not be published. Required fields are marked * Shlomi Fish (not verified) access_time 24 May 2020 - 03:56 Hi! I'm interested in this module, but Drupal 6.2 complains that it's incompatible with it. Can you please update it or tell me how? Regards, Shlomi Fish shlomifish.org webmaster access_time 24 May 2020 - 03:56 In reply to Can you update it for Drupal-6.x? by Shlomi Fish (not verified) Sure we are working on this currently and will post an update soon. Also we will post this module on www.drupal.org as well Cheers Anoop John Team Zyxware Anonymous (not verified) access_time 24 May 2020 - 03:56 Hello! Nice Article very interesting, thanks Add new comment
Leave a reply
Your email address will not be published. Required fields are marked *

Filtered HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type='1 A I'> <li> <dl> <dt> <dd> <h2 id='jump-*'> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
The content of this field is kept private and will not be shown publicly.
CAPTCHA This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.