Saturday, September 21, 2013

Show Forum Description Inside Tooltips On IP. Board

Show Forum Description Inside Tooltips On IP. Board. To beautify and make your website or forum to be elegant you can implement tooltips that I will give below. Please follow my tutorial at below!

Tutorial :
1. Go to: 
  • ACP
  • Look & Feel 
  • Manage Skin Sets & Templates 
  • Manage Templates in -Your Skin 
  • Board Index  
  • boardIndexTemplate



2. Find:
<h4><a href="{parse url="showforum={$forum_data['id']}" seotitle="{$forum_data['name_seo']}" template="showforum" base="public"}" title='{parse expression="IPSText::striptags( IPSText::htmlspecialchars( $forum_data['name'] ) )"}'>{$forum_data['name']}</a></h4>
                                                    <p class='desc'>{$forum_data['description']}</p>
 


3. Replace With:
<h4><a href="{parse url="showforum={$forum_data['id']}" seotitle="{$forum_data['name_seo']}" template="showforum" base="public"}" class="tooltipforum" title="{$forum_data['description']}"><span title='{parse expression="IPSText::striptags( IPSText::htmlspecialchars( $forum_data['name'] ) )"}'>{$forum_data['name']}</span></a><span class='ipsBadge ipsBadge_purple' style='vertical-align: top; margin-left: 5px;'>Redirect</span></h4>
 


4. Go to:
  • ACP
  • Look & Feel 
  • Manage Skin Sets & Templates
  • Manage Templates in 
  • Your Skin
  • ipb_styles.css

 
5. Add: (Anywhere, but suggested at the bottom)
  
.tooltipforum{
display: inline;
position: relative;
}

.tooltipforum:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 400px;
font-size:12px;
}

.tooltipforum:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
 


Default preview:


After tutorial:


 Hope This tutorial helped you.



thumbnail Title: Show Forum Description Inside Tooltips On IP. Board
Posted by:Stuard Van
Published :2013-09-21T10:00:00-07:00
Rating: 5
Reviewer: 5 Reviews
Show Forum Description Inside Tooltips On IP. Board
Share :
Related articles:

0 comments :

Post a Comment