Прикрутил почти нажимающуюся кнопку на css3 для комментариев — часть 2.

Пост из серии Украшаем комментарии в WordPress — часть 2 (напомню, в прошлой части мы говорили о том, как выделить автора комментария, и прикрутить визуальный редактор). А «почти нажимающуюся» кнопку — это потому что работает только на наведение курсора, а на нажатие — только в опере, да и то — не полностью: надпись смещается на 1 пиксель вниз, а сама кнопка — нет. В хроме — ну никак не хочет нажиматься, в смысле результат-то действия есть, а вот смещения кнопки, изображающее нажатие — нет. Это касается только кнопки отправки комментария, остальные кнопки, прописанные с классом button, работают нормально. С чем конфликтует — черт его знает, видимо, с другими стилями в моем style.css темы, приписанными к кнопке отправки комментария. Хотя вроде все делал по инструкциям, описанным тут и тут. Кстати, случайно нашел, как сделать красивую наклонную ленточку — может кому пригодится. Код получился такой

(я не программер, потому что получилось, то и получилось, если кто подскажет, почему не работает, и как оптимизировать — буду премного благодарен) — под спойлером.

Открыть спойлер »

Ну хоть выглядит ничего… Вот бы еще работало правильно. Попутно обновил надпись с Post Comment на Отправить комментарий, правда это уже не в style.css, а в comments.php.

Вот что было…

Tinymcecomments

Вот как стало…

Добавили красивые кнопочки с помощью css3

Можно пробовать нажимать 🙂 Чего делать с TinyMCEComments — так пока и не знаю, ну никак хром не хочет в них отправлять подчеркивание и перечеркивание. Так пока и висят.

Да, и еще. Кнопочку можно теперь навесить на любую ссылку, достаточно прописать  class=»button» в ней, разумеется, button — в нормальных кавычках, а не как в этой строчке преобразовал их вордпресс. Код получится такой:

Результат будет такой:

ссылка на интересный пост

А можно навесить на нее ссылку на скачиваемый файл, тогда код будет такой:

А результат — такой:

Скачать файл!

Можно сделать с ссылкой посредством кода:

И получится:

Кнопка, подчеркнутая, как ссылка

Можно сделать большой, если использовать код

Большая кнопка

А можно — маленькой, с кодом

Маленькая

Главное, чтобы

вставилось. Потому что визуальный редактор любит это дело отрубать, в результате вставляется просто ссылка, без указания на класс в a href.

CSS3 рулит. Вот бы еще кнопка нормально нажималась не только здесь, но и при отправке комментария 🙂

UPD: Удалось пофиксить нажатие в хроме путем прописывания

перед ее описанием в активном состоянии (проще говоря, перед строкой

Но появилась другая проблема — как мы помним, в опере нажималась надпись. Теперь она так же и нажимается — независимо от кнопки. Т.е. и кнопка смещается, и надпись внутри кнопки. Как отключить смещение надписи в опере — так и не нашел. Зато в хроме теперь все отлично 🙂

Кстати, мне осталось всего еще 2-3 поста про WordPress, и я совсем с ним закончу. Практически все уже настроил. В следующий раз поговорим о том, как увеличить аватарки, добавить нумерацию комментариев, скруглить края их рамок, ну и т.д.

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
3 комментария
  1. А как вы прикрутили кнопку спасибо в конце поста? Это плагин?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Subscribe without commenting

QR Code Business Card