Вход • Регистрация

Стрелки в выпадающем меню

  • 25 июня 2018 г. , редакция: 25 июня 2018 г.
  • Может кто-нибудь знает, как изменить цвет только той стрелки, которая слева? (скрин 2)
    Я так понимаю, надо что-то поменять в файле superfish.css, но так и не смог понять, что.
    Еще думал раскомментировать

    .sf-menu li:hover,
    .sf-menu li.sfHover {
    /* background: #0B3E73; */
    }

    Но тогда уже текст будет черный, и его тоже не могу понять, как изменить (скрин 1)

    Сайт: evrokomfort12.ru
    • 25 июня 2018 г.
    • .sf-arrows .sf-with-ul:after - вот такой стиль отвечает за стрелочку тут (скрин).
      В каком конкретно файле это искать - сказать не могу, т.к. у вас кеш на сайте включен.
      • 25 июня 2018 г.
      • У стрелок сверху, и тех, которые в выпадающем меню - разные стили.
        В этой строке и так темный цвет прописан(
        Код

        /* styling for right-facing arrows */
        .sf-arrows ul .sf-with-ul:after {
        margin-top: -5px;
        margin-right: -3px;
        border-color: transparent;
        border-left-color: #333333; /* edit this to suit design (no rgba in IE8) */
        border-left-color: rgb(51, 51, 51);
        }


        Прикладываю код файла superfish.css. Кеш отключил

        Код

        /*** ESSENTIAL STYLES ***/
        .sf-menu, .sf-menu * {
        margin: 0;
        padding: 0;
        list-style: none;
        }
        .sf-menu li {
        position: relative;
        }
        .sf-menu ul {
        position: absolute;
        display: none;
        top: 100%;
        left: 0;
        z-index: 99;
        }
        .sf-menu > li {
        float: left;
        }
        .sf-menu li:hover > ul,
        .sf-menu li.sfHover > ul {
        display: block;
        }

        .sf-menu a {
        display: block;
        position: relative;
        color: #333;
        }
        .sf-menu ul ul {
        top: 0;
        left: 100%;
        }


        /*** DEMO SKIN ***/
        .sf-menu {
        /*float: left;*/
        /*margin-bottom: 1em;*/
        }
        .sf-menu ul {
        box-shadow: 2px 2px 6px rgba(0,0,0,.2);
        min-width: 12em; /* allow long menu items to determine submenu width */
        *width: 12em; /* no auto sub width for IE7, see white-space comment below */
        }
        .sf-menu a {
        /*border-left: 1px solid #fff;*/
        /*border-top: 1px solid #dFeEFF;*/ /* fallback colour must use full shorthand */
        /*border-top: 1px solid rgba(255,255,255,.5);*/
        padding: .75em 1em;
        text-decoration: none;
        zoom: 1; /* IE7 */
        }
        .sf-menu a {
        }
        .sf-menu li {
        /*background: #BDD2FF;*/
        }
        .sf-menu ul li {
        background: #F5F5F5;
        }
        .sf-menu ul ul li {
        background: #F5F5F5;
        }
        .sf-menu li:hover,
        .sf-menu li.sfHover {
        /* background: #0B3E73; */
        /* only transition out, not in */
        }

        /*** arrows (for all except IE7) **/
        .sf-arrows .sf-with-ul {
        padding-right: 2.0em;
        *padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */
        }
        /* styling for both css and generated arrows */
        .sf-arrows .sf-with-ul:after {
        content: '';
        position: absolute;
        top: 50%;
        right: 1em;
        margin-top: -3px;
        height: 0;
        width: 0;
        /* order of following 3 rules important for fallbacks to work */
        border: 5px solid transparent;
        border-top-color: #ffffff;
        border-top-color: rgb(255, 255, 255);
        }
        .sf-arrows > li > .sf-with-ul:focus:after,
        .sf-arrows > li:hover > .sf-with-ul:after,
        .sf-arrows > .sfHover > .sf-with-ul:after {
        border-top-color: white; /* IE8 fallback colour */
        }
        /* styling for right-facing arrows */
        .sf-arrows ul .sf-with-ul:after {
        margin-top: -5px;
        margin-right: -3px;
        border-color: transparent;
        border-left-color: #333333; /* edit this to suit design (no rgba in IE8) */
        border-left-color: rgb(51, 51, 51);
        }
        .sf-arrows ul li > .sf-with-ul:focus:after {
        border-left-color: black;
        }
        .sf-arrows ul li:hover > .sf-with-ul:after {
        border-left-color: white;
        }
        .sf-arrows ul .sfHover > .sf-with-ul:after {
        border-left-color: black;
        }
  • 25 июня 2018 г.
  • Включите режим разработки, быстрее подскажут.
  • 25 июня 2018 г.
  • это стрелка при наведении на меню
    Код
    .sf-arrows ul li:hover > .sf-with-ul:after {
    border-left-color: aqua; - был белый, поменяла на голубой.
    }


    это стрелка простая (без наведения
    Код
    .sf-arrows ul .sf-with-ul:after {
    margin-top: -5px;
    margin-right: -3px;
    border-color: transparent;
    border-left-color: #333333;
    border-left-color: coral; - поменяла на коралловый
    }
    • 26 июня 2018 г. , редакция: 26 июня 2018 г.
    • Это я тоже нашел, но проблема то в другом, что после того, как я перехожу на следующий уровень, стрелка все еще голубая(или белая в моем случае), но на сером фоне, а должна быть, черная

      На скринах описал подробнее.

      В любом случае, спасибо за помощь.

      Заменить все на черные - не вариант, т.к. тогда при наведении не будет ее видно.
      Причем не понятно, сам фон (темно синий) возвращается в исходный цвет, после перехода на подкатегорию, а стрелка нет.
      • 26 июня 2018 г.
      • Ну вот по файлу стилей ищите свое меню.

        :hover - это цвет при наведении.
        :after - это просто стрелка.

        И меняйте методом научного тыка.

        По логике вещей та стрелка, которая у вас остается слева, должна иметь отдельный стиль. Если его там нет, то нужно в файлах поковырять и прописать, а потом уже к нему цеплять цвет.
        • 26 июня 2018 г.
        • Попробую еще раз, спасибо)
          Если не смогу сам, сколько у вас эта работа стоить будет (примерно)? Или надо создавать запрос на доработку и на форуме цены не обсуждаются?
          • 26 июня 2018 г.
          • В принципе там работы на шоколадку в среднем.
            Если что - пишите в личку, но прямо вот "вчера" сделать не обещаю.

Новости

  • 18 июня
  • В сборке большое обновление demo-шаблона, дополнительная защита от спама, улучшение YML-импорта и еще много важного и интересного.
  • 24 апреля
  • В новой сборке совершили революцию в структурировании кастомизированной информации в шаблонах, добавили авторегистрацию пользователей, усовершенствовали защиту от спама, актуализировали накопительную скидку, а также улучшили производительность и стабильность работы системы.
  • 12 января
  • После выхода сборки 7.1 мы выпустили уже три патча, в каждом из которых улучшаем административную часть сайта. Сборка DIAFAN.CMS 7.1.3 уже доступна к установке. 

Форум