Welcome to tumblrtutoriial! a place where we share our resources, tutorials and themes! this blog was created by jess on july 2nd, 2011. feel free to ask us a question if you don't understand something! please also read our faq before asking us (:
Christmas Lights!

So it’s almost christmas, and I wanna look for some christmas things to decorate for your blog, and I found these christmas light curtains or headers for your blog! It’s super simple and super cute! It looks like this:

image

The steps are easy! Put this below your style!

body{
background: #YOURBGCOLOR url('http://img90.imageshack.us/img90/3152/lightsn.gif') repeat-x top center;
}

So I will be opening the ask box okay?

// Claire

Posted with 6 notes · Reblog?
How To Change Hair Color In Photoshop

so basically it’s like changing the hair color so yah

Keep reading

Posted with 18 notes · Reblog?
How to make a gif in photoshop

Requirements:

- Adobe Photoshop Software

- The Movie you want to turn into a gif

Step 1, Click file in photoshop (I’m using Mac and editing Rise Of The Guardians GIF because Jack is awesome)

image

It can be either an .avi file or .mp4 file :) I don’t know if .mov works, never tried it before moving on

Step 2, A box should popup, and click Selected Range Only it’s a bullet

image

Step 3, Move the Triangular Scrubber to view the movie, Click play to see which scene, if you found it, Use the 2 triangles to crop the scene and click OK (YAY MERIDA!)

image

Then it will make the layers,

image

And you have the gif! Just click save for web and devices, And click GIF, leave the rest untouched:

image

// Claire

Posted with 30 notes · Reblog?
Black And White Images On Hover! UPDATED!

put the following code after <style type=“text/css”>

color then black and white on hover

img{-webkit-filter: grayscale(0%); -webkit-transition: .5s ease-in-out;-moz-filter: grayscale(0%); -moz-transition: .5s ease-in-out;-o-filter: grayscale(0%); -o-transition: .5s ease-in-out;} img:hover{-webkit-filter: grayscale(100%); -webkit-transition: .5s ease-in-out;-moz-filter: grayscale(100%); -moz-transition: .5s ease-in-out-o-filter: grayscale(100%); -o-transition: .5s ease-in-out;}

black and white then color on hover

img:hover{-webkit-filter: grayscale(0%); -webkit-transition: .5s ease-in-out;-moz-filter: grayscale(0%); -moz-transition: .5s ease-in-out;-o-filter: grayscale(0%); -o-transition: .5s ease-in-out;} img{-webkit-filter: grayscale(100%); -webkit-transition: .5s ease-in-out;-moz-filter: grayscale(100%); -moz-transition: .5s ease-in-out-o-filter: grayscale(100%); -o-transition: .5s ease-in-out;}

// Claire

Posted with 2 notes · Reblog?
Make theme good looking on every browser!

Now your blog will look good in every browser! not only Chrome C:

Replace <html> with this code, (if you don’t have html, then you just have to add it ABOVE <head>, which means the very top of the whole HTML coding)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">

// Claire

Posted with 7 notes · Reblog?
To be cleared out with networks and stuff

How do I make a network badge? You use photoshop to create it or any other editing software program, and save it as a .png file and upload it in like tinypic? and link it like this: <a href=“http://yournetwork.tumblr.com”><img src=“IMG URL HERE” title=“Your Network Name”></a>

How do I make network themes? Well you will need to look for the themes here

How do I size down my network icon? Simple! Just size down like a regular image:

<img src=“EXAMPLE YOUR NETWORK BADGE IMAGE URL HERE” width=“HOW BIG YOU WANT IT TO BE”>

How do I make a network? Create a secondary blog, and insert your theme, put the links in there, and link it to their blogs, and start inviting members, go to the right side and there are like a drop down menu for all the blogs you own / co-own, and click your network blog you just made, and click members, make sure the person you invite sends their email, so enter an email address and click enter, so there will be either they check their mail, or you can just T.A them the link so they can join instantly!

Okay, I bet I made myself clear for every network question okay? :) No more network questions

Please like this post if you think it’s useful :3

// Claire

Posted with 17 notes · Reblog?
Artbox Theme

So I just made another theme because I’m SOO bored, so here it is! hope you guys like it!

