icons (page #14)

<!-- icons (page #14) by nerdydean. don't remove the credit. -->

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("a[title]").style_my_tooltips({
    tip_follows_cursor:true,
    tip_delay_time:20,
    tip_fade_speed:400,
    attribute:"title"
});
});
})(jQuery);
</script>

<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>

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

<style type="text/css">

#content {
position: absolute;
padding: 0px;
margin-top: 0px;
margin-left: 0px;
overflow: auto;
margin-top:10px;
}

#content img {
padding: 5px;
width: 100px;
margin: 3px;
border: 1px solid #ffffff;
background-color: #ffffff;
}

#s-m-t-tooltip {
max-width:300px;
padding:2px 2px 2px 2px;
margin:20px 0px 0px 20px;
background:#fff;
border:1px solid #eee;
text-transform:lowercase;
color:#2e2e2e;
z-index:999999999999999999999999999999999999;
text-decoration:bold;
font-family: helvetica;
font-size: 10px;
letter-spacing: 0px;
}

::-webkit-scrollbar {
width: 3px;
height:auto;
background:#fff;
}

::-webkit-scrollbar-corner {
padding:2px;
background:#fff;
}

::-webkit-scrollbar-button:vertical {
height:5px;
display: block;
background:#2e2e2e;
}

::-webkit-scrollbar-button:horizontal {
width: 3px;
height: 5px;
display: block;
background:#2e2e2e;
}

::-webkit-scrollbar-thumb:vertical {
background:#2e2e2e;
}

::-webkit-scrollbar-thumb:horizontal {
background: #fff;
}

::-webkit-scrollbar-thumb {
background: #2e2e2e;
}

body {
color:#333;
font-family:calibri;
font-weight:100;
font-size:11px;
text-align:justify;
margin:0;
line-height:18px;
background:#fff;
}

a {
color:#000;
text-decoration:none;
}

a:hover {
text-decoration:underline;
}

img {
border:none;
text-decoration:none;
}

p {
margin-top:5px;
margin-bottom:5px;
}

#con {
left:50%;
margin-left:-460px;
position:absolute;
}

.posts {
width:940px;
background:#fff;
margin:50px 0;
}

.l {
background:#fff;
margin-top:0px;
width:940px;
text-align:center;
font-family:calibri;
text-transform:uppercase;
}

#title {
font-size:14px;
margin-bottom:12px;
text-align:center;
letter-spacing:1px;
font-family:calibri;
text-transform:uppercase;
color:#000;
background:#fff;
padding:15px;
border-bottom:1px solid #eee;
}

.links {
padding-bottom:10px;
border-bottom:1px solid #eee;
}

.links a {
margin:0 5px;
padding:2px 5px;
border:none;
}

.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>

<link href="#s-m-t-tooltip" rel="stylesheet" type="text/css" />

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

<script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>

<script>
    (function($){
    $(document).ready(function(){
        $("a[title]").style_my_tooltips({
            tip_follows_cursor:true,
            tip_delay_time:90,
            tip_fade_speed:600,
            attribute:"title"
        });
    });
})(jQuery);
</script>

<body>

<div id="con">

<div class="l">
<!-- this is your title -->
<div id="title">[your] icons
<br><b><small><small>
<!-- these are your links -->
<a href="/">home</a>
<a href="/ask">request</a>
<a href="/">link3</a>
<!-- please don't remove this, as this is the credit. -->
<a href="http://hellish.co.vu" title="theme by nerdydean">cr.</a>
</b><br>
<!-- this is your description -->
feel free to use them and request c:
<br></small></small>
</div>

<div class="links">
<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="cap" class="filters">captain america</a> - <a href="#" rel="hp" class="filters">harry potter</a> - <a href="#" rel="ppl" class="filters">people</a>
<br><div id="bx">
<!--

these are the collapsable sub-filters that i included in this page. if you don't want them, then you can just delete this whole section. these are filters for smaller things like characters and colors and stuff, or at least that's what i use them for. they work the same as the filters above.

now, this is the broad category name that is going to show up on the page. this is what the users are going to click on to make the sub-filters show up.

i left my name so you can see how it works, and, like i said above, just so this page can work as an example for you.

-->
<a href="#" class="cthrough">characters/people</a>
<div class="sub">
<!--

here is where you put the sub-filters. like i said, it works the same as the filters i showed you how to do above. i left a few for an example.

-->
<a href="#" rel="balthazar" class="filters">balthazar</a>
<a href="#" rel="charlie" class="filters">charlie bradbury</a>
<a href="#" rel="dean" class="filters">dean winchester</a>
<a href="#" rel="felix" class="filters">felix dawkins</a>
<a href="#" rel="hermione" class="filters">hermione granger</a>
<a href="#" rel="karen" class="filters">karen gillan</a>
<a href="#" rel="meg" class="filters">meg masters</a>
<a href="#" rel="sarah" class="filters">sarah manning</a>
</div>
<br>
<!-- here is another title for a sub-filter. do the same as above or delete it if you don't want it. -->
<a href="#" class="cthrough">colors</a>
<div class="sub">
<!-- here are the sub-filters. do the same as above or delete it if you don't want it. i left a few for an example. -->
<a href="#" rel="red" class="filters">red</a>
<a href="#" rel="orange" class="filters">orange</a>
<a href="#" rel="yellow" class="filters">yellow</a>
<a href="#" rel="green" class="filters">green</a>
<a href="#" rel="blue" class="filters">blue</a>
<a href="#" rel="purple" class="filters">purple</a>
<a href="#" rel="pink" class="filters">pink</a>
<a href="#" rel="white" class="filters">white</a>
<a href="#" rel="neutral" class="filters">neutral/not specifically focused on one color</a>
<a href="#" rel="gray" class="filters">gray</a>
<a href="#" rel="black" class="filters">black</a>
<a href="#" rel="bw" class="filters">black & white</a>
</div>
</div>
</div>

</div></div>

<div id="content">
<div id="posts">

<center>

<!--

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>


</center>

</div>

</body>
</html>