Jump to content

Recommended Posts

Доброго времени суток!

Уважаемые форумчане, столкнулся с такой проблемой. Для своей темы шаблона магазина сделал выпадающее вертикальное меню. В модулях /Текстовый блок - HTML/ написал код html(вертикальное меню), с подключением стилей. Но к сожалению, данные стили работают только в Firefox, но почему-то в Google Chrome данные стили не работают и вовсе. Подскажите пожалуйста в чем проблема и как можно ее решить.

Опенкарт Version 2.3.0.2 (trs-2.3.0.2)

 

Заранее благодарен за ответы!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

image.png.a75c38b13ea34077f613cdca4d517df4.pngЕсть такой модуль в текстовом блоке, в котором прописан код 

 

<ul class="menu_left" style="list-style: none;">
    <li class="menu_left-item" style="margin-bottom:1rem;"><a href="http://reflex-studio.ru/новинки">НОВИНКИ</a></li>
    <li class="menu_left-item">ЖЕНСКОЕ</li><li class="menu_left-item">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;<a href="http://reflex-studio.ru/топы" style="background-color: rgb(255, 255, 255);">Топы</a></li><li class="menu_left-item">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://reflex-studio.ru/футболки" style="background-color: rgb(255, 255, 255);">Футболки</a></li><li class="menu_left-item">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://reflex-studio.ru/Лонгсливы_водолазки" style="background-color: rgb(255, 255, 255);">Лонгсливы, водолазки</a><ul class="menu_left" style="list-style: none;">
            <li class="menu_left-item"><a href="http://reflex-studio.ru/лосины_бриджи">Лосины, Бриджи</a></li>
            <li class="menu_left-item"><a href="http://reflex-studio.ru/толстовки_худи">Толстовки, худи</a></li>
            <li class="menu_left-item"><a href="http://reflex-studio.ru/брюки_шорты">Брюки, Шорты</a></li>
            <li class="menu_left-item"><a href="http://reflex-studio.ru/костюмы-женские">Костюмы</a></li> 
            <li class="menu_left-item"><a href="http://reflex-studio.ru/платья">Платья</a></li> 
            <li class="menu_left-item"><a href="http://reflex-studio.ru/туники-домашние">Туники домашние</a></li>
            <li class="menu_left-item"><a href="http://reflex-studio.ru/платья-домашние">Платья домашние</a></li>
            <li class="menu_left-item"><a href="http://reflex-studio.ru/костюмы-домашние">Костюмы домашние</a></li>
            <li class="menu_left-item">ДЛЯ КОРМЯЩИХ МАМ
                <ul class="menu_left" style="list-style: none;">
                    <li class="menu_left-item"><a href="http://reflex-studio.ru/топы_для_кормящих">Топы</a></li>
                    <li class="menu_left-item"><a href="http://reflex-studio.ru/футболки_для_кормящих">Футболки</a></li>
                    <li class="menu_left-item"><a href="http://reflex-studio.ru/Лонгсливы_водолазки_для_кормящих">Лонгсливы, водолазки</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li class="menu_left-item">МУЖСКОЕ
        <ul class="menu_left" style="list-style: none;">
            <li class="menu_left-item"><a href="http://reflex-studio.ru/футболки-мужские">Футболки</a></li>
            <li class="menu_left-item"><a href="http://reflex-studio.ru/толстовки-мужские">Толстовки, худи</a></li>
            <li class="menu_left-item"><a href="http://reflex-studio.ru/брюки-мужские">Брюки, шорты</a></li>
            <li class="menu_left-item"><a href="http://reflex-studio.ru/костюмы-мужские">Костюмы</a></li>
        </ul>
    </li>
    <li class="menu_left-item">ДЕТСКОЕ
        <ul class="menu_left" style="list-style: none;">
            <li class="menu_left-item"><a href="http://reflex-studio.ru/футболки-детские">Футболки</a></li>
            <li class="menu_left-item"><a href="http://reflex-studio.ru/толстовки-детские">Толстовки, худи</a></li>
            <li class="menu_left-item"><a href="http://reflex-studio.ru/брюки-детские">Брюки, шорты</a></li>
            <li class="menu_left-item"><a href="http://reflex-studio.ru/костюмы-детские">Костюмы</a></li>
            <li class="menu_left-item"><a href="http://reflex-studio.ru/платья-детские">Платья</a></li>
        </ul>
    </li>
    <li class="menu_left-item"><a href="http://reflex-studio.ru/распродажа">РАСПРОДАЖА</a></li>
    <li class="menu_left-item"><a href="http://reflex-studio.ru/пряжа_трикотажная">ПРЯЖА ТРИКОТАЖНАЯ</a></li>
</ul>    


////////////////////////////////////////////////////////////////

 

Данный код не совсем меня устраивает. Написал другой:

 

<div class="navigation">
  <ul>
    <li><a href="http://reflex-studio.ru/новинки">Новинки</a></li>
    <li class="has-sub"> <a href="#">Женское</a>
      <ul>
        <li><a href="http://reflex-studio.ru/топы">Топы</a></li>
        <li><a href="http://reflex-studio.ru/футболки">Футболки</a></li>
        <li><a href="http://reflex-studio.ru/Лонгсливы_водолазки">Лонгсливы / водолазки</a>
        <li><a href="http://reflex-studio.ru/лосины_бриджи">Лосины / Бриджи</a></li>
        <li><a href="http://reflex-studio.ru/толстовки_худи">Толстовки / худи</a></li>
        <li><a href="http://reflex-studio.ru/брюки_шорты">Брюки / Шорты</a></li>
        <li><a href="http://reflex-studio.ru/костюмы-женские">Костюмы</a></li> 
        <li><a href="http://reflex-studio.ru/платья">Платья</a></li> 
        <li><a href="http://reflex-studio.ru/туники-домашние">Туники домашние</a></li>
        <li><a href="http://reflex-studio.ru/платья-домашние">Платья домашние</a></li>
        <li><a href="http://reflex-studio.ru/костюмы-домашние">Костюмы домашние</a></li>
      </ul>
    </li>
    <li class="has-sub"> <a href="#">Для кормящих мам</a>
      <ul>
        <li><a href="http://reflex-studio.ru/топы_для_кормящих">Топы</a></li>
        <li><a href="http://reflex-studio.ru/футболки_для_кормящих">Футболки</a></li>
        <li><a href="http://reflex-studio.ru/Лонгсливы_водолазки_для_кормящих">Лонгсливы / водолазки</a></li>
      </ul>
    <li class="has-sub"> <a href="#">Мужское</a>
      <ul>
        <li><a href="http://reflex-studio.ru/футболки-мужские">Футболки</a></li>
        <li><a href="http://reflex-studio.ru/толстовки-мужские">Толстовки / худи</a></li>
        <li><a href="http://reflex-studio.ru/брюки-мужские">Брюки / шорты</a></li>
        <li><a href="http://reflex-studio.ru/костюмы-мужские">Костюмы</a></li>
      </ul>    
    </li>
    <li class="has-sub"> <a href="#">Детское</a>
      <ul>
        <li><a href="http://reflex-studio.ru/футболки-детские">Футболки</a></li>
        <li><a href="http://reflex-studio.ru/толстовки-детские">Толстовки / худи</a></li>
        <li><a href="http://reflex-studio.ru/брюки-детские">Брюки / шорты</a></li>
        <li><a href="http://reflex-studio.ru/костюмы-детские">Костюмы</a></li>
        <li><a href="http://reflex-studio.ru/платья-детские">Платья</a></li>
      </ul>    
    </li>
    <li><a href="http://reflex-studio.ru/распродажа">РАСПРОДАЖА</a></li>
    <li><a href="http://reflex-studio.ru/пряжа_трикотажная">ПРЯЖА ТРИКОТАЖНАЯ</a></li>
  </ul>
</div>

 

и прописал стили для него. 

Но к сожалению в Google Chrome они не работают.

Вот стили:

@charset "utf-8";
/* CSS Document */
@font-face {font-family: neuropol; src: url(/catalog/view/theme/reflex/stylesheet/neuropol.ttf); }
@import url "/catalog/view/theme/reflex/stylesheet/style1.css";

