How to apply this CSS code to work for avatars?

Go down

How to apply this CSS code to work for avatars?

Post by omega.exe on August 20th 2012, 8:34 pm

I was just wondering how to apply the code below to the forum page avatars. The code makes it so that the avatars rotate when you hover on them. I have an example link here: http://duelacademylegends.forumotion.com/t750-dal-duel-academy-legends-rules-and-characters#4561 . How can i use the below code to make all the avatars on every forum page (I will have an image below specifying my targets) spin? I already know that the code below just tilts the picture, and I already know how to modify the values to make it spin. I just need to know how to apply it to every avatar on every page like the one shown in the link and the picture. Thank you.
The code:
Code:
#ex4 {
   width: 800px;
   margin: 0 auto;
}
 
#ex4 img {
   margin: 20px;
   border: 5px solid #eee;
   -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
   -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
   box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
   -webkit-transition: all 0.5s ease-out;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
}
 
#ex4 img:hover {
   -webkit-transform: rotate(-7deg);
   -moz-transform: rotate(-7deg);
   -o-transform: rotate(-7deg);
}
Now for the image specifying my targets:


That is all.

omega.exe
New Member

Male Posts : 4
Reputation : 1
Language : English

Back to top Go down

Re: How to apply this CSS code to work for avatars?

Post by omega.exe on August 20th 2012, 9:56 pm

Am I supposed to put anything else for the code? It is not working. Is there anything else I have to do other than putting in the code you gave me t othe CSS stylesheets?

omega.exe
New Member

Male Posts : 4
Reputation : 1
Language : English

Back to top Go down

Re: How to apply this CSS code to work for avatars?

Post by omega.exe on August 21st 2012, 10:16 pm

bump

omega.exe
New Member

Male Posts : 4
Reputation : 1
Language : English

Back to top Go down

Re: How to apply this CSS code to work for avatars?

Post by Sir Chivas™ on August 21st 2012, 10:55 pm

Try this, Link Removed ~ Rideem3
avatar
Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6810
Reputation : 433
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Re: How to apply this CSS code to work for avatars?

Post by Photondragon12345 on August 22nd 2012, 2:33 am

mhm yea me and him are friends (omega) and your code actually doesnt work.... (to rideem)
avatar
Photondragon12345
Forumember

Male Posts : 226
Reputation : 1
Language : English
Location : USA

http://photon-duel-academy.forumotion.com/

Back to top Go down

Re: How to apply this CSS code to work for avatars?

Post by BimbasVG on August 22nd 2012, 1:04 pm

Rideem3 your code dont work in PunBB
avatar
BimbasVG
Forumember

Male Posts : 100
Reputation : 4
Language : Croatian

http://www.ch-yakuza.com

Back to top Go down

Re: How to apply this CSS code to work for avatars?

Post by Sanket on August 22nd 2012, 1:42 pm

Add that to your css. It shall work for phpbb2.
Code:
span.postdetails a img{
  -webkit-transition-duration: 0.8s;
   -moz-transition-duration: 0.8s;
   -o-transition-duration: 0.8s;
   transition-duration: 0.8s;   
   -webkit-transition-property: -webkit-transform;
   -moz-transition-property: -moz-transform;
   -o-transition-property: -o-transform;
   transition-property: transform;   
   overflow:hidden;
}
 span.postdetails a img:hover{
     -webkit-transform:rotate(360deg);
   -moz-transform:rotate(360deg);
   -o-transform:rotate(360deg);
}
avatar
Sanket
ForumGuru

Male Posts : 48766
Reputation : 2828
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Re: How to apply this CSS code to work for avatars?

Post by BimbasVG on August 22nd 2012, 3:04 pm

Sanket can you make me code for PunBB, this dont work. tnx
avatar
BimbasVG
Forumember

Male Posts : 100
Reputation : 4
Language : Croatian

http://www.ch-yakuza.com

Back to top Go down

Re: How to apply this CSS code to work for avatars?

Post by Sanket on August 22nd 2012, 3:40 pm

@BimbasVG wrote:Sanket can you make me code for PunBB, this dont work. tnx
Administration Panel> Display>Templates>viewtopic_body

Change this:

Code:
{postrow.displayed.POSTER_AVATAR}

With this:

Code:
<span class="avi">{postrow.displayed.POSTER_AVATAR}</span>

Save and then Publish the templates.

Than add this to CSS.
Code:
.avi img{
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s; 
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform; 
  overflow:hidden;
}

.avi img:hover{
        -webkit-transform:rotate(360deg);
      -moz-transform:rotate(360deg);
      -o-transform:rotate(360deg);
    }


avatar
Sanket
ForumGuru

Male Posts : 48766
Reputation : 2828
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Re: How to apply this CSS code to work for avatars?

Post by BimbasVG on August 23rd 2012, 12:47 pm

Thanks Sanket :wouhou:
avatar
BimbasVG
Forumember

Male Posts : 100
Reputation : 4
Language : Croatian

http://www.ch-yakuza.com

Back to top Go down

Re: How to apply this CSS code to work for avatars?

Post by Sanket on August 23rd 2012, 5:42 pm

BimbasVG, glad its solved for you. Smile

omega.exe, is this solved for you?
avatar
Sanket
ForumGuru

Male Posts : 48766
Reputation : 2828
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Re: How to apply this CSS code to work for avatars?

Post by Photondragon12345 on August 24th 2012, 2:15 am

please solve it for him me and him own the same forum
avatar
Photondragon12345
Forumember

Male Posts : 226
Reputation : 1
Language : English
Location : USA

http://photon-duel-academy.forumotion.com/

Back to top Go down

Re: How to apply this CSS code to work for avatars?

Post by omega.exe on August 24th 2012, 3:21 am

@Sanket
Yup! Solved for me! Thank you for the help and the relatively quick reply!

omega.exe
New Member

Male Posts : 4
Reputation : 1
Language : English

Back to top Go down

Re: How to apply this CSS code to work for avatars?

Post by tommycoo on August 24th 2012, 3:33 am

sanket can u make it rounded 360degress ? punbb ..
avatar
tommycoo
Forumember

Male Posts : 615
Reputation : 9
Language : Indonesia

http://www.atlanta.forumid.net

Back to top Go down

Re: How to apply this CSS code to work for avatars?

Post by Sanket on August 24th 2012, 7:39 pm

@tommycoo wrote:sanket can u make it rounded 360degress ? punbb ..
http://help.forumotion.com/t113577-how-to-apply-this-css-code-to-work-for-avatars#744254
That one is for PunBB.
avatar
Sanket
ForumGuru

Male Posts : 48766
Reputation : 2828
Language : English
Location : Mumbai

http://webartzforum.com

Back to top Go down

Back to top


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