update tab one

UPDATE TAB ONE - TARA (star in urdu)
BY @AMAANAT ON TUMBLR
a simple update tab for the extra information you want to display on your blog! Some instructions are included in the code itself and if you have questions, go to amaanat.tumblr.com/faq

----------------------- if you do not already have @suiomi's wonderful honeybee icons installed in your theme, paste the following code before </head> --------------------

<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">

----------------------- paste the following code between <style> and </style>, wherever you want to place it (I would recommend placing it before </style>, right at the end --------------------

.updatetab {
    font-family:inherit;
    width:200px;
    max-width:200px;
    background-color:transparent;
    color:black;
    padding:5px;
    margin-left:20px;
    margin-top:20px;
    position:fixed;
    border-radius:4px;
    transition:.3s ease;
}


.updatecontent {
    margin-top:0px;
    opacity:0;
    transition:.5s ease;
}

.updatecontent:hover {
    opacity:1;
    margin-top:10px;
}

/* this is the individual titles of your update tab. If you want you can change some colors or the font size but do not make it too big */

.updatetitle {
    color:white;
    background-color:black;
    display:block;
    padding:3px;
    font-size:13px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    text-transform:uppercase;
    font-weight:bold;
    text-align:center;
}

/* this is the general text in your update tab. you can add whatever customisations you want here. If you want to change link color, go to color under .updatetab a and a:hover (for the link hover color) and insert a hex code */
.updatetext {
    margin-top:0px;
    background-color:#eee;
    padding:5px;
    text-align:center;
    font-size:12px;
}

.updatetext a {
    color:#a95c5c;
    transition:.3s ease;
    text-decoration:none;
}

.updatetext a:hover {
    color:black;
}

/* this is the star icon. If you change the lovely icons Sol made, remember to also change the icon name below (do not remove the '.th' but just add the icon name after the hyphen / - sign)! */
.th-star, #parent {
    color:black;
    z-index:1;
    opacity:1 !important;
}

.th-star:hover ~ .updatecontent {
    opacity:1 !important;
    margin-top:10px;

}

-------------------- paste the following just under <body> --------------------

<div class="updatetab">

<!-- go to honeybee.suiomi.com and if you want a different icon replace the word 'star' with a different icon from the list. remember to replace the word 'star' in the CSS as well (.th-star -> .th-icon of your choice) -->

<span class="th th-star"></span>


<div class="updatecontent">

<!-- start of actual content.
INSTRUCTIONS:
when you want to start another bar with text underneath, copy this template below and paste it where you want. do NOT forget the <p> between the updates so theres a small gap otherwise it looks weird

template:

<div class="updatetitle">your title here</div>

<div class="updatetext">your text here</div>

<p>

-->


<div class="updatetitle">title</div>

<div class="updatetext">text you want here</div>

<p>


<div class="updatetitle">title</div>

<div class="updatetext">text you want here</div>

<p>

/* add more boxes here */

<!-- do not remove the following code AT ALL nor put any more content / updates after it. -->
<p>
<div class="updatetitle">
    credit
</div>

<div class="updatetext">update tab by <a href="https://www.amaanat.tumblr.com">@amaanat</a></div>


</div> <!-- end updatecontent div-->
</div> <!-- end updatetabs div-->