body {
    font-family: 'Open Sans', sans-serif;
}
.header {margin-top:3.1em;}
.navbar-fixed-top {
    background-color: white;
}
footer {
    font-size:.9em;
}
.blackline {
    background: #414141;
    height:.6em;
}
.card-outline-reflex {
    border-color: #F800FF !important;
    background-color: transparent;}

h1 {font-size:2em;}

a {color:#143546;}

.carousel-control {
    opacity: 0 !important;
}

.topmenu {box-shadow: 0 4px 4px rgba(0, 0, 0, 0.07);}
.main_menu a {
    text-decoration:none;
    color: #143546;
    letter-spacing: 1px;
    font-size: 0.7em;
}

#logo {font-family: neuropol;}
#logo a {
    text-decoration:none;
    color:#F800FF;
    font-size:3rem;
    letter-spacing:.1em;
    text-shadow: 0 1px 0 #ccc, 
                   0 2px 0 #c9c9c9,
                   0 3px 0 #bbb,
                   0 4px 0 #b9b9b9,
                   0 5px 0 #aaa,
                   0 6px 1px rgba(0,0,0,.1),
                   0 0 5px rgba(0,0,0,.1),
                   0 1px 3px rgba(0,0,0,.3),
                   0 3px 5px rgba(0,0,0,.2),
                   0 5px 10px rgba(0,0,0,.25),
                   0 10px 10px rgba(0,0,0,.2),
                   0 20px 20px rgba(0,0,0,.15);
}

.bg-faded {
    background-color: #f7f7f9;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.07);
}
.btn-info {
    background-color: #F800FF !important;
    border-color: #F800FF !important;
}
 .btn-link {
    color: #e91e63!important;
     text-shadow: 1px 1px 4px rgba(150, 150, 150, 0.60);
}
 .btn-link-header {
    font-size:.7em;
     color: black!important;
     text-shadow:none!important;
}
.form-control:focus {border-color: #F800FF !important;}

.menu {
    border:none !important;
    font-family: 'Open Sans', sans-serif;
    font-size:0.8em;
    letter-spacing: 1px;
}
.menu a:hover {
    text-decoration:none;
    color:#F800FF;
    text-shadow: 0 1px 0 #ccc;
}
.thumbnails {
    overflow: auto;
    clear: both;
    list-style: none;
    padding: 0;
    margin: 0;
}
.tab-content {
    background:#fff;
    padding:2em;
}
.price {
    font-size: 1em;
    font-weight: 700;
}

.card .list-group-item {border:none !important;}

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
    background-color: #F800FF !important;
    border-color: #F800FF !important;
}
.lead {
    font-size: 1.1rem !important;
}
.btn-success {
    background-color: #F800FF !important;
    border-color: #F800FF !important;
}

.card-block {
    padding: 0.1rem!important;
    font-size: .7rem;
}
.card-title {
    margin-bottom: .1rem!important;
}
.buy {
    font-size: 0.8em!important;
}
.btn-buy {
    padding: .2rem 1rem!important;
}
.card {
    border: none!important;
}
.img-thumbnail {
    border: none!important;
}

.color-line-two {
    height: .2em;
    background: linear-gradient(to right, #C877DB, #55CBD9, #70E1CF, #9ED178, #F4E47A, #D984B2, #7DC3DE, #CF98DE, #B6B6B6);
}
 .novinka_label {
    width: 72px;
    height: 30px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: 0 0;
}
.nav-link {
    padding: .8em 1em!important;
}
.categorymenu {
    font-family: 'Open Sans', sans-serif;
    font-size:0.8rem;
    text-transform:uppercase;
    letter-spacing: 1px;
}

.menu_left-item li {
    list-style: none!important;
    margin-top: .9em;
    margin-bottom: .9em;
    margin-left: -2em;
}
.menu_left {
    font-size: 1rem;    
}
#uslov p {
    line-height: 1.2rem!important;
    margin-bottom: .6rem;
}
/*vertical_menu*/

.navigation {
  padding: 0;
  margin: 0;
  border: 0;
  line-height: 1;
}

.navigation ul,
.navigation ul li,
.navigation ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation ul {
  position: relative;
  z-index: 500;
  float: left;
}

.navigation ul li {
  float: left;
  min-height: 0.05em;
  line-height: 1em;
  vertical-align: middle;
  position: relative;
}

.navigation ul li.hover,
.navigation ul li:hover {
  position: relative;
  z-index: 510;
  cursor: default;
}

.navigation ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: 520;
  width: 100%;
}

.navigation ul ul li { float: none; }

.navigation ul ul ul {
  top: 0;
  right: 0;
}

.navigation ul li:hover > ul { visibility: visible; }

.navigation ul ul {
  top: 0;
  left: 99%;
}

.navigation ul li { float: none; }

.navigation ul ul { margin-top: 0.05em; }

.navigation {
  width: 13em;
  background: #8474A1;
  font-family: 'roboto', Tahoma, Arial, sans-serif;
  zoom: 1;
}

.navigation:before {
  content: '';
  display: block;
}

.navigation:after {
  content: '';
  display: table;
  clear: both;
}

.navigation a {
  display: block;
  padding: 1em 1.3em;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: 3px 3px 3px #29062F;
  border-bottom: 1px solid #29062F;
}

.navigation > ul { width: 13em; }

.navigation ul ul { width: 13em; }

.navigation > ul > li > a {
  border-right: 0.3em solid #CCA8D8;
  color: #ffffff;
}

