Tumblr Tutoriial ♡

blog borders

put this code under <style>

.borderleft{
position: fixed;
width: 30px;
background: #dbdbdb;
height: 100%;
top: 0px;
left: 0px;
}

.bordertop{
position: fixed;
background: #dbdbdb;
width: 100%;
height: 30px;
top: 0px;
left: 0px;
}

.borderbottom{
position: fixed;
background: #dbdbdb;
width: 100%;
height: 30px;
bottom: 0px;
left: 0px;
}

.borderright{
position:fixed;
top:0;
right:0;
width:30px;
height:100%;
background:#dbdbdb;
}

things that could be modified is the width and the height and the background in color codes (:

and this code under <body>

<div class="borderleft"></div>
<div class="bordertop"></div>
<div class="borderbottom"></div>
<div class="borderright"></div>

// claire

Posted with 10 notes · Reblog?

how to have tooltips // updated

okay guys tooltips are the little bubbles that pop up following your cursor when you hover on something. the live preview is on my blog (x) first you will need to put this under <head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script> <script> (function($){ $(document).ready(function(){ $("[title],a[title],img[title]").style_my_tooltips({ tip_follows_cursor:true, tip_delay_time:100, tip_fade_speed:300, attribute:"title" }); }); })(jQuery); </script>

<style>

#s-m-t-tooltip{

max-width:300px; 
padding:4px 4px 4px 4px; 
margin:20px 0px 0px 20px; 
background: #fff;
border:1px solid #eee;
font-family: Calibri;
font-size:10px;
letter-spacing:1px;
text-transform: uppercase;
color:#555;
z-index:999999999999999999999999999999999999; 
}

</style>

okay so that is all!

you can modify it too~

background ~ background color (html color codes x)

border ~ the width, color and style of the border (put 0 if you don’t want borders)

font-family ~ the font family in the tooltip

font-size ~ the size of the font

text-transform ~ can be uppercase, lowercase or none

color ~ the color of the text

letter-spacing ~ the spacing between the letters in the tooltip

// claire

Posted with 11 notes · Reblog?

okay so i made a base code for a moved/saved url.

you can edit as much as you want
you can put your credit there
you can claim it as yours
but don’t claim the whole thing as yours
don’t delete my credit in there
you can put credits somewhere else
change the url in the ask box to your url so it’ll work

so here it is!

preview // code

// claire

Posted with 32 notes · Reblog?

Making a full-length sidebar

Want a fixed full length sidebar? here’s how!

step 1, look for the sidebar’s div/css, like #sidebar.

and once you find it look for the height in the sidebar. for ex:

#sidebar{

height: 300px;

width: 300px;

padding: 5px;

position: fixed;

top: 30px;

left: 20px;

}

step 2, change the height into 100%, so it’ll look like this:

#sidebar{

height: 100%;

width: 300px;

padding: 5px;

position: fixed;

top: 30px;

left: 20px;

}

// claire

Posted with 3 notes · Reblog?

Hover music box +playlist

made a music hover box bc bored. and you can now add your playlist. but keep it short and simple. if the title is too long you can always change the width. feel free to modify it! but please give credit! if you really read the whole thing you can click the face, thanks for reading ^_^

preview | code

// claire

twitter: @fetuspenguin

ig: claihre | lau.gh

Posted with 0 notes · Reblog?

Using @font-face

Font face means interpreting fonts into web fonts just by using a css code and a direct link for the font.

all you need is a font you need (with direct link, if you don’t know how proceed to step 1)

step 1 (if you have the font with the direct link or url, proceed to step 2)

okay for the font i’m going to use DigitalLove.ttf

! make sure you have the font you need installed in your computer11!!1!

go upload the font in here or anything that accepts any file and gives you the url

choose the file and click upload file, the url will appear in the bottom, (https://static.tumblr.com/x1wzx4n/bPRn40yc5/digitallove.ttf)

step 2

the css code is needed for this tutorial

go to customize > go to your css (<style>)

and just between <style> and </style>

paste this code:

@font-face{
font-family: 'FONT NAME';
src: url('DIRECT URL');
}

explanation:

bolded - replace the FONT NAME with any name you wanna cal your font, like Digital Love, but when you use it the caps or quotation marks doesn’t matter actually. (if you wanna use digital love you will need to type in digital love if you are going to use it)

italized - replace DIRECT URL with the direct link/url you have for the font. it’s to tell where they will refer to if you use the font family.

step 3

how to use it?

go in your css, for example you wanna change your blog title, look for the css code for the blogtitle, like .blogtitle (if that’s what they called it) and look for font-family, and the contents like ex.

.blogtitle{
font-family: georgia;
}

Just replace georgia with the font-family you used in step 2 :)

