Рейтинг@Mail.ru
Евгений Попов раскрывает Все технические моменты онлайн-бизнеса в видеоформате 2011.
02.12.2011 – 03:08 | Нет комментариев

Вышел новый обучающий видеокурс от Евгения Попова - “Все технические моменты онлайн-бизнеса в видеоформате 2011”. Здесь есть ВСЕ!

Читать запись полностью »
Бесплатное

курсы ,тренинги ,уроки ,советы новичкам

SEO

Поисковая оптимизация , раскрутка и продвижение

О разном

Прикольное , любопытное , интересное , полезное.

Сервисы

Онлайн инструменты. Веб сервисы

Wordpress

Полезные плагины, хаки, советы

Главная » Wordpress

Как убрать рамку вокруг смайликов и выровнять их по вертикали в WordPress

Опубликовал в 16.02.2012 – 22:22комментариев 12

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

Приветствую вас , уважаемый читатель.

GoodSmiley В этом посте речь пойдет о том как убрать ненужную рамку и выровнять смайлики в тексте статей, что бы они гармонично смотрелись среди строк , а не портили вид статьи своим корявым расположением между строк текста.

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

Подумывал даже отключить в админке WordPressa их графическое отображение. Давно хотел решить эту проблему, ведь на других блогах смайлики отображаются без всяких рамок и на одном уровне с буквами, а у меня почему то нет.

Не помогли даже плагины , подменяющие стандартные вордпрессовские смайлы на прикольные смайлики из QUIP и т.п..

Поиск решения в интернете по запросам , которые, как мне казалось, должны отвечать на мой вопрос результатов не дал. Видимо не то искал. Как говорили умные китайцы: “Тяжело найти черную кошку в темной комнате, особенно если ее там нет” 🙂 .

Как узнать Class и id элементов шаблона

 

Решение пришло совершенно случайно. Как то раз открыл я свой блог в Opere , зашел на какую то страничку и увидел в тексте эти злополучные смайлики в рамочке, которые из-за своего некорректного расположения меняли расстояние между строк текста и портили тем самым общий вид статьи.

Я опять взялся найти решение этой давней проблемы.Что то меня натолкнуло на мысль посмотреть настройки браузера. Побродив по настройкам и не обнаружив ничего , что могло бы так влиять на отображение смайликов, я зашел в “Меню”-“Страница”-“Стиль” и выбрал “Class и id”.

pic05

Внешний вид страницы сразу поменялся и стал выглядеть так:

pic07Отобразились названия классов и id возле каждого элемента на странице.

Решил описать эту фишку , потому что я думаю пригодиться еще не раз и не только в борьбе со смайликами 🙂 , но и с другими элементами шаблона.

pic06Отобразилось название класса и возле смайлика :O . Теперь я узнал что нужно искать – CLASS: “wp-smiley

“Вот теперь то я тебя найду!” 🙂 , подумал я и кинулся искать wp-smileyв CSS файлах . Каково же было мое удивление когда перерыв все файлы, я его не нашел. 😯

Порывшись опять в интернете я нашел кое какую информацию на эту тему и понял, что я не одинок.

В интернете можно найти ответ на любой вопрос, нужно только правильно спросить.

Что делать если в блоге не корректно отображаются смайлики

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

Поэтому , если это Ваш случай , то нужно самому внести дополнение в файл стилей style.css, для корректного отображения смайликов в блоге, или же подкорректировать его , если такой блок есть , но почему то не работает.

Для этого открываем в админке файл style.css для редактирования и ищем раздел img.wp-smiley , если его нет в самом конце вставляем следующий фрагмент:

1
2
3
4
5
6
7
img.wp-smiley {
height: 15px; /* высота смайлика в пикселах */
width: 15px; /*ширина смайлика в пикселах*/
border: none ; /* убрать рамку */
margin: 0 ; /* отступ = 0 */
padding: 0 ; /* отступ=0 */
}

На блоге у Dimoxa нашел еще одно простое усовершенствование для отображения смайликов. Dimox описал как выровнять смайлики по вертикали относительно строк текста, так что бы строки текста не разъезжались (не менялся межстрочный интервал), если вставлен смайлик.

Достаточно добавитиь в style.css еще одну строку:

1
.post img {vertical-align: middle;} /* равняет картинки (смайлики) в статьях */

Смайлики стали отображаться среди текста гораздо лучше, но еще не идеально. Рамка исчезла , смайлик уже стал располагаться не над буквами, а на одной строке с ними, но немного ниже чем нужно и буквы справа и слева находились к нему слишком близко. Кроме того, один и тот же смайлик по разному отображался на главной странице (в анонсе статьи) и в основном тексте статьи, очевидно для этих разных частей блога действуют разные настройки CSS.

 

Окончательный вариант CSS кода для выравнивания смайликов в тексте

 

После нескольких экспериментов с параметрами css, у меня получился вот такой кусок кода , который был добавлен в самый конец файла style.css .

