Условия использования:
Вы можете использовать все материалы, соблюдая условия использования бесплатного контента.
Пока у меня есть время решила написать довольно простенький урок, тем более что на что-то сложное я всё равно не способна. В общем, тут вы научитесь как стилизовать кнопочки в форме ответа, как ставить другие картинки вместо стандартных майббовских, как на их место ставить иконки из иконочных шрифтов (например, font awesome или material icons) и всё это без скриптов.
Хотя, тем кто ищет быстрых и готовых решений рекомендую посмотреть скрипт от @Герда Иконки Material Icons и Font Awesome в форме ответа вместо стандартных
Хороший скрипт, работает просто замечательно. К тому же скрипт иначе добавляет иконки из иконочных шрифтов чем это делается через стиль и спасает от ситуации, когда вместо иконок просто пустые квадратики. Да, имейте ввиду что иногда, в некоторых браузерах подобная бага встречается и не очень понятно как её решить.
Да, и последнее предупреждение: описанные мною методы я стала использовать на своём форуме ещё до того как это стало мейнстримом (в году эдак 2016). Так что ни у кого, ничей код я не ворую, делюсь своим опытом, который в свою очередь узнала от знакомого, помогающего с дизайном. Знакомый этот, к слову, не делает на заказ дизайны, но мне помог один раз в качестве исключения. Если вы считаете иначе - ваше мнение так считать, но держите его, пожалуйста, при себе.
Ну всё, со всеми предупреждениями покончено. Теперь к делу. Стандартные майббовские кнопочки в форме ответа выглядят таким образом:

# увеличивается по клику
Собственно, представленный вариант на скрине - то как обычно стилизуют форму ответа: задают фон, поле вокруг, стилизуют или скрывают надпись над формой ответа, оформляют кнопки "ОТПРАВИТЬ" и "ПРЕДПРОСМОТР". Не очень многие идут дальше и меняют ещё и кнопки. Хотя сделать это вполне реально.
У кнопочек есть стили, только они лежат не в Администрирование - Свой стиль, а в файле "extra.css", который прилагается к любому форуму. Там есть дополнительные стили. Например, вот ссылка на дополнительны стили ФД: extra.css
К слову, после прошлогодних обновлений майбба, теперь дополнительные стили можно отключить и всё настроить "от" и "до" самим. Делается это в Администрирование - Свой стиль - Да. Отключить extra.css:

# увеличивается по клику
Если хочется совсем убрать базовый стиль и сделать всё-всё самим, никто не запрещает отключать, но для стилизации отдельных элементов совсем не обязательно. Можно взять из extra.css основу, переделать на свой лад и вставить в свои стили. Будет работать. Например, берём стили кнопочек в форме ответа:
В каждой строке:
background:url('/i/form_buttons.3.png') меняем на ссылку на свою иконку или спрайт с иконками;
no-repeat не трогаем;
50% -515px или другие последние параметры меняем либо на center center, если у вас просто одиночная иконочка (вот такая:
) или ставим свои цифры, если у вас файл сразу со всеми иконками (вот такой, например). Тут одна цифра двигает фоновую картинку по вертикали, а другая по горизонтали.
То есть, выводим простой принцип стилизации кнопочек:
#селекторкаждойкнопки {вот тут разные стили, в том числе картинка;}
Также имеются общие селекторы, в которых можно выставлять настройки сразу для всех кнопочек. Так как они реализованы в коде через таблицу в одну строку с большим количеством ячеек, то и селекторы соответствующие:
#form-buttons table, #form-buttons - вся таблица;
#form-buttons tr - строка;
#form-buttons td - ячейка;
#form-buttons td img - картинка в ячейке;
Теперь, помня о рассказанном, можем начинать творить! Ставим картинки, css-спрайты или иконки. В общем, мне известно три метода, которые покажу на примерах с моих форумов и с ФД (со старого дизайна). Будет показываться по принципу: от простого к сложному.
Метод 1. Картинки кнопочек
Вот пример кода где мы заменяем каждую иконку на свою картинку:
В сети масса коллекций иконок, выбираем любую, подбираем нужные картинки нужного размера и устанавливаем.
Метод 2. CSS-спрайт + эффекты при наведении
Вот пример более сложного кода, где предусмотрены эффекты при наведении (кнопочка окрашивается в другой цвет и появляеися фон), все картинки указаны не по одному как в примере выше, а в одном css-спрайте (читайте что это такое тут) и кнопочка позиционирования текста слева скрыта.
Параметры типа background-position: 0px -570px; просто двигают картинку со всеми кнопочками так чтобы в выставленной ячейке для кнопочки была нужная нам картинка. Подобный css-спрайт собирается самостоятельно, ссылка выше просто пример.
Метод 3. Иконочный шрифт Font Awesome
И вот пример когда где вместо картинок у нас стоят иконки из иконочного шрифта Font Awesome.
Параметры типа content: '\f0dd'; - это кодовое название иконки (=юникод), у каждого оно своё и находится на сайте, откуда вы берёте иконки. Например с сайта fontawesome.com:

# увеличивается по клику
Как видите, здесь иконки подключаются через псевдо-элемент :before.
Сам иконочный шрифт надо импортировать себе на форум! Используемый в примере Font Aswesome подключается так:
В HTML-Формы | В Свой стиль |
Код: <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"> | Код: @import url('https://use.fontawesome.com/releases/v5.15.1/css/all.css'); |
Или другие способы/версии/шрифты. Читайте внимательно мануалы на сайте, откуда импортируете шрифты.
Хотите большего? Посмотрите сюда: Компактная форма ответа с красивыми кнопками (CSS)
Надеюсь урок был полезен. Не исключаю что я что-то забыла, написала неправильно или не так объяснила, так что обратная связь приветствуется.
- Подпись автора
Отвечаю на вопросы вот здесь | Мой блог
"Никогда не сомневайтесь в себе и любите каждую свою работу, даже если она кажется вам грязью на окне. Через это окно люди смотрят на мир, тогда как разводы замечаете только вы." © Николай Ободников. "Лиллехейм. Волчий ветер













