//



How to put an image over a background image

-apple:

This is really easy, and you don’t even need much experience.

Read More


Grayscale Effect :)

codes-and-tutorials:

This is the code you need to make your image posts all monochrome. This code will be placed before <style type”text/css”:>.

.grayscale { 
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */
}

Open up the customization page and click ‘Edit HTML’. 

After you have done that, CTRL+F: {block:Photo}, insert classes because that’s how I applied my CSS. By applying classes, it allows the filter work on other browsers than Chrome without being too complex. Too see an example of the class inserted, look here. My basic rule is wherever an <img src=”“> is, you can insert a class and apply it to. It does not necessarily have to be in the front of the src HTML. It can be like this too:

<img src=”” alt=”” class=”grayscale”>

This code will not only work on Chrome but it is also compatible with  Firefox 4+, IExplorer 6+, Safari 5.2+, Opera 13+.

If you have any questions, do not inbox me anonymously. I will not answer it. I do not want to make followers unhappy with a million questions about this one code because it is all over their dashboard. They did not follow me for HTML/CSS. 

Anyways, yep, there we go! Credit goes to -hina for bringing up the concept about grayscale. 

Posted by Queenie.


Tutorial: Pop Up Menu

starious:

VIEW DEMO!

Pop-Up Menu is quite different and like any tool has its positives and negatives.

  • Positive: Makes the page more dynamic, and need not redirects.
  • Negative: The INFINITE SCROLL doesn’t work fine when you use it.

Advice!

Before doing anything, it’s good if you save your code as a precaution. 

Read More


kayybearr:

Polaroid Photos Tutorial
full tutorial here


How to create a back to top using text or an image

ixora:

Put the following script before the </head> tag:

http://pastebin.com/MyCATj7V

Next, we need to put the following in the CSS:

http://pastebin.com/xngTWdkt

You can adjust the positions, font family, font size, color, etc. to your own taste.

Now put the following after the <body> tag:

http://pastebin.com/b0y8JuVP

Wa-la you’re done. You can change the back to top text to your own custom text. 

To change it into an image, put this coding after the <body> tag instead:

http://pastebin.com/3nfa3CEH


zuvia:

Music Player with Playlist!

How to Install:

  1. Copy THIS CODE (the CSS)
  2. Paste it before “</style>” (Use CTRL+F to find it)
  3. Then copy THIS CODE (the BODY)
  4. Paste it after “<body>”

To add music, paste your code from Billyplayer right after the line that says

<!— YOUR MUSIC CODE GOES HERE, RIGHT AFTER THIS LINE. —>

It’s found in the BODY code. There are further instructions in the code - just follow them and you should be alright.

You can also move the player around on your theme. To do so, find “#editthis{” in the CSS, and change the “top” and “left” value numbers. 


shinkos:

Live Preview. Hope you like it.

Credits:

Icon: Ixora
Music Player: Billy

Code:

Copy and Paste this in the CSS part, above </style>

#square{
    position:fixed;
    top:10px;
    left:10px;
    width:30px;
    height:30px;
    line-height:10px;
    overflow:hidden;
    background-color:#ffffff;
    box-shadow: 2px 3px 10px 0px #777777;
}
#gif{
    height:30px;
    width:60px;
    margin-left:-30px;
    -webkit-transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
    -ms-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out;
}
#gif:hover{
    margin-left:2px;
    -webkit-transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
    -ms-transition: all .7s ease-in-out;
    transition: all .7s ease-in-out;
}
#player{
    height:30px;
    padding:5px;
    width:13px;
    margin-left:2px;
    overflow:hidden;
    position:absolute;
}

Now, below the tag <body> paste this code, maybe you’ll have to retype all the quotations marks so don’t forget to do it.

<div id=”square”>
<div id=”gif”>
<div id=”player”>
<embed style=”margin-left:-24px;” src=MUSIC CODE HERE
</div>
<img style=”margin-left:38px;margin-top:8px;”src=”http://media.tumblr.com/tumblr_lm6prnRzP61qfoi4t.gif”>
</div>
</div>

