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.

a ilttile problem with Avatar Script

View previous topic View next topic Go down

In progress a ilttile problem with Avatar Script

Post by Michael_vx on September 2nd 2016, 1:51 pm

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

Michael_vx
Forumember

Male Posts : 655
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

In progress Re: a ilttile problem with Avatar Script

Post by Michael_vx on September 3rd 2016, 10:42 am

blackeye
is there a problem in question
blackeye
something not understadable
blackeye
if yes please let me know
thanks

Michael_vx
Forumember

Male Posts : 655
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

In progress Re: a ilttile problem with Avatar Script

Post by Michael_vx on September 8th 2016, 9:58 pm

bump
Shocked
any thing ?

Michael_vx
Forumember

Male Posts : 655
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

In progress Re: a ilttile problem with Avatar Script

Post by Luffy on September 9th 2016, 12:00 am

Hey,

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

Thanks!






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

In progress Re: a ilttile problem with Avatar Script

Post by Michael_vx on September 9th 2016, 12:10 pm

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
Very Happy

Michael_vx
Forumember

Male Posts : 655
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

In progress Re: a ilttile problem with Avatar Script

Post by Ange Tuteur on September 9th 2016, 4:13 pm

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.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

In progress Re: a ilttile problem with Avatar Script

Post by Michael_vx on September 9th 2016, 6:10 pm

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

Michael_vx
Forumember

Male Posts : 655
Reputation : 29
Language : Arabic and some English
Location : Egypt

Back to top Go down

In progress Re: a ilttile problem with Avatar Script

Post by Michael_vx on September 13th 2016, 7:29 pm

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

Michael_vx
Forumember

Male Posts : 655
Reputation : 29
Language : Arabic and some English
Location : Egypt

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