Продолжим? )
Есть ещё одна забавная вещица - картинка поверх аватара. Что на ней будет, зависит только от вашей фантазии: готишная паутина с пауком или без, штрих-код, цветочный угловой орнамент, новогодний шарик с веткой сосны или ели, etc. Как увидите, далее приведён ещё один вариант рамки, настройки которого можно менять как заблагорассудится. Итак, выглядеть это может приблизительно так, как на следующем скрине:

Вынуждена предупредить, что этого "милого баловства" я в своём дневнике не оставлю. Так что, придётся довольствоваться скрином.
Отличия от -- предыдущего поста -- :
1. В коде для селекторов ".avatar" и ".avatar img" прописываем следующее:



В этом коде:
а) всё те же параметры обрезки картинок аватар в свойствах "max-width: 116px !important; max-height:120px !important; ";
б) цвет фона - прозрачный: "background-color: rgba(0, 0, 0, 0);";
в) картинка поверх аватара в свойстве "background-image: url('/userdir/2/5/0/5/2505934/77712739.png');";
г) отключение заполнения картинкой блока под аватар (повторяемость картинки) в свойстве: "background-repeat: no-repeat; ";
д) свойство "opacity:1;" не обязательно, хотя его можно поменять, чтобы слишком светлые аватары не пестрели в тёмном дизайне, соответственно, тёмные станут ещё темнее.
е) свойство "position:relative;" - обязательно!;
ё) в свойстве прописан "z-index: -10;", чтобы картинка самого аватара была под картинкой в селекторе родителя ".avatar". По-сути, картинка аватара "ляжет" под "#wrapper". Так что, будьте осторожны с этим свойством. Или заранее пропишите "z-index" для родителя такого значения, чтобы он с вписанным в него "background-image:" располагался под потомка ".avatar img".

2. От селектора ".avatar img:hover" пришлось отказаться, поскольку задачу с ":hover" для объекта с "z-index: -10;" я пока не решила.

А в следующем посте расскажу, как сделать twitter/статусы, оторвав пост от ленты.