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, 08:54 PM   •   87 notes   •   Source

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, 07:22 PM   •   650 notes
#faq   #tutorial   

FAQ #005 : Customize Using the Available Options

Title/Description (details)
This box is fixed no matter what theme you are using. Please be aware that even if you have the Title/Description filled out it will not always be visible on your blog depending on the options of that custom theme.

Appearances
If any of these look different to the codes or you are missing something, please make sure you’ve saved and refreshed after pasting the codes.

- Colours (details)
I think it’s pretty self-explantory, depending on the theme maker the number of customization and sections may vary. If you change anything and it doesn’t show up on the live preview (because it sucks like that) try saving, and refresh.

- Options (details)
If you see something in the live preview that is different to what you’ve installed the first place you should check is always the options. Some options are a simple “yes or no” (for example, Show Tags/Captions), others may be a choice (for example, Size of Posts: 400px or 500px).

- Images (details)
Anything with the “Upload” button next to it is usually the ability to upload an image. The maximum size of the images is normally 5MB. Dimensions will depend on the theme.

- Text/Link (details)
Normally a blank white space will allow you to add text. This is also where you add links because as long as you include the “http://” it turns into a URL.

- Reset Defaults
In the new customizer, this doesn’t work. No matter how many times you click it. This is a sort-of workaround.

Pages (details)
This is a list of your pages. To change the “Show a Link to This Page” option you will have to open the edit box for it. Read this if you need help installing pages..

Advanced (details)
This has nothing to do with the actual theme itself and is just basic options.

Screencaps were made using my own themes and others will look different, however, the general usage is the same. If something doesn’t immediately change in your live preview, don’t worry. Click the Save button and Refresh.
September 06 2012, 11:30 PM   •   39 notes
#faq   #tutorial   
theme-hunter:

Tutorial: Grayscale on Hover (using jQuery) Once upon a time, grayscale image has to be manually converted in order to be displayed on the web. Now with HTML5 canvas, images can be manipulated into grayscale without having to use image editing software…

theme-hunter:

Tutorial: Grayscale on Hover (using jQuery)

Once upon a time, grayscale image has to be manually converted in order to be displayed on the web. Now with HTML5 canvas, images can be manipulated into grayscale without having to use image editing software…
August 11 2012, 07:26 PM   •   47 notes   •   Source
#credits   #tutorial   

I still keep getting alot of questions about where to learn HTML/CSS, how to make themes. This is something I can’t personally help you with and I’m not willing to spend hours trying to teach.

So I’m literally just going to copy/paste: I think the best way to test yourself is to see how you go about customizing other people’s themes. When I say customize, I do not mean use someone else’s theme as a base. What I mean is, if you were using someone else’s theme would you be able to go into the HTML and edit the colours, the fonts, the positions? Would you know how to change a left sidebar to the right, would you know how to make post info show up only hover.. or those kind of things?

Again, I’ve mentioned these before on my own blog, but here are a few good places to start out with HTML/CSS:

CodeAcademy and Treehouse are both interactive online courses which you have to pass tests and can share results. Tuts+ has a great 30 day course (which is premium standard) in which the final outcome, should be your own coded site. HTML Dog and W3Schools is more reading-only based but is a useful reference point.

Once that’s over I would suggest the next step is reading through these:
All of these are tailored to tumblr and explain how to actually use the theme guide as well as explaining all the meta.
July 18 2012, 02:30 PM   •   754 notes   •   Source
#tutorial   #credits   
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, 04:35 PM   •   18 notes   •   Source
#tutorial   
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&#8217;m going to try and pick out a few of the popular ones and answer them as detailed as possible. Hopefully you&#8217;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 the mini icons and fonts. 

- Add/Make Links 
- Make a Link Open in New Window/Tab 
- Change the Style Properties of a Link 
- Image as Link 
- Add/Show Title of Link 
- #001&#160;: ADDING LINKS

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 the mini icons and fonts.

- Add/Make Links
- Make a Link Open in New Window/Tab
- Change the Style Properties of a Link
- Image as Link
- Add/Show Title of Link
- #001 : ADDING LINKS
June 02 2012, 07:35 PM   •   90 notes   •   Source
#tutorial