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..
Additional resources
Standardized documentation is crucial to a project, whether it is just you or an entire team working on it. In this tutorial we're going to look at:
- Standards for
@docblock
comments - Standards for inline comments
- Why standards for documentation and comments are as important as standards for the rest of your code.
By the end of this tutorial you'll know how to add inline documentation for all the PHP code that you write for Drupal.
Learn how to integrate jQuery scripts into Drupal, and how to leverage the JavaScript capabilities of the Drupal API in both 6.x & 7.x
Jeff Robbins and Nate Haug introduce the jQuery and Drupal integrations that we'll be building in this series, based on the foundations of theming, module development, and jQuery.
- How to add jQuery to a theme
- How to utilize Drupal's drag and drop behavior to reorder elements on a page within any form that has orderable items
- Drupal's direct integration with jQuery through the Forms API in Drupal 6 and Drupal 7
- Building a highly optimized AJAX request to Drupal that will return a JSON result
- The JavaScript state system in Drupal 7
Note: The examples in the video span across Drupal 6 and Drupal 7, and jQuery code that will work either in jQuery version 1.2.6 or 1.4.