Swell was created to give you the experience of the Tumblr archive feature, but with 60+ customization options and insane customer support from Style Hatch.
Infinite Posts + ‘Lightbox’ View
One of the challenges of sites with an infinite scroll mode is clicking on a post, going back to the list and realizing you have to scroll back down to where you left off. The Swell premium Tumblr theme gets around this limitation by launching the posts in a ‘lightbox’ style viewer. As you browse post by post your browser will even keep track of the post URL and give you the ability to hit the back and forward buttons as you explore. We even took care of the details so that the Tumblr like & reblog bar updates as you browse the posts.
Once you have a post open you can hit the J / K keys to go to the next and previous posts to go 100% mouse free. Combine that with the infinite scrolling feature an you can explore forever. Want to close the post viewer? Hit the ESC key.
To maintain a clean design a lot of the common theme features are tucked away at the top of the site design. Click on the top left triangle, the first navigation item, or go to /#!/about to expand the site description area. With the Customize > Appearance options you can add your Tumblr icon, links to various social sites, show your latest tweets, likes and posts to Flickr.
Add your Typekit kit ID to the appearance options to fully control and customize the typography in the Swell theme. Use some of the best fonts from foundries like FontFont, Adobe, P22, T-26 and Veer. To access all of the Typekit fonts you will need a paid Typekit account, but they also offer a free account with a limited selection.
Swell has built in support for group blogs, sharing on Facebook and Twitter, Disqus, Flickr, and sites you follow. In the Appearances options you’ll also find 29 social profile icon links.
Minimal summary mode
When you put your site in the minimal summary mode photo, photoset, video, and audio posts will only show the image or video in the grid and when you click on the item you will see the full post in the lightbox viewer. Text, quote, link, chat and ask posts will still use the post summary length value to summarize the post in the grid.
Full post mode
This option forces the theme to show the entire post while in the grid mode. You will still need to open the post in the lightbox viewer to see notes, social features and Disqus comments.
Infinite scroll mode
Switch your site into the infinite scroll mode to allow people to continuously scroll through all your posts in the grid layout.
Show portrait in description
Add your portrait icon to the right of your site description.
Show group blog details
This option enables the author details when viewing an individual post on a group blog.
Show theme credit
By default this is option is enabled, but if you want to remove the theme credit and link to the Swell theme uncheck this option.
Post summary length
Set the character count before the theme begins to summarize the posts and add a more link. By default the option is set to 200 characters, but you can go less or much more to give viewers more of a post preview.
The Swell appearance options give you seven title options to change various block titles throughout the theme: description, about link (in the navigation), social links, authors, recent tweets, liked on Tumblr, and recent posts on Flickr.
Upload a new background image to use with the theme or hit the clear button to just use a solid background color. By default the theme will tile the background image, but if you want it fixed, no-repeat or positioned to the center you can add CSS to Customize > Advanced > Custom CSS.
Upload a site logo that will replace the title at the top left of the theme header.
Swell comes with six different color options to tweak the site’s color scheme.
- Background - sets the overall site background color, just make sure you clear out the background image to see the color
- Text - control the color of the text used throughout the site
- UI text - this option sets the color of the all caps navigation items throughout the site, like the navigation, notes count, links at the bottom right, all cap titles in the post view and <h3&rt; tags
- Accent - sets the accent color used throughout the site. In the demo site this is the blue color used for the site title, links and background for the description reveal.
- Accent hover - sets the hover color for links and various accent elements
- Text on accent - control the text color that is used in combination with the accent color. On the demo site this is the white text in the description reveal and pagination links at the bottom right.
3rd Party Features
Add your Disqus Site Shortname to enable comments for your site. Click here to register for a Disqus site account.
Swell has asynchronous Google Analytics tracking built into the theme, all you need to do is add your site ID to this option.
For realtime tracking of who is on your site right now, goals, campaigns and Twitter monitoring add your Click ID. Clicky does charge for their analytics and tracking, but I highly recommend it for people who are stats junkies. Sign up for an account with Clicky.
Add your Flickr ID to display four thumbnails of your most recently uploaded images. Use http://idgettr.com to find your Flickr ID which is different than your Flickr username.
Want ultimate control over the typography in Swell? With Swell 1.0 Typekit is fully integrated in the appearance options. Here are the basic steps involved in setting up Typekit for your site:
- Register for a Typekit account - https://typekit.com/plans Typekit offers several affordable yearly accounts, but you can always go with the free plan with access to their trial library.
- Browse through the library and click + Add to Kit after you’ve selected the body and title font for your site.
- While you have the Typekit Editor open go through the list of Weights & Styles (screenshot) selecting only the fonts that you need. This is typically regular, regular italic, bold and bold italic.
- Once you have your two fonts selected hit the green Publish button at the bottom right (screenshot).
- Go to back to Tumblr and open Customize > Appearance, find the Typekit ID field and paste in your Typekit ID. You can find the ID by opening the Typekit Editor and clicking Embed Code at the top right. You only want to copy and paste the 7-8 character ID at the bottom (screenshot).
- Now paste in the font-family values for the body, title and UI fonts into Customize > Appearance. You will find it by clicking Advanced below the Selectors on the left (screenshot).
Tip: Even if you don’t use Typekit you can use the Body, Title and UI font options to paste in other standard font-family stacks.
Social icon links
Add URLs to display the following social site icons below your site description. Note: Make sure you add the full URL, including “http://”.
Behance, Cargo Collective, Delicious, Deviant Art, Digg, Dribbble, Ember, Etsy, Facebook, FFFFound, Flickr, Formspring, Forrst, Foursquare, Gowalla, Last.fm, Linked In, Rdio, Skype, Slideshare, Soundcloud, Stumbled Upon, Twitter, Vimeo, generic website link, Youtube, and your email address.
Posted on Monday, May 19th 2014