Page 1 of 1

Howto: OpenCart admin panel table hover

Posted: Wed Mar 07, 2012 10:13 am
by imaginetech
Been bugging me for the longest time so thought I might quickly "fix" it and share:-

http://www.opencartblog.com/2012/03/how ... ble-hover/

Re: Howto: OpenCart admin panel table hover

Posted: Thu Mar 08, 2012 2:55 am
by wroughtec
Nice :)

Re: Howto: OpenCart admin panel table hover

Posted: Wed Apr 18, 2012 1:43 pm
by stellablue
Hi,

As an alternative solution to javascript for admin row hover highlighting, one can easily adjust the admin stylesheet.css. This file is located in <your admin folder>/view/stylesheet.css.

I am using OpenCart v1.5.2.1 for this example.

1. make a backup of the stylesheet.css file (always a good practice before changing, make sure you can put it back)
2. edit stylesheet.css in your editor of choice
3. scroll down to approx line 290 where .list { } style starts.
4. add the following styles

Code: Select all

.list tbody tr {
    background: #fff;
}
.list tbody tr:hover {
    background: #eee;
}
5. remove the background style from the .list tbody td { } style so it looks like this

Code: Select all

.list tbody td {
    vertical-align: middle;
    padding: 0px 5px;
}


Hopefully this helps with dashboard ease-of-use !

Re: Howto: OpenCart admin panel table hover

Posted: Wed Apr 18, 2012 4:38 pm
by OSWorX
Another solution could this be.

Assuming OC 1.5.2.x / standard admin stylesheet:

search for:

Code: Select all

.list tbody td {
and remove

Code: Select all

background: #FFFFFF;
search for:

Code: Select all

.latest tbody td {
and remove

Code: Select all

background: #FFF;
add this new:

Code: Select all

tr {
    background: #FFF;
}
tr:nth-child(odd) {
	background: #F9F9F9;
}
tr:hover {
    background: #FFFFEE;
}
save (backup before the stylesheet.css).

Now all rows are in different colors (each even is white, each odd es light grey).
Hovering the rows will highlighted in light yellow.

Colors can be adopted to every desired other color.
After it look like this (e.g. at modules and overview):
changed_admin_css_for_colored_rows_w_highlight.png

changed_admin_css_for_colored_rows_w_highlight.png (11.24 KiB) Viewed 2292 times

changed_admin_css_for_colored_rows_w_highlight.png

changed_admin_css_for_colored_rows_w_highlight.png (11.24 KiB) Viewed 2292 times