index contact themes more    

soon-co:

Theme #46 by soonjun

preview: here // pastebin: here

Links: 5 custom + home, ask and archive (can be changed/can add more);
Post Size Options: 400px or 500px;
Other Options:

  • text size;
  • text font;
  • post distance;
  • infinite scroll;
  • greyscale;
  • opacity;
  • caption;
  • different cursor.

Please like or reblog if using. And let me know if there are any issues.

Check out KCONET for more quality k-pop themes!

legilimenthemes:

HOW TO MAKE AN ARROW WITH CSS AND HTML:

An example can be seen in the header and questions on my Underwater theme.

Difficulty: Easy

Read More

str-wrs:

TUTORIAL: POP-UP BOXES

Live Preview

INSTRUCTIONS:
Open the Customize page, and click Edit HTML
Paste this code underneath <head> 
Paste this code anywhere between <style type=”text/css”> and </style>
Paste this code right in between </body> and </html>*
Paste this code wherever you want the link to show**
* NOTE 1: 
To add extra pages simply copy and paste the first division (the entire part before the long line of </div>’s) but remember each different box needs a different title (<div id=”box1”>)
For a pop-up ask box, replace ‘content’ with this code
** NOTE 2: 
”#?w=300” is the width, change it to whatever suits
rel=”box1” is the name of the box, make sure it correlates with Step 3’s title
COMMENTS: Hope this helped, if you have any questions feel free to message me.

str-wrs:

TUTORIAL: POP-UP BOXES

Live Preview

INSTRUCTIONS:

  1. Open the Customize page, and click Edit HTML
  2. Paste this code underneath <head> 
  3. Paste this code anywhere between <style type=”text/css”> and </style>
  4. Paste this code right in between </body> and </html>*
  5. Paste this code wherever you want the link to show**

* NOTE 1: 

  • To add extra pages simply copy and paste the first division (the entire part before the long line of </div>’s) but remember each different box needs a different title (<div id=”box1”>)
  • For a pop-up ask box, replace ‘content’ with this code

** NOTE 2: 

  • ”#?w=300” is the width, change it to whatever suits
  • rel=”box1” is the name of the box, make sure it correlates with Step 3’s title

COMMENTS: Hope this helped, if you have any questions feel free to message me.

legilimenthemes:

SHOW AN ELEMENT ON SCROLL USING JQUERY:
Difficulty: Easy (though it is suggested you understand basic CSS and HTML)
Unfortunately, I am lazy and can’t be bothered to find which application on my computer records screens and then gif it, so please refer to this example. I recently used this technique in my Underwater theme, and was pleasantly surprised to find that it wasn’t as complicated as I thought it to be…
Read More

legilimenthemes:

SHOW AN ELEMENT ON SCROLL USING JQUERY:

Difficulty: Easy (though it is suggested you understand basic CSS and HTML)

Unfortunately, I am lazy and can’t be bothered to find which application on my computer records screens and then gif it, so please refer to this example. I recently used this technique in my Underwater theme, and was pleasantly surprised to find that it wasn’t as complicated as I thought it to be…

Read More

Random quote script tutorial

wgthemes:

I’m sure everyone’s familiar with the random image script which lets you rotate between a set number of images on each page load. Here’s the one for text!

This is a fairly simple script so you shouldn’t have any trouble with it.

codes preview
,  
usage preview

Read More

Tutorial #02: Back to Top Button

viwan-th:

A back to top button is exactly what it sounds like — a button that takes you back to the top of a page. This is done with a link. The simplest way to do it is with a link within your description, or in custom links, if your theme has them. 

The link can either be a direct link that jumps directly to the top, or you can use a script to scroll back to the top. Both will be explained in this tutorial. Note that this may not work with all themes, depending on other scripts, cursors, etc. that may be also installed on your blog.

Read More

str-wrs:

TUTORIAL: SLIDING VIEWER

Live Preview

