Css не обновляется, js добавляется в голову или IdoSell Shop - PullRequest
Новая
       35

Css не обновляется, js добавляется в голову или IdoSell Shop

0 голосов
/ 31 марта 2020

Мне нужно поменять некоторые стили интернет-магазина от IdoSell Shop cms. Мне нужно сделать это, написав файл пользовательского стиля, который будет объединен с кодом шаблона CSS. Эта cms также использует Less, а используемый шаблон написан на Less, но я решил использовать CSS.

. Я хочу изменить некоторые стили через консоль в браузере, и я делаю это так:

Это мой обычай css: 

.slick-prev, .slick-next {
    display: none;
}

#main_cms2 {
    margin: 0;
}

strong.price {
    color: #e35c5c;
}

@media screen and (max-width:757px)
{
    #main_cms
    {
        display: none;
    }

    #main_hotspot_zone1 h2 {
        padding-top: 1rem;
    }

    #main_hotspot_zone1 h2 .headline {
        padding: 10px 0 0 0;
    }
}

@media screen and (max-width:375px)
{

    #main_hotspot_zone1 h2 .headline {
        margin-bottom: -25px;
    }
}

@media screen and (max-width:630px)
{
    .footer_banner {
        width: 49.5%;
    }

    .footer_banners {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
}

Но это не работает. Единственное, что работает, это: 

strong.price {
    color: #e35c5c;
}

Поэтому я попытался обновить стили через консоль, чтобы посмотреть, может ли это работать. Я сделал следующее: 

var css = `.slick-prev, .slick-next {
    display: none;
}

#main_cms2 {
    margin: 0;
}

strong.price {
    color: #e35c5c;
}

@media screen and (max-width:757px)
{
    #main_cms
    {
        display: none;
    }

    #main_hotspot_zone1 h2 {
        padding-top: 1rem;
    }

    #main_hotspot_zone1 h2 .headline {
        padding: 10px 0 0 0;
    }
}

@media screen and (max-width:375px)
{

    #main_hotspot_zone1 h2 .headline {
        margin-bottom: -25px;
    }
}

@media screen and (max-width:630px)
{
    .footer_banner {
        width: 49.5%;
    }

    .footer_banners {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
}`;

var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');

head.appendChild(style);

style.type = 'text/css';
if (style.styleSheet){
  // This is required for IE8 and below.
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

Он создает тег <style>...</style> в заголовке, и этот тег содержит мой css, который я указал выше. Но это не работает. Единственное, что работает, это: 

strong.price {
    color: #e35c5c;
}

Я действительно понятия не имею, что не так.

1 Ответ

1 голос
/ 31 марта 2020

Это не лучшая практика, и я уверен, что люди на этом сайте скажут вам, но протестируйте ее с свойством! Важный после ваших занятий, это скажет вам, если вы можете изменить CSS напрямую, если вы не можете найти способ изменить текущие свойства программного обеспечения напрямую, что я бы рекомендовал сделать сначала

...