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 (:
Transitions Tutorial

Makes the link fade and there should be like a good transition, this has to do with css (<style>) :)

So if you want fading links, look for a:link and a:hover, in the css, and under the whole coding of them, which ends with a }, before that, place this code (simple coding and no need to replace quotation marks, it’s css, don’t need to worry about that)

transition: 0.5s ease-out;

-webkit-transition: 0.5s ease-out;

-moz-transition: 0.5s ease-out;

-o-transition: 0.5s ease-out;

So all the transition, -moz-transition depends on all the browser you are using. So if you are using mozilla firefox, the -moz-transition should work on the firefox browser, 

Webkit is like Safari

O is for Opera

For the 0.5s thingy is the time they take to fade, smaller number like 0.3s means it will fade duration: 0.3 seconds, you can change this to like 1, 2 or with decimals :)

There should be other things too! So for hover thingies, I suggest you put the same codings in both the class/div and the hover of it. :)

Hope I made myself clear :)

// Claire please credit or like this post if it is helpful C:

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?
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?
Learning z-index, a CSS tutorial

Noticed that you want to overlap something but you just can’t? z-index will help you!

In your css, like for example, I’m making my butterfly inside the cage by making the cage overlapping the butterfly, but this happens:

image

Using z-index helps! :D

For example, I need an exact position for my butterfly, I’ll use like:

#butterfly{

position: fixed; /** – IF YOU DON’T WANT IT FLOAT, CHANGE TO ABSOLUTE – **/

top: 90px; /** – HOW MANY PIXELS IT MOVES AWAY FROM THE TOP – **/

left: 90px; /** – HOW MANY PIXELS IT MOVES AWAY FROM THE LEFT – **/

z-index: ?;

}

Now, the z-index can be filled in any random number, like 1, it’s bigger than 0, If you want the butterfly to be behind the cage, make the z-index of the cage bigger, observe:

#butterfly{

position: fixed; /** – IF YOU DON’T WANT IT FLOAT, CHANGE TO ABSOLUTE – **/

top: 90px; /** – HOW MANY PIXELS IT MOVES AWAY FROM THE TOP – **/

left: 90px; /** – HOW MANY PIXELS IT MOVES AWAY FROM THE LEFT – **/

z-index: 1;

}

#cage{

position: fixed; /** – IF YOU DON’T WANT IT FLOAT, CHANGE TO ABSOLUTE – **/

top: 90px; /** – HOW MANY PIXELS IT MOVES AWAY FROM THE TOP – **/

left: 90px; /** – HOW MANY PIXELS IT MOVES AWAY FROM THE LEFT – **/

z-index: 2;

}

This is the result:

image

See? If the z-index of the cage is bigger than the butterfly’s z-index, it’ll overlap the butterfly, so it’ll look like the butterfly is in the cage :) The z-index could also be changed into like bigger number, but it’ll be even more difficult, it could be changed to big numbers like 9999 :P but it depends on you. :)

// Claire

Posted with 13 notes · Reblog?
Shaking Effect

Visualize here :)

Just put this after <head>:

<link href='https://static.tumblr.com/5dbytsa/lpvme5z4x/shake.css' rel='stylesheet' type='text/css'>

Put this before </style>:

.shake{-webkit-animation: shake 1500ms alternate infinite linear;-moz-animation: shake 1500ms alternate infinite linear;}

If you wanna use it for text, put this:

<div class="shake">TEXTHERE</div>

For images:

<img src="IMAGEURLHERE" class="shake" />

// Claire

Posted with 17 notes · Reblog?
Customizing your dashboard

In here you will need stylish..

For me, I customized my dashboard until it looks like this:

image

Go click your stylish icon and click managed installed styles

image

Then click write new style

image

Basically, you will want a background for your dashboard, so in the box given, write this:

body{
background: #fff url('BACKGROUNDIMAGEHERE');
background-attachment: fixed;
}

and paste it into the big box, if you want a cursor, replace the code with:

body{
background: #fff url('BACKGROUNDIMAGEHERE');
background-attachment: fixed;
cursor: url('CURSORURL'), crosshair;
}

You can change crosshair into anything! (Like pointer, auto, progress)

You can also modify it more! Like… Font-families, font-size, color, and anything else you can put in your body{ part in the css!

Next is the applying part.

Below the big box, there is this applies to thing.. Then there is a drop down menu, Click add, then there will be two, now in each drop down menu, put URLs starting with.

Then there is a box where you can write, first box, put https://www.tumblr.com/

Second box, put https://www.tumblr.com/ 


Then click save on the left side, and it should work :D

- Claire

Posted with 44 notes · Reblog?
How to make an announcements/updates tab slideout from top

It’s like:

image


Paste this before </style>

And this after <body>!

To change the position in the css,

look for:

image

Then change the top and the left, leave the position alone!! what they mean by negative is to make it not show the whole thing (BAD ENGLISH LOL). To change the height if you put too much stuffs in it. Look for:

image

Then change the height, if you want it even wider, change the width, but if you want the Updates tab (the text that you are going to hover to get the tab to show up) to also change, look for this:

image

If necessary, make the width the same with the #updates to get it aligned together :D

The tab is made by html-tutorials, Tutorial by Claire of tumblrtutoriial :D

Posted with 73 notes · Reblog?