#hover tabs

[daythemes]

Hi, could you teach me how to edit your hover tabs (Hover Tab 002: DAWN) to have seven tabs? Or maybe you could just post an edit if that'd be too much trouble. Thank you!

it would be much simpler to post an edit, so here it is! thank you for using my codes :)

1. Copy & paste this code before .

/* 001. DAWN theme's matching hover tab by DAYTHEMES */#tab1 {    z-index:999;position:fixed;    background:white;/*box 1 background*/    border:1px solid {color:border};    right:30px;top:72px;    box-shadow:-5px 5px {color:border};    width:15px;height:15px;}.tab1{    z-index:9999;overflow:hidden;position:fixed;    background:white;/*tab 1 background*/    border:1px solid {color:border};    padding:10px;right:60px;top:-200px;    font-size:11px;text-align:center;    box-shadow:-5px 5px {color:border};    width:100px;/*tab 1 width*/    height:100px;/*tab 1 height, make this higher for longer text*/    -webkit-transition-duration: 0.7s;    -moz-transition-duration: 0.7s;    -o-transition-duration: 0.7s;    transition-duration: 0.7s;}#tab1:hover .tab1{top:72px;}#tab2 {    z-index:999;overflow:hidden;    position:fixed;    background:white;/*box 2 background*/    border:1px solid {color:border};    right:30px;top:102px;    box-shadow:-5px 5px {color:border};    width:15px;height:15px;}.tab2{    z-index:9999;overflow:hidden;position:fixed;    background:white;    border:1px solid {color:border};    padding:10px;right:60px;top:-200px;    font-size:11px;text-align:center;    box-shadow:-5px 5px {color:border};    width:100px;/*tab 2 width*/    height:100px;/*tab 2 height, make this higher for longer text*/    -webkit-transition-duration: 0.7s;    -moz-transition-duration: 0.7s;    -o-transition-duration: 0.7s;    transition-duration: 0.7s;}#tab2:hover .tab2{top:72px;}#tab3{    z-index:999;overflow:hidden;    position:fixed;    background:white;/*box 3 background*/    border:1px solid {color:border};    right:30px;top:132px;    box-shadow:-5px 5px {color:border};    width:15px;height:15px;}.tab3{    z-index:9999;overflow:hidden;position:fixed;    background:white;    border:1px solid {color:border};    padding:10px;right:60px;top:-200px;    font-size:11px;text-align:center;    box-shadow:-5px 5px {color:border};    width:100px;/*tab 3 width*/    height:100px;/*tab 3 height, make this higher for longer text*/    -webkit-transition-duration: 0.7s;    -moz-transition-duration: 0.7s;    -o-transition-duration: 0.7s;    transition-duration: 0.7s;}#tab3:hover .tab3{top:72px;}#tab4{    z-index:999;overflow:hidden;    position:fixed;    background:white;/*box 4 background*/    border:1px solid {color:border};    right:30px;top:162px;    box-shadow:-5px 5px {color:border};    width:15px;height:15px;}.tab4{    z-index:9999;overflow:hidden;position:fixed;    background:white;    border:1px solid {color:border};    padding:10px;right:60px;top:-200px;    font-size:11px;text-align:center;    box-shadow:-5px 5px {color:border};    width:100px;/*tab 4 width*/    height:100px;/*tab 4 height, make this higher for longer text*/    -webkit-transition-duration: 0.7s;    -moz-transition-duration: 0.7s;    -o-transition-duration: 0.7s;    transition-duration: 0.7s;}#tab4:hover .tab4{top:72px;}#tab5{    z-index:999;overflow:hidden;    position:fixed;    background:white;/*box 5 background*/    border:1px solid {color:border};    right:30px;top:192px;    box-shadow:-5px 5px {color:border};    width:15px;height:15px;}.tab5{    z-index:9999;overflow:hidden;position:fixed;    background:white;    border:1px solid {color:border};    padding:10px;right:60px;top:-200px;    font-size:11px;text-align:center;    box-shadow:-5px 5px {color:border};    width:100px;/*tab 5 width*/    height:100px;/*tab 5 height, make this higher for longer text*/    -webkit-transition-duration: 0.7s;    -moz-transition-duration: 0.7s;    -o-transition-duration: 0.7s;    transition-duration: 0.7s;}#tab5:hover .tab5{top:72px;}#tab6{    z-index:999;overflow:hidden;    position:fixed;    background:white;/*box 6 background*/    border:1px solid {color:border};    right:30px;top:222px;    box-shadow:-5px 5px {color:border};    width:15px;height:15px;}.tab6{    z-index:9999;overflow:hidden;position:fixed;    background:white;    border:1px solid {color:border};    padding:10px;right:60px;top:-200px;    font-size:11px;text-align:center;    box-shadow:-5px 5px {color:border};    width:100px;/*tab 6 width*/    height:100px;/*tab 6 height, make this higher for longer text*/    -webkit-transition-duration: 0.7s;    -moz-transition-duration: 0.7s;    -o-transition-duration: 0.7s;    transition-duration: 0.7s;}#tab6:hover .tab6{top:72px;}#tab7{    z-index:999;overflow:hidden;    position:fixed;    background:white;/*box 7 background*/    border:1px solid {color:border};    right:30px;top:252px;    box-shadow:-5px 5px {color:border};    width:15px;height:15px;}.tab7{    z-index:9999;overflow:hidden;position:fixed;    background:white;    border:1px solid {color:border};    padding:10px;right:60px;top:-200px;    font-size:11px;text-align:center;    box-shadow:-5px 5px {color:border};    width:100px;/*tab 7 width*/    height:100px;/*tab 7 height, make this higher for longer text*/    -webkit-transition-duration: 0.7s;    -moz-transition-duration: 0.7s;    -o-transition-duration: 0.7s;    transition-duration: 0.7s;}#tab7:hover .tab7{top:72px;}/*end of tabs' codes hoorah*/

