Skip to content

March 7, 2012

11

Howto: OpenCart admin panel table hover

by Ian
jQuery-snippet

Quick code snippet for how to add table row hover effect for the admin panel so you can quickly tell what you are about to edit. Anyone with a display greater than about 22 inches is sure to have had problems, especially at the modules screen, when trying to make sure they are clicking the correct ‘edit’ or ‘install’ button.

I know it bugs me so here is a little piece of jQuery that you can drop into system to make the current row you are hovering over change color.

Ok, open up the following file:-

admin/view/template/common/header.tpl

Just before the closing </head> tag insert the following:-

 

That’s it.

If you are running vQmod for OpenCart then you just download the vQmod file table-row-hover-fix.xml.zip.

Read more from Tips, Tricks
  • http://twitter.com/ipalafrugell IPalafrugell

    Nice tip! Thank you very much!

  • Riny

    This is indeed very useful, however I changed it to ‘table.list tbody tr’ so you won’t get the hovers on the headings, and on the forms.

    • http://twitter.com/imaginetech Ian Gallacher

      Thanks for the tip Riny, have updated accordingly.

  • analytics

    Useful. Thanks

  • http://price-india.org Chakru

    not working for me? am I doing something wrong? I did manual edit, it did not work and installed the VQmod version and came up with the same result? I am using version 1.5.1.3

    • http://twitter.com/heruhermawan Heru Hermawan

      Hi Chakru.. just try to remove xml syntax ( CDATA ), use only javascript syntax.
      Hope it helps

  • Osman Homek

    thank you for sharing. you are greate! hi from turkey..

  • Pingback: Howto: OpenCart admin panel table hover | Open Cart Know How

  • Emwadde

    In the adminviewstylesheetstylesheet.css file, add

    .list tbody tr:hover td{background-color:#e6e6e6;}

  • Erzurum025

    thanks

  • http://twitter.com/Landsman Michal Landsman

    Hello, thanks for this code! I added hightlight when item in list checked:

    <![CDATA[

    .selected td {background-color: #f2f2f2!important;}

    $(function(){
    $('table.list tbody tr').hover(function(){
    $(this).children('td').css('background-color', '#f2f2f2');
    },function(){
    $(this).children('td').css('background-color', '#fff');
    });
    });

    // First add class for pre-checked entries
    $(".list input[type=checkbox]:checked”).each(function() {
    $(this).closest(“tr”).addClass(“selected”);
    });

    // Toggle when clicked
    $(“.list input[type=checkbox]“).live(“change”, function() {
    $(this).closest(“tr”).toggleClass(“selected”);
    });

    ]]>