.navigation > ul > li > a:hover { color: #ffffff; }

.navigation > ul > li a:hover,
.navigation > ul > li:hover a { 
  background: #CCA8D8;
  transition: 0.5s all;
  padding-left: 5px;
 }

.navigation li { position: relative; }

.navigation ul li.has-sub > a:after {
  content: '+';
  position: absolute;
  right: 1em;
}

.navigation ul li.has-sub:hover > a:after {
  transform: rotate(135deg);
}

.navigation ul ul li.first {
  -webkit-border-radius: 0 3px 0 0;
  -moz-border-radius: 0 3px 0 0;
  border-radius: 0 3px 0 0;
}

.navigation ul ul li.last {
  -webkit-border-radius: 0 0 3px 0;
  -moz-border-radius: 0 0 3px 0;
  border-radius: 0 0 3px 0;
  border-bottom: 0;
}

.navigation ul ul {
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}

.navigation ul ul { border: 1px solid #CCA8D8; }

.navigation ul ul a { color: #ffffff; }

.navigation ul ul a:hover { 
  color: #ffffff; 
  transition:: 0.5s;
  
}

.navigation ul ul li { border-bottom: 1px solid #CCA8D8; }

.navigation ul ul li:hover > a {
  background: #08979D;
  color: #ffffff;
  padding-left: 10px;
  transition:: 0.5s;
}

.navigation.align-right > ul > li > a {
  border-left: 0.3em solid #CCA8D8;
  border-right: none;
}

.navigation.align-right { float: right; }

.navigation.align-right li { text-align: right; }

.navigation.align-right ul li.has-sub > a:before {
  content: '+';
  position: absolute;
  top: 50%;
  left: 15px;
  margin-top: -6px;
}

.navigation.align-right ul li.has-sub > a:after { content: none; }

.navigation.align-right ul ul {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: -100%;
  z-index: 598;
  width: 100%;
}

.navigation.align-right ul ul li.first {
  -webkit-border-radius: 3px 0 0 0;
  -moz-border-radius: 3px 0 0 0;
  border-radius: 3px 0 0 0;
}

.navigation.align-right ul ul li.last {
  -webkit-border-radius: 0 0 0 3px;
  -moz-border-radius: 0 0 0 3px;
  border-radius: 0 0 0 3px;
}

.navigation.align-right ul ul {
  -webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}

@media (max-width: 420px){
.navigation ul ul {
  top: 0;
  left: 45%;
}
}


@media (max-width: 270px) {
.navigation ul ul {
  top: 0;
  left: 18%;
}
}

@media (max-width: 575px){

    .fixed-top {position:relative!important;}
    .fixed-bottom {position:relative!important;}
    .header {margin-top: .1em;}
    .phonenumber {
        margin: 1em;
        font-size: 0.9rem;
    }
    #logo a {
        font-size: 2rem;
        font-family: neuropol;
    }
    p.table {
        font-size: 0.7rem!important;
    }
}
@media (min-width: 576px) and (max-width: 767px){

    .fixed-top {
        position:relative!important;
    }
    .header {margin-top: .1em;}
    .phonenumber {
        margin: 1em;
        font-size: 0.9rem;
    }
    .fixed-bottom {position:relative!important;}
    #logo a {
        font-size: 2.5rem;
        font-family: neuropol;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    body {
    margin-bottom: 3rem!important;
}
}

@media (min-width: 992px) and (max-width: 1139px) {
    body {
    margin-bottom: 3rem!important;
}
}

@media (min-width: 1140px) and (max-width: 1599px) {
    body {
    margin-bottom: 3rem!important;
}
}
@media (min-width: 1600px) {
    body {
    margin-bottom: 3rem!important;
}
}

 

И данные стили работают только в Firefox

 

image.png.4e450ed987bbcada6e5f3f7fb4d916a7.png

Share this post


Link to post
Share on other sites

В каком именно файле вы сохранили стили? как вы эти стили подключаете?

Share this post


Link to post
Share on other sites

стили сохранены в /catalog/view/theme/reflex(свой шаблон)/stylesheet/style.css

Как он подключается и где, к сожалению  не знаю. Я просто внес дополнительные стили в уже существующий подключенный файл .css

Share this post


Link to post
Share on other sites

в fitefox у вас кэш остался, не понятно куда вы подключили стили

Share this post


Link to post
Share on other sites

А в каком обычно файле идет подключение стилей? Кэш не остается в  Фаере, проверял уже несколько раз. Как отключаю дополненные стили и ставлю старый код HTML на место, работает по прежнему, а с новым кодом html и дополнеными стилями, не хочет работать. Хотя обычный html со стилями запускает менюшку в любом браузере. Я так думаю, что где-то проблема в теме шаблона. А понять не могу.( мало опыта.

Share this post


Link to post
Share on other sites

@AnGera , меню - вот это? http://prntscr.com/nl68us

Для этого меню у вас аж два правила есть в стилях - http://prntscr.com/nl698s

Внешнему виду со скриншота взяться неоткуда.

 

Разберитесь куда делись остальные css-правила. А то, что у вас что-то там в фаерфоксе отображалось - это кеш, как сказали выше.

Share this post


Link to post
Share on other sites

Может я не совсем правильно выразился. Есть своя тема в модуле, в котором есть подмодуль "меню левое", расположенного в Текстовом блоке HTML http://prntscr.com/nl6q1f.

В данном меню прописан "кривой" код, который хочу полностью поменять через команду "CODE VIEW". 

Для этого кода прописаны стили расположенные /catalog/view/theme/reflex(свой шаблон)/stylesheet/style.css

Меняю код http://prntscr.com/nl6rer (красивое меню) http://prntscr.com/nl6rnk

и в том же файле стилей /catalog/view/theme/reflex(свой шаблон)/stylesheet/style.css

 дополняю стили для своего кода HTML http://prntscr.com/nl6t7t (ну и так далее).

В итоге в Firefoxe все работает корректно, а вот в Хроме и в Эксплорере нихрена не работает.

 

А как возвращаю все как было. Все браузеры показывают старый "кривой" код со своими стилями  /catalog/view/theme/reflex(свой шаблон)/stylesheet/style.css

 

Так вот я и не понимаю, почему Хром и т.п. мой код не принимает с заданными стилями, а Фаер нормально работает.

Share this post


Link to post
Share on other sites

Есть еще одно. Поиск у меня в магазине идет через Яндекс, не на моем сайте ищет, а через яндекс. http://prntscr.com/nl75qm

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

 

Благодарен заранее!

Share this post


Link to post
Share on other sites

Кажеться нашел где идет подключение и тот кривой див. А также нашел где идет поиск через Яндекс.  Спасибо всем огромное за вашу помощь! Реально помогли. 

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.