Announcement

Collapse
No announcement yet.

Tip for round avatars

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • 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:	110
Size:	90.1 KB
ID:	1594
    Similar Threads

  • Font Size
    #2
    thanks bro
    chicoynano chicoynano likes this.

    Comment


    • Font Size
      #3
      I applied it and it became much more stylish. Thanks.
      chicoynano chicoynano likes this.

      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????
          chicoynano chicoynano likes this.
          I invite you to visit my IPS forum 👍
          I invite you to visit my vB5 forum 👍

          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.
            bosss bosss yilmaz yilmaz like this.

            Comment


            • Font Size
              #7
              Originally posted by bosss View Post

              bonus.css????
              css additional
              bosss bosss likes this.

              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

                    chicoynano chicoynano likes this.
                    I invite you to visit my IPS forum 👍
                    I invite you to visit my vB5 forum 👍

                    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:	79
Size:	256.9 KB
ID:	1749
                      bosss bosss likes this.

                      Comment

                      X

                      Thread Information

                      Collapse

                      Users Browsing this Thread

                      There are currently 1 users browsing this thread. (0 members and 1 guests)

                        Those who read this thread

                        Collapse

                        Members who have read this thread: 4

                        Working...
                        X

                        AdBlock Detected

                        Please Disable Adblock

                        Please consider supporting us by disabling the ad blocker.

                        I've Disabled AdBlock