Now that we have gained an understanding of how to create a custom layout manually (in the previous tutorial), we’ll look at the drush command ds-build
which allows you to quickly scaffold a Display Suite custom layout in your module or theme.
Additional resources
In this tutorial, I will show you how to add a CSS class to apply to a region using Display Suite.
Additional resources
In this tutorial, I will show you how you can add a class to the wrapper markup for a field using Display Suite, Display Suite Extras, and Display Suite's field templates.
Additional resources
In this tutorial, I will demonstrate how you can change the HTML selectors of the regions and layout wrapper markup using Display Suite.
Additional resources
In this series of tutorials on how markup is affected in Drupal when using Display Suite, I showed you:
- How to affect markup using Display Suite (DS)
- How to create a custom layout to use in DS
- How to add and utilize custom CSS classes in DS
- How to configure custom markup wrappers
- How to utilize Display Suite’s field templates UI to customize markup output on fields
Additional resources
In this tutorial, I'll give you a tour of the field templates interface in Display Suite. I'll show you how to enable Display Suite field templates and walk you through how to customize the markup for each type of field template. I’ll also demonstrate how CSS classes can be applied to various components of field output using the Display Suite's "Expert" field template.
Additional resources
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)
Coding Standards in Drupal
CourseTheme Drupal Sites
GuideIn this series, Ben Finklea of Volacci.com explains all the ins and outs of configuring Drupal and its various modules in order to maximize your site's Search Engine Optimization.
Ben begins by orienting you to the SEO landscape by walking through all of the essential components of the Drupal SEO Checklist module. He clearly explains the basic analytic metrics and webmaster tools you'll need to understand before researching the best keywords to focus on for your SEO campaign. He walks you through various Drupal modules you can use to manage your page titles, automatic URLs, meta tags, URL redirects, sitemaps and optimizations for local businesses. He also shows you how to configure built-in Drupal settings to properly set up your header tags, content silos, menu system, robots.txt and Apache rewrite rules. He also talks about how to measure your site's compliance and performance before laying out the next steps for your SEO campaign to maximize your site's conversion rates.
This series shows how Drupal is one of the best content management platforms for SEO. After watching the videos in this series, you'll know all of the steps you need to take to improve your site's search engine ranking!
Reviews all of the material covered in the Drupal SEO video series.
Goes over the different sections contained within the SEO Checklist module, which is a roadmap for all of the different steps that we will be going into more depth over the course of this video.
Goes through the process of setting up Google Analytics on your Drupal site with the help of some modules, and shows how to confirm that it is set up properly.
Goes over the different analytical sections and major configuration options available in Google's Webmaster Tools.
Goes through the process of researching keywords using Google's Adwords Keyword Tool, and shows you some best practices in gathering and evaluating those keywords within a spreadsheet.
Goes through the hierarchy of what's the highest weighting starting from the top of the browser window with the title page, and then moving down to the URL and then down into the actual web page.
Shows how you can override and customize the page titles that are created for an individual node so that you can more closely target specific SEO keywords.