if you have any questions regarding this tutorial please feel free to message us!

// claire

Posted with 5 notes · Reblog?

Lamp Intro Effect

So this is a cool lamp thingy where you stick on your blog and it tells you to turn on the lights! It’s pretty cool!

Preview

Just stick this code before </body>:

<!--koddostu.com lamp effect start-->
<!DOCTYPE HTML><style type="text/css">div.tht-position{position:fixed;z-index:6010;}div.tht-s-e{top:72px;right:0px;}</style><style type="text/css">div.tht-position{_position:absolute;}div.tht-s-e{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}</style><div class="tht-position tht-s-e"><a id="lambakapali" onclick="document.getElementById('lambaacik').style.display='block';document.getElementById('lambakapali').style.display='none';document.getElementById('gölgem').style.display='none';" style="margin:0px !important;padding:0px !important;border:none !important;background-color:transparent !important;cursor:pointer;" title="Lambayı Aç"><img style="margin:0px !important;padding:0px !important;border:none !important;background-color:transparent !important;" src="http://1.bp.blogspot.com/-Ont9cH8VCJg/TvBiv-Ng47I/AAAAAAAADR8/bw36Ge18Wt0/s1600/LampOff.png" border="0"></a><Script Language='Javascript'>
<!--
document.write(unescape('%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%65%6E%2E%6B%6F%64%64%6F%73%74%75%2E%63%6F%6D%2F%32%30%31%32%2F%31%31%2F%6C%61%6D%70%2D%69%6E%74%72%6F%2D%65%66%66%65%63%74%2D%66%6F%72%2D%74%75%6D%62%6C%72%2E%68%74%6D%6C%22%20%74%61%72%67%65%74%3D%22%5F%62%6C%61%6E%6B%22%20%69%64%3D%22%6C%61%6D%62%61%61%63%69%6B%22%20%20%73%74%79%6C%65%3D%22%64%69%73%70%6C%61%79%3A%6E%6F%6E%65%3B%6D%61%72%67%69%6E%3A%30%70%78%20%21%69%6D%70%6F%72%74%61%6E%74%3B%70%61%64%64%69%6E%67%3A%30%70%78%20%21%69%6D%70%6F%72%74%61%6E%74%3B%62%6F%72%64%65%72%3A%6E%6F%6E%65%20%21%69%6D%70%6F%72%74%61%6E%74%3B%62%61%63%6B%67%72%6F%75%6E%64%2D%63%6F%6C%6F%72%3A%74%72%61%6E%73%70%61%72%65%6E%74%20%21%69%6D%70%6F%72%74%61%6E%74%3B%74%65%78%74%2D%64%65%63%6F%72%61%74%69%6F%6E%3A%6E%6F%6E%65%3B%22%3E%0A%3C%69%6D%67%20%73%74%79%6C%65%3D%22%6D%61%72%67%69%6E%3A%30%70%78%20%21%69%6D%70%6F%72%74%61%6E%74%3B%70%61%64%64%69%6E%67%3A%30%70%78%20%21%69%6D%70%6F%72%74%61%6E%74%3B%62%6F%72%64%65%72%3A%6E%6F%6E%65%20%21%69%6D%70%6F%72%74%61%6E%74%3B%62%61%63%6B%67%72%6F%75%6E%64%2D%63%6F%6C%6F%72%3A%74%72%61%6E%73%70%61%72%65%6E%74%20%21%69%6D%70%6F%72%74%61%6E%74%3B%22%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%31%2E%62%70%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%2D%4E%51%62%4E%32%63%36%46%71%69%38%2F%54%76%42%69%77%6B%38%73%43%70%49%2F%41%41%41%41%41%41%41%41%44%53%45%2F%68%45%56%66%46%58%47%58%64%46%55%2F%73%31%36%30%30%2F%4C%61%6D%70%4F%6E%2E%70%6E%67%22%20%62%6F%72%64%65%72%3D%22%30%22%2F%3E%3C%2F%61%3E'));
//-->
</Script></div><style type="text/css">div.gtg-position{position:fixed;text-align:center;z-index:6008;background-color:black;opacity:0.98;
filter:alpha(opacity=98);width:100%;height:100%;}div.gtg-s-e{top:0px;right:0px;padding-top:20%;}</style><style type="text/css">div.gtg-position{_position:absolute;}div.gtg-s-e{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}</style><div id="gölgem" class="gtg-position gtg-s-e"><a style="opacity:1;
filter:alpha(opacity=100);color:#777;font-size:26px;margin:0px;padding:0px;background-color:transparent;border:none;text-decoration:none;font-weight:normal;">Can you turn on the light, <br/> please?</a>
</div>
<!--koddostu.com lamp effect stop-->

