2014-12-24, 19:49
Tutorial: Category description hover style IPB |
This tutorial will implement a hover style when you are mouseover forum title.
Tutorial by @Wagner
--> Tutorials, tips and tricks <--
Category description hover style IPB
Category description hover style IPB
1º - Template
1. Open [ic]index_box[/ic] template,
Find [ic]{catrow.forumrow.FORUM_NAME}[/ic] and replace it by:
- Code:
[panda=html]<span class="forum_name">
<h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
</span>
Under this code is tag [ic]<br/>[/ic], delete it!
Now find [ic]{catrow.forumrow.FORUM_DESC}[/ic] and replace with:
- Code:
[panda=html]<span class="forum_desc_pos">
<span class="forum_desc_con" style="left: 10px; opacity: 0; display: none;">
<span class="forum_description">{catrow.forumrow.FORUM_DESC}</span>
</span>
</span>
2º - CSS
In CSS add the following code
- Code:
[panda=css].forum_desc_pos {
position: relative;
}
.forum_desc_con {
width: 350px;
display: none;
left: 10px;
float: left;
position: absolute;
top: -4px;
padding-left: 10px;
background: url("http://i.imgur.com/E4lHPSe.png") no-repeat 6px 9px;
z-index: 10000;
}
.forum_description {
color: #FFF;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: url("http://i.imgur.com/zkoWf4I.png") repeat;
background: rgba(15, 15, 15, 0.9);
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
-moz-box-shadow: rgba(0,0,0,0.3) 0px 1px 7px;
box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
font-size: 11px;
padding: 5px;
display: block;
float: left;
}
3º - Javascript
Placement: In all pages
- Code:
[panda=js]jQuery(document).ready(function(){
jQuery(".forum_name").hover(function() {
jQuery(this).next(".forum_desc_pos").children(".forum_desc_con").stop()
.animate({left: "0", opacity:1}, "fast")
.css("display","block");
}, function() {
jQuery(this).next(".forum_desc_pos").children(".forum_desc_con").stop()
.animate({left: "10", opacity: 0}, "fast", function(){
jQuery(this).hide();
})
});
});
4º - Preview
© PunBB Design
If you have any questions related to this topic create a topic with the following title: Category description hover style IPB |