Jump to content
Sign in to follow this  
Maks

[Поддержка] Подстветка зеброй строк таблиц в админке

Recommended Posts

Подстветка зеброй строк таблиц в админке


Подстветка зеброй строк таблиц в админке


При работе в админке часто открываю на изменение не ту строку. Достало конкретно, потому решил сделать строки зеброй.

Скриншот прилагается. Меняем /admin/view/stylesheet/stylesheet.css, если он у вас не менялся, иначе просто выдерните нужные строки

Сделано под OpCart 1.5.1.3

Заменить куски

Градиент шапки таблицы:

.list thead td {   background: -moz-linear-gradient(top, #FEFEFE, #D3D3D3); /* Firefox 3.6+ */   background: -ms-linear-gradient(top, #FEFEFE, #D3D3D3); /* IE 10.0+ */   background: -o-linear-gradient(top, #FEFEFE, #D3D3D3); /* Opera 11.10+ */   background: -webkit-linear-gradient(top, #FEFEFE, #D3D3D3); /* Chrome 10.0+, Safari 4.0+ */   padding: 0 5px;}

Собственно зебра в строках таблицы

после

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

Вставить

.list tbody tr:nth-child(even) {	background-color: #EFEFEF;}.list tbody tr:nth-child(odd) {	background-color: #FFFFFF;}

====================================

По рекомендации Sammy95 добавлена подсвечивание строки при наведении курсора.

.list tbody tr:hover {		background: moccasin !important;}


  • Добавил
  • Добавлено
    28.03.2012
  • Категория

 

  • +1 1

Share this post


Link to post
Share on other sites

Сделать градиенты более кроссплатформенными можно так: http://caniuse.com/c...s-gradients

.list thead td {
   background: -moz-linear-gradient(top, #FEFEFE, #D3D3D3); /* Firefox 3.6+ */
   background: -ms-linear-gradient(top, #FEFEFE, #D3D3D3); /* IE 10.0+ */
   background: -o-linear-gradient(top, #FEFEFE, #D3D3D3); /* Opera 11.10+ */
   background: -webkit-linear-gradient(top, #FEFEFE, #D3D3D3); /* Chrome 10.0+, Safari 4.0+ */
   padding: 0 5px;
}

Share this post


Link to post
Share on other sites

.list thead td {

background: -moz-linear-gradient(top, #FEFEFE, #D3D3D3); /* Firefox 3.6+ */

padding: 0px 5px;

}

Собственно зебра в строках таблицы

после

.list tbody td {

vertical-align: middle;

padding: 0px 5px;

}

Вставить

.list tbody tr:nth-child(even) {

background-color: #EFEFEF;

}

.list tbody tr:nth-child(odd) {

background-color: #FFFFFF;

Я бы еще добавил

.list tbody tr:hover {
color:#BBBBBB;
}

Share this post


Link to post
Share on other sites

Все отлично, спасибо.

Share this post


Link to post
Share on other sites

Сделать градиенты более кроссплатформенными можно так: http://caniuse.com/c...s-gradients

.list thead td {
   background: -moz-linear-gradient(top, #FEFEFE, #D3D3D3); /* Firefox 3.6+ */
   background: -ms-linear-gradient(top, #FEFEFE, #D3D3D3); /* IE 10.0+ */
   background: -o-linear-gradient(top, #FEFEFE, #D3D3D3); /* Opera 11.10+ */
   background: -webkit-linear-gradient(top, #FEFEFE, #D3D3D3); /* Chrome 10.0+, Safari 4.0+ */
   padding: 0 5px;
}

Да можно было, не делал т.к. работаю только под мозилой, но подправил файл чтобы никому обидно не было. :)

Я бы еще добавил

.list tbody tr:hover {
color:#BBBBBB;
}
Странно, но такое не работает

Share this post


Link to post
Share on other sites

Странно, но такое не работает

.list tbody tr:hover {
	background: moccasin !important;
}
  • +1 1

Share this post


Link to post
Share on other sites

А как такое прикрутить для 1.5.2.1?

Share this post


Link to post
Share on other sites

А как такое прикрутить для 1.5.2.1?

я думаю нужно посмотреть CSS скрипты и подставить нужные классы. Все решается однотипно. ИМХО

Share this post


Link to post
Share on other sites

Случайно нашел и поставил себе подсветку зеброй строк в таблице админки. Не заметил никто, что на OpCart 1.5.1.3 в Каталог/Опции - зебра не работает? А подсветка  строки под курсором - работает. Или это только у меня?

 

6272f132f39f.jpg

 

Это происходит наверное потому, что там каждаю строка заключена в <tbody>:

 

888f4f672578.jpg

 

Как подкрутить css, чтоб и тут работала зебра?

Edited by sadko

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.