ПоделитьсяTweetПоделитьсяGoogle
Всем привет!
Сегодня поделюсь информацией как сделать аватарки на вашем блоге круглыми.
Для этого потребуется всего лишь код и 3 минуты тяжёлого труда 🙂
Крылатое выражение про самый тяжёлый труд:
Работа над собой- самая тяжелая работа, поэтому ей занимаются немногие.
Согласитесь что квадратные аватары у всех это слишком обыденно и потому приелось. А вот круглые и не так мелькают и симпатично смотрятся. Сейчас мы этим и займёмся.
Для проведения такой операции нам понадобится файл style.css. Мы уже знаем что это такое и где он находится. А для тех кто не знает я повторю, это файл каскадных таблиц стилей. То что указывает вашему блогу как ему выглядеть каким шрифтом и цветом. Находится этот файл в теме вашего wordpress. Проходим по FTP — доступу в вашу папку блога заходим в wp-content/themes/ваша установленная тема находим файл, он внизу и скачиваем себе на компьютер. Далее для редакции пользуемся notepad++, то есть открываем его в этом блокноте и находим участок кода который выводит аватар на блоге.
ЧИТАТЬ: Урок №20. Как сделать фавикон для блога
Как найти участок кода
Открываем страницу или пост своего блога, в которой присутствуют комментарии, наводим курсор мышки на аватар любого пользователя и жмём правую кнопку мыши. В появившемся списке выбераем пункт
- Просмотр кода элемента — в Google Chrome
- Исследовать элемент — в браузере Mozilla Firefox
кликаем и экран разделится на три части.
Нас интересует правая нижняя где указано расположение элемента в файле style.css
у меня элемент прописан как .art-comment-avatar>img потому что шаблон собран на Артистире, у Вас должно стоять img.avatar если обычный шаблон wordpress и справа мы видим номер строки.
Находим строку по номеру и вставляем часть кода перед закрытой скобкой
}
вот этот код
|
border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; |
вот так это выглядит
У Вас строка намного раньше должна быть и начинаться с img.avatar {
Теперь аватарки на вашем блоге стали круглыми. Но если Вы хотите чтоб они были с тенью и красивым бордюром, то добавьте к вставленному только что коду вот этот вариант
ЧИТАТЬ: Настройка блога wordpress
|
padding: 5px; border: 1px solid #999; box-shadow: 0px 1px 1px 1px #bbb; |
И вот что получилось
Я думаю так лучше. Во всяком случае оригинальнее это уж точно. Свойство padding (оббивка) можете менять значение больше 5-ти или меньше, как Вам вздумается. :mail:
На этом тема » Аватарки для блога. Как сделать круглыми » закончена , добавить больше нечего…
Всем пока!
ПоделитьсяTweetПоделитьсяGoogle