I used to get asked this question a lot: “My follow/dashboard buttons have moved, how do I put them back in the right place?”
The solution is to insert the following into your CSS (between <style> and </style>):
iframe#tumblr_controls { right:3px !important; position:fixed !important; }
Hey! There’s a simple way to change the old “read more…” for something that is more like you. All you need to do is search for {Body} and put this code after:
{block:More}<a href="{Permalink}">READ MORE</a>{/block:More}
Just change the “READ MORE” for what you want! And you can put a image too replacing the “READ MORE” this way:
{block:More}<a href="{Permalink}"><img src="img url"></a>{/block:More}
- - - - - - - - -
Bold text:
<b>text</b>Italic text:
<i>text</i>
Strike Throughtext:<s>text</s>Underlined text:
<u>text</u>- - - - - - - - -
Bigger text:
<big>text</big>Smaller text:
<small>text</small>
(via chiscakes)
Paste this under the <head> tag.
<Meta http-equiv="refresh" content="5", url="http://NEWURL.tumblr.com/">
“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
Pop-Up Menu is quite different and like any tool has its positives and negatives.
Advice!
Before doing anything, it’s good if you save your code as a precaution.
> keep reading...In the new customize sometimes the “reset default” doesn’t work fine. All the theme blows up because of the meta tags. Sometimes the themes have the same meta tags and all become a messy. But how can you do to theme be exactly like in the preview?
There’s a solution. I don’t know if is the best solution, but at least works.
1. SAVE your theme before anything. (or use the tumblr theme recover if you don’t like the results)
2. Erase all the codes and paste:
<html> <head> </head> <body> </body>
You have to paste like this way! One tag per line.
3. All your page will become white.
4. Save it and refresh the page.
5. Paste the new theme’s code
6. Save and refresh again!
Done! I hope this tip helps.
To modify the dafault cursor in your theme, you have to put this code in CSS:
html {
cursor: url("cursor.cur"), default;
}
You just need to change cursor.cur for your own cursor link. Or if you want to use other default cursors (not the arrow) you will put it this way:
html {
cursor: cursor type;
}
You can change the cursor type for
crosshair
e-resize
hand
help
move
n-resize
ne-resize
nw-resize
pointer
s-resize
se-resize
sw-resize
text
w-resize
wait
You still can change the cursor in only one part of your theme, just need to add the “cursor: cursor type” in the appropriate div instead of html.
It’s very simple to change the default selection colour. To make this effect you only use CSS. Currently FireFox, Safari, Chrome and Opera support the effect. The browsers that don’t support it simply ignore the code.
You just need to paste this code in your CSS:
::selection {
background: #HEX selection color;
color: #HEX font color;
}
::-moz-selection {
background: #HEX selection color;
color: #HEX font color;
}::-webkit-selection {
background: #HEX selection color;
color: #HEX font color;
}
And change the colors! The three codes are the same, just different syntax for different browsers.
Sometimes we have a beautiful image that isn’t a pattern to put in the background, but in different resolutions, the image doesn’t fit perfectly in the screen. Here the solution to this problem!
In the CSS, put this code:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; }
Don’t forget to replace “images/bg.jpg” for the URL of your image!
ATENTION! Make sure that in the “body” tag on your CSS, there’s no background-color. If you have a background-color in body, the code will not appear correctly.
I use CODY SHERMAN infinite scrolling script and he teach how to put it on his blog. There a lot of ways to make the infinite scrolling style and I use two of them because I have the certainly that this effect will work! Let’s start:
Tcharam! You will have infinite scrolling. Hope everybody enjoy it.
DON’T FORGET TO RETYPE ALL THE QUOTATION MARKS. If you don’t do this, will not work.