Мануал Оформление Хлебных Крошек

Тема в разделе "Opencart", создана пользователем exBYalex, 17 май 2021.

  1. exBYalex

    exBYalex Новичок Зарегистрирован

    Регистрация
    17 май 2021
    Сообщения
    2
    Симпатии
    1
    Баллы
    1
    Пол
    Мужской
    Интересы:
    Opencart
    Возможно тема старая и не актуальная, но все же может кому-нибудь будет интересна.
    Добрый день уважаемые форумчане! Предлагаю вашему вниманию красивое оформление хлебных крошек ( это цепочка состоящее из ссылок от главной страницы сайта до текущей страницы) для вашего сайта. Подходит для любой версии OpenCart.

    1. Добавить в файл ваших стилей:
    Код:
    /*Новые хлебные крошки*/
    ul.breadcrumb-new {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        padding: 0;
    }
    ul.breadcrumb-new li {
        margin: 2px 0;
    }
    ul.breadcrumb-new li a {
        color: #FFF;
        display: block;
        background: #fe7d0b;
        text-decoration: none;
        position: relative;
        height: 30px;
        line-height: 30px;
        padding: 0 10px 0 5px;
        text-align: center;
        margin-right: 23px;
        font-size: 13px;
        font-family: Verdana, sans-serif; 
        transition: all 0.3s;
    }
    ul.breadcrumb-new li:nth-child(even) a {
        background-color: #fe7d0b;
    }
    ul.breadcrumb-new li:nth-child(even) a:before {
        border-color: #fe7d0b;
        border-left-color: transparent;
    }
    ul.breadcrumb-new li:nth-child(even) a:after {
        border-left-color: #fe7d0b;
    }
    ul.breadcrumb-new li:first-child a {
        padding-left: 15px;
        border-radius: 4px 0 0 4px;
    }
    ul.breadcrumb-new li:first-child a:before {
        border: none;
    }
    ul.breadcrumb-new li:last-child a {
        padding-right: 15px;
        border-radius: 0 4px 4px 0;
    }
    ul.breadcrumb-new li:last-child a:after {
        border: none;
    }
    ul.breadcrumb-new li a:before,
    ul.breadcrumb-new li a:after {
        content: "";
        position: absolute;
        top: 0;
        border: 0 solid #fe7d0b;
        border-width: 15px 10px;
        width: 0;
        height: 0;
        transition: all 0.3s; 
    }
    ul.breadcrumb-new li a:before {
        left: -20px;
        border-left-color: transparent;
    }
    ul.breadcrumb-new li a:after {
        left: 100%;
        border-color: transparent;
        border-left-color: #fe7d0b;
    }
    ul.breadcrumb-new li a:hover {
        background-color: #fd8f2d;
        color: #fff;
    }
    ul.breadcrumb-new li a:hover:before {
        border-color: #fd8f2d;
        border-left-color: transparent;
    }
    ul.breadcrumb-new li a:hover:after {
        border-left-color: #fd8f2d;
    }
    /*Конец новые хлебные крошки*/

    2. Во всех файлах шаблона .tpl заменить
    Код:
    <ul class="breadcrumb
    на
    Код:
    <ul class="breadcrumb-new


    Готово.

    Пример как выглядит можно увидеть ниже:

    Screenshot_1.png
     
    recon10 нравится это.
  2. recon10

    recon10 https://madehtml5.github.io/ Команда форума

    Регистрация
    15 янв 2018
    Сообщения
    155
    Симпатии
    48
    Баллы
    51
    Род занятий
    Верстка/програмирование
    Сайт
    Интересы:
    Opencart
    Зачем новый класс предназначать если достаточно использовать существующий?)) Плюс внешний вид это вкусовщина...
     
    exBYalex нравится это.
  3. exBYalex

    exBYalex Новичок Зарегистрирован

    Регистрация
    17 май 2021
    Сообщения
    2
    Симпатии
    1
    Баллы
    1
    Пол
    Мужской
    Интересы:
    Opencart
    Новый класс для того чтобы не было конфликта старых стилей с новыми и в любой момент можно было поменять класс обратно без редактирование стилей.
     
  4. recon10

    recon10 https://madehtml5.github.io/ Команда форума

    Регистрация
    15 янв 2018
    Сообщения
    155
    Симпатии
    48
    Баллы
    51
    Род занятий
    Верстка/програмирование
    Сайт
    Интересы:
    Opencart
    Ну "логично" проще переписать пачку шаблонов на новый класс чем заменить часть кода в css без конфликта в случае установки чего-то с крошками, например блога, галереи...
     
    exBYalex нравится это.

Поделиться этой страницей

Share
Загрузка...