themes by pistachi-o
Refresh Blog Updates Themes & Pages Tutorials Resources Help Desk
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, 1 month ago 636 notes
Reposting this tutorial because I need to set up a tutorials tag.

I’m not going to explain how the whole page was styled. Instead I’ll just go over the main points on how to get the linking/scrolling (of questions) to the corresponding parts of the same page (the answers) to work. This technique is not limited to FAQ’s and can be used at any time you want to scroll to a certain part of the same page. 


Difficulty: CSS (easy) | HTML (easy) | JS (easy)Prior Reading: HTML Anchor Tag, HTML Definition/Description ListsDownload the codes. 


[[MORE]]

HTML

1. Let’s go over how you would normally link to another part of the page.

First you choose the “target”, the place you want to be linked to. Normally you will give it a name as an identifying mark. 

<a name="targetname">GENERAL QUESTIONS</a>


Then you make the link to the “target”. It’s the exact same as adding a normal HTML link but instead of the URL you replace it with “#” (hashtag), followed by what you named the target. 

<a href="#targetname">Take me to GENERAL QUESTIONS</a>



2. Taking that knowledge, we can start to implement it into the questions/answers section. The most important thing is that each question/answer link combo has to have it’s own unique “targetname”. 

So now you know how to anchor the links. The questions are going to be the links, like so:

<a href="#targetname">Can I Edit Your Theme?</a>
<a href="#targetname2">How/Where Did You Learn to Make Themes?</a>


The answers are going to be the “targets”:

<a name="targetname">Answer to can I edit your theme.</a>
<a href="#targetname2">Answer to how did you learn to make themes.</a>



3.Then flesh it out slightly, so it looks like the final product: 

<h3 id="general"><a href="">General Questions</a></h3>
<a href="#1_1">Can I Edit Your Themes?</a>
<a href="#1_2">How/Where Did You Learn to Make Themes?</a>

<dt id="1_1">Can I Edit Your Themes?</dt>
<dd>Super duper answer here.</dd>
<dt id="1_2">How/Where Did You Learn to Make Themes?</dt>
<dd>Super duper answer here.</dd>


You’ll notice a few differences here: 
i) When I made my FAQ I had a “main topic” (i.e “General Questions”, “By Theme”, “Credits/Resources”) followed by the actual questions. The “main topic” is given a header and unique text “targetname”. For each of the questions under the topic, I took the idea of having a numbered order to make navigation easier. 
ii) For the “targets” instead of a name I have changed them to dt id (definition lists). As long as you link the question to the correct answer ID it works in the exact way as it would for “name”. I’m using definition lists because after looking a number of professional FAQ’s I’ve noticed definition lists is the way to go for more flexibility. 



Technically what you have now is perfectly functional. It’s just kinda ugly. This is where the CSS/styling comes in and you are basically free to do whatever you want. 


CSS


Styling The Topbar
This part is optional, you could have a sidebar instead or no navigation, all up to you. I chose to link to the “main topics” just for easier navigation. If you only have the numerical parts and different sections you may not even need navigation. 


Styling The Headings
Then I added additional styling for the headings (h3). I ended up using h3 because at first I was unsure if I had other uses for h1/h2. You can basically use whatever you feel more comfortable with as long as it styled to your liking.

#content h3 {
padding: 30px 0px 10px; 
font-family: 'Open Sans', 'Lucida Sans', sans-serif;
font-weight: 600; 
font-size: 30px;
line-height: 30px;
color: #F9B71C;
letter-spacing: 1px;
text-transform: uppercase;
text-align: left;
border-bottom: 1px solid #DDD;
position: relative; 
}



Styling The Questions
Then I added additional styling for the questions (ul.section_menu).

ul.section_menu {
background: #F3F3F3;
padding: 20px 40px;
list-style-type: square;
text-transform: uppercase; 
margin: -10px 0px 15px 0px;
}

ul.section_menu a {
color: #554236; 
}

ul.section_menu a:hover {
color: #60B99A; 
text-decoration: none;
}



Styling The Answers
Then I added additional styling for the answers (dl.faq). You may need to read up on definition lists to have a better understand of how dt/dd works. 

dl.section_faq dt {
font-family: 'Open Sans', 'Lucida Sans', sans-serif;
font-weight: 600; 
font-size: 11px; 
text-transform: uppercase; 
color: #000000;
padding: 30px 10px 10px;
display: block;
background: #F3F3F3;
}
	
dl.section_faq dd {
padding: 10px 10px 20px 10px;
border-bottom: 1px solid #cccccc;
display: block;
background-color: #FFF;
margin-bottom: 20px;
}



jQuery
Again, what you already have is perfectly functional. The last step is “magic” to get the smooth scrolling effect with a really simple step. 

1. Add the library.
As you’re using jQuery, the first thing you should always check is that you’ve linked to the jQuery library. It gets updated regularly, and the latest version is 2.0 but I used the version for when I first made the page (1.7.1). 


2. Add the plugins.
To get the effect I’m using the plugins ‘ScrollTo’ (for animated scrolling) and ‘LocalScroll’ (which animates regular anchors). I have uploaded both to tumblr already and you can just copy and paste:

