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

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

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

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

#respond #submit {
cursor:pointer;
height: 20px;
color: #3A3122;
font-weight:bold;
font-size: 11px;
margin: 0px 0px 0px 0px;
padding: 0px 15px 2px 15px;
border: 1px solid #B1A074;
background:#FAF5D3;
font-family: Verdana, Helvetica, Arial, sans-serif;
}
 
a.button,
a.comment-reply-link,
#commentform #submit,
.submit{
display:inline-block;
margin:5px 0;
padding:3px 8px;
border:1px solid #478223;
border-bottom-color:#3e4e25;
color:white !important;
text-align:center;
text-shadow:0 -1px 0 hsla(0,0%,0%,.3);
text-decoration:none;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background:#7fa83d;
background:-webkit-gradient(linear, left top, left bottom, color-stop(.2, #93ba56), color-stop(1, #547a19));
background:-moz-linear-gradient(center top, #93ba56 20%, #547a19 100%);
-webkit-box-shadow:inset 0 1px 0 hsla(0,100%,100%,.3), inset 0 0 2px hsla(0,100%,100%,.3), 0 1px 2px hsla(0, 0%, 0%, .29);
-moz-box-shadow:inset 0 1px 0 hsla(0,100%,100%,.3), inset 0 0 2px hsla(0,100%,100%,.3), 0 1px 2px hsla(0, 0%, 0%, .29);
box-shadow:inset 0 1px 0 hsla(0,100%,100%,.3), inset 0 0 2px hsla(0,100%,100%,.3), 0 1px 2px hsla(0, 0%, 0%, .29);
}
a.button.large{
padding:6px 16px;
}
a.button.small,
a.comment-reply-link{
padding:0px 10px;
}
a.button:hover,
a.button.hover,
a.button.active,
a.comment-reply-link:hover,
#commentform #submit:hover,
.submit:hover{
text-decoration:none !important;
background:#677f3a;
background:-webkit-gradient(linear, left top, left bottom, color-stop(.2, #859c5a), color-stop(1, #486b06));
background:-moz-linear-gradient(center top, #859c5a 20%, #486b06 100%);
cursor:pointer;
}
 
a.button:active{
position:relative;
bottom:-1px;
border-color:#3e4e25;
-webkit-box-shadow:inset 0 0 7px hsla(0,0%,0%,.3), 0 1px 0 hsla(0, 100%, 100%, 1);
-moz-box-shadow:inset 0 0 7px hsla(0,0%,0%,.3), 0 1px 0 hsla(0, 100%, 100%, 1);
box-shadow:inset 0 0 7px hsla(0,0%,0%,.3), 0 1px 0 hsla(0, 100%, 100%, 1);
cursor:pointer;
}
a.button.inactive,{
border:1px solid #d5d5d5;
border-bottom-color:#e6e2e2;
color:#aeaeae;
text-shadow:0 1px 0 white;
background:#e8e8e8;
background:-webkit-gradient(linear, left top, left bottom, color-stop(.2, #f3f3f3), color-stop(1, #e6e6e6));
background:-moz-linear-gradient(center top, #f3f3f3 20%, #e6e6e6 100%);
-webkit-box-shadow:inset 0 1px 0 hsla(0,100%,100%,.5), inset 0 0 2px hsla(0,100%,100%,.1), 0 1px 0 hsla(0, 100%, 100%, .7);
-moz-box-shadow:inset 0 1px 0 hsla(0,100%,100%,.5), inset 0 0 2px hsla(0,100%,100%,.1), 0 1px 0 hsla(0, 100%, 100%, .7);
box-shadow:inset 0 1px 0 hsla(0,100%,100%,.5), inset 0 0 2px hsla(0,100%,100%,.1), 0 1px 0 hsla(0, 100%, 100%, .7);
}

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

Вот что было…

Tinymcecomments

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

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

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

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

<a class="button" title="Щелк сюда!" href="http://chewriter.ru/site/kak-dobavit-dopolnitelnye-knopki-v-redaktor-tinymce-wordpress.html">ссылка на интересный пост</a>

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

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

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

<a class="button" title="Щелк сюда!" href="http://chewriter.ru/downloads/archives/download_counter.rar">Скачать файл!</a>

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

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

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

 <a class="submit" href="http://chewriter.ru/downloads/archives/download_counter.rar">Кнопка, подчеркнутая, как ссылка</a>

И получится:

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

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

 <a class="button large" href="http://chewriter.ru/downloads/archives/download_counter.rar">Большая кнопка</a>

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

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

 <a class="button small" href="http://chewriter.ru/downloads/archives/download_counter.rar">Маленькая</a>

Маленькая

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

class="описание класса"

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

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

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

a.comment-reply-link:active,
.submit:active,
#commentform #submit:active,

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

a.button:active{

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

Кстати, мне осталось всего еще 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