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

minsoo:

Hi everyone. I’ve never done this before but I think this is my last resort. It would be great even if you just shared this! (I’d be truly grateful if you donated too.)

My mom, Lucille Feliciano also known as Gina, is the most hard working and altruistic woman I know. You may think that I’m only saying this because she’s my mom, but ask anyone. They’ll all tell you how compassionate and hard working she is. She works as a caretaker in a facility but on her days off, she cleans multiple houses a day. And in her spare time, she caters delicious Filipino food. "Tita Gina is one of the most warm hearted people I know & is always optimistic. Her enthusiasm always brightens moods." - Ashley-Nicole Reyes (Niece) (More testimonials will come)On the night of August 7, 2014, my mom was coming home from a long and hard day of work. In the morning, her caretaking job and in the afternoon, she traveled to Alameda (across the bay bridge) to clean a home. As she was driving down Commercial Avenue (in South San Francisco), she noticed that a black Lexus was backing out of a driveway. She immediately slowed down and gave the Lexus a large amount of space. Suddenly, the black Lexus backed up with full force, giving my mom no time to react whatsoever. After hitting my mom, she immediately put her car back into the driveway. My mom described to me how she was shaking and trembling in fear, and how she noticed that the woman who hit my mom was on her phone the whole time. She was not paying attention to her surroundings because she was talking on the phone. The woman called the police, and even came to apologize to my mother. "Oh, I’m sorry! It’s all my fault," she said. When exchanging details the woman told my mother "Don’t worry! It’s only money." The next day, unable to work because of the tremendous pain she had on her neck, we visited a chiropractor after receiving an okay from the insurance company. Before being able to receive treatment, the receptionist made a few calls to both insurance companies to find that the lady who hit my mom was also trying to claim injuries, calling my mom a liar, and lying about how my mom hit her car on purpose. Without receiving any treatment, my mom ached for weeks. Battling the insurance companies became futile. As a result, we are left with a broken car. Sometimes the engine turns off while shes driving, and the wheels aren’t aligned properly. It’s 1997 Chrysler, so it’s seen its days. Everyday, my mom still uses this car despite it being dangerous to drive. Her safety is my number one priority. 
*****EDIT: MONDAY SEPT 8, 2014*****I forgot to add the reason why battling with insurance became futile. My mother is not fluent in english. I was not around to help her speak to the insurance agencies so I did not actually find out why everything was taking so long to resolve everything until I sat in one of their phone conversations one day. Basically the reason why the black Lexus lady’s insurance did not accept my mother’s side of the story is because she had been using the word “garage” instead of “drive way” when explaining her story. They did not offer her any translation services in the beginning but neither did my mom know it was even possible to even be assisted. They even had the black Lexus lady take a photo of her garage that was FULL of stuff just to show that my mom was lying. (Also asked for measurements of her driveway and garage + a whole bunch of other nonsense.) While our insurance agency said that the evidence did prove that the black Lexus was at fault, their insurance had stuck with my moms english error mistakes as their arguement (even when it was explained extensively that my mom had made a mistake due to her limited english skills!!). Also, I want to post this as more evidence as to why it does not make sense for my mother to have hit the black Lexus lady. 

I know I’m asking for a lot, but this is all I can do for my mother. (I figured if the internet can raise 15k for a bowl of potato salad, then they too can help my mother who’s in need.) I can’t work because I’m a full time student at a local university. My mother is my families breadwinner and this is why I’m seeking help for a woman who truly does deserve this. Thank you so much. If you can’t donate, It would mean a lot if you can share this page.
Here’s the gofund me page. 

minsoo:

Hi everyone. I’ve never done this before but I think this is my last resort. It would be great even if you just shared this! (I’d be truly grateful if you donated too.)

My mom, Lucille Feliciano also known as Gina, is the most hard working and altruistic woman I know. You may think that I’m only saying this because she’s my mom, but ask anyone. They’ll all tell you how compassionate and hard working she is. She works as a caretaker in a facility but on her days off, she cleans multiple houses a day. And in her spare time, she caters delicious Filipino food. 

"Tita Gina is one of the most warm hearted people I know & is always optimistic. Her enthusiasm always brightens moods." - Ashley-Nicole Reyes (Niece) 

(More testimonials will come)


On the night of August 7, 2014, my mom was coming home from a long and hard day of work. In the morning, her caretaking job and in the afternoon, she traveled to Alameda (across the bay bridge) to clean a home. As she was driving down Commercial Avenue (in South San Francisco), she noticed that a black Lexus was backing out of a driveway. She immediately slowed down and gave the Lexus a large amount of space. Suddenly, the black Lexus backed up with full force, giving my mom no time to react whatsoever. After hitting my mom, she immediately put her car back into the driveway. 

My mom described to me how she was shaking and trembling in fear, and how she noticed that the woman who hit my mom was on her phone the whole time. She was not paying attention to her surroundings because she was talking on the phone. The woman called the police, and even came to apologize to my mother. "Oh, I’m sorry! It’s all my fault," she said. When exchanging details the woman told my mother "Don’t worry! It’s only money." 

The next day, unable to work because of the tremendous pain she had on her neck, we visited a chiropractor after receiving an okay from the insurance company. Before being able to receive treatment, the receptionist made a few calls to both insurance companies to find that the lady who hit my mom was also trying to claim injuries, calling my mom a liar, and lying about how my mom hit her car on purpose. 

Without receiving any treatment, my mom ached for weeks. Battling the insurance companies became futile. As a result, we are left with a broken car. Sometimes the engine turns off while shes driving, and the wheels aren’t aligned properly. It’s 1997 Chrysler, so it’s seen its days. Everyday, my mom still uses this car despite it being dangerous to drive. Her safety is my number one priority. 

*****EDIT: MONDAY SEPT 8, 2014*****
I forgot to add the reason why battling with insurance became futile. My mother is not fluent in english. I was not around to help her speak to the insurance agencies so I did not actually find out why everything was taking so long to resolve everything until I sat in one of their phone conversations one day. Basically the reason why the black Lexus lady’s insurance did not accept my mother’s side of the story is because she had been using the word “garage” instead of “drive way” when explaining her story. They did not offer her any translation services in the beginning but neither did my mom know it was even possible to even be assisted. They even had the black Lexus lady take a photo of her garage that was FULL of stuff just to show that my mom was lying. (Also asked for measurements of her driveway and garage + a whole bunch of other nonsense.) While our insurance agency said that the evidence did prove that the black Lexus was at fault, their insurance had stuck with my moms english error mistakes as their arguement (even when it was explained extensively that my mom had made a mistake due to her limited english skills!!). Also, I want to post this as more evidence as to why it does not make sense for my mother to have hit the black Lexus lady. 


I know I’m asking for a lot, but this is all I can do for my mother. (I figured if the internet can raise 15k for a bowl of potato salad, then they too can help my mother who’s in need.) I can’t work because I’m a full time student at a local university. My mother is my families breadwinner and this is why I’m seeking help for a woman who truly does deserve this. Thank you so much. If you can’t donate, It would mean a lot if you can share this page.

Here’s the gofund me page. 

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