Хочу создать активную цветную кнопку (не изображение) внутри конкретного поста

Разработка
1

Здравствуйте. Я не умею программировать. Я хочу создать активную цветную кнопку (не изображение) внутри конкретного поста. Какой код нужно вписать в окно редактора поста?
Вот что я хочу :point_down:


Моя попытка написать код в окне редактора поста :point_down: :see_no_evil:

image
image1170×1031 52.6 KB

Помогите, пожалуйста. Покажите правильный код :pray: :pray: :pray:

2

Посмотрите на это:

3

Как я понимаю, я не смогу добавить код кнопки в окно редактора, так как это всё равно не будет работать.
Как я понимаю, я не смогу добавить код кнопки в окно редактора и не смогу установить фон для конкретного сообщения, так как это всё равно не будет работать. И нужно ли мне сначала добавить какой-то код в белый список HTML?

Извините, если я что-то неправильно понял :pray:, я не специалист по программированию и плохо владею английским языком. Сейчас я пользуюсь Google Переводчиком.

4

Возможно, одна картинка стоит тысячи слов :slight_smile:

image
image2498×1440 183 KB

[data-theme-button] a {
        display: inline-block;
        padding: 20px 50px;
        background: #24E927;
        border-radius: 5px;
        border: 3px solid #004E7D;
        color: #004E7D;
}

Если вы хотите отцентрировать кнопку:

[data-theme-button] {
    display: flex;
    justify-content: center;
    a {
        padding: 20px 50px;
        background: #24E927;
        border-radius: 5px;
        border: 3px solid #004E7D;
        color: #004E7D;
    }
}

image
image901×462 13.8 KB

5

Отлично, это потрясающе :exploding_head:. Большое спасибо :+1: :+1: :+1:

Похоже, я понял логику создания разных вариантов кнопок.
Завтра я поделюсь с вами своими экспериментами с кодом.

А пока хочу задать ещё один вопрос: какая команда нужна для выравнивания кнопки по правому краю сообщения.

Ещё раз спасибо :raised_hands:

6

Возможно ли задать размер и толщину текста в CSS?

7 
[data-theme-button] {
    display: flex;
    justify-content: end;
    a {
        padding: 20px 50px;
        background: #24E927;
        border-radius: 5px;
        border: 3px solid #004E7D;
        color: #004E7D;
    }
}

Да: используйте следующие атрибуты:

font-size и font-weight

С нужными значениями.

Документация:

:information_source: Я обновил свой CSS-код в своих сообщениях, чтобы сделать его чище (используя атрибуты flexbox вместо margin для выравнивания кнопки).

8

Огромное спасибо. Ваш ответ очень важен для меня. Я пытаюсь учиться.

9

Просто для сведения: хотя иногда задавать вопросы по настройке вашего сайта здесь допустимо, строго говоря, базовые вопросы по CSS и HTML лучше задавать на специализированных форумах.

10

Когда я попытался обновить код согласно вашему примеру, возникла ошибка.

image
image925×642 58.6 KB

Но когда я удалил вторую фигурную скобку “}”, ошибка исчезла.

image
image519×357 33.1 KB

Я всё сделал правильно?

11

Привет. Я правильно понял «специализированный форум», который не имеет отношения к Discourse? Или у Discourse есть отдельный форум для обсуждения проблем CSS и HTML? (Не уверен, что мой браузер перевёл правильно)

12

Прошу прощения за мою дерзость :pray: Не могли бы вы показать это на примере моего CSS? :pray:

P.S. Вместе с Discourse я начал погружаться в мир программирования :sweat_smile:

13

Да, извините, я ошиблась при копировании и вставке своего кода. :+1:

Он говорит, что вопросы по общему CSS, не связанные напрямую с Discourse (например, как использовать CSS для изменения размера или начертания текста), не следует обсуждать на meta.discourse.org, а лучше задать их где-то ещё, где можно учиться и задавать вопросы по CSS.

Если у вас есть конкретный вопрос о том, как использовать CSS для конкретной задачи в Discourse, то meta.discourse.org — подходящий форум.

Я рекомендую вам изучить основы CSS. Введите «урок по CSS» на вашем языке в любимой поисковой системе и попробуйте получить базовые знания, с которых можно начать. Это очень поможет вам в дальнейшем при настройке стиля вашего форума Discourse.

14

Привет, спасибо, теперь всё понятно!
Обязательно воспользуюсь предоставленными вами ссылками :+1: