Настройка кнопки «Новая тема»

Вики Разработчики
1

Здравствуйте,

Хочу поделиться с вами, как я сделал кнопку для новой темы. Немного CSS :slight_smile:

Для этого я использовал переменные цветов (tertiary, secondary и primary-medium).

Кнопка «Новая тема»

new-topic

Кнопка «Открыть черновик»

draft-topic

#create-topic {
  color: var(--secondary);
  border: 2px solid var(--tertiary);
  background: var(--tertiary);
  transition: background .25s ease-out;
  .d-icon {
    color: var(--secondary);
  }
  &:hover,
  &:focus {
    background: var(--secondary);
    color: var(--tertiary);
    .d-icon {
      color: var(--tertiary);
    }
  }
  &.open-draft {
    background: var(--primary-medium);
    border: 2px solid var(--primary-medium);
    transition: background .25s ease-out;
    &:focus,
    &:hover {
      background: var(--secondary);
      color: var(--primary-medium);
      border: 2px solid var(--primary-medium);
      .d-icon {
        color: var(--primary-medium);
      }
    }
  }
}

Хорошего дня! :slight_smile:

10 лайков
Developer Index
2021: The Year in Review
2

до

image
image303×115 2.82 KB

после
image
image294×106 2.54 KB

ничего не изменилось :no_good_man:

3

@valsha Я просто предполагаю, но, возможно, потому что этот CSS-трюк меняет состояние при наведении, а вы не наводите курсор?

В общем, и большинство из вас это знает, но изменение состояния при наведении (и многие другие вещи) отображается только в системах, где используется мышь. Не на мобильных устройствах — там пользователь просто нажимает на кнопку :wink:

2 лайка
4

Мне нравится, как выглядит эта кнопка. Как вы это сделали?

И это совершенно не по теме… какой инструмент вы используете для записи/конвертации этих GIF?

(Чёрт… я случайно нажал не ту кнопку ответа? Так что: @Don )

2 лайка
5

Здравствуйте,

Похоже, это тема Dracula. Я проверил исходный код.

Чтобы переопределить стили, нужно добавить button перед #create-topic.

Так что код должен начинаться так :arrow_down:

button#create-topic {

Если вы хотите сохранить зелёный цвет success, замените var(--tertiary) на var(--success). Вот как это сделать :arrow_down:

button#create-topic {
  color: var(--secondary);
  border: 2px solid var(--success);
  background: var(--success);
  transition: background .25s ease-out;
  .d-icon {
    color: var(--secondary);
  }
  &:hover,
  &:focus {
    background: var(--secondary);
    color: var(--success);
    .d-icon {
      color: var(--success);
    }
  }
}
2 лайка
6

Да, эта кнопка из темы Dracula.
@Don, как всегда, ты спаситель :+1:

2 лайка
7

Итак, дамы и господа, это демонстрация того, что происходит, когда кто-то не задумывается над тем, что он (это всегда «он»…) делает. На этот раз неверная тегировка человека и вопрос не по месту могут запутать. Слава богу, что речь идёт лишь о теме CSS/темы — а не о мире во всём мире, числе 42 или чём-то ещё важном :rofl:

На самом деле я задавался вопросом насчёт кнопки @Дона. Но, конечно, этот неоновый зелёный тоже хорош :+1:

2 лайка
8

Как вы меняете текст с «New Topic» на «Создать новую тему»? @Don

9

Здравствуйте,

Перейдите по адресу /admin/customize/site_texts, найдите текст и измените его. :slightly_smiling_face:

10

Возможно ли это сделать непосредственно внутри самой темы?

11

Способ сделать это через тему — добавить скрипт, который изменяет объект I18n.translations.

2 лайка
13

Теперь доступен компонент темы, который позволяет легко настраивать текст, иконку и другие связанные действия кнопки:

Он не позволяет изменить стилизацию кнопки, но, возможно, эта возможность будет добавлена в будущем.

2 лайка