The combination of Omega, Alpha and our new 960 robots base theme means that there are a pile ton of CSS files included in our pages now. These CSS files provide the foundation for some of the coolest features in Omega like the mobile first approach and the ability to provide a responsive design. Lets take a look at
- The various CSS files included by alpha, Omega, and our subtheme and how they work together
- Do a quick expirement to demonstrate the various CSS files associated with Omega's media queries
- Talk abou the HTML output by the Omega theme and how it's structured.
So put on your goggles beacuse we're about dive deep into the land of responsive CSS.
Additional resources
You can download the final Ninesixty Robots Omega theme as a regular project from Drupal.org.
In this lesson we will be covering how take all the settings we have made for our 960 robots subtheme and export it into code. We will cover multiple ways of doing this and why this is a good practice to get into when working with different environements and/or other team members. We also cover adding features to the .info file from our exisiting theme into our new Omega sub-theme. So basically, this lesson will cover
- Exporting your theme
- Why export?
- 3 Different methods of export
- More theme conversion
Once the lesson is complete you will become an exporting guru and impress your friends at just about any gathering with your Omega Exporting amesomeness.
Additional resources
You can download the final Ninesixty Robots Omega theme as a regular project from Drupal.org.
Besides working with sections, zones, regions, and responzive settings, Omega provides lots of other features that make using it a good choice for your theme. Omega also offers:
- Ability to enable/disable script libraries
- Ability to enable/disable theme style sheets
- Ability to enable/disable core/contrib stylesheets
- Typical theme settings
Getting to know these settings certianly helps set the look and fell as well as the capabilties of your theme. With the ability to do things like adding the Equal heights library and enabling it across your zones is just a handy feature and it's free with Omega.
Because Omega doesn't make assumptions about your layout, it comes with lots of options and plenty of regions to work with. This is great but also has some down falls espcially if you are converting an exisiting theme that just doesn't need as many regions and zones. Along with removing regions you may need to add some as well. In this lesson we will demonstrate:
- Adding a region
- Removing regions
- Placing content into these regions
- Cleaning up the .info file
Once this is complete, we now have our converted theme setup just as it was before when it comes to the grid system and some blocks in place to make sure the layout is looking good.
NOTE: Kyle initially sets a position, but not the weight, of the footer_bottom region in this video, and then you'll see that he catches the mistake, and fixes it to have a weight of 3.
Converting an exisiting theme to Omega takes time and some planning, but Omega gives us plenty of options of moving things around the page all without touching a piece of code. When working with a grid layout we use Omega to set all of our content to span the proper columns all while moving our content from zone to zone so it is placed properly on the page. We will cover:
- Moving content from zone to zone
- Choosing proper zone column widths
- Splitting column amounts to create right and left columns
Once all of this is complete we are just a few steps away from getting into some CSS and really making our theme come together as an Omega sub-theme.
Additional notes:
If you want to touch code, you can edit the .info file as such (for the first part, moving branding zone):
settings[alpha_region_branding_zone] = 'header'
...
settings[alpha_region_branding_weight] = '3'
...
settings[alpha_region_header_first_weight] = '1'
...
settings[alpha_region_header_second_weight] = '2'
Responsive design is more than a just a buzzword these days but a standard practice of good web shops when building out a site. Omega provides a responsive design out of the box and gives lots of options to layout your content in the proper places and the ability to work with the break-points all with a User Interface. In this lesson we will cover:
- Omega responsive options
- Column settings for your grid layout
- Omega responsive layout settings
- Device viewports and media queries
We end the lesson getting our new sub-theme ready to handle our 960 robots theme and the 16 column setup we designed it with.
If you prefer working with code, instead of the web UI, you may configure your theme as follows to change your column settings from 12 grid columns to 16 in your theme's .info file:
Find and replace all the instances of:
_columns] = '12'
with:
_columns] = '16'
There may still be additional regions that also need to be set which weren't the full width. You can edit other regions as needed, such as:
_region_user_first_columns] = '8'
change to:
_region_user_first_columns] = '12'
In this lesson we're going to get started with Omega by getting the base theme and creating our new sub-theme. We're going to be doing the following tasks:
- Enable Omega and Omega Tools
- Use Omega Tools to create our sub-theme
- Enable the new theme
- Review the files of the new theme
Omega offers a simple, yet nice set, of debugging tools that assist you when it comes to laying your site out in a 960 grid. Grid layous consist of columns that your content can span accross and part of these debuggung tools is the ability to turn on and off a visual indication of the particular column layout you are using. Omega also gives you the ability to toggle on and off a visual indication of all the regions availabile in your theme. Inside the theme settings you also have the ability to turn these features on or off all together or by role. So in this lesson we will cover:
- Omega debugging tools
- Grid and region visual indicators
- Omega debugging settings
We will also show you how these tools can cause some frustration when it comes to testing the layout of your site espcially in areas that don't have content yet available.
Before we can really dive in to learning Omega we need to do a couple of basic setup tasks. Mostly, we need a Drupal 7 site that has some content for us to look at while we are theming. In this lesson we're going to:
- Generate some content with devel generate module
- Install the 960 Robots theme from drupal.org
- Place some blocks in to the regions provided by the 960 Robots theme and talk a bit about what it gives us so that we can begin to understand how we might convert it to an Omega sub-theme
Under the Downloads tab, there is a copy of the final database and the files directory for this Demo site.
Additional resources
Omega is a Drupal base theme that provides you with a really nice responsive framework. Omega also provides a lot of configuration options that are accessed through the UI rather than code. So, you can adjust the display settings and know that the underlying framework will be intact.
In this series, we're going to be demonstrating the Omega module by converting an existing Drupal theme into an Omega sub-theme. We'll talk about the HTML and CSS that's involved, and how they work together. We'll be working with theme functions and looking at the Omega best practices around how to break out your theme functions, where to put those, and how to use them.
Additional resources
In this lesson we're going to take a look at the Omega theme, cover some basic terminology around it, and discuss the advantages and challenges of using it. Specifically this lesson will cover:
- Omega features
- Helper modules
- Where to find documentation
- Omega terminology
Additional resources
- Omega theme
- Omega Tools module
- Delta module
- Omega Handbook
In this lesson, we pull our work together by creating a new view on the site that uses the work we've done so far with exposing our data, and creating our handlers. Once we create the view, we'll export it and add it to our module as a default view.
Though Panels comes with several built-in layouts for you to choose from, you’ll find that these don’t always suit your needs. Fortunately, there’s also a layout designer that anyone can use to create a new layout with Panels. In this lesson you will learn how to use the Panels layout designer for rapid prototyping.
Additional resources
Drupal site builders have long wanted to rearrange the display of each piece of content. The page manager module provides us with a default node view context we can use to accomplish just this. In this lesson you will learn how to break an article into two columns.
In this lesson Joe demonstrates how to extend the default views sort handler and create a new one for use on our table that will allow us to sort the data returned from a query with the rows that belong to the currently logged in user at the top of the list. This lesson builds on information from the previous couple of lessons regarding implementing views handlers and general coding for views best practices.
In this lesson Joe takes a look at writing a custom filter handler by building on the knowledge gained about writing handlers from the previous lessons. Filter handlers control how data in a table is treated when being used in the context of a views filter including things like how the data is represented, what the form for filtering looks like and more.
In our original Databasics module, we had some access control around who could see the tab we are providing on the user page. Now that we have switched that tab to being a view, we need to still add that access control back. In this lesson, we will work with a new feature of Views: plugins. We will create an access plugin that gives us the freedom to add our own custom access control, along with settings to give our users a choice about what access they'd like to use.
In this video we'll look at adding yet another field handler, but in this instance we will be adding a Views field that does not directly map to an actual field in the database. Instead we will be creating our own variation on some data and adding it as a field that can be used in our views — a field that shows the percentage of page views as a black bar graph.
Now that you’ve manually created a new variant for your front page, this lesson will teach you a much faster way to duplicate an existing variant. This technique is useful if your variants are very similar to one another.
Panels and the Page manager module allow you to create different versions of the same page (called variants) under different circumstances. In this lesson you will learn how to build two different versions of the content on your home page. People who are logged in to your site will see a different home page than people who are not.