a ilttile problem with Avatar Script
3 posters
Page 1 of 1
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
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
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
- 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);}
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
- Posts : 664
Reputation : 29
Language : Arabic and some English
Location : Egypt
Re: a ilttile problem with Avatar Script
is there a problem in question
something not understadable
if yes please let me know
thanks
Michael_vx- Forumember
- Posts : 664
Reputation : 29
Language : Arabic and some English
Location : Egypt
Re: a ilttile problem with Avatar Script
bump
any thing ?
any thing ?
Michael_vx- Forumember
- Posts : 664
Reputation : 29
Language : Arabic and some English
Location : Egypt
Re: a ilttile problem with Avatar Script
Hey,
Can we please have a link where this problem is visible to guests?
Thanks!
Can we please have a link where this problem is visible to guests?
Thanks!
Re: a ilttile problem with Avatar Script
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
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
Michael_vx- Forumember
- Posts : 664
Reputation : 29
Language : Arabic and some English
Location : Egypt
Re: a ilttile problem with Avatar Script
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
. Now, try replacing your HTML with the HTML I have below.
I indented the tags so it's easier for you to read.
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 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.
Re: a ilttile problem with Avatar Script
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
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']}
Michael_vx- Forumember
- Posts : 664
Reputation : 29
Language : Arabic and some English
Location : Egypt
Re: a ilttile problem with Avatar Script
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
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
- Posts : 664
Reputation : 29
Language : Arabic and some English
Location : Egypt
Similar topics
» script for avatar in topics... some notes
» Problem with a chatbox I've added - script problem?
» script problem
» Log In Script Problem
» Script Problem
» Problem with a chatbox I've added - script problem?
» script problem
» Log In Script Problem
» Script Problem
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum