0 Пользователей и 1 Гость просматривают эту тему.
  • 15 Ответов
  • 331 Просмотров
*

stoorm89

  • Новичок
  • 24
  • 0 / 0
Здравствуйте уважаемые форумчане и Гуру  ;)

Снова вынужден обратиться с вопросом к вам, сам не могу дойти до нужного результата.

Имеется каталог с запчастями:

https://tb-2.club/index.php/info-auto/catalog-repair

Хочу именно этой таблице дать полосатость, т.е. строчка белая, строчкая серая, так гораздо приятнее просматривать имхо.

Перечитал кучу статей здесь и на просторах интернета, но видимо надо ткнуть носом куда нужно добавить стиль.

Нашел такую статью:
http://jdevelop.info/articles/html-css-js/330-polosatost-tablits-i-spiskov
В ней говорится следующие:

Третий способ это использовать js код.

Для таблиц с классом table для нечетных строк задается класс odd:

jQuery(function(){
  $(".table tr:nth-child(odd)").addClass('odd'); //нечётные строки таблицы
});
Для списков, размещенных в контейнере content-block:

jQuery(function(){
  $(".content-block li:nth-child(odd)").addClass('odd'); //нечетные эл-ты списка
});
Для варианта на JQuery добавляем такой CSS код:

.table td {background:#fff; border-top:1px solid #dddddd;}
.table .odd {background:#f9f9f9;}
 
.content-block ul li {background:#fff; border-top:1px solid #dddddd; padding:4px 4px;}
.content-block ul li.odd {background:#f9f9f9;}

Куда все это делать вставлять и главное что бы отображалось все только на одной таблице?

Огромное спасибо заранее  *DRINK*
*

NewUsers

  • Завсегдатай
  • 1609
  • 137 / 0
Да не надо так заморачиться!
Код: css
table tbody > tr:nth-child(odd) > td {background-color: beige;}
Псевдокласс :nth-child
Занимаюсь создание расширений только для Joomla 3.x.x | Доработка и настройка сайтов. Работаю по факту (без всяких предоплат). Оплата только на Яндекс.Деньги. Помогу с переездом на PHP 7.x и исправлю ошибки PHP
*

stoorm89

  • Новичок
  • 24
  • 0 / 0
Да не надо так заморачиться!
Код: css
table tbody > tr:nth-child(odd) > td {background-color: beige;}
Псевдокласс :nth-child
Cпасибо за новодку, а можно для одаренных куда это все вставлять? В редакторе?
*

NewUsers

  • Завсегдатай
  • 1609
  • 137 / 0
Cпасибо за новодку, а можно для одаренных куда это все вставлять? В редакторе?
Ну допустим добавь в файл /templates/lt_techshop/css/template.css в самый низ
Занимаюсь создание расширений только для Joomla 3.x.x | Доработка и настройка сайтов. Работаю по факту (без всяких предоплат). Оплата только на Яндекс.Деньги. Помогу с переездом на PHP 7.x и исправлю ошибки PHP
*

stoorm89

  • Новичок
  • 24
  • 0 / 0
Ну допустим добавь в файл /templates/lt_techshop/css/template.css в самый низ

 *ОХ-Х-Х*

Правильно ли я понимаю, мне менять по Вашему примеру ничего не надо, просто добавляю текст в конце :
" table tbody > tr:nth-child(odd) > td {background-color: beige;} "



Такой то же вариант по учебнику пробовал, эффекта нет.
<style>
 td:nth-child (odd) {
background-color: #C9E4F6;/* фон нечетных столбцов */
}

  td:nth-child (even) {

    background-color: #B4DAF2;/* фон четных столбцов */

  }

  tr:hover td{

    background: #B4FFF2;/* фон строки при наведении */

  }

</style>


*

NewUsers

  • Завсегдатай
  • 1609
  • 137 / 0
Псевдокласс :nth-child применяется к <tr>.
background-color к <td>
Занимаюсь создание расширений только для Joomla 3.x.x | Доработка и настройка сайтов. Работаю по факту (без всяких предоплат). Оплата только на Яндекс.Деньги. Помогу с переездом на PHP 7.x и исправлю ошибки PHP
*

stoorm89

  • Новичок
  • 24
  • 0 / 0
Псевдокласс :nth-child применяется к <tr>.
background-color к <td>
Често говоря ничего так и не вышло, может быть еще какие то варианты будут?
*

NewUsers

  • Завсегдатай
  • 1609
  • 137 / 0
Често говоря ничего так и не вышло, может быть еще какие то варианты будут?
А же написал готовое решение!
Занимаюсь создание расширений только для Joomla 3.x.x | Доработка и настройка сайтов. Работаю по факту (без всяких предоплат). Оплата только на Яндекс.Деньги. Помогу с переездом на PHP 7.x и исправлю ошибки PHP
*

stoorm89

  • Новичок
  • 24
  • 0 / 0
Спасибо Вам добрый человек, видимо я что то делаю не так, иду учить мат часть, добавляю как Вы и писали ранее в /templates/lt_techshop/css/template.css[/size]  в самый нижнюю часть код, а результата нет.


*

NewUsers

  • Завсегдатай
  • 1609
  • 137 / 0
Спасибо Вам добрый человек, видимо я что то делаю не так, иду учить мат часть, добавляю как Вы и писали ранее в /templates/lt_techshop/css/template.css[/size]  в самый нижнюю часть код, а результата нет.



Ни когда еще такого чуда не видел....
Js код в файле стилей? Это как надо додуматься до этого...
Занимаюсь создание расширений только для Joomla 3.x.x | Доработка и настройка сайтов. Работаю по факту (без всяких предоплат). Оплата только на Яндекс.Деньги. Помогу с переездом на PHP 7.x и исправлю ошибки PHP
*

stoorm89

  • Новичок
  • 24
  • 0 / 0
Ни когда еще такого чуда не видел....
Js код в файле стилей? Это как надо додуматься до этого...
!

От уровня знаний можно много чего натворить , поэтому прошу помощи, а не критики...
*

stoorm89

  • Новичок
  • 24
  • 0 / 0
table tr:nth-child(odd) td{
  background:#dddddd;color:#1f1f1f;
}
table tr:nth-child(even) td{
  background:#fff;color:#1f1f1f;
}

Вот этот код вставляем как и писал @NewUsers в конце /templates/lt_techshop/css/template.css и получаем желанный результат.

Спасибо за помощь  :D
*

stoorm89

  • Новичок
  • 24
  • 0 / 0
Рано я обрадовался  ;D а как определенной странице дать этот стиль? А то все таблицы на сайте покрасились *suicide*
*

Ragivort

  • Завсегдатай
  • 1134
  • 55 / 2
  • Такая Life
Вы таблице добавьте класс
Например
<table class="stripes">

И уже в файле стилей, который подключаются к Вашему шаблону прописывайте стиль для таблицы

Код
table.stripes   tr:nth-child(odd) td {
  background:#dddddd;
  color:#1f1f1f;
}

table.stripes tr:nth-child(even) td{
  background:#fff;color:#1f1f1f;
}

Это прописывать лучше в файле .css, а не прям в HTML
Дозволь мне свершить то добро, которое я способен свершить, теперь, ибо я могу более не вернуться сюда.
*

denism300

  • Захожу иногда
  • 175
  • 5 / 0
3-я Joomla, вроде как, поддерживает Bootstrap 2.
достаточно просто таблице добавить класс
Код
table table-striped
*

stoorm89

  • Новичок
  • 24
  • 0 / 0
Вы таблице добавьте класс
Например
<table class="stripes">

И уже в файле стилей, который подключаются к Вашему шаблону прописывайте стиль для таблицы

Код
table.stripes   tr:nth-child(odd) td {
  background:#dddddd;
  color:#1f1f1f;
}

table.stripes tr:nth-child(even) td{
  background:#fff;color:#1f1f1f;
}

Это прописывать лучше в файле .css, а не прям в HTML
Вот спасибо огромное, научился классами пользоваться  *DRINK*
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться