The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

How to apply this CSS code to work for avatars?

+2
Sir Chivas™
omega.exe
6 posters

Go down

How to apply this CSS code to work for avatars? Empty How to apply this CSS code to work for avatars?

Post by omega.exe Mon 20 Aug - 21:34

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:

How to apply this CSS code to work for avatars? Untitl10
That is all.
avatar
omega.exe
New Member

Male Posts : 4
Reputation : 1
Language : English

Back to top Go down

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

Post by omega.exe Mon 20 Aug - 22:56

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?
avatar
omega.exe
New Member

Male Posts : 4
Reputation : 1
Language : English

Back to top Go down

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

Post by omega.exe Tue 21 Aug - 23:16

bump
avatar
omega.exe
New Member

Male Posts : 4
Reputation : 1
Language : English

Back to top Go down

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

Post by Sir Chivas™ Tue 21 Aug - 23:55

Try this, Link Removed ~ Rideem3
Sir Chivas™
Sir Chivas™
Helper
Helper

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

Back to top Go down

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

Post by Photondragon12345 Wed 22 Aug - 3:33

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

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

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

Back to top Go down

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

Post by BimbasVG Wed 22 Aug - 14:04

Rideem3 your code dont work in PunBB
BimbasVG
BimbasVG
Forumember

Male Posts : 100
Reputation : 4
Language : Croatian

http://www.ch-yakuza.com

Back to top Go down

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

Post by Sanket Wed 22 Aug - 14:42

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);
}
Sanket
Sanket
ForumGuru

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

Back to top Go down

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

Post by BimbasVG Wed 22 Aug - 16:04

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

Male Posts : 100
Reputation : 4
Language : Croatian

http://www.ch-yakuza.com

Back to top Go down

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

Post by Sanket Wed 22 Aug - 16:40

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);
    }


Sanket
Sanket
ForumGuru

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

Back to top Go down

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

Post by BimbasVG Thu 23 Aug - 13:47

Thanks Sanket :wouhou:
BimbasVG
BimbasVG
Forumember

Male Posts : 100
Reputation : 4
Language : Croatian

http://www.ch-yakuza.com

Back to top Go down

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

Post by Sanket Thu 23 Aug - 18:42

BimbasVG, glad its solved for you. Smile

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

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

Back to top Go down

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

Post by Photondragon12345 Fri 24 Aug - 3:15

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

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

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

Back to top Go down

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

Post by omega.exe Fri 24 Aug - 4:21

@Sanket
Yup! Solved for me! Thank you for the help and the relatively quick reply!
avatar
omega.exe
New Member

Male Posts : 4
Reputation : 1
Language : English

Back to top Go down

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

Post by tommycoo Fri 24 Aug - 4:33

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

Male Posts : 615
Reputation : 9
Language : Indonesia

http://www.atlanta.forumid.net

Back to top Go down

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

Post by Sanket Fri 24 Aug - 20:39

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

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

Back to top Go down

Back to top


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