The Lodge

Table of Contents For The Series

The Big v10 Redesign Project

#001: Taking Content Inventory

Welcome! This is going to be quite the journey, and like all journeys, this one starts with a single step. Our first step is to take inventory of bit of content on CSS-Tricks. Starting with this means that we won’t be forgetting or neglecting any particular area of the site as we start thinking about the new design, because we’ve just recently explored every little nook and cranny of the site. This will also give us a quick content reference …

#002: Establishing Redesign Goals

This redesign isn’t a redesign just for the sake of redesigning. I want to improve the site in every conceivable way you can improve a site. One of the big things is that the design should serve the different types of content in a way appropriate to that content. For example, the individual video pages. Why do those look exactly like blog posts in the v9 design? Isn’t watching a video a different experience? Should it be, for example, easier …

#003: Content Strategy Session

This is an audio recording of a Skype call between Erin Kissane and myself. Erin wrote the book on content strategy so I was lucky to get her help and analysis.

By starting out with content strategy, the things that we learn here can help inform visual design choices later to come. We got a lot more from this than that, but it’s good that this got to happen early in the process instead of late.

We talk about:

  • Starting

#004: Starting in Photoshop, Background Texture, and Main Branding

Designing in the browser is cool and all, but starting in Photoshop keeps me at my most creative when I need it the most: when facing the blank canvas. One way to fight against the painful glare of a white canvas is to toss down some texture. We do that here by picking a nice one off Subtle Patterns (they now ship in a @2x version for retina displays, nice!). We take this pattern and make a Photoshop pattern out …

#005: Adding Slight Dimensionality

We add some extra layers beneath the main header/branding box to give the “stack of papers” look. No big metaphor or anything, it just adds some visual interest and gives us something to work with as we move to other areas.

I go off a bit of a tangent on how things don’t really need to look “real” on the web as long as they look good and are obvious. Usually, it’s probably better that they don’t, as long as …

#006: Photoshopping the Main Navigation

We start designing the top level (main) navigation of the site. We’re starting with the desktop size screen (at an admittedly arbitrary width) but we’re not worried that the navigation will have any problem adapting to a small screen.

We decide that icons are a pretty cool thing to use to visually distinguish nav links from each other. The last designed used images, but we’ll be smart and use an icon font. We’ll get more into that in the next …

#007: Photoshopping Icons and Text Into Navigation

We start dropping the text into the main navigation, just to see how it will fit, work on sizing, colors, etc. Some of the text is fitting pretty tight but that’s OK, we’ll make room, especially once it turns into HTML/CSS and adjustments are even easier.

We use the same Gotham Rounded for the text. Might as well continue the “Brand” font into navigation (that feels very appropriate).

“Active” navigation simply gets a darker color and reversed text.

We look …

#008: Photoshopping the Module Pattern

The entire site is going to based on “modules.” Each little thing is going to be literally be in a box (both visually and in the code, ultimately). We start with a module for the most recent blog post on the homepage, but the module pattern will be used everywhere. Individual comments, sidebar areas like “The Poll”, advertisements… everything.

Once we have this base article module in place, we work on a bit of typography within it. We use a …

#009: Setting Up our Local Dev Environment

We certainly aren’t “done” in Photoshop forever for this design, but we have enough to work from to get started creating this design in the browser. After all, this is a website we’re building not a picture of a website (as they say).

We create a folder that will be home for this project and then manually create all the basic elements of a project: an index.html file, resource folders, and the like. We could have used the HTML5 Boilerplate

#010: Starting to Write HTML

While looking at our Photoshop mockup, we write start writing HTML to describe what we are looking at. We are of course using HTML5 whenever it makes sense to staying as absolutely semantic as possible. For example we use the <time> element for the publication date of the <article>, because, you know, that’s smart and semantic.

We touch on using Zen Coding a little, and jump over to CodePen because it has it built in. Also, command clicking in …

#011: Normalizing our CSS Foundation

Removing the user agent (default) CSS from most elements is usually a good idea. This has long been done by “universal” resets or things like the Eric Meyer Reset. I think the best option today is Normalize.css.

One way to explain it is that Normalize does both more and less than a reset. It does more in that it covers more browsers than old school resets did, fixing modern issues as well as legacy issues. It does less …

#012: CSSing the Header / Logo

So far the actual web site doesn’t look much at all like our Photoshop design. In this screencast we dig into doing just that, starting at the top with our header and logo area. It feels good to have a bit of a “real” start on building the site visually.

