December 2015


Hey All!

Hope you're having some great holidays. I know some of you are taking the time to do some learning, so here's some new videos to work on.

Thanks for being members / lurkers and I look forward to this next year with you! I have some fun stuff planned for y'all.

Cheers!


How using a "button" HTML input instead of a submit input allows for pseudo-elements New!

Screenshot for How using a 'button' HTML input instead of a submit input allows for pseudo-elements

In previous videos we were able to add font icons to elements using the "before" pseudo-element. In this video we're surprised to find that those are not available for our submit input, and discover an alternative in using the "button" element instead.

Refining the CSS of our search form submit button and text input New!

Screenshot for Refining the CSS of our search form submit button and text input

Here we tie up some loose ends in our search form styling.

How to add a custom icon by creating a new icon font with Fontastic New!
(This one's FREE!)

Screenshot for How to add a custom icon by creating a new icon font with Fontastic

Earlier in this series we introduced you to the Fontastic service and explained why you might want to eventually use it. In this video we succumb to an offended sense of aesthetics and create a custom icon font to use for our magnifying glass icon. Just a little foreshadowing: we'll be using this font for other things later.

Refining the styles on our updated magnifying glass icon submit button New!

Screenshot for Refining the styles on our updated magnifying glass icon submit button

With new icons come new style adjustments. Here we tweak our submit icon styles a bit to get it looking more polished.

Testing our search form and moving the HTML to the right place in the template New!

Screenshot for Testing our search form and moving the HTML to the right place in the template

Here we test out some different form states like filling out the text input and submitting the form. Satisfied, we move the form to the div where it belongs.

How to save a transparent image in Photoshop and why images on the web are tricky New!
(This one's FREE!)

Screenshot for How to save a transparent image in Photoshop and why images on the web are tricky

In this video we grab our logo and save it as a PNG file with a transparent background for some testing. We also spend a few moments alluding to the obstacle course which is using images on the web.

Adding our logo image for testing New!

Screenshot for Adding our logo image for testing

Having created our logo, we do the next logical thing and add it to our template.

How to resume from this point (part 1, step 41) New!

Screenshot for How to resume from this point (part 1, step 41)

If you're just starting out with this series, this video will help you get set up so you don't have to watch every previous video just to get an environment set up.

How images display differently depending on the pixel resolution of the viewing screen New!

Screenshot for How images display differently depending on the pixel resolution of the viewing screen

Images are images, right? Well, there's more to it than that. Here we talk about one variation, which is that images can look pretty different on different screens.

The pros and cons of using lower resolution images New!

Screenshot for The pros and cons of using lower resolution images

Lower resolutions have their advantages. They're smaller, easier to make and require less CSS. But they come at a cost.

Comparing the workflow for adding and editing fields in Drupal 7 and Drupal 8 New!
(This one's FREE!)

Screenshot for Comparing the workflow for adding and editing fields in Drupal 7 and Drupal 8

Instead of using a form embedded in the "manage fields" page of a content type, in Drupal 8 the "add field" form has been moved to a separate page and the process as been cleaned up quite a bit. In this video we walk through the changes.

How responsive tabs work in Drupal 8 New!

Screenshot for How responsive tabs work in Drupal 8

Something you might notice if you work in the Drupal 8 admin area on a mobile device is the convenient way tabs collapse down to a drop-down menu. Here we give you a gander just in case you do most of your management through the desktop.

Comparing content type settings in Drupal 7 and 8 New!

Screenshot for Comparing content type settings in Drupal 7 and 8

Here we step through the configuration of content type settings in Drupal 7 and 8 and point out the differences.

How the "manage form display" content type settings work in Drupal 8 New!

Screenshot for How the 'manage form display' content type settings work in Drupal 8

In this video we explore how the "manage form display" settings work when editing a content type.

Comparing the "manage display" content type settings in Drupal 8 and 7 New!

Screenshot for Comparing the 'manage display' content type settings in Drupal 8 and 7

Here we compare the different settings in the "manage display" page when configuring a content type when working with Drupal 8 versus Drupal 7. There haven't been a whole lot of changes, so we point out some minor differences that are easy to miss.

How view modes work in Drupal 7 and Drupal 8 New!

Screenshot for How view modes work in Drupal 7 and Drupal 8

View modes enable us to configure our content to display differently in different contexts. Through them we can order fields in unique arrangements and reuse them across our site. While view modes were an integral part of Drupal 7, Drupal 8 introduces an interface for adding and managing view modes - something you could previously only do with contributed modules like Display Suite.

How and why to create a new view mode in Drupal 8 New!

Screenshot for How and why to create a new view mode in Drupal 8

Now that we know how view modes work in Drupal 8, we work through the process of creating one and enabling it.

Reviewing additional minor differences in field display settings in Drupal 8 New!

Screenshot for Reviewing additional minor differences in field display settings in Drupal 8

Early we missed a couple of differences in the "manage display" settings, and here we set that right.

How "form modes" work in Drupal 8 and how to add and edit them New!
(This one's FREE!)

Screenshot for How 'form modes' work in Drupal 8 and how to add and edit them

In Drupal 8, the idea of "form modes" was added, as well as a full interface for adding them. Just like we can use view modes to display fields in different arrangements in different contexts, a "form mode" allows us to do the same thing with the add and edit forms for content and configuration. In this video we walk through how to add a form mode and configure it.

Comparing how to add existing fields to content types in Drupal 7 and Drupal 8 New!

Screenshot for Comparing how to add existing fields to content types in Drupal 7 and Drupal 8

Adding existing fields to a Drupal 8 content types works probably the way you'd expect after learning how new fields are added, but we walk through the workflow just in case.


Greetings Drupal Enthusiasts!

(And greetings also to those that aren't enthusiastic but are good sports, anyway)

This week brings with it another infusion in the the two collections, "Upgrading to Drupal 8" and "Front End Development." In the D8 series you'll enjoy a tour of some of the new content authoring features, and in the FED (Front End Development, for those who - like me - have a hard time keeping up with the acronyms) series we cover how to simultaneously rule all CSS and make your project impossible to manage with one single, special keyword.

Enjoy!




Demonstration of in-place editing of content in Drupal 8 New!

Screenshot for Demonstration of in-place editing of content in Drupal 8

It doesn't take long to show how in-place editing works in Drupal 8, but it is super powerful. Instead of having to navigate to a separate edit screen to update content, you can edit specific fields directly in the context that they appear. Here we do a quick demo of how to toggle quick editing and use it to edit a title.

Overview of default text formats in Drupal 8 and Drupal 7 New!

Screenshot for Overview of default text formats in Drupal 8 and Drupal 7

The text formats in Drupal 7 and Drupal 8 are similarly structured, but with a few differences. In this video we briefly explain those differences.

How to configure the Wysiwyg in Drupal 8 New!

Screenshot for How to configure the Wysiwyg in Drupal 8

As we saw earlier in this series, we can now associate particular Wysiwyg layouts with text formats. Here we look at the interface for modifying the buttons that display in the Wysiwyg and how they connect with the HTML filter.

Comparing text format filters in Drupal 7 and 8 New!

Screenshot for Comparing text format filters in Drupal 7 and 8

Both Drupal 7 and Drupal 8 include text format filters for correcting faulty HTML, converting URLs to links, and swapping out new lines with HTML breaks, but in this video we point out the relatively minor adjustments that were made in Drupal 8.

Exploring the minor differences between the Views module in Drupal 7 and 8 New!

Screenshot for Exploring the minor differences between the Views module in Drupal 7 and 8

Views in Drupal 7 and 8 are nearly identical, with a couple small exceptions. In this view we review the few I was able to find.

How responsive tables work in Views in Drupal 8 New!

Screenshot for How responsive tables work in Views in Drupal 8

One addition to the Drupal 8 edition of the Views module is the ability to display a view differently based on the width of the browser viewport. That is, views can now responsively hide or show content to fit the browser window. Here we demonstrate this new ability.

How to use the configuration management in Drupal 8 to backup and restore configuration New!
(This one's FREE!)

Screenshot for How to use the configuration management in Drupal 8 to backup and restore configuration

In the version of Drupal 8 that we're using for this series it is possible to delete important core configuration. While this will likely be fixed in future versions of Drupal 8, it gives us a chance to explore how configuration management works in Drupal 8. In this video we demonstrate exporting the full site's configuration and then importing a single piece of configuration to restore it.

A simple procedure for storing Drupal 8 configuration changes in version control New!

Screenshot for A simple procedure for storing Drupal 8 configuration changes in version control

One of the biggest advantages of centralized configuration management in Drupal 8 is the ability to get configuration under version control. If you're not familiar with version control, don't worry, but this video will be here for you in the future when you decide to introduce it into your workflow.

Why parts of the content type "manage fields" interface has been moved to "manage form display" New!

Screenshot for Why parts of the content type manage fields interface has been moved to manage form display

There was a lot going on in Drupal 7's content type field management page. Through it you could add existing or new fields, re-order the display of the fields in the add and edit form, and manage the widgets that were used in those forms. In Drupal 8, this single interface has been split out across a few different forms, and in this video we describe why this makes sense and how we can translate our field workflow to Drupal 8.

Overview of new field types in Drupal 8 New!
(This one's FREE!)

Screenshot for Overview of new field types in Drupal 8

There's a whole slew of new fields in Drupal 8, including date, content reference, user reference, email and link. Here we compare the fields in Drupal 7 and 8 and how they've been re-organized in the drop-down interface for adding new fields to a content type.

Summary of what we still need to style in our search form and starting the process New!

Screenshot for Summary of what we still need to style in our search form and starting the process

Our select box is looking good, but there's still a ways to go before we're done with our search form. In this video we summarize the steps we have left and dive in.

How the "vertical-align" CSS property works and aligning our elements to the top New!

Screenshot for How the 'vertical-align' CSS property works and aligning our elements to the top

The sometimes disappointing "vertical-align" CSS property has dashed the hopes of many a front end developer in search of a simple solution, but in our case we'll find that it will work perfectly to bring our inputs in line. The trick for us will be to align to the top instead of the middle.

Adjusting the height of our search form inputs to align them New!

Screenshot for Adjusting the height of our search form inputs to align them

All of our search form elements are now aligned along the top, but the variation in the height of our elements brings to mind junior high class photos. In this video we begin the process of bringing the different elements in line.

Discussing why the selectize.js dropdown icon showed up after we hid it with CSS New!

Screenshot for Discussing why the selectize.js dropdown icon showed up after we hid it with CSS

Ba wha? What's that icon doing there, didn't we get rid of it earlier? Indeed, but something changed as we re-organized our CSS and now it's back.

How to override any CSS with the "!important" keyword and why it's so problematic New!
(This one's FREE!)

Screenshot for How to override any CSS with the '!important' keyword and why it's so problematic

The first time a front end developer uses the "!important" keyword, they will assume that they're job just got a whole lot easier. Unfortunately, the technique typically only deepens and delays underlying issues in your CSS. But, it's an important tool for your toolbox, and it's better to have a responsible party introduce you to the idea so you don't find out about it on some disreputable blog.

Finding a solution other than "!important" to solve our reappearing icon issue New!

Screenshot for Finding a solution other than '!important' to solve our reappearing icon issue

Now that we know the problems that come with using "!important", we take a moment to find an alternative solution to our ghost icon issue.

Fixing an issue where our select is a pixel too high by setting height on a different element New!

Screenshot for Fixing an issue where our select is a pixel too high by setting height on a different element

Aren't we done with this form yet?! Almost, my friend. In this video we see how much different a pixel off can make in a horizontally aligned and bordered form, and how setting height on the wrong element might just be the source of our woes.

How to remove horizontal spaces between elements by setting the font size to zero New!
(This one's FREE!)

Screenshot for How to remove horizontal spaces between elements by setting the font size to zero

In this video we explain the inexplicable spaces that appear between inline elements, and more importantly how to get rid of them with kind of a hacky but effect workaround using font-size.

How to remove horizontal space between elements with the "float" CSS property New!

Screenshot for How to remove horizontal space between elements with the 'float' CSS property

In the last video we removed some strange horizontal spaces with a little trick with font-size, and in this video we demonstrate an alternative using the "float" property. We haven't used "float" yet, but you'll be seeing a lot of it once we start layout out our site.

Removing the horizontal space in our search form and adjusting the borders New!

Screenshot for Removing the horizontal space in our search form and adjusting the borders

Here we remove the horizontal space between our elements and style being unifying their borders.

Add to playlist

Add to , or

Add to new playlist:

Add to playlist
This is a member-only feature
But, it's easy to become a member

Add to cart:


Loading...
Contact us

Below are the supported keyboard shortcuts for our video player.

space
Start / stop video
shift
Go to next video
shift
Go to previous video
Increase or decrease player speed by 20%
Skip ahead or go back by 15 seconds
1...9
Jump to a percentage (2 is 20%, for example)
f
Toggle full screen
Videos Pricing More Search
BuildAModule Logo Icon BuildAModule Logo Icon
Become a member!
$29
1 month
$156
6 months
10% off
$276
12 months
20% off
All memberships come with the following:
24 / 7 access to the entire 1800+ video library
An innovative video player with a rolling transcript
Extensive Drupal and cross-platform training
A thorough and thoughtful training style
Progress tracking
Take notes on specific video sections
Intuitive multi-user management
How many users?
user
Go solo with a single user, or give multiple team members access through one account and get discounts by bundling multiple users into a single membership.