1
2
3
4
5
6
7
/* убираем рамку и выравниваем смайлик по высоте */
img.wp-smiley {
border: none !important ;
margin: 2px 1px 2px 1px ;
padding: 0px 0px 3px 0px ;
vertical-align: middle !important ;
}

Этот кусок кода вы можете скопировать и вставить в конец файла style.css своего блога.

Для тех кто не очень знаком с CSS 😉 небольшое разъяснение для того что бы в случае надобности вы смогли сами поправить расположение картинок и смайликов у себя в блоге.

Поясню некоторые параметры в, представленном выше, фрагменте CSS кода для смайликов. Какой параметр за что отвечает.

Блочная модель CSS

Блочная модель CSS

Пояснения к  “Окончательному вариант CSS кода для выравнивания смайликов в тексте”. Для наглядности на картинке изображена упрощенная модель блочной структуры CSS.

  • Height – высота блока “КОНТЕНТ” (на картинке это сине-зеленый квадратик).
  • Width – ширина блока “КОНТЕНТ”

Все что находится между символами /* и */ является  комментарием к строкам кода (в статье подсвечивается оранжевым).

Для наших смайликов – это высота и ширина изображения смайлика. Поскольку он круглой формы , эти значения одинаковы и равны 15 px. Значение указано в пикселах (px). Пробовал указать значения ширины и высоты в %  (100%) и возникли проблемы с оображением смайликов в браузере GoogleChrom(смайлики были просто огромными 🙂 ).

❗ В итоге пришел к выводу , что эти параметры  (height,width ) вообще не нужно указывать. Без них все нормально работает в большинстве браузеров , а зачем тогда нам лишние строки кода ❓ .

  • Border – рамка вокруг смайлика. Ширину и вид рамки можно настраивать. Но в случае со смайликами, ее конечно лучше отключить 🙂 .

border: none – не отображать рамку

  • !important

Параметр !important увеличивает приоритет, или важность конкретного определения. Вставляется перед знаком “;”.

Без этого параметра смайлик может отображаться не корректно в разных частях блога и в разных браузерах (например в IE). Другими словами, раз указан !important , смайлики везде в блоге будут отображаться без рамки и в тексте статей и на главной странице и везде будут центрированы по вертикали, несмотря на то, что в разных разделах блога могут действовать разные стили CSS, потому что в этих строках кода CSS установлен высший приоритет.

border: none !important ;

vertical-align: middle !important ;

  • margin

margin — определяет ширину поля за пределами границы элемента (контент в рамке)

margin: margin-top margin-right margin-bottom margin-left ;

margin: 0 auto – автоматически располагает блок по центру

  • padding

padding — определяет ширину полей между границей элемента и его содержимым.

Параметры top, right, bottom, left указываются именно в таком порядке (сверху и по часовой стрелке). Могут принимать значения указанные в %, px (пикселах) и некоторых других единицах измерения, которые здесь не рассматриваются.

  • vertical-align

1
vertical-align: middle !important ;

vertical-align – вертикальное выравнивание. Я внес этот параметр в блок wp-smiley что бы он регулировал только смайлики по вертикали. У Dimoxa этот параметр относится ко всем изображениям в тексте статей (post img), можно оставить и этот вариант. Кому как больше подходит.

middle по центру

!important – повышенный приоритет параметра middle .

Убираем рамку и выравниваем картинки в статьях

Для того что бы убрать рамку и выравнять картинку, вставленную в текст статьи нужно в файле style.css добавить в конце , или отредактировать следующий код:

1
2
3
4
.post img {
vertical-align: middle !important;   /* вертикальное выравнивание */
border: none;     /*рамку не отображать*/
}

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

Стандартные смайлики WordPress и их текстовые коды

стандартные смайлики WordPress

 

Проверочный блок текста со смайликами

Теперь проверим как будут отображаться разные смайлики в тексте:

Тестовый блок текста со смайликами 🙂 Тестовый блок текста 😀 со смайликами 😯 Тестовый блок текста со смайликами 😉 .Тестовый блок текста :lol со смайликами 🙁 Тестовый блок текста 😛 со смайликами 😐 . Тестовый блок текста 🙂 со смайликами. Тестовый блок 😉 текста со смайликами 8) .Тестовый блок текста 8) со смайликами Тестовый 😯 блок текста со 💡 смайликами Тестовый блок текста ❓ со смайликами ➡ Тестовый блок текста со смайликами ❗ Тестовый блок 🙂 . Тестовый блок текста 🙂 со смайликами. Тестовый блок 😉 текста со смайликами .Тестовый блок текста :lol со смайликами 🙁 Тестовый блок текста . Тестовый блок текста :lol со смайликами 🙁 Тестовый блок текста . А это просто маленькая картинка в рамке (по умолчанию) вставленная в тексте . Картинка без рамки (отображение рамки отключено в дополнительных параметрах изображения). Тестовый блок текста. Тестовый блок текста. Тестовый блок текста. Тестовый блок текста.

Убрать рамку можно в дополнительных параметрах изображения в админке вордпресс. Нужно прописать в поле Рамка значение ноль .

