Welcome to Getting to Know Nimble, a special series full of tips and tricks to make our new Design Lab work for you. In this series, we'll take a look at everything the Nimble Design Lab has to offer, what it can do, and how you can utilize its features to make your blog stand out. Check out the rest of the posts in this series here!
We start the series with one of our favorite new features exclusive to Nimble - the Highlight Bar. We often receive requests from Typepad bloggers asking how they can make the front page of their blog look a bit more like a magazine, where the front page posts put your photos front and center, and there is an excerpt of each post with a link to read more.
You can set this up manually as you compose each new post, but why go to all that work? Instead, start by heading on over to Settings > Posts and scroll down to the bottom. Here you'll see a section called Auto-Generated Excerpts. Put a check in the box labeled "Display excerpts instead of full posts on index and archive pages". A new check-box will appear when you do this, which says "Show featured image with excerpt". Make sure that this is checked as well.
Now go on to Design > Style. You'll immediately see that the Live Preview has updated to show an example featured image with excerpt below and that there is a band across the image with the post title and post date. This is the Highlight Bar. If you like how it looks, you don't need to make any further changes, just start posting to your blog and adding photos to your posts and Typepad will do the rest.
Maybe you'd like to make the Highlight Bar a different color, or move it to a different position on the image, however. To do this, click on "Posts" in the menu to the right of the live preview.
This will open a section where you can modify the style of your posts. At the bottom of this section is the configuration area for the Highlight Bar.
Click on the colored rectangle to open a small window where you can chose a new background color for the Highlight Bar.
Keep in mind that the highlight bar will be slightly transparent so that the image can be seen through it. The text color for the post title and post date can be set above, along with the font and the size. You can also choose whether the Highlight Bar should appear across the middle of the post (this is the default) or across the top or bottom.
As you make each change, the Live Preview will update to show you how it will look. (Isn't the Live Preview the coolest feature ever? We're still geeking out over it ourselves!) Once you're satisfied with how you've styled the Highlight Bar, click "Save Changes" below the Live Preview to save your style. You can then check it out on the published blog by clicking "View Blog" in the top right corner of the page.
If you're on the Pro Unlimited plan or above, and if you're comfortable with coding CSS, you can customize the Highlight Bar further using the Custom CSS feature, such as by adding a border around the Highlight Bar or the featured image. To add a thick, solid, black border around the Highlight Bar, for instance, use the following code:
.overlay-text { border: 5px solid #000000; }
Our Knowledge Base article on CSS borders has more information on the different border styles you can use, if you'd like to learn more.
Want to see how the Highlight Bar looks on a real blog? Check out Swoonish:
Are you using the Highlight Bar on your Nimble blog? What tips and tricks do you recommend for bloggers who would like to add it? Tell us in the comments below!