Live Preview | Code

Features:

- No right click

- Blocked CTRL + U

- Cute menu

- Custom fonts

- Fixed sidebar

- Header title

- Sidebar image

- Custom ask styles

- Post hover links

- Custom cursor

- Disabled drag and drop

- Blog title

- 2 columns

- Infinite Scrolling

Please don’t remove credits! or you will be reported and your blog will be terminated :) enjoy!

// Claire

Posted with 8 notes · Reblog?
Wishlist 1.0

This has 3 examples of wishlist with different styles

PREVIEW HERE

Example 1 Put this before </style>:

.tumblrtutoriial{
width: 80px;
border-left: 3px solid #919191;
background: #EDEDED;
padding: 7px;
transition: .4s ease-out;
-webkit-transition: .4s ease-out;
-moz-transition: .4s ease-out;
-o-transition: .4s ease-out;
}

.tumblrtutoriial a{
color: #0F0F0F;
transition: .4s ease-out;
-webkit-transition: .4s ease-out;
-moz-transition: .4s ease-out;
-o-transition: .4s ease-out;
}

.tumblrtutoriial a:hover{
color: #D9D9D9;
transition: .4s ease-out;
-webkit-transition: .4s ease-out;
-moz-transition: .4s ease-out;
-o-transition: .4s ease-out;
}

.tumblrtutoriial:hover{
border-left: 12px solid #919191;
transition: .4s ease-out;
-webkit-transition: .4s ease-out;
-moz-transition: .4s ease-out;
-o-transition: .4s ease-out;
}

Example 2 Put this before </style>:

.tumblrtutoriial{
padding: 7px;
width: 80px;
background: #eee;

border: 1px dotted #919191;
transition: .2s ease-out;
-webkit-transition: .2s ease-out;
-moz-transition: .2s ease-out;
-o-transition: .2s ease-out;
}

.tumblrtutoriial:hover{
width: 85px;
border: 1px dotted #919191;
transition: .2s ease-out;
-webkit-transition: .2s ease-out;
-moz-transition: .2s ease-out;
-o-transition: .2s ease-out;
}

.tumblrtutoriial a{
color: #0F0F0F;
transition: .2s ease-out;
-webkit-transition: .2s ease-out;
-moz-transition: .2s ease-out;
-o-transition: .2s ease-out;
}

.tumblrtutoriial:hover{
color: #D9D9D9;
transition: .2s ease-out;
-webkit-transition: .2s ease-out;
-moz-transition: .2s ease-out;
-o-transition: .2s ease-out;
}

Example 2 Put this before </style>:

.tumblrtutoriial{
padding: 7px;
width: 80px;
background: #eee;
color: #BDBDBD;
transition: .2s ease-out;
-webkit-transition: .2s ease-out;
-moz-transition: .2s ease-out;
-o-transition: .2s ease-out;
}

.tumblrtutoriial:hover{
border-left: 3px solid #eee;
background: url(http://media.tumblr.com/9cbff6b14e0877f96dc1c2a27d631b21/tumblr_inline_mi56hsxL5S1qz4rgp.png);
color: #fff;
transition: .1s ease-out;
-webkit-transition: .1s ease-out;
-moz-transition: .1s ease-out;
-o-transition: .1s ease-out;
}

.tumblrtutoriial a{
color: #BDBDBD;
transition: .1s ease-out;
-webkit-transition: .1s ease-out;
-moz-transition: .1s ease-out;
-o-transition: .1s ease-out;
}

.tumblrtutoriial a:hover{
color: #fff;
transition: .1s ease-out;
-webkit-transition: .1s ease-out;
-moz-transition: .1s ease-out;
-o-transition: .1s ease-out;
}

And this for wherever you want the menu (Example 1, 2, 3 is the same code)

<div class="tumblrtutoriial"><a href="http://hazelnut-s.tumblr.com">wishlist</a></div>
<div class="tumblrtutoriial"><a href="http://hazelnut-s.tumblr.com">made</a></div>
<div class="tumblrtutoriial"><a href="http://hazelnut-s.tumblr.com">by</a></div>
<div class="tumblrtutoriial"><a href="http://hazelnut-s.tumblr.com">hazelnut-s</a></div>
<div class="tumblrtutoriial"><a href="http://hazelnut-s.tumblr.com">give credit!</a></div>

Please give us a like on the post or message us if you are taking it ;)