On the MUSIC CODE, You have to delete this part of the beginning: <embed src=  and then it will work fine.

Click here to see a tutorial on how to retype the quotation marks.


How to get the fishie background

mformichael:

Hello.

  • Visit this site here and click edit settings to customise your fish.
  • When editing your fishie settings, for your background image, make sure the .jpg is big!…like super big-ish (2000x2000?) If you are going to use a tile, then use a graphics editor and tile it to 2000x2000.
  • After you’ve done customising, scroll down and copy your embed code.
  • Now go to your Tumblr and customise your blog via HTML. Paste the embed code after your “</style>” tag.
  • Now copy and paste this before your “</style>”.
  • Now this is the fun bit! You need to try to resize your background of the fishie so that it covers your whole blog. Edit the width and the height in the fishie embed code. For example, what I did was width=”1600” height=”1100”. Fiddle with it, until it fits.

And that is basically it…! If there is anything you don’t understand you may ask me.

Enjoy ! ~~><(((*>


tumblr base code

ettudis:

A VERY VERY VERY simple tumblr base code. You can use CSS and HTML to build around it. If you don’t even know where to go with this base code… then you should start by learning the relationship between CSS and HTML.

CODE BY USEYOUREYES.

And I can never emphasize this enough, DON’T TAKE ALREADY MADE THEMES AS YOUR BASE CODE. YOU THINK WE (THEME-MAKERS) CAN’T TELL? HELL YEAH WE CAN.


fukuo:

Tutorial: Lazy Load

starious:

“Lazy Load is a jQuery plugin written in JavaScript. It delays loading of images in long web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. Using Lazy Load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.” - Mika Tuupola

To use the Lazy Load effect, all you need to do is put this code before the </head> into your codes:

<script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/ogWm7q8w1/lazyload.js"></script>
<script type="text/javascript" charset="utf-8">
var $j = jQuery.noConflict();
$j(function() {
if (navigator.platform == "iPad" || navigator.platform == "iPhone") return;
$j("img").lazyload({
placeholder : "http://static.tumblr.com/twte3d7/RSvlio0k5/grey.gif",
effect: "fadeIn",
});
});
</script>

Source: jQuery by John Resig & Lazy Load by Mika Tuupola


How to remove source link on Tumblr

ettudis:

Some themes do not include the source link codes which makes “via/source” links automatically appear under posts (such as quotes or text). To remove those, insert the following between {block:posts} and {/block:posts}

{block:ContentSource}
<!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
{/block:SourceLogo}
{block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
{/block:ContentSource}

What you’re doing is hiding the codes so that it ONLY appears in the CODES (are not displayed unless you search up HTML) since you’re adding <!— and —> around the codes which makes it a “comment”. It’s still read, but it’s hidden and only visible in the source code. 

(reference)

EDIT:  The source link I’m talking about is the EXTRA source link that appears under any post type (including photos) in addition to the “reblogged from” and “originally from” which many theme makers already KNOW to include (but don’t know about the extra source link code). 

The difference between the two types of source code is that the ”reblogged from” and “originally from” is optional. If you don’t put that in, tumblr won’t include it. However, the code that the original post was talking about, if you don’t put that in, tumblr will include it anyways.

I’m not, in any way, discouraging sourcing material. Some codes are redundant and I’m just sharing a way to hide it. 


lmthemes:

Tutorial 03 - Installing Custom Fonts | Beginner

So you want to spiff up your theme by using fancy fonts? This tutorial will show you how! Just a quick note before we continue though - unfortunately because Firefox is fickle, custom fonts (not google fonts) will not work on Firefox. For some reason fonts have to be uploaded to the same site server - so yes, even if you host it via the static tumblr uploader, it will not work. Custom fonts (not including google fonts) will only work on Chrome and possibly IE (I honestly don’t want to bother to check.) That being said on with the tutorial!

Step 01 - Finding Your Fonts

Make sure you know where your fonts are that you want to use. This means locating your fonts folder on your computer as you’ll need to upload it to an outside source. As I said earlier - you can use the tumblr static file uploader - but other sites would be like box.com and webs.com.

While you can still install custom fonts, I would recommend either sticking to Google Fonts or at least having a font back up for Firefox.

a. Google Fonts

It’s a pretty easy set up for Google Fonts. You simply find a font that you like click “Quick Use” and then it provides directions for you. The only draw back is that there only a small array of fonts to use, not like what you might have in your own font folder.

Step 02 - Custom Fonts Code

So below you’ll find the custom font code you’ll need to install. You don’t need to use all the lines but it is important across browsers.

You’ll want to replace “Some Font Name” with what you want to call the font. This will be used later in the CSS.
You’ll also want to replace “host.com/somefontname.xyz” with your hosted font.

@font-face {font-family: 'Some Font Name';
    src: url('http://host.com/somefontname.eot'),
         url('http://host.com/somefontname.eot?#iefix') format('embedded-opentype'),
         url('http://host.com/somefontname.woff'),
         url('http://host.com/somefontname.ttf') format("truetype"),
    font-weight: normal;
    font-style: normal;}

The EOT font file is only for Internet Explorer. So if you want to appeal to people who have Internet Explorer - bless their souls - you’ll have to find that file. If not this is all really required of you:

@font-face {font-family: 'Some Font Name';
    src: url('http://host.com/somefontname.ttf') format("truetype"),
    font-weight: normal;
    font-style: normal;}

Of course you can change the font-weight and font-style to what you prefer!

Step 03 - Using the Fonts

Now when you go to use the fonts in your CSS you’ll do something along the lines of:

.class {font-family: 'Some Font Name', 'Google Font Backup';}

Save your theme and ta da you have installed a custom font!


Back to Top With Smooth Scrolling

ixora:

Insert this above the </head> tag:

<script src=”http://static.tumblr.com/ko3o6ju/QzNls3n3y/smoothscroll.js” type=”text/javascript”></script>

Then insert this coding below the <body> tag:

<div id=”top”></div>

Now you can create a link in your description or HTML:

<a href=”#top”>back to top</a>

To put it in the bottom right corner, put this coding under <div id=”top”></div>:

<a style=”position:fixed;bottom:10px;right:10px;” href=”#top”>back to top</a>

Note: Remember to re-type all the quotation marks or it won’t work. 


How to create a blogroll

ixora:

WHAT IS A BLOGROLL? A blogroll is a page that shows who you’re following. (I customized mine, so if you want the same theme, use this coding instead during step #3: http://pastebin.com/u0GAMcnJ)

1. Create a new page. You can call it whatever you want (blogroll, following, my peeps, etc.) 

2. Click Page Type and choose Custom Layout.

3. Insert this coding:

{block:Following}{block:Followed} <a href=”{FollowedURL}”><img src=”{FollowedPortraitURL-64}” border=”0” /></a> {/block:Followed}{/block:Following}

Note: You can change the number 64 to any of these custom icon sizes:

[ 16, 24, 30, 40, 48, 64, 96, 128 ]

IF IT DOESN’T WORK, try re-typing the quotation marks yourself, because copying and pasting can get iffy. 


How to create a back to top using text or an image

ixora:

Put the following script before the </head> tag:

http://pastebin.com/MyCATj7V

Next, we need to put the following in the CSS:

http://pastebin.com/xngTWdkt

You can adjust the positions, font family, font size, color, etc. to your own taste.

Now put the following after the <body> tag:

http://pastebin.com/b0y8JuVP

Wa-la you’re done. You can change the back to top text to your own custom text. 

To change it into an image, put this coding after the <body> tag instead:

http://pastebin.com/3nfa3CEH


1 2 »