// Claire

Posted with 18 notes · Reblog?

Stats hover menu

Preview here

Code 1 stick it up in your css:

#stats1{
height:13px;
text-align:center;
overflow:hidden;
margin-top:-1px;
border-bottom:1px solid #efefef;
text-transform:uppercase;
letter-spacing:1px;
font-size:5px;
line-height:10px;
z-index:999999999999999999999;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
#stats1:hover{
height:95px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}

#stats2{
height:13px;
text-align:center;
overflow:hidden;
border-bottom:1px solid #efefef;
text-transform:uppercase;
background-color:#fff;
letter-spacing:1px;
font-size;8px;
line-height:13px;
z-index:999999999999999999999;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}

#stats2:hover{
height:75px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}

#stats3{
height:12px;
text-align:center;
overflow:hidden;
border-bottom:1px solid #efefef;
text-transform:uppercase;
background-color:#fff;
letter-spacing:1px;
font-size;8px;
line-height:13px;
z-index:999999999999999999999;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}

#stats3:hover{
height:40px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}

#stats4{
height:13px;
text-align:center;
overflow:hidden;
border-bottom:0px solid #efefef;
text-transform:uppercase;
background-color:#fff;
letter-spacing:1px;
font-size;8px;
line-height:13px;
z-index:999999999999999999999;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}

#stats4:hover{
height:0px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}

#stats{
text-align:left;
font-size:8px;
text-transform:uppercase;
opacity: .8;
border:1px solid #eee;
position:fixed;
font-family:calibri;
left:14px;
background-color:#fff;
letter-spacing:1px;
width:100px;
z-index:9999;
padding:4px;
top:14px;

}

If it’s too short you could always adjust the height when it hovers ^^

Code 2, stick it under <body>

Code credit: ocehans

// Claire

Posted with 20 notes · Reblog?

Simple Menu

Hey guys! So I made a menu, it’s pretty simple, you can preview it here.

See? pretty simple right? Just hovering on the box and the opacity increases, so let’s start!

Step 1, Paste this in under <style type=“text/css”> or before </style>:

.simplemenu{
width: 110px;
align: center;
height: 25px;
display: inline-block;
background: #bababa;
font-family: 'Ubuntu Mono', sans-serif;
color: #474747;
text-transform: uppercase;
text-align: center;
padding: 3px;
text-shadow: 1px 1px #eee;
opacity: 0.5;
transition: .6s ease-out;
-moz-transition: .6s ease-out;
-webkit-transition: .6s ease-out;
-o-transition: .6s ease-out;
}

.simplemenu a{
text-decoration: none;
color: #474747;
}

.simplemenu:hover{
opacity: 1;
transition: .6s ease-out;
-moz-transition: .6s ease-out;
-webkit-transition: .6s ease-out;
-o-transition: .6s ease-out;
}

You can change the colors too! I bolded them out to make it easier for you :)

The other stuff you can modify in the code is in italic okay?

Step 2, Now paste this under <body> or anywhere you want the menu to be:

<div class="simplemenu"><a href="/">title</a></div>

<div class="simplemenu"><a href="/">title</a></div>

<div class="simplemenu"><a href="/">title</a></div>

<div class="simplemenu"><a href="/">title</a></div>

Step 3, Paste this under <head>, it’s for the font source, but if you don’t want this font, you can find other fonts in here!

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

This was originally made by me, so please credit me if you are reblogging or reposting, or liking this post. Please message me if there is anything wrong. Ok bye.

// Claire @purformance | ig

Posted with 9 notes · Reblog?

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:

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)

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

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!)

Then it will make the layers,

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

// Claire

Posted with 30 notes · Reblog?

Terms of Use

Credits

FAQ