// Claire

Posted with 9 notes · Reblog?
Borders

Well, basically people uses these borders around like almost everything, borders are like those stroke and outlines around the posts, text, or even images! It could be used in anything in HTML (excuse me for my derpy english), but you can change the border styles, here’s the basic code for borders, put it in <style> around the things, like after #image{ :

border: 3px SOLID #COLOR

What the bolded things mean:

3px = the thickness of the border

SOLID = the style of the border, can be changed into dashed, dotted, double.

COLOR = use html color codes, like #eeeeee

Message me if you have any questions! :)

// Claire

Posted with 6 notes · Reblog?
Making a marquee networks bar with a title

It looks like this:

image

So the network icons move through the white bar with a dashed border and there’s the networks title rotated like that, it’s easy, Just paste this under your css:

#networks{border:1px dashed #666666;font-family:"stars";color:#ff9c00;font-size:10px;position:fixed !important;bottom:5px;left:5px;text-align:center;height:240px;padding-top:4px;padding-bottom:4px;width:45px;overflow:hidden;-webkit-transition: opacity 0.5s linear;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;background:#fff;z-index:9999;-webkit-box-shadow: 0px 20px 0px #afafaf;-moz-box-shadow: 0px 20px 0px #afafaf;box-shadow: 0px 0px 0px #afafaf;}div#networkstitle{-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-o-transform: rotate(90deg);position: fixed !important;margin-left:-63px;bottom:70px;background:transparent;color:#fffdff;font-family: "georgia";height:45px;width:254px;padding-top:5px;font-size:20px;line-height:45px;letter-spacing:1px;text-align: center;text-shadow: 0px 0px 5px #000;z-index: 99;opacity:1;-o-transition-transition: all 0.6s ease-;-webkit-transition: all 0.6s ease-out;-moz-transition: all 0.6s ease-out;}

The font family georgia, it’s been italicized, so you can find it easier, you can change it into whatever font family you want, it’s for the networks title that will be tilted :) Now put this under <body>

<div id="networkstitle"> &nbsp;&nbsp; NETWORKS </div><div id="networks"> <marquee behavior="scroll" scrollamount="5" direction="up" onmouseover="this.stop();" onmouseout="this.start();" scrolldelay="0"><a href="LINK TO THE NETWORK"><img src="IMAGE URL" height=30/></a><br> <a href="LINK TO THE NETWORK"><img src="IMAGE URL" height=30/></a></marquee> </center> </div>

Take note of the link to the network and the network icon will be smaller a bit :) Add more if you joined more networks :)

/ Claire

Posted with 1 notes · Reblog?
Flash Images Effect!! SO COOL!

Visualize here :)

@-webkit-keyframes flash {0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;}}. bumbs {width: WIDTH; }. bumbs: hover {-webkit-animation: flash 0.5s;-moz-animation: flash 0.5s;-ms-animation: flash 0.5s;}

Then put this where you want the flash effect to happen

<img class="bumbs" src="IMAGE URL HERE">

// Claire

Posted with 3 notes · Reblog?
Fading Cute Menu

View the menu here

Follow the instructions below:

Paste after <head>

<link href='http://fonts.googleapis.com/css?family=Patua+One' rel='stylesheet' type='text/css'>

Put this before </style>

.fadee a{font-family:'Patua One'; text-transform:uppercase; background:#ffe295; color:#c7e5dc; text-shadow: 0px 1px 1px #cd8f00; display:inline-block; margin:1px; text-align:right; padding:3px;box-shadow: 2px 2px 0px rgba(108, 71, 119, 0.5); color:#fff; margin-bottom:5px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;} 

.fadee a:hover{background:#b6a8ba;text-shadow: 0px 1px 1px #654c6c;box-shadow: 2px 2px 0px #ffe295;}

Put this if you want to use it:

<div class="fadee">

<a href="http://LINK">Home</a>

<a href="http://LINK">Ask</a>

<a href="http://LINK">LINK</a>

<a href="http://LINK">LINK</a>

</div>

// Claire

Posted with 10 notes · Reblog?