Украшение к новому году. Новогодняя шапка на аватар

Различные модификации основанные на html и css.
Интересные дополнения и украшения для вашего стиля.
Помощь при доработке шаблонов вашего стиля.
Аватара пользователя
CabinetAdmin

Украшение к новому году. Новогодняя шапка на аватар

CabinetAdmin 16 дек 2013, 19:17 Сообщение

Небольшое украшение в преддверии нового года. В принципе ничего нового. Небольшая новогодняя шапка Санта-Клауса на аватар пользователей форума при просмотре тем.

Установка очень простая и занимает всего пару минут.

Для prosilver и его клонов, открываете шаблон viewtopic_body.html, находите:

Код: Выделить всё

<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --><br />


в найденном меняете <a href="{postrow.U_POST_AUTHOR}"> на:

Код: Выделить всё

<a class="santa-hat" href="{postrow.U_POST_AUTHOR}">



Для subsilver2 и его клонов, открываете шаблон viewtopic_body.html, находите:

Код: Выделить всё

<td>{postrow.POSTER_AVATAR}</td>

меняете на:

Код: Выделить всё

<td><a class="santa-hat">{postrow.POSTER_AVATAR}</a></td>



Для обоих клонов.
В тему стиля добавляете (можно просто в самый конец):

Код: Выделить всё

.santa-hat {position: relative;}
.santa-hat:before {
content: '';
position: absolute;
background: url("image/shapka-right.png");
width: 73px;
height: 100px;
margin-top: -10px;
right: -26px;
}


Шапка будет на правом боку аватары, чтобы шапка была слева, замените right на left и поменяйте на изображение с другим наклоном.

Получаем (subsilver2, prosilver):
Изображение Изображение

Ну и собственно сами шапки:
Украшение к новому году. Новогодняя шапка на аватар - shapka_right.png
Украшение к новому году. Новогодняя шапка на аватар - shapka_right.png (12.14 КБ) 2661 просмотр

Украшение к новому году. Новогодняя шапка на аватар - shapka_left.png
Украшение к новому году. Новогодняя шапка на аватар - shapka_left.png (12.26 КБ) 2661 просмотр


Можно конечно использовать свои изображения, только уже под них самим править стили.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Uzanka

Re: Украшение к новому году. Новогодняя шапка на аватар

Uzanka 17 дек 2013, 13:23 Сообщение

Просто шикарно к НГ! Огромное спасибо! Установила. Вроде всё в порядке :Rose: :Rose: :Rose:
Форум Science-Леди www.scienceclub.listbb.ru

Аватара пользователя
silver073000

Re: Украшение к новому году. Новогодняя шапка на аватар

silver073000 17 дек 2013, 15:44 Сообщение

А можно ли совместить это украшение с рамкой вокруг аватарки? :) Код, отвечающий за аватарку, у меня такой

Код: Выделить всё

<!-- IF postrow.POSTER_AVATAR --> <tr> <td class="postavatars" align="center"><a <!-- IF postrow.S_ONLINE and not postrow.S_IGNORE_POST -->title="Пользователь в сети"<!-- ENDIF -->>{postrow.POSTER_AVATAR}</a></td> </tr> <!-- ELSE --> <tr> <td class="postavatars" align="center"><img src="http://gff.5nx.org/images/ranks2/gff_5nx_org/noavatar.gif" alt="" /></td> </tr> <!-- ENDIF -->

И такая вот добавка в теме

Код: Выделить всё

  .postavatars img { background-color: #FFFFFF; padding: 0px; margin: 5px 0 1px; border: 3px solid transparent; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; box-shadow: 0 0 10px 0 #000000; -webkit-box-shadow: 0 0 10px 0 #000000; -moz-box-shadow: 0 0 10px 0 #000000; } .online .postavatars img { border: 3px solid #B0E91D; box-shadow: 0px 0px 10px 0px #560319; -moz-box-shadow: 0px 0px 10px 0px #560319; -webkit-box-shadow: 0px 0px 10px 0px #560319; }

Аватара пользователя
CabinetAdmin

Re: Украшение к новому году. Новогодняя шапка на аватар

CabinetAdmin 17 дек 2013, 16:16 Сообщение

Добавьте после <a класс class="santa-hat". Ну и если что "поиграть" с top: -100px; и right: -26px;, чтобы получить оптимальный вариант.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
silver073000

Re: Украшение к новому году. Новогодняя шапка на аватар

silver073000 17 дек 2013, 20:25 Сообщение

На маленькие аватарки так ложится
Изображение

А на большие так
Изображение

Если подгоняю под большие аватарки, то с маленькой шапка съезжает :)

Аватара пользователя
CabinetAdmin

Re: Украшение к новому году. Новогодняя шапка на аватар

CabinetAdmin 18 дек 2013, 16:07 Сообщение

Да, действительно, про большие аватары не подумал, взял в пример стандарт 100х100.

Замените top: -100px; на margin-top: -10px;.

зы. Сейчас поправлю в инструкции.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
silver073000

Re: Украшение к новому году. Новогодняя шапка на аватар

silver073000 18 дек 2013, 18:43 Сообщение

Вот теперь идеально сидит :Yahoo!: Благодарю за подсказки :drink: :drink: :drink:

Аватара пользователя
eska

Re: Украшение к новому году. Новогодняя шапка на аватар

eska 19 дек 2013, 07:04 Сообщение

BOJIK
Киньте ссылочку в ЛС или тут, хочу глянуть результат


Аватара пользователя
silver073000

Re: Украшение к новому году. Новогодняя шапка на аватар

silver073000 21 дек 2013, 11:02 Сообщение

Заметил такую вещь - часто шапочка вешается на кнопку дополнительной информации.
Изображение

Это на мазиле так. Пробовал на чистой мазиле, без дополнений - результат тот же. На других браузерах нормально. Подскажите, можно ли это как-то исправить? :)

Аватара пользователя
CabinetAdmin

Re: Украшение к новому году. Новогодняя шапка на аватар

CabinetAdmin 21 дек 2013, 14:03 Сообщение

Хм... Заглянул к вам с мазилы, первые несколько секунд, пока страница не загрузилась полностью, шапка была как на скриншоте, потом встала на место. Если честно, не знаю почему мазила так делает :unknown
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
silver073000

Re: Украшение к новому году. Новогодняя шапка на аватар

silver073000 21 дек 2013, 15:31 Сообщение

Ради эксперимента попробовал на чистый стиль установить шапку, то и там такое поведение :scratch: Ох уж эти стандарты браузеров :%)

Bukovka_

Re: Украшение к новому году. Новогодняя шапка на аватар

Bukovka_ 22 дек 2013, 02:42 Сообщение

BOJIK писал(а):Ради эксперимента попробовал на чистый стиль установить шапку, то и там такое поведение :scratch: Ох уж эти стандарты браузеров :%)


У меня тоже половина шапок внизу аватара.

Галина

Re: Украшение к новому году. Новогодняя шапка на аватар

Галина 24 дек 2013, 15:18 Сообщение

А у меня вот здесь повисла....
Изображение

Хотя размер аватарки не большой.... Я тоже с Мозилы захожу. :unknown

Аватара пользователя
CabinetAdmin

Re: Украшение к новому году. Новогодняя шапка на аватар

CabinetAdmin 24 дек 2013, 16:59 Сообщение

Не могу добиться такого же эффекта как у вас... Поставил, но на моём форуме, моя мазила, не хочет также делать - http://demo.cabinetadmina.ru/viewtopic.php?f=2&t=1

Изображение

:unknown
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект



Похожие темы

Вернуться в «HTML модификации»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость