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

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

I’m somewhat back!

Hello, I have made a new blog layout. Although my blog isn’t completely functional, I want you guys to be able to access my themes and reblogs! 


hello everyone! i feel like i need to explain myself as to why i&#8217;ve been down a long time. i took a hiatus from theme making because i was focusing on school and making my last moments of high school count. so now that it&#8217;s summer i&#8217;m back to making themes! i recently released theme seven on my personal blog for the two people who requested for it. i plan on finishing hkthemes&#8217; blog theme today and release it by tonight or maybe tomorrow, so look out for that. on the course of this week, i will be revamping a lot of my old themes (ones that i don&#8217;t even display anymore). anyways thank you to all of you who have continued on following + supporting me, i really appreciate you all! 

- alyana

hello everyone! i feel like i need to explain myself as to why i’ve been down a long time. i took a hiatus from theme making because i was focusing on school and making my last moments of high school count. so now that it’s summer i’m back to making themes! i recently released theme seven on my personal blog for the two people who requested for it. i plan on finishing hkthemes’ blog theme today and release it by tonight or maybe tomorrow, so look out for that. on the course of this week, i will be revamping a lot of my old themes (ones that i don’t even display anymore). anyways thank you to all of you who have continued on following + supporting me, i really appreciate you all! 

- alyana

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! 

stefanpetrova:

PSDS
coloringsouls  
drunkandcoloring  
psdflawless 
bieberspsds  
psdland  
paradise-coloring
tastesofparadise
-agoraphobia
biebersfeeling  
outshiner  
celebritycolorings  
truecolorings  
unravelingwords 
epic-psds 
thosecolors  
coloringthecanvas  
coloringsandresources  
rosepsds  
truesoulspsds  
bellepsds  
gottabeboobear  
cherriepiepsds  
sdelicious  
recreatemepsd  
colouryourlifewithpsds  
darlingpsds  
libertypsd  
struckbypsds  
psds
TEXTURES
slayground 
shocklock 
northerndawn 
kamrin 
grringirl 
fuckingphotoshop 
mirand-ah  
accio-glow
emmelia 
ladyswifts 
fuckbees 
infint7 
yellowlemon 
texturelicious 
behindmylove 
damonelenaitalia  
olmes  
quinnanderson  
planets-bend-between-us
texturesource  
hopelessthunder  
rosebein
TUTORIALS
fytutorials   
heartittutorials   
fyeahtutorial   
fuckyeahgraphicstuts   
best-photoshop-tutorials
big-tutorials
pscs5  
livelaughphotoshop  
horgasmictutorials  
and more
ICONS
timelessicons  
awkwardicons  
icecreamicons 
exoticicons  
glowing-icons  
wanderlusticons  
cookie-icons
FONTS
dafont  
urbanfonts  
whatfontis  
1001freefonts  
fontsource  
fonts2u  
losttype
DOWNLOADS
Ps3 (rar) 
Ps4 (zip) 
Ps5 (zip) 
Topaz Clean 3.02 (zip)  
KM player
BRUSHES
(1)  PsBrushes
(2)  DevianArt
(3)  Brusheezy
(4)  Brushesdownload
THEMES
everlark  
steferine  
themesbyla  
kidrauhl  
stewhearthemes  
zuvia  
untamedliberty  
yeahniall 
cmbatman  
zious  
icatchingfire  
northerndawn  
perfectpsychopath  
paulywesley  
thewicked-eternitythemes  
danysthemes   
dystopie  
unfdrew  
manatopia  
evaeon  
ramyeons  
starlland  
lmthemes  
heartens  
baudelairedthemes  
polinomial  
gyapo  
galeismineiamhis  
rainingfires  
sirmerlin  
maraudersthemes  
themehunters
HQ SCREENCAPS
homeofthenutty  
disparue  
enchantedfleur  
black-celebration  
dj-capslock
grande-caps
ladymanson  
rarecaps  
disneycaps
(+)
yeahps→ Everything about PS 
welovetemplates→ Templates
hqcelebrity • owntricks • f-nnicks master post → HQ celebritys

stefanpetrova:

PSDS

TEXTURES

TUTORIALS

ICONS

FONTS

DOWNLOADS

BRUSHES

  • (1)  PsBrushes
  • (2)  DevianArt
  • (3)  Brusheezy
  • (4)  Brushesdownload

THEMES

HQ SCREENCAPS

(+)

yeahps→ Everything about PS 

welovetemplates→ Templates

hqcelebrity • owntricks • f-nnicks master post → HQ celebritys