Важная информация!
Правила форума
для обязательного прочтения!
Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
(забыл / потерял пароль)
Общий FAQ по управлению форумом
FAQ: реклама на форуме
Туториалы по разным функциям ваших форумов
Алфавитный указатель
Интересные решения для форумов
Наши видео-туториалы
Условия пользования сервисом
Ссылки на полезные ресурсы
Последние темы
» Как убрать подпись о редактировании записиавтор Фея Май 9th 2024, 21:11
» Пакеты Forum 2x2
автор Dana Domirani Май 6th 2024, 14:11
» Как поменять вид нумерации страниц тем?
автор Goodmonday Апрель 18th 2024, 21:04
» Форум не корректно загружается.
автор anna4842 Апрель 12th 2024, 23:48
» Не корректное отображение картинок
автор Красноперова О.А. Апрель 12th 2024, 15:49
» Ошибка на форуме: Could not obtain topic posts informations
автор fatalone Апрель 9th 2024, 13:43
» Переход с 2x2forum.ru на 2x2forum.com
автор Luz Март 28th 2024, 12:13
» Проблема с метатегом Description
автор VeraLV Март 18th 2024, 15:31
» 1 марта будет запрет на ВПН, это отразится на работе платформы?
автор Svet007 Март 14th 2024, 11:43
» нужен скрипт сумма просмотров тем в разделе
автор лексей2222 Март 5th 2024, 07:37
Рамка аватара с наклоном
Страница 1 из 1
Рамка аватара с наклоном
Здравствуйте решил я сделать на bb2 рамку аватара с наклоном.
У меня уже стоит иконку онлайн и оффлайн, а так же уменьшение яркости аватара при оффлайне и увелечение яркости аватара при онлайне.
Итак ПА -> Оформление -> Цвета -> Каскадная таблица стилей
У меня было вот так:
А стало вот так:
В куске:
Данный кусок я сгенерировал на вот этом сайте предоставленном Даной Домирани вот в этой теме.
Дальше мне надо было добавить в самый конец моей css силектор из вот этой темы Comatose. Но полностью весь его код css мне не потребовался. У Comatose код css для bb2 выглядел вот так:
Так как мне часть данных селекторов не нужны были я этот код урезал под себя и получил вот такой код:
И тут мы закончили с CSS. Дальше предстояло то в чем я абсолютный профан. Коды.
ПА -> Оформление -> Шаблон "viewtopic_body"
У кого этот шаблон в области аватар не тронут скажу сразу нам потребуется кусок от 139 до 150 строки.
У меня этот код выглядел вот так учитывая все установленное ранее:
Так как я не добавлял сгенерированный силектор в конец css а добавил к эффектам на аватаре то мне осталось приписать к этой строке:
Следовательно мой кусок кода стал выглядеть вот так:
Дальше этот шаблон сохраняется и опубликовывается.
И теперь мы видим на форуме вот такое:
На данный момент я пытаюсь разрешить вопрос наклона и кнопки онлайн вместе с аватарой, но буду рад если поможете.
Если я кому-либо из Вас помог это хорошо))))
У меня уже стоит иконку онлайн и оффлайн, а так же уменьшение яркости аватара при оффлайне и увелечение яркости аватара при онлайне.
Итак ПА -> Оформление -> Цвета -> Каскадная таблица стилей
У меня было вот так:
- Код:
/* скрыть дубль-иконку над аватаром */
.avaonline img.i_icon_online {
display: none;
}
/* настройки аватар по умолчанию */
.avaonline img {
opacity: 0.3;
}
/* аватары онлайн */
img.i_icon_online + a img {
opacity: 1;
}
А стало вот так:
- Код:
/* скрыть дубль-иконку над аватаром */
.avaonline img.i_icon_online {
display: none;
}
/* настройки аватар по умолчанию */
.avaonline img {
opacity: 0.3;
}
/* аватары онлайн */
img.i_icon_online + a img {
opacity: 1;
}
.avabor img {
border-style: solid;
border-width: 9px 8px 9px 9px;
-moz-border-image: url(http://imgs.su/users/26146/1415746986.jpg) 9 8 9 9 repeat;
-webkit-border-image: url(http://imgs.su/users/26146/1415746986.jpg) 9 8 9 9 repeat;
-o-border-image: url(http://imgs.su/users/26146/1415746986.jpg) 9 8 9 9 repeat;
border-image: url(http://imgs.su/users/26146/1415746986.jpg) 9 8 9 9 repeat;
}
В куске:
- Код:
-moz-border-image: url(http://imgs.su/users/26146/1415746986.jpg) 9 8 9 9 repeat;
-webkit-border-image: url(http://imgs.su/users/26146/1415746986.jpg) 9 8 9 9 repeat;
-o-border-image: url(http://imgs.su/users/26146/1415746986.jpg) 9 8 9 9 repeat;
border-image: url(http://imgs.su/users/26146/1415746986.jpg) 9 8 9 9 repeat;
Данный кусок я сгенерировал на вот этом сайте предоставленном Даной Домирани вот в этой теме.
Дальше мне надо было добавить в самый конец моей css силектор из вот этой темы Comatose. Но полностью весь его код css мне не потребовался. У Comatose код css для bb2 выглядел вот так:
- Код:
.poster-profile img{
margin-left: 3px;
border: 5px solid #eee;
-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.poster-profile img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
Так как мне часть данных селекторов не нужны были я этот код урезал под себя и получил вот такой код:
- Код:
.poster-profile img{
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.poster-profile img:hover {
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
}
И тут мы закончили с CSS. Дальше предстояло то в чем я абсолютный профан. Коды.
ПА -> Оформление -> Шаблон "viewtopic_body"
У кого этот шаблон в области аватар не тронут скажу сразу нам потребуется кусок от 139 до 150 строки.
У меня этот код выглядел вот так учитывая все установленное ранее:
- Код:
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="200"><div style="overflow: visible; width: 200px">
<span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
<span class="postdetails poster-profile">
{postrow.displayed.POSTER_RANK}<br />
{postrow.displayed.RANK_IMAGE}<br />
<div class="ava"><div class="avaonline">{postrow.displayed.ONLINE_IMG}{postrow.displayed.POSTER_AVATAR}</div></div><span class="prfav">{postrow.displayed.ONLINE_IMG}</span>
<br /><br />
<div class="prf">
<div class="user-in">
<img src="http://i24.servimg.com/u/f24/16/54/26/99/prof10.png" class="prfimg" alt="Профиль" title="Профиль" />
<div class="user-info">
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}
</span><br />
<img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
</div>
</div>
</div>
</div></td>
Так как я не добавлял сгенерированный силектор в конец css а добавил к эффектам на аватаре то мне осталось приписать к этой строке:
- Код:
<div class="ava"><div class="avaonline">{postrow.displayed.ONLINE_IMG}{postrow.displayed.POSTER_AVATAR}</div></div><span class="prfav">{postrow.displayed.ONLINE_IMG}</span>
- Код:
<div class="ava"><div class="avaonline"><div class="avabor">{postrow.displayed.ONLINE_IMG}{postrow.displayed.POSTER_AVATAR}</div></div></div><span class="prfav">{postrow.displayed.ONLINE_IMG}</span>
Следовательно мой кусок кода стал выглядеть вот так:
- Код:
<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="200"><div style="overflow: visible; width: 200px">
<span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
<span class="postdetails poster-profile">
{postrow.displayed.POSTER_RANK}<br />
{postrow.displayed.RANK_IMAGE}<br />
<div class="ava"><div class="avaonline"><div class="avabor">{postrow.displayed.ONLINE_IMG}{postrow.displayed.POSTER_AVATAR}</div></div></div><span class="prfav">{postrow.displayed.ONLINE_IMG}</span>
<br /><br />
<div class="prf">
<div class="user-in">
<img src="http://i24.servimg.com/u/f24/16/54/26/99/prof10.png" class="prfimg" alt="Профиль" title="Профиль" />
<div class="user-info">
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}
</span><br />
<img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
</div>
</div>
</div>
</div></td>
Дальше этот шаблон сохраняется и опубликовывается.
И теперь мы видим на форуме вот такое:
На данный момент я пытаюсь разрешить вопрос наклона и кнопки онлайн вместе с аватарой, но буду рад если поможете.
Если я кому-либо из Вас помог это хорошо))))
Похожие темы
» Рамка для аватара.
» Рамка вокруг аватара
» Профиль или рамка аватара
» Рамка вокруг аватара
» Рамка вокруг аватара
» Рамка вокруг аватара
» Профиль или рамка аватара
» Рамка вокруг аватара
» Рамка вокруг аватара
Страница 1 из 1
Права доступа к этому форуму:
Вы не можете отвечать на сообщения