Скрыть объявление
Вышла новая версия XenForo 1.5.14 Nulled By XenForo.Info. Поспешите обновить свои форумы на новую версию прямо сейчас!

XF 1.5 Изменить внешний вид checkbox

Тема в разделе "[1.x] Техническая поддержка", создана пользователем hofmann, 8 янв 2017.

Метки:
  1. TopicStarter Overlay
    hofmann

    hofmann Проверенные

    Сообщения:
    145
    Симпатии:
    43
    Пол:
    Мужской
    Здравствуйте. Как изменить внешний вид checkbox? Например что бы он сочетался с темным стилем?
    PHP:
    <xen:if is="{$post.canInlineMod}"><input type="checkbox" name="posts[]" value="{$post.post_id}class="InlineModCheck item" data-target="#post-{$post.post_id}title="{xen:phrase select_this_post_by_x, 'name={$post.username}'}" /></xen:if> 
    Этот код отвечает за вывод чекбокса в сообщении для модерации. Может нужно его как то изменить?
    Внести какие то css решение? Спасибо.
     
  2. Георгий Шевченко

    Георгий Шевченко Проверенные

    Сообщения:
    2212
    Симпатии:
    4327
    Последнее редактирование: 8 янв 2017
    Mirovinger, hofmann и Hope нравится это.
  3. TopicStarter Overlay
    hofmann

    hofmann Проверенные

    Сообщения:
    145
    Симпатии:
    43
    Пол:
    Мужской
    Например вот это добавляет чекбокс для модерации поверх стандартного.. Как оставить только от FontAwesome?
    Код:
    input[type=checkbox] {
         border: 0;
         clip: rect(0 0 0 0);
         padding: 0; 
         margin-right: 9px;
         outline: none;
         cursor: pointer;
    }
    input[type=checkbox]:before {
        color: #ccc;
        font-family: FontAwesome;
        content:"\f111";
        font-size: 25px;
        line-height: 50%;
    }
    input[type=checkbox]:checked:before {
       position: inherit;
        display: inline-block;
        color: #079600;
        font-family: FontAwesome;
        content: "\f14a";
        background: #fff;
        border-radius: 50%;
        line-height: 13px;
        vertical-align: 2px;
        margin-top: -1px;
    }
     
  4. n0rt

    n0rt Проверенные

    Сообщения:
    19
    Симпатии:
    17
    Пол:
    Мужской
    сейчас практически в любом браузере есть режим разработчика (пользуюсь Chrome там Ctrl+Shift+I) Можно навести на интересующий вас элемент, вызвать этот режим и попробовать отключить или поменять данные стили. Вы сразу увидите результат и если он вас устроит можно дальше менять в CSS
     
    hofmann нравится это.
  5. TopicStarter Overlay
    hofmann

    hofmann Проверенные

    Сообщения:
    145
    Симпатии:
    43
    Пол:
    Мужской
    Это понятно. У меня все работает, только нужно скрыть стандартные чекбоксы, а то закрыть их полностью FA чекбоксами не получается..
    input[type=checkbox] { display: none; } - вроде бы то что нужно но убирает стандартный так и от FontAwesome.. ну понятно мы ж задаем по :before и :after.. в эту опцию.. не знаю..
     
  6. n0rt

    n0rt Проверенные

    Сообщения:
    19
    Симпатии:
    17
    Пол:
    Мужской
    не совсем понимаю что нужно без самой страницы

    но может быть как то так:

    input[type=checkbox] { display: none; }
    input[type=checkbox]:before
    { display: block; }

    либо ещё может быть примерно так

    input[type=checkbox]{
    opacity: 0;
    }

    input[type=checkbox]:before
    { opacity: 1; }

    либо вот ещё статья

    Пожалуйста, войдите или зарегистрируйтесь для просмотра скрытого текста.
     
    hofmann нравится это.
  7. TopicStarter Overlay
    hofmann

    hofmann Проверенные

    Сообщения:
    145
    Симпатии:
    43
    Пол:
    Мужской
    n0rt, пробовал как вы написали - не помогло. не получается у меня заменить стандартные на FontAwesome.
    только сама FA иконка идет поверх основной.. как на скрине.. margin-top: -1px; и т.п. не работает..
    а даже если бы и зароботало то бы сползло в другом месте.. например опции темы, показывать онлайн статус, в настройках..
    Просто там немножко в другом месте этот чекбокс..
     

    Вложения:

    • checkbox.jpg
      checkbox.jpg
      Размер файла:
      23,9 КБ
      Просмотров:
      11
www.megastock.ru

Email: XenForo.Info@yandex.ru. Skype: XenForo.Info