Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[HTML] Category description hover style IPB



View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  Shadow

avatar
Administrator
Administrator


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



- 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>




- 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;
}


- 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();
      })
  });
});


- Preview





© PunBB Design


If you have any questions related to this topic create a topic with the following title:
Category description hover style IPB

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

2
Offline

  FrOsTyXi

avatar
V.I.P. Member
V.I.P. Member
Real nice implemented on my forum working great! Thank you!

Powered by PunBB
Currently 0 users have thanked FrOsTyXi for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

Permissions in this forum:
You cannot reply to topics in this forum