a ilttile problem with Avatar Script

in the first place i think this Scrip was on punbb.biz
trying to use this Script in phpbb2 is making a little problem
in template find {postrow.displayed.POSTER_AVATAR}
and replace with

Code:

<div class="imgholder"><div class="outer1 circle"></div><div class="outer2 circle"></div><figure>{postrow.displayed.POSTER_AVATAR}</figure></div

then the CSS

Code:

        .imgholder{
              position:relative;
              width:120px;
              height:120px;
              border-radius:100px;
              float:left;
              margin:40px 30px;
            }
            /* thumbnails style */
            .imgholder img{
              position:absolute;
              left:0;
              top:0;
              width:120px;
              height:120px;
              z-index:5;
              border-radius:100px;
              -moz-border-radius:100px;
              -webkit-border-radius:100px;
              opacity:0.3;
              filter: alpha(opacity = 30);
              box-shadow:0 0 5px #000;
              -moz-box-shadow:0 0 5px #000;
              -webkit-box-shadow:0 0 5px #000;
           
            transform: scale(0.5,0.5);
              -ms-transform: scale(0.5,0.5);
              -moz-transform: scale(0.5,0.5);
              -webkit-transform: scale(0.5,0.5);
           
            transition:
                  opacity 1s,
                  transform 1s ease-in-out 0.3s;
              -moz-transition:
                  opacity 1s,
                  -moz-transform 1s ease-in-out 0.3s;
              -webkit-transition:
                  opacity 1s,
                  -webkit-transform 1s ease-in-out 0.3s;
            }
            .imgholder:hover img{
              opacity:1;
              filter: alpha(opacity = 100);
              transform: scale(1,1);
              -ms-transform: scale(1,1);
              -moz-transform: scale(1,1);
              -webkit-transform: scale(1,1);
            }
            .imgholder figcaption{
              position:absolute;
              left:-5px;
              top:40%;
              width:130px;
              color:#004E87;
              font-weight:bold;
              text-shadow:-1px -1px 0 #fff;
              z-index:4;
           
            transition:
                  top 0.5s ease-out;
              -moz-transition:
                  top 0.5s ease-out;
              -webkit-transition:
                  top 0.5s ease-out;
            }
            .imgholder:hover figcaption{
              top:120%;
            }
            /* decorations style */
            .imgholder .circle{
              position:absolute;
              border-radius:100px;
              -moz-border-radius:100px;
              -webkit-border-radius:100px;
            }
            .imgholder .outer1{
              top:-8px;
              left:-8px;
              width:120px;
              height:120px;
              z-index:2;
              border:8px solid;
              border-color:#DEEBFC;
              box-shadow:0 0 3px #AFD3FF;
              -moz-ox-shadow:0 0 3px #AFD3FF;
              -webkit-box-shadow:0 0 3px #AFD3FF;
              background: #ffffff;
              background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #e2efff 100%);
              background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(100%,#e2efff));
              background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
              background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
              background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
              background: radial-gradient(center, ellipse cover, #ffffff 0%,#e2efff 100%);
              filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2efff',GradientType=1 );
              transform:rotate(90deg);
              -ms-transform:rotate(90deg);
              -moz-transform:rotate(90deg);
              -webkit-transform:rotate(90deg);
              transition:
                  transform 1.8s ease-in-out,
                  box-shadow 1s ease-out,
                  border-color 1.5s;
              -moz-transition:
                  -moz-transform 1.8s ease-in-out,
                  -moz-box-shadow 1s ease-out,
                  border-color 1.5s;
              -webkit-transition:
                  -webkit-transform 1.8s ease-in-out,
                  -webkit-box-shadow 1s ease-out,
                  border-color 1.5s;}
            .imgholder:hover .outer1{
              border-color:#0088EA #7FC9FF #0088EA #7FC9FF;
              box-shadow:0 0 10px #0285E2;
              -moz-box-shadow:0 0 10px #0285E2;
              -webkit-box-shadow:0 0 10px #0285E2;
              transform:rotate(-10deg);
              -ms-transform:rotate(-10deg);
              -moz-transform:rotate(-10deg);
              -webkit-transform:rotate(-10deg);}
            .imgholder .outer2{
              top:-18px;
              left:-18px;
              width:136px;
              height:136px;
              z-index:1;
              border:10px solid;
              border-color: #D6E5FC #9BC8FF #D6E5FC #9BC8FF;
              box-shadow:0 0 20px #8EB9FF;
              -moz-box-shadow:0 0 20px #8EB9FF;
              -webkit-box-shadow:0 0 20px #8EB9FF;
              opacity:0;
              filter: alpha(opacity = 0);
              transform: scale(1.3,1.3) rotate(180deg);
              -ms-transform: scale(1.3,1.3) rotate(180deg);
              -moz-transform: scale(1.3,1.3) rotate(180deg);
              -webkit-transform: scale(1.3,1.3) rotate(180deg);
              transition:
                  opacity 0.5s,
                  transform 0.7s ease-out;
              -moz-transition:
                  opacity 0.5s,
                  -moz-transform 0.7s ease-out;
              -webkit-transition:
                  opacity 0.5s,
                  -webkit-transform 0.7s ease-out;}
            .imgholder:hover .outer2{
              opacity:0.9;
              filter: alpha(opacity = 90);
              transform: scale(1,1) rotate(-10deg);
              -ms-transform: scale(1,1) rotate(-10deg);
              -moz-transform: scale(1,1) rotate(-10deg);
              -webkit-transform: scale(1,1) rotate(-10deg);}

the problem is
profile avatar and the profile info (posts - gander - points etc) is with in the profile avater
image to show

i use <br /> X20 to move the text lower it just moved lower by like 10PX only

is there a problem in question

something not understadable

if yes please let me know
thanks

bump

any thing ?

Hey,

Can we please have a link where this problem is visible to guests?

Thanks!

sure any thing needed to fix that problem i can provide
im using a test forum
http://miclap.logu2.com/t7-topic
the link above visible for guests as i test
im started to think about changing this to MyBB forums

Hi @Michael_vx,

Your closing DIV tag is broken ( </div ), so the post profile fields are entering the image holder. ALSO I see the element .imgholder is floating to the left, so you should add something after this element to clear the floats as well, such as

Code: <div style="clear:both;"></div>

. Now, try replacing your HTML with the HTML I have below.

Code:

<div class="imgholder">
  <div class="outer1 circle"></div>
  <div class="outer2 circle"></div>
  <figure>{postrow.displayed.POSTER_AVATAR}</figure>
</div>
<div style="clear:both;"></div>

I indented the tags so it's easier for you to read.

you right @Ange Tuteur
i did not see it
its working fine now
1 last question before topic go to archive
i used this Script on my own forum but the image is not at center
where to control the position of the image
profile image id

Code:

{$post['useravatar']}

thanks again for solving the problem for me

even on forumotion
i cant change the position of the avater image
sometimes its not come into center also its not full size
i want it full size with or without hover mouse thanks
i have tried to change a little in the CSS
but its seem like it nothing change im not sure about if my changes are wrong or what
i need more tips