INSTRUCTIONS
Paste this code directly beneath the &lt;head&gt; tag
Paste this code underneath the &lt;style type=”text/css”&gt; tag
Paste this code under the &lt;body&gt; tag, wherever you want the viewer to appear
NOTES
The highlighted area indicates the arrows. Arrow resources: x, x or google search “arrow buttons”Basically: [‘image source’, margin left, margin top]
The second part of coding is all up to you as far as appearance goes.
In the final code, please use only one option. The most popular in my experience is A, as it is simple. If you choose B make sure you have included all necessary codes.
COMMENTS

Hopefully this is easy to understand. Just wanted to make a quick tutorial because I’ve yet to see one and it seems like a really helpful resource to theme makers. If you have any questions / feedback / advice feel free to message me. 

str-wrs:

TUTORIAL: SLIDING VIEWER

Live Preview

INSTRUCTIONS

  • Paste this code directly beneath the <head> tag
  • Paste this code underneath the <style type=”text/css”> tag
  • Paste this code under the <body> tag, wherever you want the viewer to appear

NOTES

  • The highlighted area indicates the arrows. 
    Arrow resources: x, x or google search “arrow buttons”
    Basically: [‘image source’, margin left, margin top]
  • The second part of coding is all up to you as far as appearance goes.
  • In the final code, please use only one option. The most popular in my experience is A, as it is simple. If you choose B make sure you have included all necessary codes.

COMMENTS

Hopefully this is easy to understand. Just wanted to make a quick tutorial because I’ve yet to see one and it seems like a really helpful resource to theme makers. If you have any questions / feedback / advice feel free to message me. 

fukuo:

How to display a loading before the entire page is fully loaded by Fukuo

Live preview

I’ve been struggling on how to make this stuff lately—as I’m working-hard to learn more Javascript and Jquery. This method had been used on Europhia Theme which display a progress bar before the entire page is fully loaded. I really don’t know if this stuff is still become a trend or not. But, at least, it can be beautify the appearance of your blog.
HTML: Creating the loading bar!
As usual, simply. Just try to insert this code below &lt;body&gt; tags:
&lt;div id="loading"&gt;&lt;/div&gt;

Javascript and Jquery: 
We need this code to make the loading bar is shown when the page is loaded and then, it disappears slowly by using Fade Out Slow.
Put this code between &lt;/style&gt; and &lt;/head&gt; tags:
&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    	$(window).load(function() {  $("#loading").delay(4000).fadeOut("slow");
 })
	&lt;/script&gt;


CSS: Styling!
So, basically, put this code between &lt;style type=”text/css”&gt; and &lt;/style&gt;
#loading {
    position: fixed;
    left: 0px;
	top: 0px;
	width: 100%; 
	height: 100%;  
	z-index: 9999;
	background: url(http://i47.tinypic.com/2wmp2wx.gif) 50% 50% no-repeat #111;
    background-size:350px;
		}

