Excelle Theme

It’s been years (literally) since I’ve submitted a theme to Tumblr. For those who have stuck with me despite my long absence, this one is for you.

Includes:

  • Customization options include colors, fonts, and other styles
  • Responsive two column design with full-width posts on permalink pages
  • Feature full-width posts on the homepage by tagging the post with “xl”
  • Infinite scrolling (click button to load more posts)
  • Social networking links
  • Instagram, Flickr, Pinterest, and like widgets
  • Custom lists with bullet options
  • Custom text options on your ask and submit pages
  • Integrates colors and avatar styles from mobile theme options

Information:

  • You must allow Instagram to display your photos by getting an access token. Click here to get your access token.
  • The like widget will only display on primary blogs.
  • Uploading a custom header icon will override the option to show or hide your avatar.
  • The accent color from your mobile theme options is used for links and hovers. The color used in the demo blog and screenshots is #2A5DB0.
  • The background color is also from your mobile theme options. The color used in the demo blog and screenshots is #EBEBEB.
  • Custom text on your ask page cannot include HTML. Use \' instead of regular apostrophes.

Click here to install! If you have any other questions, please check out my FAQ. If your answer is not listed there, feel free to contact me or send a Tumblr message to me on my contact page.

Like and/or reblog this theme if you decide to use it!

Working on getting a complete theme and tutorial together. In the meantime, here’s a breakdown of all the tweaks/themes I used.

iPhone 5, iOS 7.0.6

Gabrielle’s Font Resource Masterpost

There are many font resources available on the Internet, but the following are the ones I use the most often.

FONT COLLECTIONS

  1. Google Fonts The best part about Google Fonts’ extensive collection is that all the work of converting, uploading, and embedding is already done. All you have to do is link a stylesheet in your HTML or import it directly to your own stylesheet. Favorite fonts include Source Sans Pro, Asap, Inconsolata, and Astloch.
  2. Lost Type Co-op This collaborative effort includes quality fonts with a western, cowboy feel to them. Each font is available on a pay-what-you-want basis - you can donate or download the font for $0. Favorites include Haymaker and Homestead.
  3. The League of Moveable Type The League aims to provide well-made open-source fonts to anyone and everyone. League Gothic is probably the League’s most recognizable font, but other notable fonts are Ostrich Sans, Blackout, and Sorts Mill Goudy.
  4. MyFonts The front page boasts of the world’s largest collection of fonts, and I can’t deny that it’s the largest I’ve ever seen. Most of the fonts on here aren’t free, but searching for fonts tagged “free” yields some decent fonts with free weights such as Museo (Sans, Slab, and Cyrillic) and Sketchetik.
  5. Dribbble and Behance both showcase beautiful work and many designers offer their fonts for free!
  6. Runners up include Font Fabric and Font Squirrel.

STANDALONE FONTS

  • Latin Modern Mono This amazing monospace font has over a dozen different weights and styles, of which I especially love the regular italic variant.
  • Bariol The font creators ask that you pay with a tweet for the regular and italic versions of the gently rounded font, but I ended up buying the rest of the weights in both regular and italic for just six euros. They also provide a quirky icon font to match.

ICON FONT RESOURCES

  • Entypo and Typicons are my two favorite icon fonts, hands down. Each includes icons that easily translate to Tumblr’s basic icon needs (home, links, post types, etc) and are aesthetically pleasing. I’m currently using Typicons on my own websites.
  • Font Awesome and Foundation Icons are other great icon fonts that are included with fluid frameworks.
  • Fontello allows you to pick and choose icons from different fonts and creates a custom font you can use on your website. You can even choose what code to use for each icon. This is especially handy because by choosing only the icons you need, you reduce file size and load time.
  • Base64 Encoder This comes in handy because you can directly embed fonts into your CSS stylesheet instead of having a separate file. Please read up on how to embed base64 fonts as this only converts the file and does not have the proper data type.

IDENTIFYING FONTS

FONT SCRIPTS

  • Lettering.js separates each letter within a chosen HTML element into a span element that can be easily styled with CSS, giving you complete control over individual letters.
  • FitText.js inflates headers to fit the width of the window or to your specified size. Great for fluid or responsive layouts.
  • slabText.js separates headlines into rows by ideal character count and resizes each row to fill the space. Not something I use regularly but still a useful plugin.
  • Kern.js, Kerning.js and jKerny.js all give you some form of control over kerning.

I’m finally remaking Greying from scratch. I know, long time coming. I have two questions for you guys! Please take a moment to answer them if you’ve ever used or even looked at a blog using Greying, as the results of this poll affect how I make this theme for you guys! Please and thank you :)
Should I update the old coding or post a completely new theme instead? The new Greying definitely has a different look and I will be taking out options (fixed sidebar for sure) and adding new ones (different next/previous page options, mobile/responsive layout, etc).
See above photo. I’m trying to redo the bottom controls for each post and want to implement the native like and reblog buttons. The globe button is for the post source and may be replaced with a different icon. Do you like this layout? Would you change it in any way, besides the globe icon?

I’m finally remaking Greying from scratch. I know, long time coming. I have two questions for you guys! Please take a moment to answer them if you’ve ever used or even looked at a blog using Greying, as the results of this poll affect how I make this theme for you guys! Please and thank you :)

  1. Should I update the old coding or post a completely new theme instead? The new Greying definitely has a different look and I will be taking out options (fixed sidebar for sure) and adding new ones (different next/previous page options, mobile/responsive layout, etc).
  2. See above photo. I’m trying to redo the bottom controls for each post and want to implement the native like and reblog buttons. The globe button is for the post source and may be replaced with a different icon. Do you like this layout? Would you change it in any way, besides the globe icon?

New personal tumblog theme

Tip for theme designers!

If you want something to show up on permalink post pages but not on ask, submit, and other non-post pages, wrap it in {block:PermalinkPage}{block:Posts}{block:Date} {/block:Date}{/block:Posts}{/block:PermalinkPage}.

Tumblook 3.0

  • Click the link above for a preview!
  • Mobile, responsive layout
  • Infinite scrolling
  • Disqus integration
  • Optional widgets – About, Following, Instagram, Flickr, Pinterest
  • Two different types of highlighted posts
  • Smart top bar that moves or becomes fixed based on your browser width and height
  • Five different page layouts that mimic Facebook

To download, click here, and make sure to go through the README file before you install!

If you use the theme, please like or reblog to show your support!