ABOUT

Welcome to hkthemes! This is where I, @minsoo, post all of my themes and resources. If you have any questions please check out the f.a.q before asking me anything! enjoy!


UPDATES

New site layout — Aug 04, 2013


LINKS


1 2 3 4 5

Anonymous: hi ^^ i am using your playground theme and noticed that title for text posts (including those that have answers enabled) do not show up. how can i fix that? thank you~

Please come off of anon so i can see your page to determine the cause! Thank you

Anonymous: hi! i am using your playground theme and i was wondering, how do i make sure the captions only show up on the permalink page?

go into the html and ctrl + f and look for photo (or caption). once you’re there you’ll find this. as you can see the same caption code is there for both photos and photosets. all you have to do is replace the whole line i’ve highlighted with this code! (do it for both photos and photosets btw) and you’re good to go!

pngcentral: Hi! I was wondering if you could help me put a pop ask box to your 'playground' theme.

Check my tutorial here! Except for step #4 you have to go into the html and look for this section:

Go to the message part and highlight the whole line and replace it with this code.

so instead of it being:

<li><a href="/ask">message</a></li>

it’ll be:

<li><a href=”#?w=350” rel=”02” title=”title here” class=”poplight”>link here</a></li>

i hope this helps!

Anonymous: hello! i'm using your playground theme and it's great! i couldn't find your faq so i hope you don't mind if i ask. :D what is the size required for the sidebar pic? and is it possible to make the background a picture? thank you~!

hi! the required size for the picture is  210px! it automatically resizes if it’s too big or too small. for the background,

head over to the HTML

