In this post, we'll use HTML5's video tag to implement a video header. A triple video header, in fact. Aaaaand, we'll make it responsive, so the number of videos shown automatically dwindles as the width/screen size on the viewing device decreases.
Today I want to introduce you to the Collapse Text module. It's such a life-saver for those long, long text-heavy pages, in which it may be difficult to guide the user through the sections that are most important to them.
The Collapse Text module allows you to create collapsible/expandable sections in your Drupal pages directly from the editing interface (though it doesn't work that well with CKEditor - more on that later) through the use of special tags to delineate the beginning and end of the text section you want to make collapsible.
Want to have access to a large array of cool, creative fonts via the UI, which you can apply to a variety of CSS styles across your site? Yes, you say? Here's a step-by-step guide to using the wonderful @font-your-face module.
After re-designing my site header to be small, fixed and semi-transparent, I wanted to make sure it is also fully responsive and looks good when viewed in any environment: large, wide desktop displays; medium tablet displays; as well as the narrow (and really rather limiting) mobile displays.
In the following tutorial, I discuss my design decisions, as well as provide implementations hints and details.
I recently re-designed my blog's top header (which includes the main menu, logo and search box). I wanted to make it fixed (so it stays in place and is always accessible even as you scroll down to read my blog posts) and slightly transparent, so you visually notice that it's following you around as you scroll. This post is about how to implement a similar header bar.
In this tutorial, we'll create an HTML list, which can visually and dynamically self-filter and self-sort. We'll start by creating an unordered list whose child <li> elements have some extra attributes, effectively creating multiple sets of sub-lists in the overall list. Once we have that HTML setup, we can use a very clever jQuery library called Quicksand which can make the overall list organize itself into its sub-lists dynamically (and attractively). Let's get started implementing this via a Drupal 7 theme!
You can all seen the numerous examples of beautifully styled dates on blog posts which look like little calendars or attractive, interesting blocks. In this tutorial, I'll walk you through pulling the parts of your post Drupal post dates to be displayed separately, with their own class, so you can style your date in as detailed as a way as you want!