Tips for Customizing the New Responsive Snap Theme

We recently released a brand new theme to beta subscribers called Snap. The main feature that makes this theme special is that it's responsive. Check out our announcement post for more details about the theme and how to use it on your blog.

If you like the way the theme works but want to make it a little more yours, we're here to help with that, too. There are some easy changes you can make using CSS that will allow you to use your own colors, fonts and banner images. We'll be going into some of those ideas in this post. Please note that we're using the Custom CSS feature, which is available at the Unlimited level and above.

Custom Colors

We got a little carried away with flavors for the Snap theme and created a dozen to choose from. But it's possible that none of those colors suit your blog. Let's rectify that with some super easy code, like this:

h1 a,
.entry-header a,
.entry-header,
.module-header a,
.module-header,
.entry-body a,
.module-content a:hover,
.module-calendar a { color: #D60077 !important; }

.navbar { background: #D60077; }

.navbar a { color: #fff !important; }

That's the default code to make the banner text, post headers, sidebar headers, links and navigation bar pink. Just switch out the HTML color code with your own and you're done. You can pull out specific classes if you want to use different colors in specific areas.

Custom Fonts

We kept the fonts for this theme very simple so they'd be easy to customize with your own. Here's the default code:

body { font-family: Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6, .module-email  { font-family: Georgia, Times New Roman, serif; }

That makes body text Helvetica/Arial and headers Georgia/Times New Roman. Just switch out the font names with your favorite web safe font for an easy update. Or you can use a web font from a service like Google Web Fonts for even more customization options.

Custom Image Banner

This is the one we've heard the most requests for and we wanted to get the code just right. Due to the nature of responsive design, there isn't a one-size-fits-all solution for this but we'll make it as straight forward as possible.

First, you'll create your banner image. For the banner width, we recommend 1170 pixels. That seems really large but it will scale down in the code to suit smaller screens. For the height, we recommend keeping it under 200 pixels to prevent the image from pushing the blog content down below the fold.

After creating your image, go to Library > File Manager and upload it. Click on the image's file name in the listing and keep that open in another tab - you'll need the URL soon.

Next, go to the Custom CSS page and paste this in:

.container .jumbotron { padding: 0; }
.jumbotron { padding: 0; margin-top: 15px; }
.jumbotron h1 { margin: 0; }
.jumbotron h2 { display: none; }

That just removes some padding, hides the blog description, etc. Now let's add in the image:

.jumbotron h1 a {
background: url(http://example.typepad.com/folder/banner.jpg) center top no-repeat;
background-size: contain;
display: block;
left: 0;
top: 0;
height: 200px;
width: 100%;
text-indent: -1000em;
min-width: 320px;
}

Make sure to switch out the URL with your own, using the full URL. You'll also need to set the 200px for the height to the height of your image. Finally, add this:

/* Extra Small */
@media (max-width: 768px) {
.jumbotron { height: 90px; }
}

/* Small */
@media (min-width: 768px) {
.jumbotron { height: 140px; }
}

/* Medium */
@media (min-width: 992px) {
.jumbotron { height: 180px; }
}

/* Large */
@media (min-width: 1200px) {
.jumbotron { height: 200px; }
}

That tells the screen to scale the height down based on the width. Start with the Large - that's the height of the banner image at its starting point. Then it should progressively get smaller, using about the same changes shown in our example code.

In the image below, you can see how the banner will look on a 800x600 screen versus a 1024x768 screen. The banner is slightly smaller to fit into the screen properly.

Bonus tip!

At the smallest screen sizes, it looks really nice to hide the large banner and switch out the "Home" link in the navigation bar with a smaller version.

To do this, create your smaller banner and upload that to Library > File Manager. The width should be no wider than 250 pixels and the height should be 50 pixels.

Then instead of this code from the above:

/* Extra Small */
@media (max-width: 768px) {
.jumbotron { height: 90px; }
}

Use this:

/* Extra Small */
@media (max-width: 768px) {

.jumbotron  { display: none; }

.navbar-brand,
.navbar-header a:hover {
display: block;
left: 0;
top: 0;
text-indent: -1000em;
height: 50px;
width: 200px;
background: transparent url(http://example.typepad.com/folder/banner.jpg) center center no-repeat !important;
}

.navbar-brand a {
height: 50px;
width: 200px;
}
} 

Make sure to change out the image URL with your own and adjust the width size to match your image. Here's an example of how that would look on a mobile device:

We need your help!

We really want you to try out the Snap theme - we're going to be basing a lot of our upcoming themes on the responsive structure and we need your feedback. We'll be releasing it to all subscribers soon, so that means beta users get the first crack at it but not for long. If you have any questions about the theme, just let us know! We're eager for your feedback.