Announcement

Collapse
No announcement yet.

Tip for round avatars

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Font Size
    #1

    Tip for round avatars

    If you have round avatars on your site, here is a tip to show round borders on avatars in yilmazforumstats product as well.
    First option add this to your ADDITIONAL CSS

    Code:
    .ylmz-ForumStatistics-Body .ylmzStatisticsList .ylmzStatisticsDatas .StatisticsAvatar .yilmazforumstats-avatar.yilmazforumstats-avatar--s {

border-radius: 18px;
}
    Second option that is recommended edit the yilmazforumstats.css file

    Look at roughly line 327 and change the border-radius value: 3px; for the convenient one for its better visualization in my case I changed it to 18px;

    Click image for larger version Name: border radius.png Views: 199 Size: 90.1 KB ID: 1594
    Tags: avatars, round, tip
    • Likes 3
  • Font Size
    #2
    thanks bro
    • Likes 1

    Comment

    • Font Size
      #3
      I applied it and it became much more stylish. Thanks.
      • Likes 1

      Comment

      • Font Size
        #4
        How get rounded avatars on forumhome (lastpost) and in memberinfo (postbit)?
        I invite you to visit my IPS forum 👍
        I invite you to visit my vB5 forum 👍

        Comment

        • Font Size
          #5


          Bonus.css????
          I invite you to visit my IPS forum 👍
          I invite you to visit my vB5 forum 👍
          • Likes 1

          Comment

          • Font Size
            #6
            UPDATEDCopy this code into your ADDITIONAL CSS, it will show round avatars and when you hover it zooms in.

            Code:
            .avatar img, .avatar:not(.medium) > img, .b-avatar:not(.b-avatar--m) > img, .b-avatar--thread > img, .b-comment .b-avatar img, .b-comp-menu-dropdown__trigger-avatar, .profile-sidebar-widget .profileContainer .profile-photo-wrapper .profile-photo {
border-radius: 100%;
}

