STARIOUS
Place where I share stuff related to tumblr like themes and resources. Feel free to ask me anything if you need. I'll be happy to help you. Enjoy it! /

starious is run by yvi.
status: hiatus
Latest theme
theme: chronos

release on: 08/05/2012
Fixed follow/dashboard buttons

ixora:

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; }
Custom “READ MORE…”

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}
THE BLOGE IS PLEASED: Basic Codes

peas-just:

catgasmic:

- - - - - - - - -

Bold text:

<b>text</b>

Italic text:

<i>text</i>

Strike Through text:

<s>text</s>

Underlined text:

<u>text</u>

- - - - - - - - -

Bigger text:

<big>text</big>

Smaller text:

<small>text</small>

(via chiscakes)

How to redirect your url.

html-and-etc:

Paste this under the <head> tag.

<Meta http-equiv="refresh" content="5", url="http://NEWURL.tumblr.com/">
Tutorial: Lazy Load

“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

Tutorial: Pop Up Menu

VIEW DEMO!

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...
And If the “reset default”doesn’t work?

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.

How to change the default cursor on your theme.

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.

Perfect full page background image!

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.

Infinite Scrolling tutorial.

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.

Simple drop down menu generator.
Some basics CSS properties.
> keep reading...
Page 1 of 1