In this lesson we will cover using Lightbox2 and Colorbox with content in your site. Taking a lightbox beyond just enlarging images, we will demonstrate displaying nodes and using Views with a lightbox.
In this lesson we will use both the Lightbox2 and Colorbox modules in actual real world uses. We will demonstrate how to use each module or helper modules to use with images, create slideshows and galleries.
In this lesson, we will take a look at the Colorbox module and its configuration page. We also will discuss some other helper modules that work great with Colorbox. Later in the series, we will demonstrate some uses of Colorbox and techniques to make the most of it.
Additional resources
Modules Needed
External
In this lesson we will cover the configuration pages for the Lightbox2 module. This module offers a ton of options and the configuration page can be daunting. Later in the series, as we get into using Lightbox2, we will demonstrate how to apply some of these configurations.
Additional resources
Modules Needed
A Lightbox brings content to the user's attention.
To decide which Lightbox module you should use for your Drupal project, think about what you will use it for. Do you need to handle images and video? HTML? Integration with other modules? Various browsers?
Once you choose one to meet your needs, we’ll show you how to go about using it.
Additional resources
In this lesson, we’ll take a look at how to modify the HTML output from Views, explore some of the default templates that Views provides, and learn about the various permutations of names we can give our template files to override output for everything from a large set of Views to a single field on a single View. We’ll also discuss the difference between displays, styles, rows, and fields when it comes to theming a View.
Area handlers are used in the header, footer and empty text areas when creating a View. In this lesson, we’ll walk through creating our own area handler that can be placed in the footer to provide a summary of all the rows in our View.
So, we now have all of our CSS and HTML in our sub-theme. In this lesson, we've moved over the remaining files that our theme will need, like the images folder, and our node template files. The last step to finish this theme up, is to modify our CSS to take advantage of the responsive framework we already have in place. To do that we'll:
- Review the theme files
- Look at our default CSS file
- See the responsive changes
We're in the home stretch with our theme, so let's make our CSS responsive and wrap things up.
You can download the final Ninesixty Robots Omega theme as a regular project from Drupal.org.
Additional resources
You can download the final Ninesixty Robots Omega theme as a regular project from Drupal.org.
In this lesson we have fast-forwarded some by completing the conversion of our old page.tpl.php into the new Omage theme. We'll take a look at the work we've done to get to this point, and then deal with what looks like could be a tricky HTML wrapper problem by creating a new zone for our theme, and configuring it to meet our needs. So, we'll:
- Review templates and variables
- Add a new zone to our theme
- Configure our regions with the new zone
This is where we can really see how to blend the usefulness of code and configuration in Omega, to accomplish our task in a very simple way.
Additional resources
You can download the final Ninesixty Robots Omega theme as a regular project from Drupal.org.
We have a custom template file that has the HTML that we want, but not all of variables are coming through yet, and instead we are getting "Undefined variable" errors. In this lesson we're going to take care of that, as well as making sure our custom variables from the original 960 Robots get moved over as well. Omega has its own best practices around adding preprocess and process functions to a sub-theme, so we'll walk through what Omega expects, and how to use the files and examples that Omega is providing for us. So we're going to:
- Look at the Omega best practices
- Create a process include file
- Add our region variables
- Add our custom variable from 960 Robots
Additional resources
You can download the final Ninesixty Robots Omega theme as a regular project from Drupal.org.
For this lesson we get to finally start to convert our 90 Robots theme into our Omega sub-theme. We're going to take a look at what we have the original 960 Robots files, and start to move that into our 960 Robots Omega theme. To start things off we will:
- Review theme files
- Move main.css into the global.css file
- Begin converting the page.tpl.php
- Create a custom region template
Here is where the rubber meets the road for making our sub-theme look the way we want it to, so let's dive in.
Additional resources
You can download the final Ninesixty Robots Omega theme as a regular project from Drupal.org.
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