Изменить аватарку на InstantCMS2

#16 27 августа 2015 в 17:30

Благодарю!

Амаль
И у Вас ошибка:
вместо <a href="/profile/<?php echo $profile['id']; ?>
нужно <a href="/users/<?php echo $profile['id']; ?>
#18 15 ноября 2015 в 13:19
Приветствую!
Уважаемое сообщество, помогите с этим моментом по изменению аватарки при наведении на нее.
Что то я совсем не понял как правильно сделать и у меня ничего не получается… cry
#19 14 сентября 2018 в 12:14


Приветствую!
Уважаемое сообщество, помогите с этим моментом по изменению аватарки при наведении на нее.
Что то я совсем не понял как правильно сделать и у меня ничего не получается… cry

skewes

Привет сам сейчас делал подобную функцию, и выкладываю ответ -может еще актуально.
(делал себе на 1 ветку) в принципе там вывод кнопки и аватара только изменить под 2 ветку

Стили -

  1.  
  2. /*при на ведении на аватар смена фото*/
  3. .thumbs {
  4. width: 100%;
  5. max-width: 450px; /* опционально */
  6. margin: 10px;
  7. opacity: .99;
  8. overflow: hidden;
  9. position: relative;
  10. border-radius: 3px;
  11. cursor: pointer;
  12. }
  13. .thumbs:before {
  14. content: '';
  15. background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  16. background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  17. width: 100%;
  18. height: 50%;
  19. opacity: 0;
  20. position: absolute;
  21. top: 100%;
  22. left: 0;
  23. z-index: 2;
  24. -webkit-transition-property: top, opacity;
  25. transition-property: top, opacity;
  26. -webkit-transition-duration: 0.3s;
  27. transition-duration: 0.3s;
  28. }
  29. .thumbs img {
  30. display: block;
  31. width: 100%; /* ширина картинки */
  32. height: auto; /* высота картинки */
  33. backface-visibility: hidden;
  34. -webkit-backface-visibility: hidden;
  35. }
  36. .thumbs .caption {
  37. width: 100%;
  38. padding-bottom: 20px;
  39. color: #fff;
  40. position: absolute;
  41. bottom: 0;
  42. left: 0;
  43. z-index: 3;
  44. text-align: center;
  45. }
  46. .thumbs .caption span {
  47. display: block;
  48. opacity: 0;
  49. position: relative;
  50. top: 100px;
  51. -webkit-transition-property: top, opacity;
  52. transition-property: top, opacity;
  53. -webkit-transition-duration: 0.3s;
  54. transition-duration: 0.3s;
  55. -webkit-transition-delay: 0s;
  56. transition-delay: 0s;
  57. }
  58. .thumbs .caption .title {
  59. line-height: 1;
  60. font-weight: normal;
  61. font-size: 18px;
  62. }
  63. .thumbs .caption .info {
  64. line-height: 1.2;
  65. margin-top: 5px;
  66. font-size: 12px;
  67. }
  68. .thumbs:focus:before,
  69. .thumbs:focus span, .thumbs:hover:before,
  70. .thumbs:hover span {
  71. opacity: 1;
  72. }
  73. .thumbs:focus:before, .thumbs:hover:before {
  74. top: 50%;
  75. }
  76. .thumbs:focus span, .thumbs:hover span {
  77. top: 0;
  78. }
  79. .thumbs:focus .title, .thumbs:hover .title {
  80. -webkit-transition-delay: 0.15s;
  81. transition-delay: 0.15s;
  82. }
  83. .thumbs:focus .info, .thumbs:hover .info {
  84. -webkit-transition-delay: 0.25s;
  85. transition-delay: 0.25s;
  86. }
  87.  
  88.  
В файл com_users_profile

  1.  
  2. <div class="thumbs">
  3. <div class="usr_avatar">
  4. <img alt="{$usr.nickname|escape:'html'}" class="usr_img" src="{$usr.avatar}" />
  5. </div>
  6. {if $myprofile || $is_admin}
  7. <div class="caption">
  8. <span class="title"><a class="avatar"style="color: #fff !important;" href="/users/{$usr.id}/avatar.html" title="{$LANG.SET_AVATAR}">{$LANG.SET_AVATAR}</a></span>
  9. </div>
  10. {/if}
  11. </div>
  12.  
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.