Отключаем отображение рамки у изображения

Заключение

  1. Мы научились с вами править отображение смайликов и других картинок в блоге с помощью CSS.
  2. Определять Class и id элементов блога.
  3. Немного познакомились с блочной структурой CSS и диррективой !important.

Продолжение следует.

С уважением

Анатолий Климовский – автор блога infodrug.ru .




Читайте также:


комментариев 12 »

  • Привет, Анатолий. Очень внимательно прочитал эту твою статью. Попробовал все три способа, но не в коня корм..Смайлы так и висят подвешенными,хотя рамки я сумел убрать еще при установке шаблона.
    Может попозже опустятся..

    • InfoDrug InfoDrug:

      Рад что заглянули, дядя Валера.
      Я заметил, что на вашем блоге для смайликов не применяется класс “WP-smiley”, хотя в style.css вы его добавили (или отредактировали). Если у вас используется кокой-то плагин кеширования на блоге, то можно попробовать очистить кеш (в каждом кеш-плагине есть такая ф-ция). Это должно помочь.

    • InfoDrug InfoDrug:

      В файле style.css посмотрите фрагмент (со строки 836)
      .article img, img.article {
      border: 0px solid #9A7A47;
      margin: 1em; – эта строка поднимает смайлики
      Если ее убрать смайлики будут в строке текста , на одном уровне с буквами.

      • Ох, Анатолий! Нет у меня строчки margin:1em.
        Есть вот это:
        /* убираем рамку и выравниваем смайлик по высоте */
        img.wp-smiley
        {
        border: none !important ;
        margin: 0px ; /*2 1 2 1*/
        padding: 0px 0px 0px 0px ; /*0 0 3 0*/
        vertical-align: middle!important ; /*middle*/
        }
        Никакие манипуляции не сдвигают смайлы. Кеширования у меня нет!

        • Виноват Анатолий, наконец разобрался:Я вспомнил, что рамки со смайлов убирал в разделе Post icons – там же оказалась та строчка margin:1em. Вырезал ее и смайлы встали в “стойла”
          Спасибо тебе и дальнейших успехов!!

          • InfoDrug InfoDrug:

            Рад , что у вас все получилось, дядя Валера. Успехов в развитии блога 🙂

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

    • InfoDrug InfoDrug:

      Прошу прощения , что не сразу ответил. Побывал на вашем блоге. Очень “вкусно” все показано и описано :).
      Расположение смайликов на вашем блоге нормальное, мешает только рамка, если я правильно понял.
      Рамку отключает строка :
      border: none !important ;
      Посмотрите в файле style.css (строка 883)
      .art-article img, img.art-article {
      border: 1px solid #787878; – строка которая рисует рамку вокруг смайлика
      vertical-align: middle;
      Если строку убрать , или исправить на вышеуказанную , то рамка исчезнет. Ее можно просто закомментировать:
      /*border: 1px solid #787878; */
      Похоже плагин с QUIP смайликами имеет свои классы для отображения смайликов.

      • Спасибо за отзыв 🙂
        Если заккоментировать строку
        border: 1px,
        то рамки исчезнут у всех изображений, а не только у смайликов. А хотелось бы оставить рамку обычным изображениям. На этом сайте смайликам почему-то просто не задаются свои классы, так было даже до установки плагина. Наверное, придется жить с рамочками 🙁

        • InfoDrug InfoDrug:

          Я заметил у вас на сайте два “вида” смайликов стандартные и QUIP. Со стандартными вроде бы все красиво и ровно и без рамки , строка кода:
          <img src="http://......./wp-includes/images/blank.gif; alt=":-P" class="wp-smiley smiley-15">
          , а вот quip-смайлики в рамке. Они выводятся в статье такой строкой:
          <img class="img.wp-smiley" src="http://................/qipsmiles/smiles/crazy.gif" alt="*CRAZY*" title="*CRAZY*"<
          Для начала нужно выяснить причину. Почему смайлики выводятся по разному ?
          Как у вас уживаются и стандартные и не стандартные смайлы ? Разве плагин QUIP-смайликов не должен был заменить все стандартные смайлы на свои? Если плагин заменил только часть смайликов на свои , то и разбираться нужно с CSS классами плагина. У меня к сожалению он не установлен, когдато пробовал , но он мне не глянулся 🙂 и я его удалил .

  • Премного благодарен за код для смайлов, позволяющий устранить черную рамку и выровнять смайл на строчке. Однако просто вставить код в конец style.css оказалось недостаточно, поморщил ум и сообразил, что вводить его нужно в конец блока /* Begin Images */, т.е. до надписи /* End Images */ – в результате все заработало!

    • InfoDrug InfoDrug:

      Я рад, Рустам, что статья вам помогла. Спасибо за то , что описали тонкости применения данного кода для своей темы WordPress. В моей теме такого блока просто не было, поэтому я упустил из виду этот момент. Еще раз спасибо. Тем кто будет читать статью с комментариями ваш опыт пригодится.

Оставьте комментарий

Вы должны войти , чтобы оставить комментарий.