.avatar,.b-avatar:not(.b-avatar--m){height:50px; width:50px;border:0}
.avatar img{border-radius:100%;box-shadow:0px 0px 3px rgba(0,0,0,.2);background:#fff}
.avatar:not(.medium) > img,.b-avatar:not(.b-avatar--m) > img,img.avatar{max-height:50px !important; max-width:50px !important;border-radius:100%;border:1px solid #fff; margin:-1px}
img.avatar{margin-right:10px;}.forum-list-container .forum-item .lastpost > .lastpost-wrapper > .avatar + .lastpost-info{padding-left:60px}
.b-comment__author,.b-avatar--thread{height:100px; width:100px}
.b-avatar--thread > img{max-height:100px; max-width:100px !important; width:100px; height:100px; box-shadow:0 3px 8px rgba(0,0,0,.18),0 4px 16px rgba(0,0,0,.36);border-radius:100%;border:1px solid #C8CCCE;background:#fff}
.l-desktop .b-avatar--thread{height:150px; width:150px;border:0}.l-desktop .b-avatar--thread > img{max-height:150px; max-width:150px !important; width:150px; height:150px;border-radius:100%}
.avatar img,.b-comment .b-avatar img,.b-avatar--s > img{box-shadow:0 3px 4px rgba(0,0,0,.10),0 -1px 10px rgba(0,0,0,.2);border-radius:100%;background:#fff;border:1px solid #fff}
.b-comment .b-avatar img{width:100%;height:100%}
.l-small .b-userinfo .b-avatar{border:0}
.l-desktop .b-avatar--thread > img,.l-desktop .avatar img,.l-desktop .b-avatar img,.b-avatar--s > img,.l-desktop .slider-avatar{transition:transform .2s ease,box-shadow .2s ease}
.l-desktop .b-avatar--thread > img:hover{transform:scale(1.05) !important;box-shadow:0 4px 14px rgba(0,0,0,.18),0 6px 18px rgba(0,0,0,.36) !important}
.l-desktop .avatar img:hover,.l-desktop .b-avatar img:hover,.l-desktop .slider-avatar:hover,.l-desktop .forum-list-container .forum-item:hover .avatar img,.l-desktop .b-post-sm:hover .avatar img,.l-desktop .topic-list-container .topic-list .topic-item:hover .avatar img,.l-desktop .js-memberlist-table-body .b-table__row:hover .b-avatar--s > img{transform:scale(1.15); box-shadow:0 5px 6px rgba(0,0,0,.10),0 -3px 12px rgba(0,0,0,.2)}
.l-desktop .js-memberlist-table-body .b-table__row:hover{background:rgba(230,249,255,0.4)}
.l-desktop .slider-avatar:hover,.l-desktop .b-content-slider__slide:hover .slider-avatar{transform:scale(1.05) !important}
.l-desktop .b-comment .b-media{padding:5px}
.b-comp-menu-dropdown__trigger-avatar{border-radius:100%}
}
            Last edited by chicoynano; 15.03.21, 02:31.
            • Likes 2

            Comment

            • Font Size
              #7
              Originally posted by bosss View Post

              bonus.css????
              css additional
              • Likes 1

              Comment

              • Font Size
                #8
                Originally posted by chicoynano View Post
                UPDATEDCopy this code into your ADDITIONAL CSS, it will show round avatars and when you hover it zooms in.

                Code:
                .avatar img, .avatar:not(.medium) > img, .b-avatar:not(.b-avatar--m) > img, .b-avatar--thread > img, .b-comment .b-avatar img, .b-comp-menu-dropdown__trigger-avatar, .profile-sidebar-widget .profileContainer .profile-photo-wrapper .profile-photo {
border-radius: 100%;
}

.avatar,.b-avatar:not(.b-avatar--m){height:50px; width:50px;border:0}
.avatar img{border-radius:100%;box-shadow:0px 0px 3px rgba(0,0,0,.2);background:#fff}
.avatar:not(.medium) > img,.b-avatar:not(.b-avatar--m) > img,img.avatar{max-height:50px !important; max-width:50px !important;border-radius:100%;border:1px solid #fff; margin:-1px}
img.avatar{margin-right:10px;}.forum-list-container .forum-item .lastpost > .lastpost-wrapper > .avatar + .lastpost-info{padding-left:60px}
.b-comment__author,.b-avatar--thread{height:100px; width:100px}
.b-avatar--thread > img{max-height:100px; max-width:100px !important; width:100px; height:100px; box-shadow:0 3px 8px rgba(0,0,0,.18),0 4px 16px rgba(0,0,0,.36);border-radius:100%;border:1px solid #C8CCCE;background:#fff}
.l-desktop .b-avatar--thread{height:150px; width:150px;border:0}.l-desktop .b-avatar--thread > img{max-height:150px; max-width:150px !important; width:150px; height:150px;border-radius:100%}
.avatar img,.b-comment .b-avatar img,.b-avatar--s > img{box-shadow:0 3px 4px rgba(0,0,0,.10),0 -1px 10px rgba(0,0,0,.2);border-radius:100%;background:#fff;border:1px solid #fff}
.b-comment .b-avatar img{width:100%;height:100%}
.l-small .b-userinfo .b-avatar{border:0}
.l-desktop .b-avatar--thread > img,.l-desktop .avatar img,.l-desktop .b-avatar img,.b-avatar--s > img,.l-desktop .slider-avatar{transition:transform .2s ease,box-shadow .2s ease}
.l-desktop .b-avatar--thread > img:hover{transform:scale(1.05) !important;box-shadow:0 4px 14px rgba(0,0,0,.18),0 6px 18px rgba(0,0,0,.36) !important}
.l-desktop .avatar img:hover,.l-desktop .b-avatar img:hover,.l-desktop .slider-avatar:hover,.l-desktop .forum-list-container .forum-item:hover .avatar img,.l-desktop .b-post-sm:hover .avatar img,.l-desktop .topic-list-container .topic-list .topic-item:hover .avatar img,.l-desktop .js-memberlist-table-body .b-table__row:hover .b-avatar--s > img{transform:scale(1.15); box-shadow:0 5px 6px rgba(0,0,0,.10),0 -3px 12px rgba(0,0,0,.2)}
.l-desktop .js-memberlist-table-body .b-table__row:hover{background:rgba(230,249,255,0.4)}
.l-desktop .slider-avatar:hover,.l-desktop .b-content-slider__slide:hover .slider-avatar{transform:scale(1.05) !important}
.l-desktop .b-comment .b-media{padding:5px}
.b-comp-menu-dropdown__trigger-avatar{border-radius:100%}
}
                Problem is with online avatars (when you click online users)
                this code
                .avatar.xx-small > img

                is disabled

                have you some tip?
                I invite you to visit my IPS forum 👍
                I invite you to visit my vB5 forum 👍

                Comment

                • Font Size
                  #9
                  Problem is with online avatars (when you click online users)
                  this code
                  .avatar.xx-small > img

                  is disabled

                  have you some tip?
                  I don't really understand what you mean if you can give more information about the problem? Thanks

                  Comment

                  • Font Size
                    #10
                    Originally posted by chicoynano View Post

                    I don't really understand what you mean if you can give more information about the problem? Thanks
                    Go here and maybe you will see what i mean (there are avatars to big - was on my site)

                    https://foro4g.com/online


                    I invite you to visit my IPS forum 👍
                    I invite you to visit my vB5 forum 👍
                    • Likes 1

                    Comment

                    • Font Size
                      #11
                      Go here and maybe you will see what i mean (there are avatars to big )

                      https://foro4g.com/online
                      I have them customized in ADDITIONAL CSS
                      Anyway, the measurements as you can see in the image are not too big for my taste, but you can modify them to your liking

                      Click image for larger version Name: Captura de pantalla 2021-03-16 a las 17.58.23.png Views: 109 Size: 256.9 KB ID: 1749
                      • Likes 1

                      Comment

                      Previous template Next
                      X

                      Thread Information

                      Collapse
                      Users Browsing this Thread

                      Those who read this thread

                      Collapse
                      Working...
                      X

                      We process personal data about users of our site, through the use of cookies and other technologies, to deliver our services, personalize advertising, and to analyze site activity. We may share certain information about our users with our advertising and analytics partners. For additional details, refer to our Privacy Policy.

                      By clicking "I AGREE" below, you agree to our Privacy Policy and our personal data processing and cookie practices as described therein. You also acknowledge that this forum may be hosted outside your country and you consent to the collection, storage, and processing of your data in the country where this forum is hosted.

                      I Agree

                      AdBlock Detected

                      Please Disable Adblock

                      Please consider supporting us by disabling the ad blocker.

                      I've Disabled AdBlock
                      ▲ Home ▼