icons #3

<!-- icon page #3 by nerdydean. don't remove the credit. -->

<!DOCTYPE html>
<head>

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>


<style type="text/css">

body {
font-family:arial;
}

#s-m-t-tooltip {
font-size: 9px;
max-width:300px;
padding:3px 4px 2px 5px;
margin:20px 0px 0px 20px;
background:#fff;
border:1px solid #000;
font-family:calibri;
letter-spacing:1px;
text-transform:uppercase;
color:#000;
z-index:999999999999999999999999999999999999;
box-shadow:2px 2px rgba(51,51,51,.1);
}

::-webkit-scrollbar {
height:03px;
width:12px;
background-color:#fff;
}

::-webkit-scrollbar-thumb {
background-color:#000;
border: 5px solid #ffffff;
}

a {
text-decoration:none;
-webkit-transition-duration:.6s;
-moz-transition-duration:.6s;
-o-transition-duration:.6s;
-ms-transition-duration:.6s;
color:#000;
}

a:hover {
-webkit-transition-duration:.6s;
-moz-transition-duration:.6s;
-o-transition-duration:.6s;
-ms-transition-duration:.6s;
}

#content {
margin:10px auto;
width:900px;
}

#content img {
margin-left:5px;
width:100px;
padding:10px;
border:1px solid #eee;
box-shadow:2px 2px rgba(51,51,51,.1);
padding:5px;
margin:5px 5px 5px 5px;
}


#title {
font-size:40px;
font-weight:bold;
width:900px;
margin:0 auto;
margin-top:30px;
margin-bottom:10px;
font-family:calibri;
letter-spacing:1px;
text-transform:uppercase;
color:#000;
border:1px solid #eee;
padding:10px;
box-shadow:2px 2px rgba(51,51,51,.1);
}

.media {
color: #a1a1a1;
background: #ffffff;
}

#filters {
background: #fff;
}

#filters a {
margin: 5px;
text-transform: uppercase;
}


</style>

<script type="text/javascript">
$(document).ready(function() {
// Tooltip only Text
$('.masterTooltip').hover(function(){
        // Hover over code
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn('slow');
}, function() {
        // Hover out code
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
}).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coordinates
        var mousey = e.pageY + 10; //Get Y coordinates
        $('.tooltip')
        .css({ top: mousey, left: mousex })
});
});
</script>

<script>
$(document).ready(function(){
$(".filters").click(function(e) {
e.preventDefault();
$(".media").not("." + $(this).attr("rel")).hide(500);
$("." + $(this).attr("rel")).show(500);
});
});
</script>

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".sub").hide();
//toggle the componenet with class msg_body
jQuery(".cthrough").click(function()
{
jQuery(this).next(".sub").slideToggle(500);
});});
</script>

</head>


</head>
<body>

<!-- this is your title. -->
<div id="title">[your] icons.
<small><small><small><small><small>
<!-- these are your links. -->
<a href="/">home.</a>
<a href="/ask">ask.</a>
<a href="/">link3.</a>
<!-- please don't remove this -->
<a href="http://hellish.co.vu">cr.</a>
<br><small>
<div id="filters">
<!--

these are your basic filters. they're your main ones, like show titles or whatever. i'll explain how these work.

<a href="#" rel="media" class="filters"><b>all</b></a>
this is the first filter. you can't change much about this one without messing up the whole code. the only part you can change is this part:

<b>all</b>

you can change it to say something else or get rid of the bold text. but like i said, if you change anything else, it'll mess everything up.

now i'll show you a better example of a filter that you can mess around with! here's a filter i use for my supernatural icons:

<a href="#" rel="spn" class="filters">supernatural</a>

what you can change on the filters is what it says in quotations after rel= (in this case, "spn") and, of course, the name of the filter that everyone will see, which, in this case, is supernatural.

the <a href="#" is what creates the "link" that makes the icons under this filter show up.

the rel="spn" indicates what icons you want to show up. in this case, it's all the icons i've marked with "spn", which you'll see how to do below. WARNING: YOU CAN'T MAKE THIS MORE THAN ONE WORD, OR IT'LL MESS IT UP.

the class="filters" is another part that just generally makes the icons show up. and, of course, what you put after class="filters"> is the name of the filter that those using your page will see.

you can have as many of these as you want, or as few as you want. but, remember, you have to have the one that says all, or else nothing will show up.

i have a basic little structure for my page, you can use it of course, or do whatever. i left in my filters just so that you can see how it looks, and so that the page will work as an example. feel free to delete them/change them/whatever to make your own page!

-->
<a href="#" rel="media" class="filters"><b>all</b></a> - <a href="#" rel="spn" class="filters">supernatural</a> - <a href="#" rel="ob" class="filters">orphan black</a> - <a href="#" rel="hp" class="filters">harry potter</a> - <a href="#" rel="ppl" class="filters">people</a>

</small></small></small></small></small></small></div></div>


<div id="content">

<!--

now here's where the actual icons go! now, i'm going to teach you how to add an icon. i'll use one of mine as an example.

<span class="media spn charlie red 7"><img src="http://i.imgur.com/rqgr2C0.png"></span>

first off, you have to start with <span class= , which is what activates your filters. in the quotation marks, first you write "media" so that this icon will show up when the users click on your "all" filter. next, this is where you write the rest of your filters! this is where you put all of the stuff you wrote under rel= , seperated simply by spaces. i wrote "media spn charlie red 7" because i want this icon to show up under the all, supernatural, charlie, red, and season 7 filters.

once you write in all of your filters, then you put in the actual icon! first you put <img src= so that the page knows you're putting in an image. now, you need to upload your icon somewhere and paste the link to it after <img src=" . i highly recommend:

http://imgur.com

or, you can upload it through tumblr static:

https://www.tumblr.com/themes/upload_static_file

either way, these places will give you a link to the image. just place the link after the quotation marks and you're good to go!

do this for all of your icons, and you'll be good!

the icons show up in order of how you paste them, so if you want to do it in some sort of order, you can. i did mine in rainbow order, but of course you can do it however.

you can put as many icons as you want here, in whatever order you want, and in as many filters as you want!

i left a few of mine below as an example. please don't use them on your page and claim them as yours.

and that's pretty much anything! if you have any questions, feel free to ask me!

http://hellish.co.vu/askbox

-->

<span class="media spn charlie red 7"><img src="http://i.imgur.com/rqgr2C0.png"></span>
<span class="media ob sarah yellow"><img src="http://i.imgur.com/MuQxaIE.png"></span>
<span class="media spn dean orange 6"><img src="http://i.imgur.com/euJTSIb.png"></span>
<span class="media spn balthazar green 6"><img src="http://i.imgur.com/mR6iLgP.png"></span>
<span class="media spn dean blue 6"><img src="http://i.imgur.com/cbMDV4K.png"></span>
<span class="media spn meg purple 7"><img src="http://i.imgur.com/A4ktf8f.png"></span>
<span class="media ob sarah pink"><img src="http://i.imgur.com/aM6tqjQ.png"></span>
<span class="media ob felix white"><img src="http://i.imgur.com/hzxCV2P.png"></span>
<span class="media hp hermione neutral"><img src="http://i.imgur.com/ruImNGk.png"></span>
<span class="media ppl karen gray"><img src="http://i.imgur.com/PYqmDKD.png"></span>
<span class="media spn dean black 6"><img src="http://i.imgur.com/Uk1w0SB.png"></span>
<span class="media spn dean bw 7"><img src="http://i.imgur.com/JBsG3J2.png"></span>


</div>


</body>
</html>