Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях

Правила форума

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Интересные решения
Быстрый переход к сервисам: Savepic Видео фоторедактор Транслит

Рамка аватара с наклоном

Предыдущая тема Следующая тема Перейти вниз

Рамка аватара с наклоном

Сообщение автор Сергей Александрович в Ср 12 Ноя - 3:19

Здравствуйте решил я сделать на bb2 рамку аватара с наклоном.
У меня уже стоит иконку онлайн и оффлайн, а так же уменьшение яркости аватара при оффлайне и увелечение яркости аватара при онлайне.

Итак ПА -> Оформление -> Цвета -> Каскадная таблица стилей
У меня было вот так:
Код:
/* скрыть дубль-иконку над аватаром */
.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;
я использовал ссылку на рамку нарисованную мною в паинте размером 150*150




Данный кусок я сгенерировал на вот этом сайте предоставленном Даной Домирани вот в этой теме.

Дальше мне надо было добавить в самый конец моей 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>


Дальше этот шаблон сохраняется и опубликовывается.
И теперь мы видим на форуме вот такое:



На данный момент я пытаюсь разрешить вопрос наклона и кнопки онлайн вместе с аватарой, но буду рад если поможете.

Если я кому-либо из Вас помог это хорошо))))

Сергей Александрович
 

Мужчина

Сообщения : 613
Возраст : 50
Место обитания : МВД РФ
Настроение : Сколько не говори, что умный, а дела показывают лучше.
Регистрация : 2014-11-03
Благодарности : 200

Без предупреждений

http://help.forum2x2.ru/

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения