themes by pistachi-o
Refresh Blog Updates Themes & Pages Tutorials Resources Help Desk

Google Drive is working again, so all codes should be accessible now.

September 18 2014, 1 day ago 1 note
An ongoing tutorial series for those who already have a basic understanding of making tumblr themes and hopefully find something new or different to try.

A while back I said I was going to post a tutorial on how to use custom fonts on tumblr. And what better time than now, after that latest update from Chrome is messing up font rendering. 


Difficulty: CSS (easy) | HTML | JSExtra Reading: @font-face rule, base64 encode, fallback fonts

[[MORE]]

What’s Not Working

First off, I’ve seen many people use @font-face with only one format. This is technically incorrect as it’s incomplete and it’ll only work on browsers that support that specific font format or those who already have the font installed on that computer. 

So this, is technically incomplete:
@font-face {
font-family: 'fontname'; 
src: url("http://static.tumblr.com/whx9ghv/fontname.ttf") format('truetype');
}


If you really, really only want to use one format, the safest option is to use .woff as that is supported by all the modern browsers. 

The agreed method with the best cross-browser compatibility should be something like this (there’s a good tutorial over at lmthemes):  
@font-face {
font-family: 'fontfamily';
src: url('"http://static.tumblr.com/whx9ghv/fontname.eot'); 
src: url('http://static.tumblr.com/whx9ghv/fontname.eot?#iefix') format('embedded-opentype'),
    url('http://static.tumblr.com/whx9ghv/fontname.woff') format('woff'), 
    url('http://static.tumblr.com/whx9ghv/fontname.ttf')  format('truetype'), 
    url('http://static.tumblr.com/whx9ghv/fontnamey.svg#svgfontfamily') format('svg'); 
font-weight: normal; 
font-style: normal;
}


However, there are at least two known instances when this doesn’t work. 
1. In Firefox. To use custom fonts in Firefox, they are required to be served from the same domain - which is impossible on tumblr. 
2. After the latest Chrome update and it’s font rendering problem. 

And Here’s The Fix

Use a base64 encoding of the font and add it to the @font-face declaration, to embed it directly into the CSS. 

There are a range of places that can do this, my favourites are: Font Squirrel’s Web Generator and Opinionated Geek’s Encode Tool. 


Font Squirrel’s Web Generator
On the page, select Expert Option, scroll down to the CSS part and tick “Base64 Encode” - that will then generate a download with all the prewritten CSS needed. 
Please note that it won’t work right away if you’re using this method. I’m not entirely sure why but there are small tweaks that need to be made to the CSS (if you refer to the code below). 


Opinionated Geek’s Encode Tool
This is what I prefer to use. This tool will only give you the encode (the really long part) but if you have the code below it’s easy to just paste it in the right place. 


The CSS You Need
@font-face {
    font-family: 'fontface';
    src: url('http://linktofontface.eot');
    }

@font-face {
    font-family: 'fontface';
    src: url(data:font/ttf;base64,[insert-encode-here]) format('truetype');
    font-weight: normal;
    font-style: normal;
}


Things That Need to be Edited:
'fontface' - the name of the font
ttf - the format of the font that you encoded
truetype - the format of the font you encoded
[insert-encode-here] - this is where the encode goes, minus the squaure brackets
Here is a working exampleHere is an example where you can compare before and after of using this technique. 

As you can see, the encode part is super, duper extra long. It makes scrolling through the code really tedious. So what I suggest is to link to it as a separate stylesheet to save you space.  

Few things to note when using custom fonts. Don’t overload it. As we’re directly embedding into the CSS, load up time will be effected. I seriously wouldn’t consider using more than one custom font with this method. Use Google Fonts where you can. 

Also, make sure you always have fallback fonts - which you should anyway - for when things go wrong.

An ongoing tutorial series for those who already have a basic understanding of making tumblr themes and hopefully find something new or different to try.

A while back I said I was going to post a tutorial on how to use custom fonts on tumblr. And what better time than now, after that latest update from Chrome is messing up font rendering.

Difficulty: CSS (easy) | HTML | JS
Extra Reading: @font-face rule, base64 encode, fallback fonts

September 15 2014, 3 days ago 334 notes

Access To Codes

Sorry, when I re-uploaded the codes, I forgot to set half of them back to “public” which is why a few people had problems. All should be working fine now.

September 15 2014, 4 days ago 0 notes

Custom Font Update

All Themes Updated

As some of you will know, the new Chrome update has caused a problem with the font rendering of custom fonts.

After a bit of feedback, it seems this method works and I’ve now updated all my themes and pages but here’s a quick step-by-step guide for those who want to do it manually (saves having to reinstall the whole thing, especially those with scrapbook pages).

Do-It-Yourself

1. First, copy the following, and paste it just before <style type=”text/css”> (or you can add it to where the other fonts are linked) - this is normally near the beginning of the code.

<link href='http://static.tumblr.com/whx9ghv/AdUnbw2jm/sosa.css' rel='stylesheet' type='text/css'>

2. Next, scroll further down the code to look for this and delete it all.

/* @font-face (SOSA)
-------------------------------------------------------------*/
 @font-face {
font-family: 'sosa';
    src: url("http://static.tumblr.com/whx9ghv/iTmmbwkij/sosa.eot");
    src:
        url("http://static.tumblr.com/whx9ghv/iTmmbwkij/sosa.eot?#iefix") format('embedded-opentype'),
        url("http://static.tumblr.com/whx9ghv/zwPmbwkjn/sosa.woff") format('woff'),
        url("http://static.tumblr.com/whx9ghv/5Skmbwkja/sosa.ttf") format('truetype'),
        url("http://static.tumblr.com/whx9ghv/KXgmbwkj1/sosa.svg#icons") format('svg');
font-weight: normal;
font-style: normal;
}

3. And it’s done! If you have any problem you can go back and look at the original codes as I’ve updated them all. Also note, this will only work for my themes or anyone else who uses the SOSA icon font.

For other theme makers experiencing the same problems, I’ve used the bulletproof @font-face method with embedding. I will write a quick tutorial next to help those who need this workaround.

September 14 2014, 5 days ago 27 notes

Custom Fonts: Stars/Quotations

My inbox is filled with messages about the custom fonts (stars on the scrapbook pages/quotes on the main blogs) in my themes not working - I know, it’s a problem with the way the new Chrome update renders fonts and basically everything is messed up.

Sorry I haven’t been able to get back to messages quicker, I had an impromptu vacation and wasn’t online long enough to answer them.

I think I have a way to solve the problem with fonts, I just need you guys to help me check if it works. Please have a look at the two links below, scroll down to the quote post and tell me if you see the “quotation icon” or just “C”.

1. This live preview hasn’t been edited and due to the font problem should show “C” where the quote icon is.

2. This live preview is a possible workaround and if correct, should show the quote icon instead.
If this method works in solving the font problem, I’ll be updating all the codes as well as providing a way for you to edit it yourself (so you don’t need to reinstall). So does it work, leave a reply below or in the disqus comments?

September 14 2014, 5 days ago 6 notes
XXXVI - Creep (Minimal Blogging #2)

As I mentioned before, I&#8217;ve been trying to do something different by working on some minimal style themes. I&#8217;ve got five of them already coded so I&#8217;m turning it into a  series. I tried to keep all the normal customize options but colours are more limited. Please tell me what you think - too simple, too much going on, too complex?

Please save and refresh the customize page before making any customizations/change. Feel free to customize however much you want, the more the better, but leave credits intact.  It would also be great if you could &#8216;like&#8217; this post if using the theme. Please use Disqus to report any problems or errors (not customization questions) as you can comment as a guest.


- Live Preview: Scrolling Sidebar + Fixed Sidebar (temporary) 
- Last Update: 04 September 2014&#160;
- Support: Installing / Customizing / FAQ


Main Features
Simple header with optional image backgroud. 
Various widgets for text, links and other updates. 
Allows up to 28 custom links. Page links disabled. 
Sidebar with either fixed or scrolling options. 
Limited colour choices. 
Choose between 400px or 500px posts. Make sure only one is toggled or the layout will look messed up. 
All post types supported.
[[MORE]]

Install This Theme

By using my themes you agree to the following:
Do not remove the credits.
You can move it a different place or a secondary page but it has to be somewhere visible. Not just in the source code.  
Do not use my themes or pages as a base code for your own work. 
Do not take major chunks of my coding (for example, the whole sidebar or all the entries) and stick it with something else to then claim as your own. 
Do not redistribute any of my themes or pages.
Even if the credits are still in place. And especially not as an “edited” theme. 
Agree And Continue To Codes

Direct Link | Hosted on Google Drive

Customize Options

You can change all the basics including fonts, size, colours, images and links. 

Simple Header: With the blog title, main links and up to 4 custom links space. Header image is optional. 

Sidebar: With a scrolling or fixed option. If you choose fixed, please be aware of how much space you are you as it may cut off for those with smaller screens. 

Widgets: A range of sidebar extra that can be toggle on/off include basics like the three link widgets (8 links each) and three text widgets. There are two more complex widgets, Projects and Spotlight (as shown in the live preview) that can edited in the HTML. The default for both of these are set to &#8220;off&#8221; and please only use if you know what you&#8217;re doing as it requires basic HTML/CSS knowledge (I will not be helping with customization). 

Sidebar Image: There is also an optional sidebar image, automatically resized to 200px (width). Toogle between External or Tumblr Sidebar Image upload options (explained in more here). 

Posts: All post types are supported and there is an option to choose between 400px or 500px posts. Please make sure you toogle only one of these options. 

Credits
Google Web Fonts: Source Pro Sans and Oranienbaum
Icon Font Fontello (Font Awesome and Entypo)
Cupcake Ipsum

XXXVI - Creep (Minimal Blogging #2)

As I mentioned before, I’ve been trying to do something different by working on some minimal style themes. I’ve got five of them already coded so I’m turning it into a series. I tried to keep all the normal customize options but colours are more limited. Please tell me what you think - too simple, too much going on, too complex?

Please save and refresh the customize page before making any customizations/change. Feel free to customize however much you want, the more the better, but leave credits intact. It would also be great if you could ‘like’ this post if using the theme. Please use Disqus to report any problems or errors (not customization questions) as you can comment as a guest.

- Live Preview: Scrolling Sidebar + Fixed Sidebar (temporary)
- Last Update: 04 September 2014 
- Support: Installing / Customizing / FAQ

Main Features

  • Simple header with optional image backgroud.
  • Various widgets for text, links and other updates.
  • Allows up to 28 custom links. Page links disabled.
  • Sidebar with either fixed or scrolling options.
  • Limited colour choices.
  • Choose between 400px or 500px posts. Make sure only one is toggled or the layout will look messed up.
  • All post types supported.

September 04 2014, 2 weeks ago 655 notes

Updated Codes: Theme 301 Voyager

Updated a small error to do with the permalink pages.

September 02 2014, 2 weeks ago 0 notes