2. Copy & paste this code after .

first

second

third

fourth

fifth

sixth

seventh

3. Fill in the provided spaces with your contents.4. Modification options are stated.

if you have any other questions, please feel free to message me :)

PLEASE REBLOG/LIKE THIS IF YOU’RE USING THESE CODES!!!

[tutorialprincess]

Bubble Tab

paste this code above </style>

#tab1 { background-color:#ffffff; /* background colour */ border-bottom:2px solid #ffbaf8; /* top border width and colour */ border-top:2px solid#ffbaf8; /* top border width and colour */ border-left:2px solid #ffbaf8; /* left border width and colour */ border-right:2px solid #ffbaf8; /* right border width and colour */ width:25px; /* width before hovering */ height:25px; /* height before hovering */ font-size:14px; /* font size */ font-family: 'Patrick Hand', cursive; /* font */ color: #808080; border-radius:60px 60px 60px 60px; -moz-border-radius:0px 0px 0px 14px; position:fixed; overflow:hidden; top:14px; left:14px; z-index:999999999; padding:2px;

-webkit-transition: opacity 0.7s linear; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out;}

#tab1icon{ font-size:17px; /* size of text icon */ color:#808080; /* colour of text icon */ margin-top:0px; margin-right:0px; text-align:center; -webkit-transition: opacity 0.7s linear; -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out;}

#tab1:hover{ width:300px; /* width after hovering */ height: 425px; /* height after hovering */ border-radius:5px 5px 5px 5px; -moz-border-radius:5px 5px 5px 5px; opacity:0.95}

paste this code after <body>

<div id="tab1"><center> <div id="tab1icon"><img src="https://64.media.tumblr.com/tumblr_mdnsivG5zy1qdlkyg.gif" /></div><br>

<div style=" width:150px; border:3px solid #ffbaf8; padding:8px; font-size:25px;">Welcome!</div><p>

<br>

content goes here

</div>

if you want multiple bubble tabs, just repeat the steps above but change "tab1" to "tab2" for the second, "tab3" for the third, and so on. and be sure to change the positioning if you do that so the tabs don't lie on top of one another!

-kate

[pintofrijol]

Can someone help me with the hover tabs?

[easy-html-tutorials]

heya! how do you add more bars on the sectioned hover tab? :)

Since I get this question quite often, I'll just make a quick tutorial! 

Paste this code under or <style type="text/css">

Paste this code IN BETWEEN the 3rd and 4th sections of the tab. (it will be second to last) 

Replace all the text and save! 

[easy-html-tutorials]

lol no i was thinking something like roseybows or euflohria's or even daisiechanels. sorry i wasn't more specific. :O

Ohh I see now! haha it's okay. They just have edited versions of this tutorial. They changed the border-radius of the tabs to make them a different shape. You can choose what you want the borders to look like by going to this site and messing with the border-radius of each corner, then copy the code it gives you and replace the border-radius of the tabs you have currently. 

[easy-html-tutorials]

4 Small Hover Tabs (from top)

PREVIEW:

1. Paste this code under <style> or before </style>

2. Paste this code directly under <body>

3. Replace all of your information in the tabs!