The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Avatar too big or too small

View previous topic View next topic 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 ?

Mati
Active Poster

Posts : 1873
Reputation : 281
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://elite-gaming.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;
}

Mati
Active Poster

Posts : 1873
Reputation : 281
Language : || HTML || CSS || jQuery ||
Location : At the Gym

http://elite-gaming.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
}

_Twisted_Mods_
Helper
Helper

Male Posts : 2020
Reputation : 299
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.


SLGray
Administrator
Administrator

Male Posts : 35672
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


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