We've examined the Views formats and row style formatting. Now I'll walk you through the default field wrapper markup in Views. We'll inspect the default markup for fields, remove the default field wrapper markup and I'll point out some of the implications of this action, and then I'll apply a different Views format, so that you can see how the field wrapper markup is impacted by that configuration change. This will give you a better understanding of how markup is affected at the field-level in the context of a view.
Additional resources
Now that we’re familiar with the default field wrapper markup in Views, let’s explore how to customize this markup. In this tutorial, I will introduce to you a prototype of recent posts that was built using Pattern Lab. We’ll inspect the wrapper markup of two template files that compose this media list. After getting familiar with the prototype markup, we’ll apply that markup, step-by-step, to the fields in our view of recent posts. In doing so, we will use the custom field markup settings for each field and utilize rewrite results and replacement tokens to customize our markup output even further.
Additional resources
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 the previous lesson you created a text-based style guide. It's now time to extract the necessary assets from our static design for use in our theme. To complete this lesson you will need a design application capable of opening a .psd file. The video demonstrates Photoshop, but I typically use Gimp. Either is fine. And if you don't have a graphics program, you can watch the video, but simply download the assets which were extracted during the lesson. By the end of this lesson you will be able to identify page-level design assets which need to be extracted from a design file for your Drupal theme.
Additional resources
Display Suite Fields
FreeIn this lesson we cover adding different type of custom fields to your layout using Display Suite. From adding a custom code field, blocks, to dynamic fields, each of these can be moved around your layout and replicated/modified across different display modes.
Additional resources
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.
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.
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.
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'
One thing that affects markup in Views is the format that is using for the display. In this tutorial we'll take a look, step-by-step, at the Unformatted list format in Views. We'll examine its default markup, how to add custom CSS classes—and to which elements—and what it looks like to remove all of Views' default markup.
Additional resources
Continuing our look at how Views' formats affect your markup, in this tutorial we'll take a look, step-by-step, at the HTML list format in Views. We'll examine its default markup and how to add custom CSS classes to various elements.
Additional resources
As we continue to look at how Views formats affect markup, we'll now examine the Table format in Views. We'll take a look at its default markup, how to add custom CSS classes to various elements and explore other settings unique to this format.
Additional resources
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.
Walks through the process of first adding the search block to the node template file, and then explains some of the best practices for incorporating JavaScript scripts within your theme. Walks through how to protect the dollar-sign variable, and how to use the Drupal behaviors instead of the document ready so that your JavaScript will fire not only on page loads, but also if there is any dynamic material being loaded on the page through asynchronous page loads. We'll show you how to select the jQuery selector to target the desired element, and how to conform to Drupal's best-practice coding standards when it comes to integrating JavaScript and jQuery into your theme. You can learn more about jQuery itself with the Introduction to jQuery Series.
To use Query in no conflict mode, because was not defined.
Add this line on the top: jQuery.noConflict(); more info here: http://api.jquery.com/jQuery.noConflict/
To improve how the search box looks, you need to modify the following:
currently : search-theme-form
modify to: search-block-form
and then in the property in line 321 to look like this:
/* Header quick search */
#header form#search-block-form {
top: -165px;
Additional resources
Shows how to create a theme template suggestion for a specific node type. In this chapter, we create a dynamic template for the article node type by copying the node.tpl.php into a node--article.tpl.php where the 'article' is the machine-readable name for the article content type. We add some specific styling to the node author submission information as well as the date. We also discuss how Drupal looks for the most specific template suggestion (i.e. the node id), then moves to more and more generalized template files like the content type, and then the node.tpl.php as the most general. The Drupal.org documentation page that we look at can be found at http://drupal.org/node/1089656.
Additional notes:
The field_tags variable relates to the corresponding tags field on the article content type. For every field you have on your node the $content variable will contain the rendered content of that node in a key that is the name of the field. So in this case $content['field_tags'] contains all of the tags applied to the node.
Additional resources
This chapter goes through the minimum steps for registering a theme within Drupal by creating a .info file. It also shows the syntax for a theme to be able to add custom CSS to your site as we start to implement our example design.
Additional resources
Walks through the process of copying the default node.tpl.php file from the core node module into the theme, and then customizing the output specific to individual in order to match the design. See how to add specific variables, when to use conditional if statements and the best way to debug and iterate through this process.
Additional resources
In this chapter, we add some sidebar and footer regions to the page via the .info files, and printing those new regions out in our page template file, adding some blocks to help with testing. We also talk about Devel and Krumo, and how we can use those to find out everything that is available in out page array, using the dsm() function. While inspecting out page array, we point out the differences between elements and properties within renderable arrays.
Additional resources
This video walks through the process of replacing static content in the page.tpl.php file with dynamic variables. Joe talks about the html.tpl.php file as well as pointing some of the important variables that should be included within the theme.
Additional resources
This video goes through some of the strategies for translating a design into a Drupal theme. We talk about the two approaches of adding the HTML to an existing Drupal theme template vs. inserting dynamic variables into the HTML provided by our designer. Throughout this video, we're going to be assuming that our designer has delivered the full HTML, CSS and JavaScript to us, and we'll be adding in the dynamic variables. In this process we start to look at the design and start to break it up into it's component Drupal parts and start to strategize for how to build out the site and implement the design..