and find body {

it should say background-image:url(”),

put the url of the image between the ”

so its like:

background-image:url(‘URL HERE!’).

Hope this helps ^^

xoxo: ( temp preview / static / pastebin / raw )

this has been my personal theme for a long time, so i’m sharing it now. it’s a very versatile theme! inspired by “XOXO” - Exo. features include: 

  • XOXO title (You can also use your own title, but please keep it short!)
  • Top bar with description
  • 6 Links on side grid.
  • Side/Top Bar background image option

update: i made a slight fix on the playground theme. someone had told me the text post titles showed up twice. if you are using the playground theme, please visit the paste again, and just reapply the theme. sorry for the inconvenience 

playground: ( temp preview / static 1, 2 / pastebin / raw )

after a long hiatus, i am finally back with a new release! theme features include: 

  • Title + sub title text
  • Top bar with index/message/random/archive links
  • An extra (optional) content table
  • Four extra links
  • Optional Table titles

Basics of Single-size Multi-Column Themes

ettudis:

This tutorial will cover how to make themes with more than one column in which the posts are nested (aka. Grid theme), in particular, themes in which the columns are in only one specified width. 

image

I have not yet made a theme in which the column sizes change thus I do not how to do it, but the script are the same, you probably just need to add extra features to the script so perhaps you can figure it out on your own. 

Anyways, let’s get started. 

The Concept

We are going to use one div layer to wrap ALL the content, and then another div layer to wrap each post. Then, we use the CSS element, float:left; so that each post is stacked next to each other. The Masonry script will be used so that the post becomes nested. So we’re going to seperate this tutorial into three main ideas:

  • The HTML: set-up
  • The CSS: making things stack into columns
  • The script: incorporating masonry to make it nester

The HTML

In my tutorial series, I mentioned there were two ways to set up the posts block, one with tables and another with div layers. However, in those lessons, I also mentioned to not put div layers around the post blocks (only inside) since it interrupts with the infinite scrolling script by cody sherman.

Well, scrap all that. It won’t matter since we’re not using the same infinite scrolling script. We’ll be working with div layers and you’ll need two. One will be outside the post block, to wrap around all posts, and the other, will be for each individual post (inside the post block). Similar to this…

<div id ="content">{block:Posts}
   
<div class="container">

{block:Text}
{block:Title}<h1>{Title}</h1>{/block:Title}       
{Body}
{/block:Text} ...

Please, please, PLEASE use your own wrapper (div layer) IDs.

The CSS

In the CSS, you want to make the content wrapper be big in accordance to the number of columns you want and the size of your columns. For example, you plan to have 400px wide posts (container wrapper), and want two columns, you would need at last 800px width for your content wrapper. Make sure you take into consideration, the margin and padding of your layers (ie. if you had 5px margins, your content wrapper should be about 820 or more,). Just trial and error until you get the right look! 

Next, you need to make sure your container wrapper is floated to the left:

.container{

float:left;

}

The Script

Next, you are going to incorporate the script so that it displays the way you want it to. 

First, you need to include to external script links (place codings anywhere between <head> and </head>. One link is to jquery and the other is to the masonry script. 

<script type="text/javascript" src="http://static.tumblr.com/d0qlne1/DiAl6ekb7/jquery-1.4.2.min.js"></script>
<script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>

Then, you need to include the basic script required for the masonry:

<script type="text/javascript">
$(window).load(function () {
$('#content').masonry({
itemSelector : ".container",
},
function() { $('#content').masonry({ appendedContent: $(this) }); }
);
});
</script>

The important parts are bolded, replace with the names of your wrappers/div layers. 

Ta-da! You’re basically done. This all you need for masonry to work. Simple, eh? Though I think most people are familiar with multi-columns in combination with infinite scrolling, but the above code DOES NOT include infinite scrolling, so you will need to add in pagination codes (explained here). 

There are many other options, code that customizes the masonry, you may include (add after itemSelector : ‘.container’,) as well as other methods, effects that you can add to masonry, such as infinite scrolling which I will explain here. 

Masonry with Infinite Scrolling

First, you need to add a link to a masonry-specific infinite scrolling script. 

<script src="http://static.tumblr.com/twte3d7/qNulm663d/infinite.js"></script>

And so, we have the basic script:

<script type="text/javascript">
$(window).load(function () {
$('#content').masonry({
itemSelector : ".container",
},
function() { $('#content').masonry({ appendedContent: $(this) }); }
);
});
</script>

So, you need to add additional codes to render infinite scrolling:

<script type="text/javascript">
$(window).load(function () {
$('#content').masonry(),
$('.masonryWrap').infinitescroll({
itemSelector : ".container", 
navSelector : "div.navigation",
nextSelector : ".navigation a#next",
bufferPx : 10000,
extraScrollPx: 10000,
loadingImg : "",
loadingText : "",
},
function() { $('#content').masonry({ appendedContent: $(this) });
});
});</script>

For some reason not specified on the site, it is necessary to include all those options (buffer, loading text and images, next page selectors) for infinite scrolling to work. As well, additional HTML (for the next/previous pagination codes) is needed:

<div class="navigation">
{block:Pagination}
{block:NextPage}<p id="page_nav"><a style="float:right" href="{NextPage}" id="next">Older ?</a>{/block:NextPage}
{block:PreviousPage}<a style="float:left" href="{PreviousPage}">? Newer</a></p>{/block:PreviousPage}
{/block:Pagination}
</div>

But since we’re working with infinite scroll and do not want pages, we can just use CSS to hide the codes:

.tumblrAutoPager_page_info, .tumblrAutoPager_page_separator {display:none;}
#infscr-loading {display:none;}
.navigation {display:none!important;} 

Now, because everyone has different screen resolutions, people with bigger screens meet a problem. Sometimes, the content at first will not reach the bottom of the window on bigger screens, and since infinite scrolling relies on the whole scroll aspect, the next page content will not load (since no scrolling is in effect).

To prevent this, I add an extra div layer with no content inside the div layer…

<div id ="over"></div>

And specify a certain height in the CSS so that it will stretch the screen.

#over{
height:2000px!important;
position:absolute;
top:0px;
left:0px;
width: 100%;}

So in the end, you will have the following for your masonry with infinite scrolling codes:

  • infinite scrolling script
  • jquery script
  • masonry script
  • basic masonry initial codes (with infinite scrolling method and options)
  • navigation HTML
  • navigation CSS
  • stretcher div layer HTML

The End

I think I’ve covered all the basics. If you have any questions, feel free to ask, though I did not develop this script nor am I too familiar with it, so I can’t guarantee thorough answers. My advice is to TRIAL AND ERROR! Good luck, and happy coding!

minsoo:


seven (temp live preview / static / code / raw )

First of all, I’m really sorry I haven’t posted anything in a while! seven features: 
1 Column Layout
Simple Audio System
CSS3 Blur Menu
3 Extra Links
Pagination is whole height. 
There is no sidebar or anything to put gifs on and I did this on purpose to keep it aesthetically pleasing + simple. Colors best used are white + greys.
update: i am still revamping hkthemes@tumblr so bare with me a little longer! 

minsoo:

seven (temp live preview / static / code / raw )

First of all, I’m really sorry I haven’t posted anything in a while! seven features: 

  • 1 Column Layout
  • Simple Audio System
  • CSS3 Blur Menu
  • 3 Extra Links
  • Pagination is whole height. 

There is no sidebar or anything to put gifs on and I did this on purpose to keep it aesthetically pleasing + simple. Colors best used are white + greys.

update: i am still revamping hkthemes@tumblr so bare with me a little longer! 

Anonymous: Um. Alot of the previews for your themes redirect to Destiny Gene. I don't know if this is because of a mistake or such, but I think you need to check that out....

Destiny Gene is my temp live preview blog! The links say temp live preview so the themes are always changing there. You have to start looking at the static previews until i redo my preview system! sorry~

ninpen:

Exo [ Live preview and code ]
**this theme has been revamped. You can no longer get the old version
Features:
Hover over icons for names
6 custom links
description on top of sidebar (keep description short)
tags appear when post is hovered
Options:
Infinite scroll
250/400/500px posts
grayscale image
Credit:
icons
sidebar image

ninpen:

Exo [ Live preview and code ]

**this theme has been revamped. You can no longer get the old version

Features:

  • Hover over icons for names
  • 6 custom links
  • description on top of sidebar (keep description short)
  • tags appear when post is hovered

Options:

  • Infinite scroll
  • 250/400/500px posts
  • grayscale image

Credit:

theme-hunter:

RESOURCE ROUND-UP #3

jQuery (Tumblr) Photoset Grid (linked to here as well)

Koken (not tumblr related but for anyone planning on hosting a site or alike)

Lorem Pixel (I’m sure everyone is familiar with Lorem Ipsum, this is the image placeholder)

Coffitivity (my personal favourite - recreates a coffee shop vibe to help creativity)

CSS Beautifier

Imageloader.js

CSS Only Alternative to the Select Element

Custom Google Background (not theme related but I’m sure we have a lot of Google/Chrome users)

theme-hunter:

RESOURCE ROUND-UP #5

Halftone Creator Photoshop Plugin

Clipping Magic (Online alternative to Photoshop that removes the background from images)

CSS3 Text-Shadow Effects (A project on CodePen, neat way to learn new tricks)

Magnific Popup (jQuery pop-up plugin)

CSS Tube Map by John Galantini

Free PSD: Flat File Icons

CSSmatic (Generator for gradients, border-radius, box shadow and noise texture)

Wooden Backgrounds & Textures (shared by ninpen)

theme-hunter:

RESOURCE ROUND-UP #7

lmthemes:

Static Previews

It was a surprise to me how often I get questions about static previews from how to what. Hopefully this will help confused theme users and makers out there. I not only explain what they are and why theme makers need to use theme more but how to create them.


Read More

lmthemes:

Static Previews

It was a surprise to me how often I get questions about static previews from how to what. Hopefully this will help confused theme users and makers out there. I not only explain what they are and why theme makers need to use theme more but how to create them.

Read More