Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*-- 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 (left) --*/
- #updates-tab{
- position:fixed;
- top:40px;
- left: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:-180px;
- width:120px;
- height:auto;
- min-height:140px;
- padding-left:55px;
- padding-right:10px;
- color:#bbb;
- background:#fff;
- border:1px solid #eee;
- 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:0px;
- -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:-45px;
- padding-left: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:130px;
- width:20px;
- height:20px;
- padding:5px;
- /* Background of the first icon */
- background:#BDC6C8;
- border:1px solid #eee;
- border-top-right-radius:5px;
- border-bottom-right-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 (left) -->
- <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 -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement