View Single Post
  #1  
Old 01-15-2010, 07:52 PM
  acidon's Avatar 
acidon acidon is offline
 

Senior Member
  
Join Date: Feb 2008
Posts: 139
 

Smile Hover box usage in 4.3

Hi everyone!

I noticed 4.3 comes with beautiful hover mouseover boxes over some of the elements in admin area ( see picture below).
http://www.kettlebellsdvd.com/xcart---f.gif


I was about to install and use outdated and buggy Overlib to achieve the same effect accross many pages on my site.

So I got very excited and decided to take a vanage of existing xcart hover solution.


1) I found the code related to picture above:

Code:
<a href="javascript:void(0);" class="NeedHelpLink" onmouseover="javascript: viewHelp('help_reverse', this);">{$lng.lbl_revert_files}</a> <div id="help_reverse" class="NeedHelpBox" style="display: none;">{$lng.txt_revert_files_note}</div>


2) Then I found related CSS in /skin1_admin.css :

Code:
/* 'Need help' box */ .NeedHelpLink, .NeedHelpLink:link, .NeedHelpLink:visited, .NeedHelpLink:hover, .NeedHelpLink:active { TEXT-DECORATION: none; CURSOR: help; BORDER: none; BORDER-BOTTOM: 1px dashed #3c6992; WHITE-SPACE: nowrap; COLOR: #3c6992; } DIV.NeedHelpBox { POSITION: absolute; BORDER: 1px solid black; BACKGROUND-COLOR: white; MARGIN: 0px; PADDING: 6px; WIDTH: 200px; WHITE-SPACE: normal; FONT-WEIGHT: normal; overflow: hidden; } DIV.NoteBox { POSITION: absolute; BORDER: 1px solid black; BACKGROUND-COLOR: white; MARGIN: 0px 0px 0px 20px; PADDING: 3px; WIDTH: 200px; WHITE-SPACE: normal; FONT-WEIGHT: normal; }


3) and copied it to /main.css

After running a test I found its working, however popup box is poping in wrong place(see pic below), instead of appearing right below the link ike in example above.

http://www.kettlebellsdvd.com/xc2.gif

Any suggestions on how to tame this naughty Popup box?

Thx in advance!
__________________
Version 4.7.6 X-cart Gold
Reply With Quote