Блок theme.user_css

Для внесения пользовательский css стилей в темах семейства Super (темы Super, Sexy, Prestige и других последующих темах) предусмотрен блок приложения Сайт theme.user_css

Префикс блока

В зависимости от используемой темы префикс theme нужно заменить на id темы.
Т.е. название блока для каждой темы будет своё:

  • super.user_css для темы Super
  • sexy.user_css для темы Sexy
  • prestige.user_css для темы Prestige
  • special.user_css для темы Special
  • handmade.user_css для темы Hand Made
  • speed.user_css для темы Speed
  • s_classic.user_css для темы Speed Classic

Создание блока

Для начала ознакомьтесь с заметкой Для чего нужны блоки и где их создавать.
Чтобы создать блок, откройте приложение Сайт –> блоки. 
Нажмите на «плюсик» под списком блоков и создайте блок с id вашей темы.

В поле id впишите id вашей темы, точка user_css.
Например super.user_css.

В большом поле впишите {strip} и {/strip}.
Между «стрипами» вы можете добавлять свой css код.

Ниже, в комментариях я буду писать различные css помогалочки для ваших сайтов и фиксы для плагинов.

Сергеев Владимир
Разработчик
Последнее обновление: 15 октября 2022
Эта статья была полезна?ДаНет

13 комментариев

  • Сергеев Владимир
    Разработчик
    21 октября 2019 12:39

    Улучшенное отображение Jivo чата.

    {* START Jivosite *}
    body #jvlabelWrap {
      bottom: 60px !important;
      z-index: 990;
      right: 10px;
    }
    
    body .__jivoMobileButton {
      bottom: 50px;
      z-index: 990 !important;
      right: auto;
      left: 10px;
      width:65px;
    }
    
    @media (min-width: 768px) {
        body #jcont {
          right: 20px!important;
        }
        
        body #jcont_content_wrapper {
          bottom: 60px !important;
          position: relative;
          right: 10px;
        }
    }
    body .totop-wrapper {
      display:none;
    }
    {* END Jivosite *}

  • Сергеев Владимир
    Разработчик
    21 октября 2019 12:43

    Увеличение заголовков фильтров.

    .filter-param .uk-h5 .uk-text-small {
        font-size: 1rem;
    }

    Где 1rem – это размер базовой величины шрифта, обычно 14px.
    Промежуточные значения нужно указывать через точку.
    Например:

    font-size: 1.2rem;

  • Тюкин Владимир
    15 января 2020 22:41

    Владимир, подскажите пожалуйста, в каком файле подключается блок super.user_css? 

    Мне необходимо сделать несколько таких блоков, для каждого поселения свой, вот и думаю переназвать их для каждого поселения.

    • Сергеев Владимир
      Разработчик
      16 января 2020 15:59

      Во всех темах семейства Super данный блок подключается в файле head.css.html темы для приложения Сайт.
      Почти в самом низу файла

      {$block_user_css = $wa->block("`$theme_id`.user_css")}
      {if !empty($block_user_css)}
      	/* User css styles from Site - blocks - {$theme_id}.user_css */
      	{$block_user_css}
      {/if}

      Если вы хотите использовать разные клоны тем на разных поселениях, то можно использовать скрытую настройку Theme ID, для разграничения блоков по клонам темы. 

      Например, если задать Theme ID super_clone1, то для неё нужно будет создать блок:

      super_clone1.user_css

      Для темы с Theme ID my_new_clone нужно будет создать блок:

      my_new_clone.user_css

      ВАЖНО!
      Пробелы и тире в названиях Theme ID не допускаются!
      Если хотите визуально разделить слова, то используйте _нижнее подчёркивание. 
      И лучше, чтобы Theme ID совпадало с id клона темы. 

    • Сергеев Владимир
      Разработчик
      24 мая 2020 08:41

      Делаем фон верхнего баннера изображением

      Добавьте в блок код:

      .header_banner { 
          background: url(ссылка на изображение);
      }
      .header_banner > div { 
          background: none !important;
      }

      Ссылку на изображение замените на скопированную ссылку на изображение, которое вы предварительно загрузили в файл-менеджер. Как пользоваться файл-менеджером – об этом написана отдельная инструкция.

      Если текст на фоне изображения будет плохо читаться, то

      background: none !important

      Можно заменить на тёмную полупрозрачную подложку:

      background: rgba(0,0,0,.5) !important;

      Либо на светлую полупрозрачную подложку:

      background: rgba(255,255,255,.5) !important;

      .5 – означает степень полупрозрачности.
      1 = 100% непрозрачная
      .1 = 10% от прозрачности
      .5 = 50% – половина прозрачности.

      • Сергеев Владимир
        Разработчик
        10 июля 2021 22:58

        Для темы Speed немного другой код:

        .index-top-banner-wrapper .uk-navbar-container.index-top-banner { 
            background: url(ссылка на изображение);
        }

        • Дмитрий
          11 июля 2021 00:13

          Приветствую. Не совсем то, что хотелось бы. Не хватает дополнительного кода. Задумка была в том, что бы верхний баннер являлся одним целым с "основным". Но основной баннер имеет полупрозрачную настройку, тогда, когда верхний подключает такую настройку только в центре. 

          Использовал: 

          Это .header_banner > div { 
              background: none !important;
          
          с Этим background: rgba(255,255,255,.5) !important;
          
          

          Где это: 

          .header_banner заменил на .index-top-banner-wrapper .uk-navbar-container.index-top-banner
          
          В итоге то, что на скрине    
          
          
          • Сергеев Владимир
            Разработчик
            12 июля 2021 12:22

            Тогда надо сделать так:

            .index-top-banner-wrapper .uk-navbar-container.index-top-banner { 
              background: url(ссылка на изображение);
              position:relative;
              z-index:1;
            }
            .index-top-banner-wrapper .uk-navbar-container.index-top-banner::before {
              content:'';
              position:absolute;
              top:0;
              left:0;
              z-index:10;
              background: rgba(255,255,255,.5)
            }

          • Сергеев Владимир
            Разработчик
            28 июня 2020 22:28

            Для темы Handmade.

            Если необходимо размещать вертикально ориентированные логотипы в верхней панели, то в блок handmade.user_css можно добавить следующий код:

            .block-logo-mode-top img {
                max-height:120px !important;;
            }
            
            .index-navbar-main:not(.index-navbar-primary) > .uk-navbar > .uk-flex {
                height:120px !important;
            }
            

            120px можно заменить на собственную высоту. 

          • Сергеев Владимир
            Разработчик
            19 февраля 2021 12:43

            Для всех тем.
            Уменьшение изображений брендов плагина бренды с картинками в верхнем меню темы.

            До применения кода:

            Добавьте код в блок:

            .plugin-adapter-init ul {
                justify-content:center;
            }
            .plugin-adapter-init li {
                text-align:center;
            }
            .plugin-adapter-init img {
                max-width: 60px;
            }

            Результат после применения кода:

            Добавить комментарий
            Чтобы добавить комментарий, зарегистрируйтесь или войдите
            Мы получаем и обрабатываем персональные данные посетителей нашего сайта в соответствии с официальной политикой.
            Если Вы продолжите использовать сайт, мы будем считать, что Вас это устраивает.
            Подписывайтесь и получайте скидки!

            Узнавайте первым о скидках и специальных предложениях!