Как убрать рамку на смайликах в WordPress

Опубликовано 17.09.2014 |

Привет, дорогой читатель! Этот пост - продолжение или дополнение к предыдущей теме, в которой я вам обещал рассказать, как убрать рамку на смайликах в WordPress.

Этот пост скорее написан для меня, как напоминание. Дело в том, что уже на втором блоге я использую тему где стоит рамка на изображениях, здесь она выглядит красиво, но есть одна проблема. Рамка на смайликах тоже присутствует. Это очень некрасиво, поэтому я долго искал выход. И, наконец, его нашел, делов то оказалось на пару минут, всего лишь вставить пару строк в код. Эта проблема мучила меня с самого создания блога, потихоньку напрягая меня. Наконец-то я разрулил эту ситуацию.

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

Кстати, на первом сайте я тогда так и не нашел решения проблемы, поэтому рамку со всех изображений убрал тогда. Сейчас этого я не мог сделать, рамка – важный элемент интерфейса моего блога. Теперь сравните, как выглядит кусок статьи без рамки:

Как убрать рамку на смайликах в WordPress?

Для этого нам нужно залезть в файлы нашей темы, найти файл style.css и прописать там такие строки:

 img.wp-smiley {
background: transparent;
border: none;
margin: 0;
padding: 0;
}

То есть, мы добавляем стиль к смайлам. Но не все так гладко, данный кусок кода у меня не хотел убирать рамку. Я понимал, что копаю в том направлении, но что-то не то. И здесь пришел на помощь !important. То есть, ко всем строкам я приписал этот код и вот, что получилось:

 img.wp-smiley {
background: transparent !important;
border: none !important;
margin: 0 !important;
padding: 0 !important;
}

После данных манипуляций рамка на смайликах пропала. Хвала мне Если вы не поняли, в чем прикол, то !important добавляет приоритет к данному диву. То есть, если будут два противоречащих дива, то отображаться будет тот, у кого стоит тег (не знаю, как его назвать) !important.

Если у вас аналогичная проблема, то пробуйте вставлять сначала первый код. Если не поможет – только тогда пробуйте второй. Ну, а я пошел праздновать победу над рамкой