Atlantic Noir by Style Hatch
Here at Style Hatch we’re extremely excited to release Atlantic Noir as one of our most customizable themes yet. With the easy to use appearance options you have full control over every color, font and theme images to give your Tumblr blog a unique style.
Atlantic Noir was also designed with mobile devices in mind. As you resize the browser window notice how the theme responds to the width so that it looks great on a computer, tablet or phone.
A tremendous amount of time has gone into polishing the details you’ll notice in Atlantic Noir. From the custom photoset player to subtle animations no detail has been overlooked. A lot of time and love went into the theme making sure it will look amazing in any situation.
Social Features
Atlantic Noir has built in support for group blogs, sharing on Facebook and Twitter, Disqus, Flickr, and sites you follow. Also in the appearances options you’ll find nearly 30 social profile icon links.
Typekit Support
Want ultimate control over the typography in Atlantic Noir? Typekit is fully supported in Atlantic Noir 1.0 through 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, UI and title fonts into Customize > Appearance. You will find it by clicking Advanced below the Selectors on the left (screenshot). Example: “proxima-nova-1”,”proxima-nova-2”,sans-serif
Tip: Even if you don’t use Typekit you can use the Body, UI, and Title Font Family options to paste in other standard font-family fonts.
Customization Options
Colors
Background - Set the background color used for the overall site. If you want to just show a solid background color make sure you clear out the background image option.
Page - Sets the color of the center blog column. On this demo site the page color is set to white.
Accent - Pick an accent color that is used for various links, rollover elements and UI touches.
Title - Set the color titles used throughout the site. This includes <h1>, <h2>, <h3> and <h4> tags.
Text - Sets the overall color of text throughout the site.
UI - This color applies to the footer below each post and various UI elements
Nav - Set the background color of the top navigation/pages bar and the pagination bar at the bottom of the site.
Box - Pick the color that appears inside the quote, ask, recent tweets, links and other shadowed boxes. If you don’t want a specific color set this to the same color as the page.
Images
Background - Upload an image to be used as the site’s background. With the option to fill the background you can upload larger images that will stretch and fill to the browser size. Otherwise the background image will simply tile.
Logo - Upload an image to replace the site title with a logo. This is also useful if you want to upload a header graphic for your blog.
Options
Show portrait in description - Display your blog icon inside the site description
Fill background image - Check this option to stretch larger background images to always fill the browser window. Otherwise the background image will simply tile.
Use custom photoset player - Atlantic Noir uses a custom, non-Flash photoset player by default.
Show group blog details - If your site is setup as a secondary blog, and you invite others to be authors check this option to show the author list as well as author names below each post.
Show sites I follow - Show a list of icons for the sites that you follow on the sidebar.
Show share button - This option adds a share button below each post that reveals the Facebook like and Twitter’s tweet buttons.
Inverted colors - If you are using a dark color scheme you will want to check this option to invert some of the UI elements.
Custom Text
Atlantic Noir give you the ability to change up various titles and bits of text throughout the theme. These options include: description title, social links title, authors title, following title, likes title, flickr title and footer copyright.
Extensions and 3rd Party Addons
Disqus ID - Add your Disqus Site Shortname to enable comments for your site. Click here to register for a Disqus site account.
Google Analytics ID - Atlantic Noir has asynchronous Google Analytics tracking built into the theme, all you need to do is add your site ID to this option.
Clicky ID - 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.
Flickr ID - Add your Flickr ID to display four thumbnails of your most recently uploaded images. To find your Flickr ID use http://idgettr.com
Typekit ID - Add your Typekit site ID enable custom typography and font-face fonts for your site.
Tweet Count - Sets the number of recent tweets to show in the right column.
Likes Count - Sets the number of Tumblr liked posts to display in the right column. The maximum like count is 10.
Social 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.
