Avatar too big or too small

Go down

Solved Avatar too big or too small

Post by betclever on November 27th 2014, 8:37 pm

Hello all,

Some avatars are too small or too big...
The size is 200x200 but some members have differents avarar sizes...

How can I fix it?

Please find my CSS which is modified:

Code:
dl.icon.newpost { background-color:#FFCC99 !important }

/* Icônes couleur dans la palette */
        
        .color-option {
        display: inline-block !important;
        width: 15px !important;  /* largeur de l'icône couleur */
        height: 15px !important;  /* hauteur de l'icône couleur */
        border: 2px solid #fff !important;  /* cadre blanc sur l'icône couleur */
        margin: 3px !important;   /* espace entre chaque icône */
        box-shadow: 0 0 2px #778899;   /* ombre */
        cursor: pointer !important;
        }
        .color-option span{
        display: block !important;
        width: 15px !important;  /* largeur de l'icône couleur */
        height: 15px !important;  /* hauteur de l'icône couleur */
        }
        .color-option, .color-option span {
        border-radius: 2px;  /* arrondi */  
        }
        
        /* Palette complète - la largeur influence le nombre d'icônes affichées */
        .sceditor-dropdown.sceditor-color-picker {
        width: 200px !important;  /* largeur de la palette complète */
        height: 100px !important;  /* hauteur de la palette complète */
        padding: 5px !important;
        border-radius: 5px !important;
        }


/* CSS PAR SOS-FORUM.COM */

/* General */
#wrap {width: 80%; margin-top: 250px;  -webkit-box-shadow: 0px 0px 12px #000000; -moz-box-shadow: 0px 0px 12px #000000; box-shadow: 0px 0px 12px #000000; padding: 10px; border: 6px solid #ffffff; }
body { padding: 0px; margin: 0px; }
* { -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; transition: color 0.3s ease; }

/* Navbar */
.navbar { background-color: transparent; margin: 0px; padding: 0px; width: auto!important; }
.navbar ul{border-bottom:none; width: auto!important;}
ul.navlinks {  background-color: #008ced; background-image: url('http://i67.servimg.com/u/f67/11/27/24/66/blue15.png'); background-repeat: repeat-x; background-position: top left; position: fixed; top: 0px; left: 0px; z-index: 50; width: auto!important; border-right: 4px solid #ffffff;  border-bottom: 4px solid #ffffff; -webkit-box-shadow: 0px 0px 12px #000000; -moz-box-shadow: 0px 0px 12px #000000; box-shadow: 0px 0px 12px #000000; -moz-border-radius: 0px 0px 10px 0px; -webkit-border-radius: 0px 0px 10px 0px; border-radius: 0px 0px 10px 0px; -khtml-border-radius: 0px 0px 10px 0px; padding: 2px; }

/* Menu Links */
.mainmenu { -moz-border-radius: 10px 2px 10px 2px; -webkit-border-radius: 10px 2px 10px 2px; border-radius: 10px 2px 10px 2px; -khtml-border-radius: 10px 2px 10px 2px; border: 2px solid #ffffff; padding: 5px; background-color: #E0F4FF; -webkit-box-shadow: 0px 0px 4px #000000; -moz-box-shadow: 0px 0px 4px #000000; box-shadow: 0px 0px 4px #000000; display: block; margin: 6px; }
.mainmenu:hover { background-color: #FAE3BB; -moz-transform: rotate(12deg);  transform: rotate(12deg); }
.mainmenu:focus { background-color: #FABBBB; -moz-transform: rotate(24deg);  transform: rotate(24deg); }

/* Round  */
#wrap { -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; -khtml-border-radius:20px; }
        
        
        table
        {
        -moz-border-radius:10px;
        -webkit-border-radius:10px;
        border-radius:10px;
         -khtml-border-radius:10px;
         }
        

/* Header, Modules, Forums & Messages  */
.forabg, .forumbg, .post, .module { -webkit-box-shadow: 0px 0px 6px #6F7B82; -moz-box-shadow: 0px 0px 6px #6F7B82; box-shadow: 0px 0px 6px #6F7B82; border: 4px solid #ffffff;   }
.forabg, .forumbg, .module { background-color: #044E8F; background-image: url(''); background-repeat: repeat-x; background-position: top left;  }
.module .inner {background-color: #ffffff; padding: 2px!important;}
.module {padding: 5px!important;}
.module .h3 {text-align: center;}

/* Profiles  */
.postprofile { background: #B8DDF2; padding: 4px; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -khtml-border-radius:10px; border:none; }

/* Borders  */
ul.topiclist dd, ul.forums dd, li.row:hover dd  { border-left: none; }

/* Searchbox  */
#search-box { position: absolute; top : 24px; right: 12%;  -webkit-box-shadow: 0px 0px 6px #000000; -moz-box-shadow: 0px 0px 6px #000000; box-shadow: 0px 0px 6px #000000;}
#search-box input#keywords { -moz-border-radius: 8px 0px 0px 8px; -webkit-border-radius: 8px 0px 0px 8px; border-radius: 8px 0px 0px 8px;}
#search-box input.button2 { -moz-border-radius: 0px 8px 8px 0px; -webkit-border-radius: 0px 8px 8px 0px; border-radius: 0px 8px 8px 0px; border-left: none; }

/* Admin Text */
.introduction { -webkit-box-shadow: 0px 0px 6px #6F7B82; -moz-box-shadow: 0px 0px 6px #6F7B82; box-shadow: 0px 0px 6px #6F7B82; border: 4px solid #ffffff; color: #ffffff;  background-color: #044E8F; background-image: url(''); background-repeat: repeat-x; background-position: top left; }
.introduction .h3 {color: #ffffff; border-color: #ffffff; padding-left: 10px; background: transparent url('http://i67.servimg.com/u/f67/11/27/24/66/i_up_a11.gif')  left no-repeat;}

/* Header */
.headerbar {position: absolute; top: 0px; left: 0px;  width: 99%; background: transparent url('http://i67.servimg.com/u/f67/11/27/24/66/previe16.png') scroll top center no-repeat; height: 250px;}


/* Profils */
.postprofile a img { -webkit-box-shadow: 0px 0px 6px #6F7B82; -moz-box-shadow: 0px 0px 6px #6F7B82; box-shadow: 0px 0px 6px #6F7B82; border: 4px solid #ffffff;  -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -khtml-border-radius:10px; background: #E8E8E8;  }

.postprofile a img:hover { -webkit-box-shadow: 0px 0px 6px #044E8F; -moz-box-shadow: 0px 0px 6px #044E8F; box-shadow: 0px 0px 6px #044E8F; }
  
.qeel a {
font-weight: bold;
}

#google_translate_element {
width: 124px;
overflow: hidden;
}
#google_translate_element select { width: 124px; font-weight: bold; border: 3px solid blue; color: red; text-align: center;
}

.usersavatar img { width:50% }

    .fa_avatar img {
      width:25px;
      height:25px;
      margin-right:5px;
      margin-bottom:-6px;
      -webkit-border-radius:3px;
         -moz-border-radius:3px;
              border-radius:3px;
    }

    /* Warning buttons */
    
    .mod_mess, .adm_mess {
    margin: 5px auto;
    width: 90%;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    }
    
    .mod_mess a.postlink, .adm_mess a.postlink {
    color: #FFF !important;
    text-decoration: underline !important;
    }
    
    /* Administrator bb-Code - message block */
    
    .adm_mess {
    background: #e54858;
    background: -moz-linear-gradient(left, #e54858 0%, #f5b57a 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #e54858), color-stop(100%, #f5b57a));
    background: -webkit-linear-gradient(left, #e54858 0%, #f5b57a 100%);
    background: -o-linear-gradient(left, #e54858 0%, #f5b57a 100%);
    background: -ms-linear-gradient(left, #e54858 0%, #f5b57a 100%);
    background: linear-gradient(left, #e54858 0%, #f5b57a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e54858", endColorstr="#f5b57a", GradientType=1);
    -webkit-box-shadow: 4px 4px 0px 0px #352727;
    -moz-box-shadow: 4px 4px 0px 0px #352727;
    box-shadow: 4px 4px 0px 0px #352727;
    }
    
    /* Administrator bb-Code - title */
    .adm_mess .titl {
    font-size: 15px;
    font-weight: bold;
    padding: 5px;
    border-bottom: 1px dashed #B60505;
    }
      
    /* Administrator BB-Code - text presentation */
    .adm_mess .titl + div {
    display: block;
    margin-left: 10px;
    padding: 25px 5px 25px 80px;
    background: transparent url(http://i33.servimg.com/u/f33/17/37/83/89/gnome-10.png) no-repeat left center;
    }
    
    /* Moderator BB-Code - message block */
    
    .mod_mess {
    background: #5c93f5;
    background: -moz-linear-gradient(left, #5c93f5 0%, #afcfda 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #5c93f5), color-stop(100%, #afcfda));
    background: -webkit-linear-gradient(left, #5c93f5 0%, #afcfda 100%);
    background: -o-linear-gradient(left, #5c93f5 0%, #afcfda 100%);
    background: -ms-linear-gradient(left, #5c93f5 0%, #afcfda 100%);
    background: linear-gradient(left, #5c93f5 0%, #afcfda 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5c93f5", endColorstr="#afcfda", GradientType=1);
    -webkit-box-shadow: 4px 4px 0px 0px #352727;
    -moz-box-shadow: 4px 4px 0px 0px #352727;
    box-shadow: 4px 4px 0px 0px #352727;
    }
    
    /* Moderator BB-Code - title */
    .mod_mess .titl {
    font-size: 15px;
    font-weight: bold;
    padding: 5px;
    border-bottom: 1px dashed #0D4DD3;  
    }
      
    /* Moderator BB-Code - text presentation */
    .mod_mess .titl + div {
    display: block;
    margin-left: 10px;
    padding: 25px 5px 25px 80px;
    background: transparent url(http://i33.servimg.com/u/f33/17/37/83/89/gnome610.png) no-repeat left center;
    }

    #search-box { display:none }

.twitter-timeline.twitter-timeline-rendered { min-width: 0 !important; height: 350px; }
#right { margin: 20px 0 0 0px; }

    br.clear { display:none }

    .module { border-radius:4px }

    #postingbox.panel, .panel.introduction, div.post, .forabg, .forumbg, .module { border-radius:8px }    

    .forabg, .forumbg, .post, .module { box-shadow:none }

    .descImg {
      /* properties.. */
    }

     ul.navlinks a { display:inline }
    ul.navlinks {
      position:absolute;
      border:4px solid #FFF;
      border-radius:6px;
      padding:6px;
      top:210px;
      left:35%;
    }
    a.mainmenu[href*="gallery"], a.mainmenu[href="/groups"] { display:none }

      .linklist.navlinks.borderless {
      border:none !important;
      background:none !important;
      box-shadow:none !important;
    }

    .linklist.navlinks.borderless {
      left:0 !important;
      right:0 !important;
      text-align:center;
    }

    ul.navlinks {
      left:0 !important;
      right:0 !important;
      text-align:center;
      background:none !important;
      border:none !important;
      box-shadow:none !important;
    }

    .linklist.navlinks li { margin:0 -3px }

    .new-message { color:#F00 !important }

    
     .forabg ul:not(.pmlist) dl.icon {
  background-image:none !important;
  position:relative;
}

        .blocImg {
          width:50px;
          background-repeat:no-repeat;
          background-position:center;
          position:absolute;
          left:0;
          top:0;
          bottom:0;
        }

Thanks,


Last edited by betclever on November 27th 2014, 11:39 pm; edited 1 time in total

betclever
Forumember

Posts : 209
Reputation : 2
Language : english

http://www.betclever.net

Back to top Go down

Solved Re: Avatar too big or too small

Post by Mati on November 27th 2014, 8:42 pm

users avatar on posts, or on index ?
avatar
Mati
Active Poster

Posts : 1909
Reputation : 291
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://forumdirectory.forumotion.net/

Back to top Go down

Solved Re: Avatar too big or too small

Post by betclever on November 27th 2014, 8:46 pm

Hello,

On posts.
I forgot to give my website: www.betclever.net

betclever
Forumember

Posts : 209
Reputation : 2
Language : english

http://www.betclever.net

Back to top Go down

Solved Re: Avatar too big or too small

Post by Mati on November 27th 2014, 8:49 pm

In your CSS find

Code:
.usersavatar img {
    width: 50%;
}

Add replace it with this

Code:
.usersavatar img {
    width: 80px;
    height: 80px;
}
avatar
Mati
Active Poster

Posts : 1909
Reputation : 291
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://forumdirectory.forumotion.net/

Back to top Go down

Solved Re: Avatar too big or too small

Post by _Twisted_Mods_ on November 27th 2014, 8:51 pm

if that dont work try this

Code:
.postdetails a[href*="/u"] img{
min-width:100px
 max-width:150px
}
avatar
_Twisted_Mods_
Helper
Helper

Male Posts : 2064
Reputation : 314
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Solved Re: Avatar too big or too small

Post by betclever on November 27th 2014, 9:04 pm

Hello guys,

It works with the first post.
I put 180x180 to have a better size.

Thanks guys!

betclever
Forumember

Posts : 209
Reputation : 2
Language : english

http://www.betclever.net

Back to top Go down

Solved Re: Avatar too big or too small

Post by betclever on November 27th 2014, 9:10 pm

Just another problem occurs since I have changed the code; see print screen:



In fact, the avatars are shifted to the right after I did the change.
This problem appears on mobile devices when users use the web edition and on the forum too so with the browser with a pc.


Thanks,

betclever
Forumember

Posts : 209
Reputation : 2
Language : english

http://www.betclever.net

Back to top Go down

Solved Re: Avatar too big or too small

Post by betclever on November 27th 2014, 9:24 pm

Ok, I have changed to 150x150 and its okay.

betclever
Forumember

Posts : 209
Reputation : 2
Language : english

http://www.betclever.net

Back to top Go down

Solved Re: Avatar too big or too small

Post by SLGray on November 29th 2014, 7:54 pm

Topic solved and archived



When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 43498
Reputation : 3094
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum