nyxcodes @nyxcodes - Tumblr Blog

TUTORIAL » How to use the isotope javascript filter

Example 1 / Example 2 (Basic)

Difficulty: ★ ★ ☆ ☆ ☆ Requested By: asschlinthemes Notes: This is used a lot in fanfics pages, tv schedules & network themes. Really simple once you get the hang of it!

Feel free to request a tutorial!

I’m going to be telling you specifically how to make THIS PAGE.

Keep reading

#tutorials

starious-blog

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.

SOURCE: DESIGN JUICES

#tutorials

html-and-etc

Random Sidebar Image Script

This tutorial will teach you on how to change your sidebar images, randomly. It means every time you reload the page, the picture will be changed. You can also try this with logo and such.

Step 1. Go to this website.

Step 2. Go to your HTML codes and find the codes for your sidebar or logo. Normally, it will have something like this: <img src=”{image:Sidebar Image}”> or <img src=”{Logo}”>. Depends on your theme, if it has been meta tagged or not.

Step 3. Find images that you want. Upload it here. Depends on you on how many or few you like. If you want to add another image just put, myimages[7]=”image7.gif” after the sixth and so on..

Step 4. Then copy the URL of the image and paste it where it says: “image1.gif” “image2.gif” “image3.gif” and so on.. Please be careful not to delete any quotation marks. :) and save it.

#tutorials

acuite

TUTORIAL: FULL TRANSPARENT PERMALINKS

I’ve received quite a few asks about the hovering permalinks on my theme Rhea. So here is a quick and easy way to achieve this.

INSTRUCTIONS

Firstly you must add position: relative; into your #entry (it could also appear as #posts or something similar).

Then add one of these codes anywhere between <style type=“text/css”> and </style>

Finally, add one of these codes at the beginning of your posts. It should look something like this:

<div id=“content”> {Block:Posts} <div id=“entry”> Code Here {block:Text}

COMMENTS

That’s it! You’re finished! Just be sure to change the width in #perma_hold to your post size and you should be fine. Feel free to customize it more if you feel comfortable, but be aware that I won’t be helping if you mess something up.

#tutorials

panthoen

01 - paper tiger - preview 1 + preview 2 + code

Includes:

Animated header on scroll

6 post sizes from 275px to 500px

Optional infinite scroll

Optional 90px wide sidebar image

Optional second title above description

Optional captions

3 custom links

Pop-up navigation

5 fonts to choose from

Customizable colors

Notes:

To change the links in the pop-up navigation you have to go into the code, down to the bottom. I put two examples in, but if you still have problems, feel free to message me!

Don’t steal the code, note even bits of it.

Please like/reblog if you use.

If you notice any errors or have any questions, hmu!

#theme rec

theamazingtutorials-blog

Grayscale Effect on Photos

All you need to do is find the code <style type=“text/ccs”> in your theme code and paste this below it.

img{ -webkit-transition: opacity 0.8s linear; opacity: 0.60; -webkit-filter:grayscale(100%); } img:hover{ -webkit-transition: opacity 0.8s linear; opacity: 1; -webkit-filter:none; }

Posted by Queenie.

#tutorials

acuite

TUTORIAL: POP-UP BOXES

Live Preview

INSTRUCTIONS:

Open the Customize page, and click Edit HTML

Paste this code underneath <head>

Paste this code anywhere between <style type=“text/css”> and </style>

Paste this code right in between </body> and </html>*

Paste this code wherever you want the link to show**

* NOTE 1:

To add extra pages simply copy and paste the first division (the entire part before the long line of </div>’s) but remember each different box needs a different title (<div id=“box1”>)

For a pop-up ask box, replace ‘content’ with this code

** NOTE 2:

“#?w=300” is the width, change it to whatever suits

rel=“box1” is the name of the box, make sure it correlates with Step 3’s title

COMMENTS: Hope this helped, if you have any questions feel free to message me.

#tutorials

oddhour

Redirect your old tumblr links to your new url--the correct way!

A quick Google search told me that apparently no one knows how to do this properly :P You can redirect all your links from your old tumblr url to your new tumblr url (as long as you have your old url saved i.e. on a sideblog). This isn’t just redirecting to your new tumblr’s homepage.

This is like going to: http://oddhouredproductivity.tumblr.com/tagged/tips (try it!)

and the URL automatically changes to: http://oddhour.tumblr.com/tagged/tips

If you’ve ever tried to find a post off someone’s old url, you know how annoying it can be to track down the post in the new url.

How to use: Add this script either before your end body tag (</body>) or in the head section (<head></head>) of the tumblr where you saved your old URL. Change oddhour.tumblr.com to whatever your new URL is.

To add a delay before redirecting, refer to this post.

For a simple redirect theme like mine or for an example of this script in use, see the code here.

#tutorials

themes-mandrakescry

I’ve received a lot of messages asking how I made the SlideUp menu from my current theme, so I decide to make this tutorial. This effect involves html, css and JavaScript. I suggest you have at least a basic html/css knowledge.

Difficulty: CSS (easy) | HTML (easy) | JS (easy)

Preview:xx

Keep reading

#tutorials

nutty-themes

Reposting this tutorial because I need to set up a tutorials tag.

I’m not going to explain how the whole page was styled. Instead I’ll just go over the main points on how to get the linking/scrolling (of questions) to the corresponding parts of the same page (the answers) to work. This technique is not limited to FAQ’s and can be used at any time you want to scroll to a certain part of the same page.

Difficulty: CSS (easy) | HTML (easy) | JS (easy) Prior Reading: HTML Anchor Tag, HTML Definition/Description Lists Download the codes.

Keep reading

#tutorials

lmthemes

Search Boxes - apparently a hot commodity. I get asked this a lot, especially as far as theme-hunter’s theme was concerned. I now present you a tutorial on how to make one and how to style it. Enjoy!

up next: actual themes

» continue to the tutorial

#tutorials