<script src="http://static.tumblr.com/whx9ghv/lSGm6k18m/jquery.scrollto-1.4.2-min.js"></script>
<script src="http://static.tumblr.com/whx9ghv/GJEm6k188/jquery.localscroll-1.2.7-min.js"></script>


3. Call it. 
Then to actually put everything in use, stick this bit of code in:

<script>
$(document).ready(function () {  
$.localScroll();	
});
</script>

Reposting this tutorial because I need to set up a tutorials tag.

I’m not going to explain how the whole page was styled. Instead I’ll just go over the main points on how to get the linking/scrolling (of questions) to the corresponding parts of the same page (the answers) to work. This technique is not limited to FAQ’s and can be used at any time you want to scroll to a certain part of the same page.

Difficulty: CSS (easy) | HTML (easy) | JS (easy)
Prior Reading: HTML Anchor Tag, HTML Definition/Description Lists
Download the codes.

July 12 2014, 3 months ago 1,097 notes

Quick tip: hiding ‘asks’ from the front-page

buildthemes:

As much as we love the Tumblr ‘ask’ feature, they can sometimes clutter Tumblr with a question tsunami (mind the awful symbolism), when answering publicly.

The Great Wave of Questions

With apologies to Hokusai

We’ll go through a simple method of hiding the asks from the front-page (also known as the homepage).

1. Showing ‘asks’ on tag pages

Let’s cut through this mess using the tag page block ({block:TagPage}) around the  answer posts — this will only show the ‘asks’ on the tag page.

In the sample code I’ve used the simplest code possible for the post, however your theme may be more complex, just be aware of this when making changes.

{block:TagPage}
{block:Answer}
<article class="answer">
	<h1 class="title">{Question}</h1>
	<img src="{AskerPortraitURL-96}"/>
	<p>{Asker}</p>
	{Answer}
</article>
{/block:Answer}
{/block:TagPage}

2. Showing ‘asks’ on permalink pages

Right now we’ve restricted the asks to only showing on the tag pages. To make sure the user can click through to a permanent link make use of the permalink block like below.

{block:PermalinkPage}
{block:Answer}
<article class="answer">
	<h1 class="title">{Question}</h1>
	<img src="{AskerPortraitURL-96}"/>
	<p>{Asker}</p>
	{Answer}
</article>
{/block:Answer}
{/block:PermalinkPage}

3. Link to your ‘asks’

Be sure to tag your ask posts - for example tag your ask posts with ‘answered’ - and display a link to them on your blog so visitors can read them!

<a href="/tagged/answered">Answered questions</a>
December 15 2012, 1 year ago (Source) 97 notes

FAQ #007 : MAKING TUMBLR THEMES

Learning HTML/CSS:

Tumblr Theme Tutorials:
My Theme Making Process:

I start off in Notepad++ when writing code, its simple and practical. My favourite feature is the plus/minus buttons on the side so whenever I finish coding a certain part of the theme, for example the sidebar, I can just “hide” all the code for that and start working on the next thing. When I’m not on the desktop and want to code I use Code Anywhere so I can remember it later. I have tried Coda but I’m Mac-illiterate so it wasn’t great, but it wasn’t a disaster either. Only when I’m nearly finished, I use the tumblr customize page to tweak individual post customizations and make sure everything is working fine.

When I have ideas I normally try sketching in Paper by FiftyThree which is an app on my iPad but other than that I rarely use Photoshop. When I do use Photoshop it’s mainly to cheat if I’m too lazy to write out long code because I have this program called CSS Hat. It’s a Photoshop-to-CSS generator and is surprisingly accurate so I also use it when I’m trying to figure out how to style something.

Even when you’re already making themes, you’re always still learning new things. You should never limit your ideas by only what you know. If there’s an effect you want but don’t know how to implement it, Google it. When it comes to any sort of HTML/CSS, Google is always your best friend.
November 24 2012, 1 year ago 682 notes
There are alot of common questions about basic things like adding links, changing colours, changing sidebar images, how to make fonts bigger/smaller, adding pages, showing captions, etc. I understand HTML/CSS can be confusing to people unfamiliar with it but instead of messaging the theme makers immediately, sometimes a quick search on Google can solve your problems. I’m going to try and pick out a few of the popular ones and answer them as detailed as possible. Hopefully you’ll find it useful and if you have any other suggestions to add, please do tell me. The next part is going to be about using fonts as mini icons. 
- #002&#160;: NAVIGATION/MINI ICONS (IMAGES)

There are alot of common questions about basic things like adding links, changing colours, changing sidebar images, how to make fonts bigger/smaller, adding pages, showing captions, etc. I understand HTML/CSS can be confusing to people unfamiliar with it but instead of messaging the theme makers immediately, sometimes a quick search on Google can solve your problems. I’m going to try and pick out a few of the popular ones and answer them as detailed as possible. Hopefully you’ll find it useful and if you have any other suggestions to add, please do tell me. The next part is going to be about using fonts as mini icons.

- #002 : NAVIGATION/MINI ICONS (IMAGES)
June 09 2012, 2 years ago (Source) 22 notes