With subtle glowing edges and high-contrast elements, Transcender is a futuristic yet simple three column premium theme from Style Hatch. Choose either the light or dark style and customize your colors, background and 60+ appearance options—see all the customization options.
Have questions, need support or want to say hello? email@example.com
Customize Your Styles
Transcender takes advantage of HTML5 and CSS3 to give all the edges a nice glow, shadows and details while keeping the images used in the theme down to a minimum—three images to be exact—for fast load times and flexible customizations.
Every last detail has been polished in Transcender down to the futuristic, clean style and subtle animations. Just for fun try rolling over a few links, click inside the search box, and hover over the next page circles at the bottom.
Transcender has built in support for group blogs, sharing on Facebook and Twitter, Disqus, Flickr, and sites you follow. Also both the left and right columns have built in HTML containers for your own content, small ads and other social plugins. In the Appearances options you’ll also find 29 social profile icon links.
Want ultimate control over the typography in Transcender? New to Transcender 1.2 is full integration of Typekit 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 and title 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 Typekit Body Font and Typekit Title Font options to paste in other standard font-family fonts.
Toggles the dark and light versions of Transcender. This will primarily effect the post text and background. Once you shift to the light version you will need to set all the other colors for the site background, accent, link background, etc.
Show Portrait in Description
Displays a small portrait icon inside your description.
Show Group Blog Details
If your site is setup as a group blog this option will list the site authors in the sidebar as well as display the author below each post.
Show Sites I Follow
Displays a box on the left column showing all the sites you follow revealing 20 at a time.
Use Smart Bold Titles
When creating post titles it is ideal to add <h2> tags around the title, but the smart bold titles option will make it a bit easier to define a title for each post. After the option is enabled just bold the first line (paragraph) of any post to turn it into a stylized title. This option can be problematic in situations where you only bold one or two words in the first paragraph.
Use Custom Fonts
This option simply enables the use of the custom font Titillium Text by Accademia di Belle Arti di Urbino. If you want to customize the fonts used in the theme you will need to do so with Custom CSS.
Tile Background Images
By default the background image will be set to the top center of the page with no repeat. Turn on this option to have the background image tile and repeat across the entire background.
Use this option to upload a background image for the site. This can be used for a repeating site background or creatively behind the site title for a unique header.
Sets the overall site background, combined with the background top glow you can create a subtle gradient at the top of your site.
The accent color is used for all the links through out the site as well as other stylized elements.
This color sets the background color behind all the text links as well as the Link posts.
Set the color of the site title at the top of the page. Typically this will be white with the dark style and dark grey with the light style, but with this option you can set the title color to work with your selected background image or color.
Same as the title
Background Top Glow
Adds a subtle gradient/glow to the top of the site. This works best when the value is very close to the background color.
Site Secondary Title
Sets an optional secondary title below your site title.
Appears above the list of defined Pages in the Customize menu.
The title above your site description.
Social Links Title
Displayed above the social link icons. If you do not want to display any icons simply remove the title.
If you have a group blog this will set the title above the list of site authors.
Displayed above the icons showing the sites that you follow.
Appears above the Twitter feed as long as you have Twitter integrated with your Tumblr account.
Displayed above the Tumblr posts that you like.
Appears above the four Flickr thumbnails when you have your Flickr ID set.
Changes the copyright information displayed at the footer of the site.
Extensions and 3rd Party Addons
Add your Disqus Site Shortname to enable comments for your site. Click here to register for a Disqus site account.
Google Analytics ID
Transcender 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.
Sets the number of recent tweets to show in the right column.
Sets the number of Tumblr liked posts to display in the right column. The maximum like count is 10.
Sidebar Left Widget HTML
This option adds an additional box to the left column right below the site description and social icons. Use HTML to add titles (<h4> tags), paragraphs, links, images and lists. The maximum width is 180px.
Sidebar Right Widget HTML
This option adds an additional box to the top of the right column. The description is the same as above.
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.