Video: Changing Underscores from Page-width to Full-width and Creating a Visual Structure

Tweaking Underscores for Theme Projects

In this video series, I show you exactly how I use a fresh copy of Underscores to start every single one of my theme projects.

full course
  1. Downloading A Fully Branded Copy of the Underscores Starter Theme by Automattic
  2. Making Initial Adjustments to the Underscores Stylesheet Before Building Themes
  3. Changing Underscores from Page-width to Full-width and Creating a Visual Structure
  4. Creating a More Organized File Structure in Underscores and Reviewing File Contents
  5. Final Walkthrough of Underscores to Discuss Theme Functionality and Adjust Code

In this video I show you exactly how to change the HTML structure of Underscores. By default, Underscores sports a page-width HTML structure which can be limiting once you start working on designs. Here, I show you one simple way to change the HTML structure and open your design possibilities up without sacrificing your original design freedoms.

I also show you how to write structural CSS that will align the content and sidebar columns side by side. We’ll make it all responsive as well.

If you have any questions, comments, or concerns, leave a comment below!

Tweaking Underscores for Theme Projects

In this video series, I show you exactly how I use a fresh copy of Underscores to start every single one of my theme projects.

full course
  1. Downloading A Fully Branded Copy of the Underscores Starter Theme by Automattic
  2. Making Initial Adjustments to the Underscores Stylesheet Before Building Themes
  3. Changing Underscores from Page-width to Full-width and Creating a Visual Structure
  4. Creating a More Organized File Structure in Underscores and Reviewing File Contents
  5. Final Walkthrough of Underscores to Discuss Theme Functionality and Adjust Code
7 Comments:
  1. Sean, I happened upon your videos by accident while looking for more information on getting started with _s. It was exactly what I needed! I appreciate your thorough explanation of your process without being dogmatic. I’ve already learned a lot. Thanks so much!

    • That’s exactly what I like to hear! I appreciate the feedback. Please let me know if there’s anything else I could do to help.

  2. Well … I’m going to have to watch this video (actually, all of them) multiple times. Lots of information, but explained very well. Thanks!

  3. Hi, I very much appreciate your videos, particularly how you intermingle the php-side and css-side of things. Your fullwidth tweak was a real eye-opener. Thanks!

    However, may I test my own css-understanding with two quick questions?

    Why do you need the first “wrapper div” with classes .header-area, .main-content-area and.footer-area? As far as I can see, they are not used for the fullwidth-tweak, and for the vertical spacing you could just as well have targeted the already existing #header, #content and #footer IDs. Or am I wrong?

    Also, at 37.02 you add left/right padding for under 800px by targeting .inner. Is there a reason you target .inner rather than .main-page? If not, we don’t really need the .inner class at all as far as this video is concerned.

    • Hi Peter! Sorry for the slow reply.

      1. You are 100% right. My initial changes are not totally necessary. They simply come from experience with a full-width structures and classes/IDs that I sometimes need. Couple that with a desire for consistency in class/ID naming and presence in the markup, and I just do what I do to establish my baseline standard for the markup. You are definitely free to take a different approach based on what makes sense for you.

      2. Keeping with my #1 answer above, I know that I can target .inner there because it is a guaranteed part of my structure based on my initial setup of the full-width structure. Sometimes when you’re writing a CSS selector, you choose to make it based on your understanding and familiarity of the markup rather than the absolute most efficient path to target the element.

      While I know that doesn’t seem like best practice, writing CSS sometimes forces you to weigh pros and cons. For example, do you make your CSS file human readable or efficient? Do you group all selectors that share properties and values or do you repeat the same properties and values throughout the file in order to separate different sections of your CSS in a logical manner?

      What you’re seeing in my approach to the CSS is a mix of knowing I will always use inner no matter what in my full-width structure. It is the most constant part of that markup for me. It’s on of those things that will make more sense when you write some code and then don’t see it again for 6 months. You don’t have to remember your thinking based on efficiency. Your baseline standard will guide you every time.

      So it’s really just different strokes for different folks. Great questions for sure. Those questions mean you are starting to think about your balance between how CSS is written and how YOU write CSS. And that’s important!

      Thanks for reading.

  4. Hi Sean, I used to use WP and the Thesis theme many years ago and know just enough to be dangerous. It was 10 years ago, so I’d actually say I don’t even know enough to be dangerous!

    I recently downloaded the Components theme thinking this would be an ‘easy’ starter theme, as promoted. However, I find myself completely overwhelmed and frustrated. I need to just get a simple modern travel blog set up, and I feel like this theme is way more than I can work with. Do you have any advice? Thanks so much.

  5. Hi Sean, so I went through your third video on Underscores and followed along on my Components based theme. The site started looking awesome and I thought I was cooking with gas. Then I realized, my site had become no longer responsive. I.e., horizontal scroll bar at the bottom rather than just resizing everything as the screen size changes. I reverted back to the original files and I seem to have the site back up. But I’m still stuck on how to get a full width effect going, if that’s even possible when I use Components. My website is called SlowViking.com and it basically looks how your sample site looked in the video. Websites that I think are great and wish I could mimic in some way are

    http://www.wheresmyofficenow.com
    http://www.jasondoesstuff.com

    Any event, wondering if you have a line on any training for Components, which I understand is built from Underscores. Ultimately, I don’t care what theme I use so long as its free (or cheap) and that it’s technically “mobile-first” and “responsive.” Sorry to be a basket case, but that’s where I’m at. If you can give guidance to training, or just a different approach, that’d be awesome. Thanks!

    PS – awesome tutorial, btw. I felt like I was really cooking with gas, there, for a while. Then it dawned on me that the changes I’d (we’d) made, caused my responsiveness to stop 🙁 Thanks! 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

*