Don’t be hesitant to change the background and the image of loading bar. You can find more loading bar over here. And here’s how to change by looking the bolded ones: background: url(http://i47.tinypic.com/2wmp2wx.gif) 50% 50% no-repeat #111;
The first one: It is the URL of images, you can replace it with the loading bar with your liking by choosing the provided links above.
The second one: It is the color of the background. You can change it by getting the HEX CODE over here
If you want to change the duration of the loading bar. You can change it by increasing or decreasing the “.delay(4000)”. I recommend not to change it. Any form of Credit, Like and Reblog are appreciated!

fukuo:

How to display a loading before the entire page is fully loaded by Fukuo

Live preview

I’ve been struggling on how to make this stuff lately—as I’m working-hard to learn more Javascript and Jquery. This method had been used on Europhia Theme which display a progress bar before the entire page is fully loaded. I really don’t know if this stuff is still become a trend or not. But, at least, it can be beautify the appearance of your blog.

HTML: Creating the loading bar!

As usual, simply. Just try to insert this code below <body> tags:

<div id="loading"></div>

Javascript and Jquery: 

We need this code to make the loading bar is shown when the page is loaded and then, it disappears slowly by using Fade Out Slow.

Put this code between </style> and </head> tags:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript"> $(window).load(function() { $("#loading").delay(4000).fadeOut("slow"); }) </script>

CSS: Styling!

So, basically, put this code between <style type=”text/css”> and </style>

#loading {
    position: fixed;
    left: 0px;
	top: 0px;
	width: 100%; 
	height: 100%;  
	z-index: 9999;
	background: url(http://i47.tinypic.com/2wmp2wx.gif) 50% 50% no-repeat #111;
    background-size:350px;
		}

Don’t be hesitant to change the background and the image of loading bar. You can find more loading bar over here. And here’s how to change by looking the bolded ones: background: url(http://i47.tinypic.com/2wmp2wx.gif) 50% 50% no-repeat #111;

The first one: It is the URL of images, you can replace it with the loading bar with your liking by choosing the provided links above.

The second one: It is the color of the background. You can change it by getting the HEX CODE over here

If you want to change the duration of the loading bar. You can change it by increasing or decreasing the “.delay(4000)”. I recommend not to change it. Any form of Credit, Like and Reblog are appreciated!

riverbellthemes:

Theme #21 Moln by Riverbell themes
A theme created with the Theme Village event Summer’s end fest in mind. Inspired by the clear and beautiful summer sky, this is a pretty, one columned contained theme with 250px wide posts. Moln is the swedish word for cloud. Don’t forget to like or reblog if you are using or plan to use this theme! ♥

ver 1.0.0code + preview

Details
Contained theme with 250px wide posts in one column
Background style: full screen image, pattern image, solid colour or gradient
Optional infinite floating clouds in background
Pop up extra links + description
Optional infinite scrolling
Custom Google fonts (see notes)
Three custom “circle links” with up to 10 extra links + page links support
Customizable tooltips on permalinks and optional tags in tooltips on index page
Rules

Do not steal, redistribute, remove credit or claim as your own. Alterations for personal use are ok! 

Notes

You can choose any font you like from Google’s web fonts. You only need to write the font name in the text box called “Google title font” for the blog title, or in the box called “Google body font” for the post body font. Be sure to write the correct name and it works best if you use capitalized letters where there should be.

Credits: Thecodeplayer (floating clouds)

riverbellthemes:

Theme #21 Moln by Riverbell themes

A theme created with the Theme Village event Summer’s end fest in mind. Inspired by the clear and beautiful summer sky, this is a pretty, one columned contained theme with 250px wide posts. Moln is the swedish word for cloud. Don’t forget to like or reblog if you are using or plan to use this theme! ♥

ver 1.0.0
code + preview

Details

  • Contained theme with 250px wide posts in one column
  • Background style: full screen image, pattern image, solid colour or gradient
  • Optional infinite floating clouds in background
  • Pop up extra links + description
  • Optional infinite scrolling
  • Custom Google fonts (see notes)
  • Three custom “circle links” with up to 10 extra links + page links support
  • Customizable tooltips on permalinks and optional tags in tooltips on index page

Rules

Do not steal, redistribute, remove credit or claim as your own. Alterations for personal use are ok! 

Notes

You can choose any font you like from Google’s web fonts. You only need to write the font name in the text box called “Google title font” for the blog title, or in the box called “Google body font” for the post body font. Be sure to write the correct name and it works best if you use capitalized letters where there should be.

Credits: Thecodeplayer (floating clouds)

trenzathemes:

theme 16 : obscura

F E A T U R E S
  • 250px - 400px posts
  • 6 or 16 customizable links
  • updates/about page included
  • tons of toggles and options for customizing! 
R U L E S
  • Please don’t remove the credit
  • Don’t repost and claim as your own
  • Feel free to edit and customize as much as you want!
  • ♥ or reblog if you’re using
N O T E S

The extra updates page can be used for just about anything. You can add even more links to that page or even make it into a mini about me page! Make sure to plug in your URL into the proper spot I’ve labeled in the main customize area(Right where you fill out your links). If you don’t then your ask box won’t get linked up properly!

preview || code

NEXT →