Главная
Wordpress
Круглые аватары в WordPress
  • 18 Апр 2015г
  • 683
  • 2
  • Рубрика: Wordpress

Круглые аватары в WordPress

Круглый аватар

Доброго времени суток. 🙂

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

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

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

Это плагин Firebug. Он является стандартной функцией современных браузеров и служит для просмотра исходного кода любого сайта. Для того чтобы увидеть нужный элемент, нужно нажать правой кнопкой мыши по аватару и в появившемся меню выбрать соответственный пункт. В Chrome - это Просмотр кода элемента, в Firefox - Исследовать элемент, в Opera - Просмотреть кода элемента.

Внизу окна браузера появится фрейм, в котором будет исходный код страницы с стилями и тд. Покажу на примере Firefox, выглядеть это будет примерно так.

Firebug

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

Далее просто ищем этот класс в файле style.css. Если такого класса нет, то просто создаем его и дописываем ему стили закругления. Готовый код стилей будет примерно таким:

.avatar{
	padding:2px;
	border:1px solid #dedede;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;}

Внешне аватар станет примерно таким:

180420151615

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

На этом все, спасибо за внимание. 🙂




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(8 голосов, в среднем: 4.4 из 5)

Опубликовано 2 комментария

  • Александр
    Комментариев: 1

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

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

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

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий