Как сделать разные цвета блоков в категории

Тема в разделе "Дизайн, оформление и шаблоны", создана пользователем Vladlezhnev, 5 дек 2015.

  1. Vladlezhnev

    Vladlezhnev Новичок

    Сообщения:
    15
    Симпатии:
    0
    Здравствуйте! Подскажите как сделать разные цвет блоков в категории?
    В файле header.tpl строчка выглядит вот так:
    <?php if ($categories) { echo $categories; } ?>
    Другим блокам сделал класс с цветом и прописал в CSS файле, а с категориями не как разобраться не могу.
    Азы html и css знаю а вот с php проблемы.
     

    Вложения:

  2. Romans

    Romans Administrator Команда форума

    Сообщения:
    1.434
    Симпатии:
    780
    Вариантов много, например
    CSS - использовать псевдокласс last-child и first-child или :nth-child

    PHP - добавить класс для каждой категории на основе id, и к данному классу применять правила. Но это более сложный вариант т.к вижу сразу что решение у вас неправильное и html как мне кажется формируется в модели. Да да.... так издеваются над опенкартом горе разработчики типа templatemonstr, pav teme, themelux итд.. Решить конечно можно, но вам в данном случаи лучше через CSS
     
  3. Vladlezhnev

    Vladlezhnev Новичок

    Сообщения:
    15
    Симпатии:
    0
    Благодарю! Попробую
    Благодарю! попробую
     
  4. Vladlezhnev

    Vladlezhnev Новичок

    Сообщения:
    15
    Симпатии:
    0
    не выходит.

    не так что то сделал?
    В файле header.tpl :
    <p class="pink"><?php if ($categories) { echo $categories; } ?> </p>

    В файле css:
    .pink :last-child {background-color:#e41e5c}
     
  5. Vlad

    Vlad Эксперт

    Сообщения:
    4.129
    Симпатии:
    999
    без адреса сайта помочь не реально!
     
  6. Vladlezhnev

    Vladlezhnev Новичок

    Сообщения:
    15
    Симпатии:
    0
    Адрес сайта к сожалению не получится дать, он у меня на локальном сервере
    может фрагмент кода поможет?
     
  7. optimlab

    optimlab Продвинутый пользователь

    Сообщения:
    922
    Симпатии:
    240
    Да у вас и без кода видно что абзац один, а вы ему присваиваете Псевдокласс для потока.
     
  8. Vladlezhnev

    Vladlezhnev Новичок

    Сообщения:
    15
    Симпатии:
    0
    Сможете подсказать как решить эту задачу?
     
  9. optimlab

    optimlab Продвинутый пользователь

    Сообщения:
    922
    Симпатии:
    240
    Ну я предполагаю что у вас повторяются li, тогда это будет потоком относительно ul. Значит для ul>li ставим псевдоклассы..
     
  10. Vladlezhnev

    Vladlezhnev Новичок

    Сообщения:
    15
    Симпатии:
    0
    В целом меню да используются ul > li, но строка отвечающая за категории, в которой две категории, прописаны одной строчкой.
    <div>
    <ul>
    <!-- главная -->
    <li class="yellow" class="first"><a href="<?php echo $home; ?>"><i class="fa fa-home"></i><span class="hidden-sm"><?php echo $text_home; ?></span></a></li>
    </ul>
    <!-- Категории -->
    <p class="pink"><?php if ($categories) { echo $categories; } ?> </p>
    <ul>
    <!-- Личный кабинет -->
    <li class="green" class="dropdown"><a href="<?php echo $account; ?>" title="<?php echo $text_account; ?>" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> <span class="hidden-sm"><?php echo $text_account; ?></span> <span class="caret"></span></a>
    <ul class="dropdown-menu dropdown-menu-left">
    <?php if ($logged) { ?>
    <li><a href="<?php echo $account; ?>"><?php echo $text_account; ?></a></li>
    <li><a href="<?php echo $order; ?>"><?php echo $text_order; ?></a></li>
    <li><a href="<?php echo $transaction; ?>"><?php echo $text_transaction; ?></a></li>
    <li><a href="<?php echo $download; ?>"><?php echo $text_download; ?></a></li>
    <li><a href="<?php echo $logout; ?>"><?php echo $text_logout; ?></a></li>
    <?php } else { ?>
    <li><a href="<?php echo $register; ?>"><?php echo $text_register; ?></a></li>
    <li><a href="<?php echo $login; ?>"><?php echo $text_login; ?></a></li>
    <?php } ?>
    </ul>
    </li>
    </ul>
    <!-- корзина -->
    <ul>
    <li class="red"> <a href="<?php echo $shopping_cart; ?>" title="<?php echo $text_shopping_cart; ?>"><i class="fa fa-shopping-cart"></i> <span class="hidden-sm"><?php echo $text_shopping_cart; ?></span></a></li>
    </ul>
    <div class="clear"></div>
    </div>

    вот, как то так
     
  11. optimlab

    optimlab Продвинутый пользователь

    Сообщения:
    922
    Симпатии:
    240
    Это не нужно. Покажите что на выходе получается, и оформите свой пост в "код".
     
  12. Vladlezhnev

    Vladlezhnev Новичок

    Сообщения:
    15
    Симпатии:
    0
    прошу прощения не совсем понял, как сделать?
     
  13. optimlab

    optimlab Продвинутый пользователь

    Сообщения:
    922
    Симпатии:
    240
  14. Vladlezhnev

    Vladlezhnev Новичок

    Сообщения:
    15
    Симпатии:
    0
    Код:
                    <p class="pink"></p><ul class="menu">
    <li>
    <a href="http://localhost/test5/index.php?route=product/category&path=33" class="sf-with-ul">ОБУВЬ ДЛЯ МАЛЬЧИКОВ</a>
    <ul style="display: none;">
    <li>
    <a href="http://localhost/test5/index.php?route=product/category&path=20"><i class="fa fa-chevron-right"></i>Зимняя обувь</a>
    </li>
    <li>
    <a href="http://localhost/test5/index.php?route=product/category&path=18"><i class="fa fa-chevron-right"></i>Демисезонная обувь</a>
    </li>
    <li>
    <a href="http://localhost/test5/index.php?route=product/category&path=34"><i class="fa fa-chevron-right"></i>Летняя обувь</a>
    </li>
    <li>
    <a href="http://localhost/test5/index.php?route=product/category&path=28"><i class="fa fa-chevron-right"></i>Обувь для спорта</a>
    </li>
    
    </ul>
    
    </li>
    <li>
    <a href="http://localhost/test5/index.php?route=product/category&path=25" class="sf-with-ul">ОБУВЬ ДЛЯ ДЕВОЧЕК</a>
    <ul style="display: none;">
    <li>
    <a href="http://localhost/test5/index.php?route=product/category&path=32"><i class="fa fa-chevron-right"></i>Зимняя</a>
    </li>
    <li>
    <a href="http://localhost/test5/index.php?route=product/category&path=31"><i class="fa fa-chevron-right"></i>Демисезонная обувь </a>
    </li>
    <li>
    <a href="http://localhost/test5/index.php?route=product/category&path=29"><i class="fa fa-chevron-right"></i>Летняя обувь</a>
    </li>
    <li>
    <a href="http://localhost/test5/index.php?route=product/category&path=30"><i class="fa fa-chevron-right"></i>Обувь для спорта</a>
    </li>
    
    </ul>
    
    </li>
    
    </ul>
    Вот так выглядит
     
  15. optimlab

    optimlab Продвинутый пользователь

    Сообщения:
    922
    Симпатии:
    240
    Ну вот и раскрашивайте это меню. У списка даже класс есть .menu и у ссылок категорий тоже свой класс..
    Даже шаблон вообще лезть не надо, все уже готово. Добавляйте в файл стилей новое условие с псевдокласом..
     
    Vladlezhnev нравится это.
  16. Vladlezhnev

    Vladlezhnev Новичок

    Сообщения:
    15
    Симпатии:
    0
    Спасибо огромное!
     
  17. Vladlezhnev

    Vladlezhnev Новичок

    Сообщения:
    15
    Симпатии:
    0
    Вопрос еще есть. В этой теме создать или лучше в другой?
    в двух словах, меню растянулось на весь экран, да так что появилась полоса прокрутки в низу экрана.
     

    Вложения:

    • скрин.png
      скрин.png
      Размер файла:
      603,5 КБ
      Просмотров:
      14
  18. optimlab

    optimlab Продвинутый пользователь

    Сообщения:
    922
    Симпатии:
    240
    Один вопрос - одна тема.

    Такое чаще всего бывает из-за того что один блок 100% + маргин какой нить... Или где-то что-то не закрыли...
    Инспектором смотрите, что у вас там развалилось...