- Updates tab #2 (right)

/*-- U P D A T E S  T A B  #2  BY  H U N T E R  T H E M E S --*/

PASTE THIS UNDER <style type="text/css">

/*-- UPDATES TAB #2 BY @HUNTERTHEMES (right) --*/

#updates-tab{
position:fixed;
top:40px;
right:0px;
width:10px;
height:auto;
z-index:100000;
/* Stye of the text inside boxes */
font-family:Arial;
font-size:12px;
line-height:20px;
color:#bbb;
}

/* Box 1 */

#box1, #box2, #box3, #box4{
position:absolute;
margin-top:0px;
margin-left:5px;
width:120px;
height:auto;
min-height:140px;
padding-right:55px;
padding-left:10px;
color:#bbb;
background:#fff;
border:1px solid #eee;
text-align:right;
z-index:10;
}

#box2{ margin-top:35px; }

#box3{ margin-top:70px; }

#box4{ margin-top:105px; }

/* Boxes on hover, don't change */

#box1:hover, #box2:hover, #box3:hover, #box4:hover{
margin-left:-180px;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}

/* Updates tab titles */

#updates-tab h1{
margin-top:0px;
margin-bottom:10px;
margin-left:-10px;
padding-right:10px;
width:180px;
height:29px;
line-height:29px;
font-size:15px;
color:#333;
border-bottom:1px solid #eee;
font-family:Arial;
/* Background of the titles */
background-image:url(http://static.tumblr.com/fd25cf263f97e81a3b403a06dae0013e/6dvmes1/ptEnnzfpe/tumblr_static_e0ujg22c7o8c48sgkokw8woss.png);
}

/* Updates tab icons */

#box1icon, #box2icon, #box3icon, #box4icon{
position:absolute;
margin-top:-1px;
margin-left:-42px;
width:20px;
height:20px;
padding:5px;
/* Background of the first icon */
background:#BDC6C8;
border:1px solid #eee;
border-top-left-radius:5px;
border-bottom-left-radius:5px;
text-align:center;
cursor:pointer;
z-index:100;
}

#box2icon{ /* Background of the second icon */ background:#D7CBCB; }

#box3icon{ /* Background of the third icon */ background:#B6D09C; }

#box4icon{ /* Background of the fourth icon */ background:#E6E190;}

/* Style of the icons */

#box1icon i, #box2icon i, #box3icon i, #box4icon i{
font-size:12px;
line-height:20px;
color:#333;
}

/* Updates tab links */

#updates-tab a{
color:#777;
}

/* Updates tab links on hover */

#updates-tab a:hover{
color: #333;
}

/* END CSS */


PASTE THIS UNDER <body>

<!-- UPDATES TAB #2 BY @HUNTERTHEMES (right) -->

<div id="updates-tab">

<div id="box1">
<!-- To change the first icon go to http://fontawesome.io/icons/ and choose the icon of your liking then replace "user" with your icon's name -->
<div id="box1icon"><i class="fa fa-user" aria-hidden="true"></i></div>
<h1>Title 1</h1>
Add content <br>

<hr>

<a href="/">link</a>
<b>bold</> <i>italic</i>
</div>
<!--End box1-->

<div id="box2">
<!-- To change the second icon go to http://fontawesome.io/icons/ and choose the icon of your liking then replace "star" with your icon's name -->
<div id="box2icon"><i class="fa fa-star" aria-hidden="true"></i></div>
<h1>Title 2</h1>
Add content
</div>
<!--End box2-->

<div id="box3">
<!-- To change the third icon go to http://fontawesome.io/icons/ and choose the icon of your liking then replace "heart" with your icon's name -->
<div id="box3icon"><i class="fa fa-heart" aria-hidden="true"></i></div>
<h1>Title 3</h1>
Add content
</div>
<!--End box3-->

<div id="box4">
<!-- To change the fourth icon go to http://fontawesome.io/icons/ and choose the icon of your liking then replace "bell" with your icon's name -->
<div id="box4icon"><i class="fa fa-bell" aria-hidden="true"></i></div>
<h1>Title 4</h1>
Add content
</div>
<!--End box4-->

</div>
<!--End updates tab -->