We use Frank DeLoupe as a color picker, which is nicely integrated with Photoshop (it makes the color you pick the active color in Photoshop, as well as copied to …

#013: CSSing the Navigation Structure

We using some positioning tricks to line up the left edge of the logo and the main content area, while still having the header touch the left edge of the page.

The navigation blocks, at the widest width, are 1/8 the width of nav parent. We set them to inline-block so they will accept that width. We end up having to set the width to 12.49% rather than 12.5% because of subpixel rounding errors.

We figure out a way to …

#014: Custom Fonts with Typekit

We set up a new Kit in Typekit for v10. For branding, we’ll use Proxima Nova Soft for now and some other fonts that look as close to the HF&J fonts in our mockup as possible.

We’re a little worried about the weight of the Kit (literally the file size of all the fonts) but think we can do a bit better before production.

We use the asynchronous JavaScript that Typekit provides, which should be good for our page loading …

#015: Adding Icons to the Navigation with an Icon Font

We start by tweaking the logo type a bit, but then jump into adding icons into the main nav. When we were designing the navigation in Photoshop (Video #007) we used the icon font Entypo. Now we’ll use it on the web as well.

We run the font through Font Squirrel @font-face generator which ensures we’ll get the font in all the formats we’ll need.

We used CSS3please to get the best/latest version of how to use …

#016: Using Media Queries in Sass

We introduce the concept of @media queries in CSS.

A lot of what using Sass on this project allows us to do is stay DRY (don’t repeat yourself). We did that setting color and size variables. We did that with our font stacks. Now we’re doing it again with media queries. Anytime we need a media query, we now have a @mixin we can use. That way if we need to adjust them, we can change them in just one …

#017: Setting up a Local URL with MAMP

In this super quick screencast, we use MAMP to set up a URL we can use for local development. This is useful for a bunch of reasons:

  • We can link to resources via relative links from the root, e.g. background: url(http://cdn.css-tricks.com/images/something.jpg);
  • TypeKit fonts can work because we can “allow” this specific URL to work
  • We’ll need this later anyway when we start using PHP.
  • It’s fun to think of weird TLD’s (top level domains). Our’s is called v10.whatup

#018: Making our Project use Compass

We could write our own Sass @mixins to help with CSS3 stuff (like gradients), but there is a Sass framework that already exists called Compass that already has that stuff ready to go. It takes a bit of a leap of faith to reliquish control of stuff like this (I guess no more than using a preprocessor to begin with), but it’s worth it.

Why is using Compass a good idea?

  • The @mixins are very well written. They match

#019: Building a Simple Grid

The site design is shaping up to be very grid-like. Our modules will lay out very cleanly into a grid. But aren’t grids complex and weird? And maybe we should go use some fancy framework out there? Nah. They’re easy. We’ll set a simple one up in just a few minutes. The concepts at work here insprired the article “Don’t Overthink It Grids.”

Of course, we run into a few problems along the way (as you do). In this case, …

#020: Finishing the Grid and Setting Up Modules

Continuing the concept of “Don’t Overthink It Grids”, we get gutters going on in the grid by just using some simple padding. We keep the padding number consistant by reusing our global $padding variable. You’ll find that we use that number a ton as we do our styling.

We style up the “module” class with a simple background and box-shadow. This is a very re-usable class that can be used anywhere.

The end result is a lovely flexible grid …

#021: Breaking Into Include-able Parts

Now that we’re running a custom local domain, we can use PHP. The “P” in MAMP is for “PHP” =). Using PHP means that we can use includes. For instance:

<?php include("header.php"); ?>

Our goal is to make a static “blog post” page to start messing around with. We could do that by duplicating our index.html page (now index.php), but we’d have lots of repeated code in that file if we did that. Remember, we’re trying to stay as DRY …

#022: Flexy Images (Figures and Figcaptions)

Before we do some typography work, I thought we would fix the annoying thing where the images are busting outside of the article area and the grid. Using some simple CSS rules to override inline image attributes and style, we can squish images to fit into our post at the correct size.

Squishing images like this used to be rather uncool as browsers did a bad job of resizing, but this isn’t the case anymore. It’s actually kind of a …

#023: Moving Typography out of Normalize

I think it’s very nice to have an individual file (.scss) that is for the vast majority of typography on the site. Normalize has quite a bit of typography related stuff in it already, so let’s remove that and move it to our own typography file. The idea is to stay true to the way Normalize works best, in that we don’t set things just to reset them later. Then we tweak a few things to get us on the …

#024: Playing with Typography in Typecast

Typecast (in beta at the time of this filming) is a really neat web app for playing with web typography. It gives you a great interface for playing around with the basics of typography, like what your headers and body copy look like. The real fundamentals: sizing, line-height, coloring, all that stuff.

What makes Typecast really cool is that you can use all sorts of custom fonts within it. We’re using Typekit in our project so far, and all those …

#025: Post Typography, Part 1

Now that we have a blog post area to work with, we can really get into blog post typography. Arguably the most important typography on the site as it’s the place a reader will be spending the most time looking at.

We start out by thinking about header tags and their sizing. Then we style the <time> element, which will be ubiquitous throughout the site.

We remind ourselves that you never letter-space lower case letters, yest we steal sheep.

We …

#026: Post Typography, Part 2

We’ve done a little bit of work on headers, but we’ll dig in more on those in this screencast. Headers are a darn important aspect of any site. Done well, our friends h1 through h6 should serve just about every header need on even a complex site. Although, sometimes the correct semantic choice and the one we want stylisticly differs a bit. We’ll soon have a solution for that.

We also look at some simple inline element styling like bold/strong …

#027: Code Syntax Highlighting, Part 1

As far back as I can remember, I used Google Code Prettify to apply the syntax highlighting on code block on CSS-Tricks. You know, where in a line like <div>test</div>, the <div> part is a different color than the test part. This is very helpful for code readability. It also helps readers instantly understand what they are looking at is a code block (people like to scan articles, don’t you know).

In this new design, we decide to go …

#028: Code Syntax Highlighting, Part 2

We’ve just installed Prism.js and got it working.

In this screencast we find a theme called the Tomorrow Theme and ingrate it’s colors into the syntax highlighting. We make a little color key at the top of the file for quick reference. We also make some guesses as to what is what, at least to start. What we end up with, color wise, is OK but not spectacular. If you browse around the site today, you’ll notice the color theme …

#029: Integrating FitVids.js

Images aren’t the only media that need to play nice within our flexible grid. And images were easy compared to video! When you set the width of an <img> and override its height value to auto, the image will naturally retain its aspect ratio. This is also true of <video>, but honestly most video on the web these days embedded on pages directly through the <video> tag.

Case in point, I tried doing that here on the lodge …

#030: Stubbing Out Pages for Navigation

We have this eight top-level navigation tabs, but Home is the only one that “works.” Just so we have some pages to work with, we stub out some pages for the rest of all the tabs.

Because we were smart with includes (Video #021) this is very easy.

We can now click around the different pages. Yay! A Website!…

#031: Current Navigation Highlighting

In this super quick video we add in all the CSS necessary to make sure the current page item in the main navigation gets highlighted when that page is active. Turns out we kinda already did this, since we’re so smart and thought ahead.

This is exactly why we didn’t include the body tag in the includes, so that we can change class names on it it for different pages. Also, this is pretty similar to how WordPress is going …

#032: Making The Grid Responsive

We start out with playing with our blog post module, fiddling around with spacing. We also add the little colored square in the upper left of the module, a visual signifier of the type of content that it is.

The next change we make is to lessen some of the outside gaps at narrower screen sizes. On wide screens, the content is 80% wide (10% width edges) but it feels better to go more like 90% on smaller screens (5% …

#033: Photoshopping Search

There is a lot of content on CSS-Tricks. That’s one of the things that makes it’s design a bit challenging. While we can stay clean with the design, we probably can’t get away with “minimal” with the amount of stuff that deserves attention on the site and makes the site what it is.

All that to say, search is very important on CSS-Tricks. It’s heavily utilized with many hundred searches per day. We might even be able to improve that …

#034: Building Search, Part 1

Now that we’ve Photoshopped what we hope to accomplish with the search area, we set about building it with HTML and CSS. We already have our icon font loaded up, so we place that on the page. Font Explorer X helps us out showing the proper HTML character to use for the magnifying glass.

We add the markup to our header include file and start a brand new Sass file (_search.scss) to write the CSS for this new area. We …

#035: Preventing Typekit FOUT

We take a little break from working on search to solve a little niggling issue.

“FOUT” being “Flash of Unstyled Text”. This is phenomenon where @font-face fonts take a little bit to load and thus you see the fallback font before the custom font. This is normally not a problem in Typekit. Nor is it really a problem in modern browsers these days (except IE 9). However, it is a problem for us because we’ve specifically chosen to load …

#036: Building Search, Part 2

We pick up where we left off in Video #034 and continue building out the search area.

This time we’re focusing on the “open” state of the search, building the actual form elements themselves. The search field itself uses the HTML5 form element type “search” – which usually has some custom styling associated with it, but because we’re using Normalize (Video #011), that’s not a problem for us.

We create a new modular bit of CSS (_buttons.scss) for …

#037: Building Search, Part 3

We have a little more work to do to finish up the search area.

We get sidetracked for just a second as I notice we didn’t add the three-dimensional stacking affect to the page wrap yet, so we do that and change the coloring.

Then we work on the “Search in:” area, which are the little links where you can click to narrow down search by what area of the site. Later on we’ll make that actually work, but we’ll …

#038: Adding Button States

We’ve created the look of a button in it’s regular state, but a 3D button like that is begging for a “pushed” state. What we do is add a darker color to the button on :hover and :focus. Then for :active (pushed), we remove some of the box-shadows and nudge it down and to the right with relative positioning. It’s as simple as that, the button now has a really obvious and satisfying experience when you click it.…

#039: Photoshopping the Top Treehouse Ad

We’ve left a big amount of open space in the header. From the very start, I knew this would be be for CSS-Tricks primary sponsor, Treehouse. In this screencast we start designing what the advertisement for them will be like. We’re actually really lucky here in that I have a relationship with Treehouse such that I can design the ad myself and do whatever works for CSS-Tricks up there and they’ll probably be cool with it (not that I’m …

#040: Building the Top Treehouse Ad, Part 1

We start out with the intention of jumping into HTML & CSSing the Top Treehouse Ad that we just designed, but of course get derailed as soon as we start with fiddling around with the logo and how it behaves in the responsive environment. It’s appropriate timing though, as we’ll need to really define the space we have available for the top ad as we start building it.

When we do start building the top ad, we make a new …

#041: Building the Top Treehouse Ad, Part 2

We have the markup in place for the Treehouse ad on the top of the page, but we have some styling work to do. We start with the tree graphic itself.

We’re thinking that using vector and outputting as SVG might be cool because it will look sharp and be of small file size. Watch me flail around in Illustrator trying to get a nice clean version of it in all vector and ultimately fail. For now we decide to …

#042: Responsive-izing the Top Treehouse Ad

The ad we have in place is great for large/desktop size screens, but it starts to fail pretty quickly on smaller screens.

We have some breakpoints already in use in this design, but where this design starts to break doesn’t match up with those existing breakpoints. No problem, we can easily make one-off breakpoints just for this.

We make some choices about what can be hidden in the ad when we have less available room. We start by removing the …

#043: Responsive-izing Search

The search design works fine until we get down to our “baby bear” (small mobile) size break. We have to do something different there. We make some room for it below the navigation area and then move it down into that space with absolute positioning.

We have a bunch of tweaks to do to make this somewhat drastic shift in location. We change sizing and spacing and colors and everything. What is cool is that at least we don’t have …

#044: Responsive Tweaks on Real Emulator

Squeezing down a desktop browser very narrow can give you a vague sense of how a responsive design works, but it’s not an accurate representation of an actual small screen device. And actual small screen devices are what we’re designing for here, not other curious designers squeezing their browsers down =).

In this screencast we open up the iOS simulator (comes free with XCode on a Mac) and make some design tweaks based on what we are seeing there. In …

#045: Hot Link Modules

For I think the first time in this series, we’re going to add some new things to the design directly by working in the browser (not starting in Photoshop first). Our goal is to design up the “Hot Links” modules that show themselves on the homepage.

We label each section on the homepage with header tags. For instance “Latest Blog Posts” and “Hot Links”. Semantically, we should be using an h2 but the general h2 styling is too intense for …

#046: Flexible Sidebar Ads

The top module in the main sidebar of the site belongs to Treehouse, as the main sponsor of CSS-Tricks. Based on a conversation I had with Ryan Carson, some of the best converting ads they have are the ones with people in them, so we pick out one of those to use for the graphic in the module.

When we stick the image in, it hangs outside the module and has way too much spacing around it. With our new …

#047: Building the Poll Module, Part 1

There is a long tradition of polls on CSS-Tricks. They are fun, gather good important data, and increase people’s connection to the site. Engagement FTW!

We go grab the markup from the live v9 site for some stuff to work with. We fiddle with some spacing stuff to make the module look better for the type that they are. For one, we decrease the amount of padding on modules in sidebars, and we remove it entirely for image ads.

Our …

#048: Building the Poll Module, Part 2

We left off with a totally decent poll widget. The typography is clean and everything perfectly usable. However, it wasn’t exactly compelling or fun. We quickly look at the multicolor area of the Gallery as a bit of inspiration for what might make a fun background for the Polls module. Each poll answer has a different percentage of people that vote for it, which is essentially a bar graph, so we go with a multicolor bar graph kind of design. …

#049: Stubbing Out Headers & Sections

We’ve already spent a little time stubbing out pages so that our navigation works (Video #030) and you can click around the site, but what is on those sub pages isn’t enough to feel like a real page. We spend just a few minutes fleshing out those pages so that they feel more like real web pages. Not super duper important, it’s mostly just tricking our own brains into thinking more about those other sections as real areas …

#050: Building the Gallery Grid

We start to dig into the layout of the Gallery area, which is something that has been on my mind since the beginning of this redesign process. Mostly because… the gallery in v9 kinda sucked. We’re going to do better this time.

We’re going to make the gallery layout nothing but a big grid of images. That’s what other galleries have that are a pleasure to browse so this should be that way too. In other words: no sidebar, more …

#051: Smooth Loading Gallery, Part 1

We have the grid layout for the Gallery going. Unfortunately the loading of it is a bit abrupt and wonky. This is because CSS3 columns are designed to split content among each of the columns evenly, but images sometimes take a moment to load and don’t have a width/height to use yet. So when they do pop in, the columns need to reorganize themselves.

I think we can prevent this wonkiness with some JavaScript though. Since we know the images …

#052: Smooth Loading Gallery, Part 2

In which we figure out the issues we were having with getting the column layout to load in nicely. The fix was to remove the CSS that was making the aspect ratio abiding placeholder boxes work once the image loads (which holds aspect ratio all by itself). Then apply a CSS class to make the “fade in” work (changing opacity from 0 to 1). Easy cheesy and just a dollop of JavaScript.

It should be noted that on the live …

#053: Responsive Columns for the Gallery

We add in some responsiveness to the grid we have set up for the Gallery. At the widest screens, we have it set at four columns. Then we start adding in breakpoints via our super easy @mixins we have set up and have been re-using all over.

At our mama-bear breakpoint we go down to 3 columns, then we make an interim breakpoint in between mama-bear and baby-bear where it breaks into 2 columns, then ultimately 1 column at baby-bear. …

#054: Tap-to-Show Mobile Navigation

We have a good start on the responsive design. The menu at the smallest screen sizes breaks down into a 2×4 grid. It fits nicely on the screen, but between that and the the branding it takes up an awful lot of space. We open it up on the iOS simulator and see that in some cases you can’t see any actual content at all.

We take a look at a few resources on how to handle navigation patterns, like …

#055: Getting Static Mockup into Version Control

Up until now, we’ve been making code changes locally without using any sort of version control. With the complexity of this site rising, that’s becoming more and more irresponsible. What changed and when? Why did it change? How can we see what it was before in case it causes problems we only find out about later?

There are so many good reasons to use version control that it’s almost outside of the scope of this series, but suffice it to …

#056: Updating Versions of jQuery Mid-Stream

As I was working on this design, jQuery 1.8 was released. This is just a quick video to rely the fact that this kind of thing happens as you develop sites and during pre-release development is the perfect time to upgrade stuff like this. We test it on a page that has the most jQuery on it as of yet and everything works great.

We upgrade the version and link it up from Google (good source for that) …

#057: Custom Header for The Gallery, Part 1

There are seven different main areas of the site beyond the homepage. So, I hired seven different illustrators to do designs. This is the first one we are going to dig into and get implemented into the site. It’s the the gallery section of the site and it’s done by Erica Sirotich.

We jigger around the HTML and CSS to make room for the header up top, which we do essentially with padding.

We do some resizing with Photoshop …

#058: Custom Header for The Gallery, Part 2 (with Reverso Media Queries)

We have the basic gallery header in place, but it’s missing the little blue people that Erica put in the original illustration. We had talked about it in advance, and decided it would be pretty cool if when the screen was resized, the people would stay put as the gallery wall moved behind them, so it looks kinda like they are browsing the gallery in awe.

Since the people graphics are purely ornemantal, using markup for them isn’t ideal. Fortunately …

#059: Custom Header for The Forums, Part 1

We just got the custom header for the Gallery in place, so while we’re at at, let’s keep going on adding another custom header. this one was done by Erica’s brother, Nick Sirotich.

Because this is a different illustration, we do a few things differently. For one thing the row of heads really makes sense to repeat on the horizontal axis, so we set it up to do that. We output it on the orange background instead of with …

#060: Custom Header for The Forums, Part 2 (Rapid Media Queries)

Nick’s illustration had three different layers for the heads. They are just slightly different variations. We could swap out the images with an animation or with JavaScript or something but having an always-running animation (or even one that runs every page load) would probably be mega-annoying for heavy forums users. Instead we’ll make it an Easter egg, that is, a little feature that you might not notice unless you happen to randomly stumble across it.

What we’ll do is swap …

#061: Custom Header for The Forums, Part 3

The only thing missing now from our customs Forums header is the part that actually says “Forums”!

Nick illustrated a hand holding a sign that was meant for that area. We remove the text that was there (not a huge fan of Impact) and replace it with something more hand-written which I feel like works with the site better.

Just like we added the people from the custom Gallery header via pseudo elements, we add this sign the same way. …

#062: A Look at the Current BuySellAds Setup

As you know, some of the ads on CSS-Tricks are kind of “self managed”, like the main Treehouse sponsor. I took that on because it’s just a single advertiser and we have a very specific relationship and the ads are integrated into the site in a way that wouldn’t be practical through an automated service. But other ads on the site are managed through an automated service: BuySellAds.

I quite like BuySellAds, because it means that advertisers can manage …

#063: Mocking up BuySellAds Zones

Now that we know exactly what zones we’re working with, we go back to Photoshop and mock in how we want these ad zones to look.

We have a precedent for the sidebar ad. It will be essentially just like the Treehouse sidebar ad, a module with an image inside it with the padding removed.

We do something similar with the content sponsor zones as we did in v9, only with an updated look. We make them modules that lay …

#064: Implementing BuySellAds Zones

We have a mockup of how we want our BuySellAds zones to look like, so let’s get on building it for real. The BuySellAds website provides the code we need to put on our site for the ads to show up. We copy and paste that over.

We attempt to shut off the CSS that BSA injects onto the site to style them (because we’ll handle that ourselves) but unfortunately if we shut if off now it affects the live …

#065: Adding BuySellAds Sidebar Ad

We have another BSA zone to get integrated into the site. This one should be a bit easier because we already have the JavaScript in place and it’s just one ads in one module. We’ve actually have that top treehouse sidebar ad already in place so we can take queues from that.

We run into a dumb little roadblock where I’m stumbling to find an unclosed div tag. We take basic troubleshooting steps and ultimately find it.

We end up …

#066: Photoshopping the Footer, Part 1

We embark upon the great journey that is the footer! CSS-Tricks has always had a big fancy footer and this design will be no exception. It’s not purely gratuitous though. We have lots of things that really deserve at least a link on the site (e.g. social media links, contact links, other projects I work on, etc) and the footer is a perfect place for those.

We incorporate the classic CSS-Tricks asterisk logo down there instead of the header which …

#067: Photoshopping the Footer, Part 2

We’re working on creating a design for the footer in Photoshop. Quick reminder: I work in Photoshop because I feel more creative there before I jump over to the browser. I don’t linger in Photoshop but that’s where I like to do visual exploration.

We go back through the inventory of content we took in the very first video. We identify a whole bunch of links that we need to get in the site somewhere. Some things like how …

#068: Photoshopping the Footer, Part 3

We get down to some more Photoshoppin’ business in this screencast, laying out the bottom-most footer with links to my two biggest other projects, CodePen and ShopTalk.

We write some copy live in the screencast, which of course is an important aspect of design. The copy is accompanied by big logos of the projects themselves (which are converted to black and white as to not go overboard with color). …

#069: Photoshopping the Footer, Part 4

This is the last of the Photoshop work we’ll do specifically about the footer before we jump over into actually building it.

In this screencast we essentially put in the list of links that surround the “Photostar”. Nothing too fancy right? We decide that you know what people understand and are easy to use? Lists of links.

Visually the stuff we’ve put in makes a bit of U shape on the bottom of the page which leads the eye around …

#070: HTMLing the Footer

With our design for the footer all ready to go in Photoshop, we can start building it out into our static HTML and CSS mockup. The first step is giving ourself some HTML to work with. We already have a “part” that we include on all pages called “footer.php”. This is the perfect place to include our footer markup for now.

As you might except, the footer is a <footer> tag. Within it, some lists of links. We discuss how …

#071: CSSing the Footer, Part 1

With the HTML structure for the footer in place, we have what we need to start styling and getting this footer looking like what we designed in Photoshop.

We create a new SCSS file just for the footer, because that just makes sense to keep modularized and that’s what we’ve been doing for everything else. We @import it into the main stylesheet at the bottom.

We darken the footer by using just a little RGBa background. Sass helps us a …

#072: CSSing the Footer, Part 2

In this screencast we largely deal with the orange “Photostar” the dominates the footer.

We make the star in a separate file in Photoshop, so we can make it the correct size the web needs, not what makes the most sense in the main Photoshop file. We make it bigger than it is on the web so than we can shrink it down and have it look super sharp on retina displays. Yep, perhaps a bandwidth concern in how it’s …

#073: CSSing the Footer, Part 3

In this screencast we focus on the lines underneath the the links in the top part of the footer. We kinda stumble around figuring out which things should have relative positioning and what shouldn’t so we can get these lines the size and position they need to be.

We colorize the line with a gradient using the simple background Compass @mixin.

We decide that making the links block level is rather weird, because it makes the clickable area too big. …

#074: CSSing the Footer, Part 4

In this final screencast of building out the footer, we work on the bottom footer where the CodePen and ShopTalk areas are.

We have to change the HTML a bit as come come to the realization that the four chunks along the bottom (logo, text, logo, text) would make sense to be a series of inline block elements that are centered on each other (vertical-align: middle;).

We run into the issue where there is extra space between inline-block …

#075: Custom Header for the Almanac

The header for the Alamanc has come in, this time from Giovanni Difeterici.

We use a lot of techniques that we have already established to get started with this. We create a new .scss file just for the Alamanc section of the site. We resize the original artwork to the size we need it.

We play around with the CSS3 background-size properties cover and contain. It’s really a matter of what is getting cropped and how. 100% is …

#076: Custom Header for Video Section

The custom header illustration for the videos section has come in, this time from Alyssa Nassner.

We spend a little time organizing the Photoshop file and naming layers and stuff just so we can stay organized and understand what’s what. We save a copy of the file so as not to mess with the original.

We ultimately have four parts in this header: the background, the title, and the left and right “Reels.” It’s similar to the Gallery where …

#077: Custom Header for Snippets

The snippets head has come in, this time by Reagan Ray.

We spend a little time in Photoshop this time shuffling things around a little bit to make sure we have a background that is the exact height we need and also quite wide.

The implementation of this one is simple. Nothing really needs to move around, it just needs to stay centered and crop off the edges.

We make the light blue color go around the whole edge …

#078: Moving to WordPress, Creating a Theme

We’ve already been working locally at a local domain (v10.whatup). Now it’s time to get started moving into WordPress. We’re going to keep working locally at a local domain, but we’re going to start using the already working local install of CSS-Tricks I have (css-tricks.whatup).

We start by just duplicating the existing WordPress theme in the wp-content/themes/ folder and renaming the that theme folder “CSS-Tricks-10″. Might as well give ourselves a base to work with. A quick guess: maybe 50% …

#079: Moving the Live Database Local

As we get started working in WordPress it will be best if we snag an exact copy of the live database to work with locally. Some websites have things like phpMyAdmin installed which provide a GUI for things like exporting a database, but the CSS-Tricks database is just too big for that. So instead we SSH into the site and do a mysqldump from the command line to get a copy of it. We dump it outside the web root …

#80: Updating Local Content by Running the SQL

We have an .sql file now thanks to exporting it and downloading it as we did in the last video. Now we just need to run it and overwrite our currently existing local database. This local database already exists because we’ve long been running CSS-Tricks locally through MAMP (one of those M’s being MySQL).

We connect to MySQL with the free Mac app Sequel Pro. We verify exactly which database it is we’re working with by checking the wp-config.php …

#81: Moving the Header to WordPress

It’s time to actually get into moving our design into WordPress. Might as well start top-down and start with the header. Other than just being a logical place to start, it means we’ll be looking at things like the <head> and getting the right resources loading.

We split our screen into two halves, the static mockup project open in Sublime Text 2 on the left and the WordPress site on the right. This way we can look line-by-line and make …

#82: Building the WordPress Homepage, Part 1

The great move into WordPress is underway! We finish up the header.php file and move into index.php. index.php is in charge of our homepage. The first line of that file is a PHP function get_header() which essentially just gets the header.php file in plops it in there, which is why we started there.

We stay in our split screen layout comparing files left and right and moving things from our static mockup into WordPress.

We reference PHP date parameters to …

#83: Building the WordPress Homepage, Part 2

We continue porting code over from our static mockup to our WordPress index.php page. We tweak “the loop” a bit to output just what we want.

We get down far enough on the page where WordPress functions like get_sidebar() show up. Predictably, it behaves a lot like get_header() works. It goes and gets the sidebar.php file and plops it’s content into the page right where that function is.

We delete quite a bit of code that was us simulating markup …

#84: Moving Footer into WordPress

We start out by fixing up some image file paths. I always make a distinction when using images inside a WordPress theme. Is this image part of this specific theme? Or would it make sense to use in any theme for this site? If it’s for the specific theme, the image belongs in the theme folder somewhere. If it would make sense for any theme, it should be referenced from somewhere more globally useful, like an images folder at the …

#85: Blog Post View (single.php) in WordPress

If we had to pick, the view for a single blog post is probably the most important template on the site. We have a static mockup of a blog post page, so we work on moving it over into WordPress.

The grid is slightly different. It uses our super easy grid structure and classes, only instead of the 1/2, 1/4, 1/4 structure on the homepage it uses a 2/3, 1/3 structure. No big deal, just different class names.

We finally …

#86: Photoshopping the Gallery

I was excited to get started on the Gallery area on the site. It’s one of the areas that was particularly bad in v9. It doesn’t get a ton of traffic, but maybe we can turn that around. I enjoy it very much and have a slew of content to get posted to it over time.

We start out by working in Photoshop so we can keep our mind creative and do some visual exploration without the baggage of thinking …

#87: Gallery Grid-izing

We have the gallery area set up in WordPress it’s spitting out what we need it to spit out, but there is almost no styling at all on the page yet.

We start by going over the code in the functions.php file that sets up the custom post type that “Screenshots” are built from on this site. It’s a little involved, since there is no only a the custom post type and all the custom verbiage and whatnot that goes …

#88: Building the Gallery Bar

We set about building the bar below the gallery header. This bar has quite a job. It tells people where they are and what they are viewing (breadcrumbs, in a simple way). It also will contain pagination, a button, and all the while needs to be responsive.

This is start of what we refer to as “black bar” navigation which really becomes a thing for the rest of the sites design.

We write the markup for the bar, including using …

#89: Tweaking the Gallery Bar

In this video we make a bunch of tweaks to the bar we have set up with most of the functionality of the Gallery. Design is all about tweaking, isn’t it?

We adjust some padding to make things line up better. We style the dropdown so the menu that is revealed looks a bit nicer. While adjusting that, we make sure they have a plenty big clickable/tappable area (display: block links). This is a perfect example of where the …

#90: Setting Up Individual Pages in the Gallery

Every screenshot (or video) in the gallery has it’s own individual page. You get to them easily, just by clicking the image itself. We want to make this page as compelling to visit as possible. We’ll work on that in some upcoming videos, but for now let’s make sure the individual pages at working in WordPress and using as much from the other gallery templates as possible.

The file we are working with is single-screenshot.php – which is named very …

#91: Photoshopping Individual Gallery Pages

In this screencast we spend a bit of time thinking about what an individual Gallery screenshot page will look like. There is a bit of data that we already know we have. We have a title. We have a description. We have a set of tags that have been applied to it (it’s custom taxonomy). We also have some custom fields on each Screenshot: the URL of the image itself and a URL of where it should like (sometimes). We …

#92: Building the Individual Gallery Pages

We have a bit of a Photoshop mockup to work from here as we continue building the template for the individual gallery page.

First up, we styled the Next and Previous links. They are in absolutely positioned box in the gallery bar, so that we could center them on the page despite the other buttons and stuff already in the bar. They take on the same class as the Submit One button so there is constancy there.

Next up we …

#93: An Attempt at Smooth Loading Gallery Pages

We spent all this time in our static mockup making some clever JavaScript that would “smooth load” the images in the Gallery. Now that we have the real Gallery going with real images, that is gone.

Essentially, we need to get our image wrappers having a padding-top of the aspect ratio of the image. That was easy in the static mockup because we knew the height and width of the image. We don’t have that information anymore, we just have …

#94: Google Custom Search Setup

The search area in the header “works” in that it’s designed and you can click it open and closed and all that. But it doesn’t actually do any searching yet. That’s pretty important eh?

On this site we use Google Custom Search Engines to search the content. WordPress has built in search, but it’s not very good. It just matches strings and lists what it finds in order. There isn’t any of the fancy stuff like Google offers: search logic, …

#95: JavaScript for Multiple Google Custom Search Engines

All of our Google Custom Search Engines are set up (we set up a different one for each section of the site). Our UI for search is ready to go. We have templates for each search results subpage ready to go. We just have one final step to get everything tied together: make the little “Search in: ” links work.

We’ve done so much prep here this is going to be pretty easy. All we need to do is change …

#96: Templates for Search Results

Search works! It’s just the template that you land on isn’t quite right. We need to tweak up the template so it looks right and matches the style of the site.

The template that search uses at the start pretty generic. It’s a template that I use on lots of WordPress sites. It’s just like “page.php” – the “Default” template that all WordPress pages use, only it doesn’t make the get_sidebar() call. I call it page-nosidebar.php.

Ultimately we ditch that …

#97: Photoshopping the Almanac

The Almanac was a thing launched in v9 and never quite got done. It’s getting closer though and closer every day. So in v10 we’ll design around the assumption that it is “done.”

We look at the existing v9 design, which is kinda-sorta OK but doesn’t serve the content super well. As a quick aside, we see that the rollovers for the letters bold on hover, which is usually a no-no (often pushes other text away and looks weird) but …

#98: Building the Almanac, Part 1

This is an extra special EMPIRE STRIKES BACK themed episode of the v10 redesign series!

Everything starts out just fine. We start moving some things over to our WordPress template from our static mockup. We have the header working in our static mockup, so we start with that. That’s always a great place to start because we do all that foundational work like getting the site section CSS loading conditionally and all that.

We then look at what markup already …

#99: Building the Almanac, Part 2

This is an extra special RETURN OF THE JEDI themed episode of the v10 redesign series!

We left the last screencast utterly defeated. We were trying to use wp_list_pages() to output some navigation for the homepage of our Almanac section. One of our calls to it worked, the other didn’t. We tried all kinds of stuff to get it to work, everything failing. The Empire was knocking at our door.

In this screencast, we’ve taken a bit of a break, …

#100: Almanac Styling, Part 1

Now that we’ve battled through getting the proper content on the homepage of the Almanac, we can dig into some actual styling with CSS.

We decided to go with a handwriting font for some bits of this design. We browse through some fonts on Dafont, and end up downloading Shadows Into Light. The download comes with the font in a format that will work on the desktop, but not all the formats needed for @font-face. So, we run it …

#101: Almanac Styling, Part 2

We jump forward just a teensy bit here. This is a pretty comprehensive screencast series, but it’s only 40 hours or so and of course this actual project is actually more like a few hundred. In this case the jump forward was to style up the two-page spread a little bit. We walk through those changes in the beginning.

The left and right pages have one shared and one different class name. This is super common I find in lots …

#102: Almanac Styling, Part 3

In this screencast we wrap up the Almanac section. There is a pretty clear hierarchy in the Almanac. It goes:

Home Almanac Home Property or Selector Letter Page

Every one of those steps have a view to themselves. So far we’ve looked at the top most levels and bottom most levels but haven’t done anything in the middle. We spend some time getting those middle pages together. For instance, finding the right templates, getting the grid in place, etc.

We …

#103: Photoshopping Snippets Area

Time to dive into the Snippets area! That is, the actual content area of it. We already have the header in place. The snippets area is pretty popular. Without diving deep into analytics, I know from watching social media and hearing from people in real life that they find a lot of useful stuff in this area.

In v9, a very common and legitimate critique was that it was hard to browse. It was a heavily colored accordion and each …

#104: Building Snippets Area, Part 1 (HTML & CSS)

We now have a Photoshop design to work from for the homepage of the Snippets area. It’s a lot more browse-able than it was before, but keeps the rainbow spirit that it had before. Now we can jump into actually building it in our WordPress templates. Writing all the HTML and PHP and CSS and YOU KNOW THE DRILL!

Step one is moving over our custom header we had ready to go in our static design. That means changing around …

#105: Building Snippets Area, Part 2 (HTML & CSS)

We have all the content we need on this page output and we have the header in place. Now we can start CSSin’ the content into the design we have going in Photoshop.

One thing we did was make the list of seven categories static. It’s just one less wp_list_pages() call and thus a bit more efficient. If we ever change the categories, that’s such a big thing it’s no big deal to revisit this code.

We need a two …

#106: Building Snippets Area, Part 3 (HTML & CSS)

We’re pretty close to being done building the homepage of the Snippets area of the site. Right away, we start tweaking things and getting more stuff into shape.

We have a weird experience where the absolutely positioned pseudo element didn’t respond to a negative left margin but was fine with a positive right margin. Who knew.

Then we move into making an “active” class for the left menu of snippet categories. You only browse one of them at a time …

#107: Building Snippets Area, Part 4 (JavaScript)

With the design for the snippets area “done” – we can now move into some interactivity (read: JavaScript).

We add a super lame rollover for the links on the left just so we have something, but we know we’ll change that later. Then we set about actually writing some JavaScript. Upon visiting the page for the first time, the first category (HTML) will be active. Active, meaning it has the class “active” on the list item for HTML. CSS affects …

#108: Building Individual Snippets Page

We start about by looking at some of the grunt work I did behind the scenes fleshing out some things that needed to be done. Like adding in the rest of the wp_list_pages() calls to output the rest of the list of snippets for each category. And also adding in the CSS to change the color of the bar separating the categories and the lists of snippets. We also changed the hovers of the categories to lighten the colors instead …

#109: Preparing for Working on Comments

I’m very excited to work on the comments section for this site. CSS-Tricks is home to some excellent discussions, thanks to all you fine folks. Designing the comments section is important because it needs to showcase those great discussions, keep those great discussions happening, and facilitate all the functionality of a WordPress-based discussion thread.

The first step here is preparing our Photoshop file to have a nice clean area to design comments in. We’re using a 2/3 1/3 grid, so …

#110: Photoshopping Comment Thread

We start digging into Photoshop here and designing the comments area. We start at the top, meaning the individual comments themselves (as opposed to the comment form).

We snag an avatar to work with. We’ll be using the Gravatar service for sure, as that’s tailor made for this and integrated perfectly into WordPress. Beyond that, I’m a big fan of avatars and the feeling of personal ownership they give you on a site.

Some of this design just falls into …

#111: Building Comment Thread

The design for comments might look very simple. And it is! But I think simple is effective in this case. Comments are such an important part of CSS-Tricks I want them to be very readable and comfortable.

Now we’re going to jump into WordPress and make this comment thread a reality. The first thing we do is find a template in which we’ll be displaying comments. single.php is probably the most important (individual blog posts). We find in that template …

#112: Building Comments Thread Wrapup

Right at the end of the last screencast we figured out that our Photoshop design, as simple as it is, has a problem that is going to be too hard to overcome with code. Reply comments live within the same list item element as the original comments. That makes it hard to accomplish the design where the original comment box kind of stops and reply comments are simply indented.

Instead, we’re going to have the “parent” comment encapsulate all the …

#113: Photoshopping Comment Form

In this screencast we jump back into Photoshop and design the comment form itself. As in, the inputs and textarea users need to fill out to leave a comment. This is placed by default at the end of the comment thread, way at the bottom of the page. Although, it can jump up higher in the thread if a user clicks a Reply link.

We look at the v9 design to give us a reminder of what it looks like …

#114: Building Comment Form

In this screencast we’re going to get into building the comment form in HTML/CSS. The markup for the comment form lives in the comments.php file in our theme. We look for the <form> element to find it.

We lay out each of the three inputs (name, email, url) using the grid system we have in place. Boy we’ve gotten good use out of that eh?

We already have a CSS file exclusively for comment related stuff, so that’s where we’ll …

#115: Setting up Google AdSense

We’re going to be adding in a new advertising zone on the site powered by Google AdSense. We did remove a BuySellAds zone a bit ago, so it’s not like we’re just trying to dump on new ads until the users can’t take it anymore, we try and balance being tasteful and the need for the site to generate an income.

The reason we are going to try Google AdSense is because of the amount of international (and non-English as …

#116: Custom Header for Demos

The last remaining headers have come in! We can now finish those up and have all our custom headers done. In this screencast we’ll work on the custom headers for the Demo section done by John Neiner.

Interestingly, John was the only illustrator who provided the artwork in Illustrator. That’s nice for us in this case because we can scale it up to whatever size we need at full quality. In retrospect, we probably should have left it vector …

#117: Custom Header for Deals

After the weird confusion in the last video about which header we were actually doing, this time we really are going to be implementing the custom header for the Deals page! This one was done by Meg Hunt.

Like all the headers, we spent some time looking at the original files and figuring out how it’s going to best sit on the page. We try a few options, but ultimately decide putting it in a confined box is best …

#118: Viewing Live Site with Theme Switcher Plugin

In this screencast we add a new plugin to the site that gives us the ability to switch the themes on the live site, but only so that we (as admins) can see it, not regular visitors.

Before we add it, we look at the status of our project in Tower. We have a number of files to commit that have changed. We haven’t been showing as much as we should have about using Git in this project. But we …

#119: Custom Header for Videos

I think I said in a previous video that we had finished up all the headers. Just kidding! There is one left! This one is for the Videos area and was done by Alyssa Nassner. We’ve gotten it going in the static template we just need to move it over to WordPress land.

I also think for the last time we do a bunch of template wrangling that we’ve done so many times before, like establishing grid divs and …

#120: Choosing a Membership Plugin for WordPress

In this screencast we start talking about how we are going to build the membership area of CSS-Tricks. Part of the Kickstarter that made this whole thing possible was the promise that Kickstarter backers would get access to a private members-only area where they would watch videos like the one on this very page.

It’s kind of a funny moment really, because you’re watching a video in the private access area that, in the video, has barely been conceived yet.…

#121: A Template for Generic Pages

We look at the contact page and decide that it’s the kind of page on CSS-Tricks that is very generic and doesn’t need any particular special styling at all. Really the only difference between a generic page and a blog post is that there are no comments and no date (both rather irrelevant for this type of content).

When you publish a page in WordPress and leave it as the default template (don’t choose anything from the dropdown, and remember …

#122: Building the Videos Archive, Part 1

The videos archive page is the part of the site where people can browse all the free videos available to watch. It’s for browsing, must like the homepage for the snippets or the homepage for the demos.

These pages are their own template, which we can very quickly and easily whip up into shape like we’ve done many times before. We put our own wrapper around things and use our grid structure to give it a 2/3 1/3 layout.

What …

#123: Building the Videos Archive, Part 2 (Navigation)

We just finished an exciting part of this redesign where we got to throw away a bunch of gross markup in the video archives page and replace it with new, smart, clean, auto generated markup. But we have more work to do on these archives pages. Because the archives are going to be auto-generated into groups, we need navigation (really pagination) to get to older groups of screencasts.

In the past, since we were manually writing all the markup, we …

#124: Building the Demos Archive

In this screencast we’re going to work on the “Demos” area of CSS-Tricks. It’s a rather popular area of the site, despite the fact that I don’t put as much time into it as I should. The point of it is a place on the site with a load of downloadable and viewable demos all in one place – so it’s very easy to scroll and browse though and find bits that might be of interest to you and your …

#125: Photoshopping the Single Video Page

In this screencast we dig into designing another very important page. This is one of those pages I’ve been excited about designing since the beginning, because it’s a page that was particularly under-served by the last design. In this new design, we’ll approach it from scratch and design something that suites the content better.

The first order of business is making the actual video on the page as big as it can be. I think it would be awesome if …

#126: Building the Single Video Page, Part 1

In the screencast we dig into the HTML and CSS and WordPress template that is the single video page. We’ve already designed how we want this to look in our Photoshop document, so we just need to bring it to life in code.

First we bring the custom videos header into the template, that we already have structure for from the video homepage.

Then we start ripping stuff out of the old template and adding in our new markup that …

#127: Building the Single Video Page, Part 2

In this screencast we’ll finish up code-wranglin’ the template for single videos.

We start by getting organized in our CSS a bit. Some of the videos.scss file is global to video-related pages. Some is specific to the archival pages and some is specific to single video pages. For now, it will get loaded on all those types of pages. It’s so little CSS, that’s fine, and probably good (makes best use of caching). If there started to be a ton …

#128: Styling the Deals Page

In this screencast we’ll dig into the Deals section. The Deals section is essentially a “wall of ads”. It’s an area of the site that people would have to navigate to themselves, so I’m not worried about jamming ads down peoples thoughts. Also, each ad has a discount on it and is product that I personally recommend, so no shady-ness going on.

We already have the header in place. We also already have the content being spit out onto the …

#129: Photoshopping More Homepage Modules

In this screencast we dig into adding some more modules to the homepage of the site. Fairly important stuff! At the moment, we only have a handful of them over there. We have a few hot links, a couple of ads, and a poll. Below that, a bunch of gray space. Not that space is bad, but in this case we have some important stuff to add anyway so we might as well use the room to do it.

One …

#130: Styling the Article Archives Page

The article archives page on CSS-Tricks is rather important. Rather than having paginated blog posts like most blogs have, I simply link to the archives. I figure it’ll save people the trouble of click-and-scrollbrowse, click-and-scrollbrowse, click-and-scrollbrowse… Instead, they go right to a page where they can scrollbrowse a large number of articles in a more succinct format.

However, the current design doesn’t encourage that browsing very well. It’s simple a list of titles. That might work for some folks but …

#131: Building More Homepage Modules

In this screencast we set about building out a few more of the modules we plan to have on the homepage.

Just a little tweak and we’re showing three hot links instead of two. Copy and paste a bit of module code and tweak a query and now we have a module showing the latest video. Mmmmm. CMS’s are fun!

We have a CSS file specifically for modules, which is the perfect place to style up these modules if they …

#132: Intro to The Forums

In this screencast we dive into an all new section of the site: The Forums! This is a huge area of the site. Perhaps not so much in traffic (I’ve always wished it could grow, traffic wise), but certainly in user activity and UI complexity.

The forums use Vanilla Forums to power them. They are fairly good, but I do wish someday to move them to bbPress to unify the entire site together. It’s certainly possible. The forums actually started …

#133: Forums Wrangling, Part 1

In this screencast we’ll actually dig into the code of the Forums area.

The “main” file of the forums, if there is such a thing, is default.master.php. It’s a bit like index.php in a WordPress theme, except literally every view in Vanilla uses it whereas some views in WordPress don’t use index.php.

To make things as consistant as we can, we’re going to go line-by-line through the documents comparing it to the WordPress equivalents. We make our way through the …

#134: Forums Wrangling, Part 2

In this screencast we continue to dig into the code of Vanilla Forums and get our theme going. We make the decision right away to do the wild-n-crazy move of nuking the entire set of CSS that comes from Vanilla and has been tinkered with by me over the years to make it work with CSS-Tricks. Be gone with the old! In with the new!

We get our working environment set up with this freshly-blank style.css file. In other words, …

#135: Forums Wrangling, Part 3, Login

We keep digging into theming the Forums area of the site. We’ve done good so far, but the deeper we dig the more difficult things are going to get. Partially just because I don’t have a ton of experience with Vanilla Forums and partially because it’s just kinda weird!

We’re trying to create and customize some sidebar modules, like the top right one, where we welcome new users and provide existing users a place to log in. Right away we …

#136: Understanding Vanilla Forums Theme Overrides

We left off trying to decide if we can win the battle for a static login form or not. We probably could, but in more playing around with the forums, we see that it’s not just login that by default comes up in a modal. The modal design pattern is used all over the place in the forums. Using it on the login just establishes that pattern and because of that we might as well go with it (it’s easier …

#137: Forums Wrangling, Part 4, Getting Control

We jump right into styling the main content area of the homepage of The Forums. Arguably the most important part of the forums, since it’s the first thing people see when arriving to The Forums. This gives us the opportunity to override the core file that controls this as we learned about in the last screencast. That way we have control over the HTML. Then we can apply classes that work with our existing design patterns.

We end up having …

#138: Forums Homepage Styling

It’s been a bit of a long road wrestling control over all the parts we need, with a couple of struggles and surprises along the way. We can finally get started designing those modules on the homepage according to the wireframes we have.

A little margin, a little padding, a little font-size adjusting, you know the drill! We use some absolute positioning to handle the Options menu “flyout” and account for it’s hide/show behavior.

The default color for links on …

#139: Individual Forums Thread Styling

You might argue that the homepage of the Forums is the most important page, but there are equally good arguments for individual thread views being the most important. Data suggests people land on these “deep links” in higher numbers than the homepage itself, even though the homepage is the most visited individual page.

Right away we struggle with exactly where we need to change to control the markup for this page. I apologize for this, it’s my fault for not …

#140: Forums Signup Styling

We’re still neck deep in the Forums area. In this screencast we look at the signup page. Another rather important page as we want the experience of joining the forums to be and easy and welcoming as possible.

We’re a little nervous at the beginning, thinking it’s going to be a crazy struggle to figure out what files to update to change things in the smartest way possible. We do have a bit of a struggle, but find some information …

#141: Restrict Content Pro Setup and Settings

In this screencast we take a little break from battling Vanilla Forums styling to work on setting up Restrict Content Pro (RCP), our WordPress plugin for managing subscribers to The Lodge, the private access area (that you are literally inside of right now!).

The first step is creating the membership “levels”. We decide on an animal theme, because 1) it’s fun and 2) it’s a way to establish hierarchy kind of arbitrarily, like we’ve done in the past with alpha/beta/etc. …

#142: Forums Modules Styling

Along the right side of the forums there are a series of modules. “Modules” visually, “Modules” literally in code, and “Modules” in that the content they contain is a related group, separate/different from the content in other modules.

The first one we look at is the Categories module. Vanilla Forums literally puts these in a folder called “modules”, which is nice. This particular one, as you might guess, is “categories.php”.

We find the place where the title is output, give …

#143: Forums New Thread Styling and Functionality Discussion

Don’t be mad, but I had to jump ahead a little bit because there was some grueling long boring work of overriding different views by putting the right files in the right places in our Vanilla forums themes. We’ve gone over this a few times so it was nothing new.

This time, we start the way again, finding a particular view that needs some design attention, finding the correct view, and overriding it in our own theme. This time, the …

#144: Forums Pagination Styling and Wrapup

We’re trying to wrap up the styling of the forums here. One of the major navigation mechanisms on the forums is the pagination. At the bottom of the page, you can move on to the next page or jump to a more distant page. It also serves to show the user how active and deep the forums are.

Our wireframes have a style mocked up for how pagination should look, and it’s pretty simple and usable. Due to some weird …

#145: Intro to The Lodge (Private Access Area)

We’ve done a little prep for this new “Private Access Area” on CSS-Tricks. We’ve looked at WordPress plugins to help us, we’ve even decided on one and set it up. But now we need to get into actually building the front end. We’re going to call it “The Lodge”. Funnily enough, as a viewer you already know all about it since you’re logged in and watching this video right now, but at the time of this screencast, it wasn’t built …

#146: Custom Header for The Lodge

In the last screencast we snagged that photo from iStockPhoto of the snowy cabin and forest. We dropped it in the background, behind the main content area and sidebar of our Photoshop document and it fit nicely up there, in kind of the style of the headers of the other areas of the site. Between screencasts, I wrote up some copy for the page as well. I would have liked to screencast that, but writing copy is one of those …

#147: Restricting Logic with Restrict Content Pro

Using …

#148: Styling the Signup Button for The Lodge

In the last video we figured out how to serve different content within our templates based on the users’s login and subscription status. We use that ability in this screencast to work on the “Sales Page” – that is, the page we’ve put at /lodge/ with a custom template. When a user is logged in, it will be a portal to the content inside The Lodge. When logged out, it will be the Sales Page.

We wrote a bunch of …

#149: Building a Login Form for The Lodge

One of the reasons WordPress is awesome is that it comes with its own fully functioning user authentication system. Writing that from scratch these days would be pretty dumb if you don’t plan to bring a heaping pile of innovation to the process.

Restrict Content Pro, our membership plugin, of course doesn’t re-invent the wheel. It just extends what the WordPress user system does by appending subscriptions to users.

So when we set out to add a login form for …

#150: Protecting Video Content with Expiring S3 Links

In this screencast we look into how we can host files on Amazon S3 (Simple Storage Service) in such a way that we can link to an use those assets, but not make them entirely public. Only make them accessible for logged in, subscription having users in The Lodge.

At the time I recorded this screencast, the plan was to use HTML5 <video> and have the <source> elements inside link to Amazon hosted (and protected) video. Since then I switched …

#151: Building the Lodge Module (and a Quick Speed Report)

We make a module for the general sidebar of the site that is just for the The Lodge. If you’re logged in, it will welcome you and provide relevant links regarding getting to the content and about your subscription. If you are logged out, it’s a bit of a “Sales” bit as well as log in form.

And totally randomly… I decide to talk about our speed goals and where we stand as we approach the end here.

Our homepage …

#152: Styling the WordPress (Lodge) Login Page

Our “widget” for The Lodge in the sidebar of the site (shows on most pages, including homepage) has two states. One for when a user is logged out and one when a user is logged in. The logged out state has a login form right on it so current members have an easy way to jump in.

We used to be using the built in function wp_login_form(), which is pretty cool for WordPress to provide, but we want to snag …

#153: Styling the Lodge Signup Form

The signup page for The Lodge is very important for obvious reasons: this is the page that collects the money and grants the access to the membership area. It needs to look good and work better.

Text is a part of that. We use the word “member” consistently. Become a member! The Lodge is members-only… – driving home the fact that you have to be a member to use the area.

The signup page itself is just a generic lodge …

#154: Styling the Lodge Archives and Single Lodge Video Page

The homepage for The Lodge when you are logged in (i.e. /lodge/) will be kind of a “portal” page. This series, which we’ll call “The Big v10 Redsign Project”, will eventually be just one of the projects shown on this page. Unfortunately at the time, that means there is this seemingly weird intermediary page, but that will become more useful over time.

At the time in this video, we wrote a bit of JavaScript to toggle the descriptions of videos. …

#155: Going Through the Pre-Launch Checklist

We are JUST ABOUT to launch this thing! It’s time to look over the last few little issues that need shoring up before we can launch. Bear in mind, the site is no where near perfect. But it’s close enough to launch. We can continue to fix little things and make things better after launch. That’s one of the reasons the web is so awesome. People will definitely let us know about broken stuff and we’ll plan to react quickly.…

#156: Launching the Site, Part 1

This is the big moment! We have a list of things we know that we need to do and we’re just going to start doing them and get this site live.

Perhaps the most noticeable change (last second thing before going live) was finally losing the little colored squares in the upper left of modules and essentially extending them across the top of each module making a bar. Less random, more descriptive, more color.

We make one final commit into …

#157: Immediate Post Launch Followup

I shot the video just maybe 10 minutes after launching the site. Comments are starting to roll in and this is me kind of reacting to some of that. Like anything of this nature, there are reactions both positive and negative. “I hate it!!” and “I like it!!” are common. Of course “I like it!!” is preferred because it makes you feel good, but they are both rather useless being free of specific critique.

This was (and always is) a …

#158: A Month Later: Final Wrapup

About a month after the launch we talk about how the v10 launch has gone.

We look through the document we set up at the very beginning of this process where we wrote down all the goals for the redesign.

Addressing the content better – Yep! Areas like the gallery and the individual video pages are big improvements. No longer are they jammed into a generic blog-like template, they now have a design suited to the content and the experience …

*May or may not contain any actual "CSS" or "Tricks".