#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 …

Play

#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. …

Play

#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 …

Play

#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 …

Play

#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 …

Play

#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 …

Play

#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 …

Play

#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 …

Play

#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 …

Play

#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 …

Play

#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!…

Play

#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 …

Play

#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, …

Play

#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 …

Play

#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 …

Play

#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 …

Play

#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 …

Play

#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 …

Play

#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 …

Play

#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 …

Play

#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 …

Play

#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 …

Play

#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 …

Play

#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 …

Play

#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 …

Play

#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 …

Play

#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 …

Play

#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 …

Play

#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 …

Play

#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... …

Play

#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 …

Play

#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 …

Play

#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 …

Play

#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 …

Play

#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 …

Play

#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 …

Play

#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 …

Play

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag