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.

How to apply this CSS code to work for avatars?

View previous topic View next topic 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

Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6783
Reputation : 430
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)

Photondragon12345
Forumember

Male Posts : 226
Reputation : 1
Language : English, Chinese, A little french
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

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

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
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

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



Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
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:

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?

Sanket
ForumGuru

Male Posts : 48766
Reputation : 2819
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

Photondragon12345
Forumember

Male Posts : 226
Reputation : 1
Language : English, Chinese, A little french
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 ..

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.

Sanket
ForumGuru

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

http://webartzforum.com

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