[Drupal] About Omega - An HTML5, responsive, grid960 Drupal theme
BY jiby.john
5 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. Open Source Web Development Drupal Blogging Free Software Drupalgive Leave a reply Your email address will not be published. Required fields are marked * Sean (not verified) access_time 16 Nov 2019 - 03:58 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 16 Nov 2019 - 03:58 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 16 Nov 2019 - 03:58 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. Web Development Drupal SEO Drupal Planet Leave a reply Your email address will not be published. Required fields are marked * Anonymous (not verified) access_time 16 Nov 2019 - 03:58 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 16 Nov 2019 - 03:58 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 16 Nov 2019 - 03:58 This is definitely a good guide. Thanks for this. wellyson access_time 16 Nov 2019 - 03:58 This is really nice and helpful. Add new comment

on 07th January 2008 / by webmaster
We have volunteered to take up the maintenance of a very useful Drupal module - Search404. As of today we are the official maintainers of this very useful Drupal module. We know that this is going to be a challenge for us, being a young company and with a young team. But we do feel that it is our responsibility to give back to the Drupal community at least some part of what it has given us. Open Source Web Development Drupal Leave a reply Your email address will not be published. Required fields are marked * ian douglas (not verified) access_time 16 Nov 2019 - 03:58 I notice your updates on the Drupal modules page has some patch files, but they are patches for an older version of the 5.x branch of search404. Do you have any expectation on when a version for Drupal 6 will be ready? webmaster access_time 16 Nov 2019 - 03:58 In reply to when will search404 for drupal 6 be ready? by ian douglas (not verified) Hi Ian, We are currently working on moving Search404 to Drupal 6. The port has already been done and we should have a release up on drupal.org by tomorrow or worst case by monday. Cheers Anoop John Team Zyxware Dejan (not verified) access_time 16 Nov 2019 - 03:58 In reply to when will search404 for drupal 6 be ready? by ian douglas (not verified) I think that's been up for a while... did you check the download page? 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.