In the original theme, the width, margin, and padding of the elements that make up the search component are set using pixels. Since the width is static, it's breaking out of the sidebar region when the screen size is small enough.
In this lesson, we'll refactor the styles in the search form so that it flexes with its parent container, instead of breaking it. In working through this example, you'll learn the merits of keeping components flexible and respectful of their parent containers.
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (checkout branch 12-search-form)
As we design for mobile, we want to look critically at each component and what it's communicating or how it's adding value. Now that we've refactored our theme to be more mobile-friendly, some elements in our header appear redundant when viewed in a narrow, stacked content column. This is causing our header elements to fill up that important initial screen on mobile. We want to ensure that our valued mobile users get more content and fewer redundant header elements when the page first loads.
In this lesson, we'll identify a breakpoint where the header gets too cluttered with elements essentially communicating the same thing. Then we'll add a new set of media queries, creating styles that will present a more mobile-friendly first impression of our site.
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (checkout branch 13-mobile-friendly-header)
Some of the content that's been added to our case study site isn't responding ideally as the viewport size increases and decreases. We have an HTML table that is a bit too flexible, making the columns too narrow for the text inside them to be very readable. The images in our slideshow are presenting us with a problem when the screen size gets too big: the images are scaling up and losing their quality in the process. To address these miscellaneous problems, we'll change how our content is placed, find some new breakpoints, and add new media queries for our grid_6 regions. We'll also learn some CSS tricks that will transform our table data into lists, making it more legible and sensibly presented on smaller screens.
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (checkout branch 14-cleaning-up)
Do you want to know how to contribute translations to Drupal core or other contributed modules and themes? Have you ever wondered how translations are managed in Drupal? It all happens in the community at localize.drupal.org. This tutorial gives a tour of localize.drupal.org and then teaches you how to join translation groups and contribute translated strings back to the Drupal community.
Additional resources
Building one Drupal site is a fair amount of work in and of itself. But what about working with multiple Drupal sites? Sometimes you have a few sites that make sense together, either from a maintenance perspective, or due to an overlap in content or users. There are a number of different ways to approach this in Drupal, and which path you follow varies considerably depending on the exact use case you need to fulfill. In this lesson we'll get a good look at the problem multiple sites can pose, and list out some common use cases. Then we'll take a look at three different broad categories of solutions, with some specific architectural approaches. The rest of this series will walk through managing multiple sites using Drupal core's built-in multisite system.
If you are interested in working with the Domain Access project instead of core multisite, you should look at the Introduction to Domain Access series.
When working with domain names and getting a website to show up in your browser, it can be a little confusing to sort out which bits of the puzzle are where. You need to be able to properly configure the domain name server (DNS) so your browser can match up a domain name with a web server, and then make sure the Apache web server knows which files to direct that incoming domain name to. In this lesson we're going to walk through the process from the browser request to the website files. We'll take a look at the Apache documentation on virtual hosts (or vhosts) and discuss where to find this configuration. Then we'll take a look at some example vhost files to see what's going on in there.
Additional resources
As we wrap up and review the series, we also look at other modules that work with, or depend on, Features to provide you a jumpstart.
Additional resources
Features project (Drupal.org)
Introduction to Drush Series (Drupalize.Me)
https://github.com/DrupalizeMe/drupalize-lullablog (GitHub.com)
This is a quick overview of the various pieces we'll be covering in this series.
Additional resources
Features project (Drupal.org)
Introduction to Drush Series (Drupalize.Me)
We'll take some time to open up the feature we've created and look at the code that was generated so that we can better understand what is going on under the hood.
Additional resources
Features project (Drupal.org)
Introduction to Drush Series (Drupalize.Me)
https://github.com/DrupalizeMe/drupalize-lullablog (GitHub.com)
In this video we'll look at how you can update a feature by making changes, reviewing overrides, and then recreating the feature for deployment.
Additional resources
Features project (Drupal.org)
Introduction to Drush Series (Drupalize.Me)
https://github.com/DrupalizeMe/drupalize-lullablog (GitHub.com)
Sometimes when a feature has been overridden we don't want to update the feature, but instead go back to where we were. Here we will look at how to revert a feature, as well as how to use Drush to make these processes much faster and simpler.
Additional resources
Features project (Drupal.org)
Introduction to Drush Series (Drupalize.Me)
https://github.com/DrupalizeMe/drupalize-lullablog (GitHub.com)
Often you need to create a feature with system variables to make them complete. Features itself does not provide this, but the Strongarm module does, and we'll see how to add that to the mix.
Additional resources
Features project (Drupal.org)
Introduction to Drush Series (Drupalize.Me)
https://github.com/DrupalizeMe/drupalize-lullablog (GitHub.com)
In this video we'll specifically look at using Git as a tool to aid our development process, especially when working with other people, to make sure that you don't step on each others toes and destroy work.
Additional resources
Features project (Drupal.org)
Introduction to Drush Series (Drupalize.Me)
https://github.com/DrupalizeMe/drupalize-lullablog (GitHub.com)
Features are most often used for building out actual site features. Here we look at how you can use Features to provide you with quickstart developer tools as well.
Additional resources
Features project (Drupal.org)
Introduction to Drush Series (Drupalize.Me)
https://github.com/DrupalizeMe/drupalize-lullablog (GitHub.com)
If you have more than one feature module on your site, they can sometimes step on each other and cause nasty conflicts. We'll create some conflicts and show you how this happens and how to back out of them.
Additional resources
Features project (Drupal.org)
Introduction to Drush Series (Drupalize.Me)
https://github.com/DrupalizeMe/drupalize-lullablog (GitHub.com)
When you write your own custom modules, you can make them exportable to Features as well. Here we look at how to do that with the Chaos Tools (CTools) module.
Additional resources
CTools project (Drupal.org)
This video is about making custom image sizes for automatic display on your site! I am going to show you how you can create custom thumbnail sizes that can be used in your content types.
We already know that being able to set a standard for image display creates consistency and a better user experience. It also makes it for easier site administration because you don’t need to cut all of you images before you upload them. Drupal does all the work for you!! And we can specify the exact site we want to use.
I am assuming that you already know how to update the field display settings in your content type to select an image style preset.
For this tutorial, you need to make sure the Image module that comes with Drupal Core is enabled.
We are going to create an image display that has an aspect ratio of 4”x6”, but much smaller. Then we are going to add a couple other treatments to it so that it fits the theme of Photo Journal.